Mo's Develog

요즘은 소셜로그인이 대세다. 왠만한 곳들은 회원가입하기를 들어가보면 카카오톡, 페이스북, 구글 등의 소셜회원가입이 가능하다. 그중에서 오늘은 가장 쉽게 붙여볼 수 있는 github 로그인을 nextjs에 붙여보자 소셜로그인이라는건 예를 들면 철수가 내가 만든사이트(A.com)에 회원가입 페이지에 있는 '카카오톡으로 회원가입하기' 버튼을 누르면 카카오톡 아이디랑 비번을 넣어서 로그인 하라는 페이지를 보여주고, 거기서 철수가 카카오톡 아이디랑 비번을 입력하고 '카카오톡 로그인하기' 버튼을 누르면 카카오톡은 철수에게 '야 A.com에 님 정보 주는거 동의함?' 이라고 물어 볼 것이다. 거기서 동의를 하면 이제 철수의 카카오톡은 A.com에 철수의 이메일, 이름, access token 등의 정보를 넘겨주게 된..

NextJS가 뭐죠? 👉 https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org The React Framework for the Web NextJS는 React 프레임워크(Framework)이다. 프레임워크 vs 라이브러리 React는 라이브러리이고, NextJS는 그 React의 프레임워크라고 한다. 프레임워크와 라이브러리의 차이는 뭐지? 프레임워크 ..

NextJS 란? React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와 주는 간단한 프레임워크입니다. React로 개발할 때는 SPA(Single Page Application)을 이용하여 CSR(Client Side Rendering)을 이용하기 때문에 좋은 점도 있지만 단점으로는 검색엔진 최적화(SEO : Search Engine Optimization) 부분입니다. CSR을 하면 첫페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기 때문에 포털 검색에 노출되기가 쉽지않습니다. (물론 구글검색엔진은 똑똑해서 괜찮) 하지만 NextJS에서는 Pre-Rendering 또는 SSR을 통해서 페이지를 미리 렌더링 하여 완성된 HTML으 가져오기 때문에 사..