본문 바로가기
728x90

전체 글77

[Next.js] Pre-rendering과 Data Fetching Next.js의 가장 중요한 개념 중 하나인Pre-rendering과 Data Fetching에 대해 정리해보겠습니다🎗 Next.js를 본격적으로 공부하기 전에, CSR과 SSR 개념을 공부하면서 Next.js에 대한 개념도 간단하게 블로그에 정리했었는데이번 기회에 더 자세하게 정리해보고자 한다   📌 Pre-rendering (사전 렌더링)(JavaScript가 모든 작업을 수행하는 대신) Next.js는 각 페이지에 대한 HTML을 미리 렌더링한다.생성된 각 HTML은 해당 페이지에 필요한 최소한의 JS 코드와 연결된다.이후, 브라우저에서 페이지를 로드하면 해당 JS 코드가 실행되어 페이지가 완전한 인터랙티브 상태가 된다. 이 과정을 hydration(하이드레이션)이라고 한다.→ Pre-rende.. 2023. 4. 16.
[Next.js] Next.js 기본 개념 정리 Next.js 공식문서를 참고하며 공부한 기본 개념들을 정리했습니다 Code splitting and prefetching Code splitting Next.js는 코드 분할을 자동으로 수행함 각 페이지는 해당 페이지에 필요한 부분만 로드함 홈페이지가 렌더링될 때 다른 페이지의 코드는 처음에 제공되지 않음 장점 수백 개의 페이지가 있어도 홈페이지가 빠르게 로드됨 특정 페이지에서 오류가 발생해도 나머지 애플리케이션은 계속 작동함 prefetching (미리 불러오기) 링크 컴포넌트가 브라우저의 뷰포트에 표시될 때마다 링크된 페이지의 코드를 백그라운드에서 자동으로 prefetching함 링크를 클릭할 때 쯤이면 대상 페이지의 코드가 이미 백그라운드에서 로드되어 페이지 전환이 거의 즉시 이루어짐 next/I.. 2023. 4. 13.
[JWT] refresh token, access token 정리 (로그인 과정) refresh token과 access token에 대해 정리해보겠습니다 통합 로그인 프로젝트를 진행할 때 JWT, refresh token, access token 등의 개념을 처음 접하였는데, 이 개념들을 간단하게 정리하고자 한다. 📌 JWT ? : JWT는 JSON Web Token의 약자이다. 정보를 JSON object로 안전하게 전송하는 방법이다. JWT는 일반적으로 웹 애플리케이션에서 인증 및 권한 부여 목적으로 사용된다. 즉, 유저가 로그인할 때 서버가 인증 정보를 보내주는데, 암호화나 시그니처 추가가 가능한 데이터 패키지(=JWT) 안에 인증 정보를 담아서 보내준다. 담기는 정보 중 refresh token과 access token이 유저 인증에 사용된다. 📌 refresh token &.. 2023. 4. 4.
[FE] 답글 화면 구현하기 (+재귀함수) (feat. React) 목표: 여러 depth의 답글을 화면에 표시하기 기능: 답글이 있는 게시글은 아이콘으로 표시하고 - 아이콘을 클릭하면 답글이 보이고 - 그 밑으로 여러 depth의 답글을 표시한다 방법: table의 tr을 하나의 컴포넌트로 만들고 그 컴포넌트를 답글 depth만큼 계속 호출한다 (* 컴포넌트도 하나의 함수이기 때문에 재귀함수를 사용하여 구현할 수 있는 것) 부모 컴포넌트 (MainTable.js) const MainTable = () => { // 게시글 리스트 (-> api 요청으로 데이터를 세팅함) const [articleList, setArticleList] = useState([]) return ( // 코드 생략 { articleList.map(article => { } } ) } 자식 컴포.. 2023. 4. 2.
728x90