우선 터미널에 아래와 같이 입력하여 axios 라이브러리 설치해주자. npm install axios 그리고 코드 상단에 import 해주기 import axios from "axios"; axios로 데이터를 받아오려면 get 요청을 하면 되는데, 다음과 같이 입력하면 된다. axios.get('GET요청할URL') .then(()=>{ 요청 성공 시 실행할 코드 }) .catch(()=>{ 요청 실패 시 실행할 코드 }) 나는 테스트하기 위해 public/data 폴더에 test.json이란 파일을 만들고 [ { "subject": "1번째 일기", "date": "2022/10/01", "representative_img": "test_img/1.jpg", "content": "한강 불꽃 축제" }..
I'm trying to close the offcanvas menu in React Bootstrap when I click a link I'm using a combination of React Bootstrap and React, to make a single page application, I've tried a few methods to get the Offcanvas menu to close when I click a link. I tried making an inline sc... stackoverflow.com stackoverflow에서 도움을 얻었다...! React Bootstrap의 Offcanvas 컴포넌트를 사용하여 상단 Navbar를 만들었는데 다른 메뉴로 이동할 수 있게 Li..
이번엔 피드 페이지를 만들어볼 것이다. 인스타그램 프로필처럼 3열로 정렬된 이미지들이 무한스크롤되도록 만드는 것이 목표... 우선 서버에 연결을 해놓은 상황이 아니라 테스트 이미지들을 public/test_img 폴더에 몇 장 넣어놓고 진행한다. public 폴더에 존재하는 이미지를 넣고 싶을 때는 아래와 같은 형식으로 태그를 이용하면 된다. 이 때 주의할 점은 이미지주소에는 상대경로로 넣어야 한다! axios 라이브러리의 get 요청을 통해 이미지들을 갖고 올 건데 우선 이 기능이 잘 되는지 테스트해보기 위해 버튼을 클릭하면 public/data/test.json 파일에 저장된 데이터들의 이미지를 갖고 오도록 해보겠다. 임의로 넣은 public/data/test.json 파일의 내용은 대충 아래와 같다..
로그인 폼과 크게 다를 바 없이 구현해서... React Bootstrap의 Form 태그를 이용하여 모두 구현해놨다 일단 회원가입(Join) 회원 정보 수정(MemberSetting) 아이디 찾기(FindID) 비밀번호 찾기(FindPW) 회원 탈퇴(Withdrawal) 글쓰기(Write) 대부분 모양만 구현해놓고 기능들이 하나도 안 만들어졌기 때문에 코드는 생략... 하나씩 차근차근 만들어보자.
react bootstrap의 Form을 이용하여 로그인 페이지를 구성해보자. 아래의 공식 홈페이지에서 예시 파일을 복사해서 필요에 맞게 수정해봤다. React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io Login.js 파일 import { Container } from 'react-bootstrap'; import Form from 'react-bootstrap/Form'; import { Link } from 'react-router-dom'; function Login() { return ( ID Password 아이디 찾기 비밀번호 찾기 회원가입 로그인 ); } export ..
