next.js16 [TIL] 내일배움캠프 React 과정 2023.02.12 Today I Learned NextAuth.js 공부하기 카카오 소셜 로그인 기능 구현하기 구글과 페이스북은 firebase authentication에서 소셜 로그인 기능을 제공해 주지만 카카오와 네이버는 직접 구현해야 했기에 고민이 많았다. 그래서 구글링을 이것저것 하다가 Next.js에서 제공하는 NextAuth.js라는 녀석을 발견했다! Next-auth로 카카오 소셜 로그인 5분만에 구현하기 👻 구글, 깃허브, 애플, 트위터는 물론 카카오와 네이버 소셜로그인까지 지원하는 Next Auth를 쉽게 사용해보자. +) 세션에 저장되기 velog.io 이 글을 통해 처음 알게 되었는데 정말 글 제목 그대로 5분 만에 카카.. 2023. 2. 15. [TIL] 내일배움캠프 React 과정 2023.02.05 Today I Learned Next.js 강의 수강 Programmers 문제 풀기 최종프로젝트 팀 노션 준비하기 Next.js 강의 수강 내용 router.push(url, as, options) router.push( { pathname: `/movies/${id}`, query: { title } }, `/movies/${id}` ) 클라이언트 측 전환을 처리한다. 이 방법은 next/link가 충분하지 않은 경우에 유용하다. url: UrlObject | String: 탐색할 URL as: UrlObject | String: 브라우저 URL 표시줄에 표시될 경로에 대한 선택적 데코레이터이다. getServerSideProps export default function Detail({ params.. 2023. 2. 5. [TIL] 내일배움캠프 React 과정 2023.02.04 Today I Learend 노마드코더 Next.js 강의 수강 Programmers 문제 풀기 Next.js 강의 수강 내용 Redirects // next.config.js module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true, }, { source: '/old-blog/:path*', destination: '/blog/:path*', permanent: false } ] }, } request 경로를 다른 destination 경로로 Redirect할 수 있다. redirects은 source, destination 및 permanent 속성이 있는 객체를 포함하는 배열.. 2023. 2. 5. [TIL] 내일배움캠프 React 과정 2023.02.03_Next.js Today I Learned 스파르타 Next.js 강의 수강 노마드코더 Next.js 강의 수강 Programmers 문제 풀기 스파르타 Next.js 강의 내용 정리 _app.js 와 _document.js _app.js Next.js의 root component에 해당하는 파일. 사용 예시 글로벌 CSS적용 초기값 설정 _document.js HTML 구조를 커스텀할 때 사용. 오직 Server Side에서만 렌더링 됨 CSS와 같은 스타일이 초기 HTML 렌더링 시에 적절하게 적용될 수 있도록 도움 예시) styled-components 사용 시 document.js가 없으면 초기에 깜빡거림. ServerStyleSheet을 사용하는 것으로, styled components로부터 만들어진 styl.. 2023. 2. 4. [TIL] 내일배움캠프 React 과정 2023.02.01_Next.js Today I Learned Next.js 기초 강의 수강 CSR vs SSR vs SSG vs ISR Client-Side Rendering 브라우저에서 HTML file을 로드하면, Javascript를 이용하여 rendering 하는 방식이다. Server-Side Rendering 브라우저에서 해당하는 페이지를 접속하면, 그 순간 서버에서 html을 렌더링 해서 전달해 주는 방식이다. 페이지를 요청할 때마다 렌더링 하기 때문에 오래 걸린다. Static-Site Generation SSR의 경우 페이지를 요청할 때마다 서버에서 렌더링하는 것에 반해, SSG의 경우에 정적인 페이지를 제공할 때는 빌드할 때 렌더링하고, 페이지를 요청할 때 이미 렌더링 된 페이지를 반환한다. Incremental St.. 2023. 2. 1. [TIL] 내일배움캠프 React 과정 2023.01.31_Next.js Today I Learned Next.js 기초 강의 수강 Throttling and Debouncing 강의 수강 Next.js Next.js란? Next.js는 웹 개발자에게 필요한 다양한 기능을 제공해 주는 리액트 프레임워크 개발 환경 설정이 쉽고 간단하다. SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다. 초기 로딩 속도 개선을 위한 자동 code splitting(코드 분할)을 지원한다. Next.js 프로젝트 시작하기 npx create-next-app 개발 모드와 프로덕션 모드 // package.json ... "scripts": { "dev": "next dev", "build": "next build", "sta.. 2023. 1. 31. 이전 1 2 다음
