공우 썸네일형 리스트형 Next.js를 통해 prefetch 최적화 기법 이해하기(feat.next/link) 프로젝트: 공우 홈페이지 키워드: prefetch, Link, SSR, SSG, CSR, Next.js, Chrome DevTools Network 상황 Next.js가 최초 진입한 페이지의 html파일만 가져온다는 사실은 알고 있었지만, 다른 페이지로 이동할 때 어떤 데이터가 언제 불러와지는지 정확히 알진 못했다. Next.js로 구현한 공우 홈페이지에서 Chrome Devtools Network 탭을 통해 궁금증을 해소하고자한다. 해결과정 먼저 공우 홈페이지에 들어가 network 탭에서 Doc 파일을 확인한다. 역시 최초 진입한 페이지의 html만 가져오고, 다른 페이지로 이동하여도 추가적인 html 요청은 없다. 다른 페이지에 대한 정보를 언제 가져오는지 알기위해 Fetch/XHR과 JS 탭을 확.. 더보기 useLayoutEffect로 최초 렌더링 UX 개선하기 프로젝트: 공우 홈페이지 키워드: useLayoutEffect, useEffect, react hook flow 상황 공우 홈페이지에서 한글/영어 번역을 지원하고자 한다. 기획상 한글/영어 페이지를 각각의 URL로 분리하는 것이 아니라, 하나의 페이지에서 상태 값을 이용하여 언어를 결정한다. (다크모드와 비슷한 구조) 현재 언어를 localStorage에 저장해두어 새로 고침을 하거나 사이트를 벗어났다가 돌아와도 언어가 유지되도록 구현했다. const [language, setLanguage] = useState('Korean'); // 기본 값은 Korean useEffect(() => { setLanguage(localStorage.getItem('language') ?? 'Korean'); }, [.. 더보기 Firebase storage로 첨부파일 다운로드 구현하기 프로젝트: 공우 홈페이지 키워드: firebae storage, download file in javascript, attachment 상황 공우 지원 방법 section에서 첨부파일 다운로드 기능을 구현해야한다. 파일들은 firebase storage '/example' 폴더 하위에 저장되어있다. 해결 방법 Attachment Component는 이름과 파일명을 prop으로 받는다. export interface Props { title: string; // ex> 파일이름.docx filename: string; // ex> example/file.docx } const Attachment: React.FC = ({ title, filename }) => { ... } 최초로 버튼을 누르면 setUr.. 더보기 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로 구현한다. 배포 후 새로운 포스트가 만들어질 경우에도 해당 포스트에 대한.. 더보기 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 다음
