💡 이번 포스트에서는 styled-components와 react-router-dom의 NavLink를 활용해서 firestore의 documents들을 메뉴처럼 접근 할 수 있도록 하겠습니다. 이전 포스트를 참고 하시면 코드와 프로젝트에 대한 진행상황을 파악하시기 수월합니다. [React.js + Firebase] react-router-dom 동적 라우팅 - 초간단 사진 게시판 만들기(3) 💡이번 포스트에서는 React에서 동적 라우팅을 사용하여 firebase의 데이터들을 원하는 url에 띄우는 방법을 알아 보도록 하겠습니다. 이전 포스트를 참고 하시면 코드와 프로젝트에 대한 진행상황 kmuhan-study.tistory.com react-router-dom(v6)에서 NavLink를 사용하는 법은..

💡이번 포스트에서는 React에서 동적 라우팅을 사용하여 firebase의 데이터들을 원하는 url에 띄우는 방법을 알아 보도록 하겠습니다. 이전 포스트를 참고 하시면 코드와 프로젝트에 대한 진행상황을 파악하시기 수월합니다. [React.js + Firebase] React Suspense 적용 - 초간단 사진 게시판 만들기(2) 이 포스트에서는 react-router-dom을 활용해서 firebase에 저장되어 있는 데이터들을 동적 라우팅을 활용하여 클라이언트에 띄우는 과정을 다루고자 한다. 그 전에, 먼저 Suspense와 React lazy를 적용해서 kmuhan-study.tistory.com react-router-dom(v6)에서 동적 라우팅을 사용하는 문법은 다음과 같습니다. 원하는 경로 위..

이 포스트에서는 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에 따라서 어떤 컴포넌트를 불러와서 페..

Firebase와 React를 연동하는 과정에서, FirebaseError: Failed to get document because the client is offline 이라는 에러를 만났다. 외국 형님들의 StackOverflow를 참고하면 버전을 다운그레이드 하라는 해결법만 제시되는데, 필자 같은 경우에는 조금 더 근본적인 해결 법들이 먹혔다. 1. .env 파일의 위치 확인 firebaseConfig인 firebase의 설정값을 환경변수로 관리 해 주기 위해서 .env파일을 생성해서 process.env.REACT_APP_ 형식으로 코드를 작성 했었는데, 필지의 경우에는 파일이 src 디렉토리 안에 있었다. 이것이 문제였던 것으로 판단되는데, .env 파일은 항상 프로젝트 디렉토리의 루트 디렉토리..

이 전 포스트에서 React와 Firebase를 활용하여 서버리스한 게시판을 만들기 위해 기본적인 세팅을 완료했다이번 포스트에서는 연결 해 놓은 Firebase에서 Firestore이라는 빌드를 활용하여 아주아주 간단한 Back-end 환경을 구축 해 보도록 하겠다.2023.05.25 - [Web] - [React.js + Firebase] 초간단 사진 게시판 만들기(0) - create-react-app, firebase 연동 [React.js + Firebase] 초간단 사진 게시판 만들기(0) - create-react-app, firebase 연동간단한 기능의 게시판이나 웹사이트를 만들 때, React.js를 사용한 정적 페이지로 만드는 방법은 추후에 콘텐츠 수정이나 구조 변경을 해야 할 때 코드..

간단한 기능의 게시판이나 웹사이트를 만들 때, React.js를 사용한 정적 페이지로 만드는 방법은 추후에 콘텐츠 수정이나 구조 변경을 해야 할 때 코드에 접근해야 하는 것이 필수적이다. 따라서 이번 시리즈에서는 Firebase를 활용하여 Serverless하고 가벼운 용도에 맞는 웹사이트를 구축해 보는 것이 목적이다.개인적인 목표로는 복무하면서 만들고 공부했던 지식들과 하나의 웹사이트를 만들어서 호스팅하는 과정 까지 이해가 되질 않았던 부분들을 해결했던 과정에 대한 정리이기도 하다.세팅 환경은 Mac이지만, Windows도 크게 다르지 않다.➬Front-end: React.js사실 Next.js를 사용하는 것이 SEO 측면에서 훨씬 우수하지만, 이번 프로젝트에서는 작년 react-router-dom에..