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 ..
여러 페이지를 만들고 싶다면 라우터 이용. 그러기 위해서는 react-router-dom이라는 라이브러리 설치. npm install react-router-dom 그리고 index.js 파일에 필요한 컴포넌트를 import 해준다 이때 index.js 파일은 쉽게 말하자면 App.js에 있는 컴포넌트를 index.html에 꽂아주는 파일이라고 보면 된다. import { BrowserRouter } from 'react-router-dom'; 태그를 태그로 감싸준다. const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 라우팅 준비 끝. 이제 라우팅으로 페이지를 나누는 법을 살펴보자. App.js 파일로 간다..
