전체 글 (9) 썸네일형 리스트형 [React.js + Firebase] react-router-dom 동적 라우팅 - 초간단 사진 게시판 만들기(3) 💡이번 포스트에서는 React에서 동적 라우팅을 사용하여 firebase의 데이터들을 원하는 url에 띄우는 방법을 알아 보도록 하겠습니다. 이전 포스트를 참고 하시면 코드와 프로젝트에 대한 진행상황을 파악하시기 수월합니다. [React.js + Firebase] React Suspense 적용 - 초간단 사진 게시판 만들기(2) 이 포스트에서는 react-router-dom을 활용해서 firebase에 저장되어 있는 데이터들을 동적 라우팅을 활용하여 클라이언트에 띄우는 과정을 다루고자 한다. 그 전에, 먼저 Suspense와 React lazy를 적용해서 kmuhan-study.tistory.com react-router-dom(v6)에서 동적 라우팅을 사용하는 문법은 다음과 같습니다. 원하는 경로 위.. [VSCode] Extension file-tree-generator로 파일 디렉토리 구조 자동 생성 이번주 프로젝트를 진행하면서 파일 디렉토리 구조를 설명해야 할 경우가 생겼었다. 이런 경우에는 지금까지 항상 vscode 좌측 Explorer을 캡쳐해서 첨부하는 방법을 사용했었다. 하지만 이렇게 일일히 캡쳐해서 사용하면 마크다운의 경우 이미지로 임베드해야하는 불편함이 생기며, 원하는 곳만 캡쳐하기에는 공간이 모자라는 경우도 발생하고 또 간편하게 볼 수 없어서 가시성이 떨어진다는 단점이 존재했었다. 그러던 중 VSCode의 아주 편리한 확장 기능을 찾아서 소개 해 볼까 한다. file-tree-generator 사용법은 간단하다. 패키지를 다운로드 받고, 좌측에서 폴더를 우클릭한다. 아이콘 끄기 켜기도 가능하고, 바로 복사해서 사용할 수 있기에 정말 유용한 기능인 것 같다. 이제 마음껏 파일 구조를 그릴.. [React.js + Firebase] React Suspense 적용 - 초간단 사진 게시판 만들기(2) 이 포스트에서는 react-router-dom을 활용해서 firebase에 저장되어 있는 데이터들을 동적 라우팅을 활용하여 클라이언트에 띄우는 과정을 다루고자 한다. 그 전에, 먼저 Suspense와 React lazy를 적용해서 사용자 경험이 빨라지도록 한다. 먼저 react-router-dom 패키지를 다운로드 받아준다. npm install react-router-dom react-router-dom은 v6 버전으로 바뀌면서 굉장히 사용하기 편리 해 졌는데 그중에서도 특히 동적 라우팅 부분에서 편리 해 졌다. 그 다음, src 폴더 하위에 Router.js를 생성한다. 💡메서드 설명 BrowserRouter: 브라우저의 history 스택에 접근하며 현재 URL에 따라서 어떤 컴포넌트를 불러와서 페.. 이전 1 2 3 다음
