프론트엔드 썸네일형 리스트형 Next.js에서 SSG 와 revalidate 사용하기 프로젝트: 공우 홈페이지 키워드: Next.js, SSG, getStaticPaths, getStaticProps 상황 공지사항 또는 뉴스(이하 포스트로 통일) 페이지(https://www.gongwoo.snu.ac.kr/notice, https://www.gongwoo.snu.ac.kr/news)에서 포스트 목록을 보여준다. 포스트를 클릭하면 news/123 같은 상세 페이지로 이동한다. 동아리 홈페이지이므로 SEO 최적화를 해야 한다. 따라서, 포스트의 상세 페이지들도 static 하게 build 해야 한다. 포스트 내용이 정적이기 때문에, 매 요청마다 html을 만드는 SSR 대신 getStaticProps를 사용하여 SSG로 구현한다. 배포 후 새로운 포스트가 만들어질 경우에도 해당 포스트에 대한.. 더보기 useSetRecoilState로 렌더링 최적화하기 프로젝트: loplat X mobile 키워드: recoil, 렌더링 최적화 상황 loplat X mobile 은 CRA 에 기반하여 CSR 방식을 사용한다. 로그인이 필요한 '캠페인 목록 페이지'에서 로그아웃 버튼을 누르면, protected router HOC에 의해 자동으로 로그인 페이지로 이동한다. 로그아웃을 시키는 것 외에 side effects 가 발생하면 안되는 상황이지만, 로그인 페이지로 이동하기 전 캠페인 목록 페이지에서 '캠페인 목록 GET API'가 의도치않게 한 번 호출되는 버그가 있다며 팀원분이 도움을 요청하셨다. 해결과정 먼저 API를 어떤 코드에서 호출하는지 살펴보았다. const { ... data: ExampleData, ... } = useInfiniteQuery( ['c.. 더보기 Firebase storage 파일 재귀적으로 삭제하기 프로젝트: 공우 어드민 키워드: firebase storage, recursively delete 상황 하나의 뉴스는 위지윅(WYSIWYG)으로 작성된 텍스트 파일, 썸네일 이미지, 첨부파일을 포함한다. 위의 3가지 정보(텍스트파일, 이미지, 첨부파일)는 firebase storage에 저장한다. 뉴스 id가 123 일 경우, 'news/123/content/content.txt', 'news/123/content/contentEng.txt', 'news/123/picture/thumbnail.png', 'news/123/attachments/example_1'...과 같이 저장한다. 뉴스 목록에서 삭제 버튼을 누르면 DB에 저장된 뉴스 정보와 함께 firebase storage의 파일들도 모두 삭제해야.. 더보기 이전 1 ··· 5 6 7 8 다음
