- 전체보기(10)
- next.js(8)
- JWT(2)
- cookie(2)
- 카카오 로그인(1)
- 회고(1)
- celebstock(1)
- head(1)
- getServerSideProps(1)
- 환경변수(1)
- rewrite(1)
- 부스트캠프 웹·모바일 7기(1)
- 리팩토링(1)
- CSR(1)
- SSR(1)
- getStaticProps(1)
- redirect(1)
- authentication(1)
- session(1)
getServerSideProps에 Wrapper 적용하기
Wrapper를 만드는 이유 Next.js 프로젝트를 진행하던 중getServerSideProps, getStaticProps 함수 관련해서 모든 페이지에서 동일한 규격으로 함수 내부에서 데이터를 fetching하고, cookie를 이용하여 인증과 필요에 따라 redi
부스트캠프 웹·모바일 7기 회고
12월 20일부로 부스트캠프의 공식일정이 모두 종료되었다. 5개월간 챌린지와 멤버십과정을 거치면서 여러 생각과 고민을 하게되었고, 이 소중한 경험들이 머리속에서 휘발되기 전에 글로 남겨 두려고 한다. 챌린지 우선 챌린지 과정에 대해서 회고해 보면, 챌린지 과정을 통해
Next.js - 카카오 로그인 구현
이번 프로젝트에서 로그인 부분을 담당하게 되었다. 카카오 로그인과 이메일 로그인을 구현해야 하는데, 이미 백엔드 개발자분께서 만들어 놓으신 api가 있어서 쉽게 할 수 있을 것 같았지만... 중간에 내가 알고있는 방식대로 되지 않아 새로운 방식을 찾아서 하느라 고생을
Cookie & Session vs JWT
인터넷 상에서의 웹통신에는 여러가지 규약이 존재한다. 이것을 Protocol이라고 하는데, HTTP는 서버와 클라이언트 모델을 따르는 가장 기본적인 Protocol이다. HTTP는 connectionless 및 stateless 특징을 가지고 있어서 요청에 대한 응답
Next.js - next.config.js
next를 좀 더 커스텀하게 사용하기 위해 next.config.js 파일에서 기본 설정을 할 수 있다. next.config.js 는 JSON 파일이 아닌 일반 Node 모듈이고 next 서버 빌드 단계에서 사용되며 브라우저 빌드에는 포함되지 않는다. next.con
Next.js - next/head
NextJS의 장점인 SEO를 최대한 활용하기 위해 next/head 로 부터 <HEAD> 태그를 사용하여 이 페이지의 정보를 웹 크롤러가 알 수 있게 한다.기본적으로 크롤러는 html 문서를 읽는다고 알고 있다. 문서를 로딩한 뒤에 자바스크립트가 실행되는데 이
Next.js - Routing
next.js 에서는 Routing을 쉽게 할 수 있도록 지원하고 있다. pages 폴더에 파일시스템 방식으로 파일, 폴더를 만들면 자동으로 파일, 폴더 이름을 기반으로 Routing을 지원한다. >pages/index.js → / pages/posts/first-p
Next.js - Data Fetching
getStaticProps, getServerSideProps 는 next.js에서 data를 fetching 방식으로 이 방식들을 알아보기 전 Pre-rendering 개념을 살펴보자. Pre-rendering 앞에서 배웠듯이 next.js는 페이지를 이동 할 때
Next.js - Image Optimization
next.js에서는 이미지 최적화를 위해 Image 컴포넌트를 제공한다. Image 컴포넌트를 사용하면 다음과 같은 기능들을 이용하여 최적화된 이미지를 사용하여 성능을 향상할 수 있고, 더 나은 사용자 경험을 만들 수 있다. 최신 이미지 형식을 사용하여 항상 각 기기
Next.js - SSR, CSR, Next.js를 사용하는 이유
next.js는 React의 프레임워크로 SSR(Server Side Rendering)을 쉽게 구현하게 해주며, SEO(Search Engine Optimization)등의 여러기능을 제공한다. 또한 기본적으로 React에서 흔히 사용되는 CSR(Client Side