PHM, who became a Programmer. PHM, who became a Programmer.

NextJS

• NextJS - next-auth

  NextJS 2022. 9. 13. 10:42

  인증 방법 1. Server-side Sessions - 서버 사이드 세션은 서버에 고유 식별자를 저장하는 방식 ㆍ1. 고유한 세션 ID를 생성하고 DB같은 서버에 저장하고 클라이언트에 동일한 식별자를 전송 ㆍ2. 클라이언트는 해당 ID, 해당 식별자를 저장 ㆍ3. 서버의 보호된 리소스에 요청을 보낼 때 저장된 식별자 첨부 ㆍ4. 서버에는 들어오는 요청에서 해당 식별자를 추출해 저장된 식별자가 맞는지 확인 ㆍ5. 식별자가 옳다면 액세스를 허가하고 틀렸다면 액세스를 거부 - 식별자의 도난은 연결을 암호화하는데 SSL을 사용하니깐 전송 중에는 도난 X - 클라이언트 사이드에선 대체로 쿠키에 식별자를 저장하는데 사이트 간 스크립팅(Cross site scripting) 공격을 방지하기 위해 JavaScript..

  Read More
• NextJS - 페이지 사전 렌더링 & 데이터 페칭

  NextJS 2022. 9. 5. 15:19

  React 클라이언트 사이드 렌더링의 단점 - 사용자들이 데이터가 실질적으로 페이지에 로딩되기까지를 기다려야 한다. ㆍ백엔드 API를 이용해서 데이터를 페칭하는 실제페이지는 데이터 로딩 몇 초로 인해 지연 발생 ㆍ사용자 경험의 최적화 X - 검색 엔진 최적화 단점 ㆍ검색 엔진이 있는 앱의 경우에는 콘텐츠를 Google이 알야아야한다. ㆍ하지만 검색엔진은 서버에서 클라이언트에게 데이터가 다시 전송되면서 검색엔진은 콘텐츠가 전혀없는 데이터를 본다 * 정리 * 1. 표준 React를 사용하면 발생할 수 있는 오류로 데이터를 페칭하는 일이 컴포넌트가 로딩된 후다. ㆍ즉, 클라이언트 사이드에서 데이터를 페칭하고 화면에 렌더링된 후에 서버로 요청을 보낼 수 있다. 2. 첫 번째 응답, 즉 첫 번째 HTML 페이지 ..

  Read More
• NextJS - 페이지 & 파일 기반 라우팅

  NextJS 2022. 9. 2. 15:12

  1. 파일 기반 라우팅 * 파일 구조 /pages - index.js : my-domain/ - about.js : my-domain/about - /products - index.js : my-domain/products - [id].js : my-domain/products/1 → 동적인 경로 제공 - [...식별자].js : 여러 세그먼트의 문자열을 배열로 반환 2. Link * replace - 새로운 페이지를 또 띄우지 않고 현재 페이지를 새 페이지로 변경, 뒤로 가기 X * href {client.name} {client.name} - NextJS 만의 herf 설정 방법 3. router * router.pathname * router.query * router.push() : Link와 같..

  Read More
• NextJS - 시작( 장점 및 동작 )

  NextJS 2022. 9. 1. 15:16

  1. 내장 서버 측 렌더링 (SEO 향상) - 서버 사이드 렌더링을 내장 : 페이지 컨텐츠를 클라이언트가 아니라 전적으로 서버에서 준비 - 데이트를 서버에서 가져오면 완성된 페이지가 사용자와 검색 엔진 크롤러에 제공 - 기본 싱글 페이지 애플리케이션을 실행 2. 파일 기반 라우팅으로 라우팅 간소화 - 라우팅 : 사용자에게 여러 페이지가 있는 것처럼 착각하게 하는 것 ㆍ기본적으로 URL을 감시하다가 URL이 바뀌면 백엔드 서버에 요청을 보내는 브라우저의 기본 동작을 막고 다른 콘텐츠를 렌더링 - 파일과 폴더를 이용해서 페이지와 라우트를 정의 3. 풀스택 앱 빌드 - NextJS는 풀스택 프레임워크 - 그러므로 독립적으로 REST API 프로젝트를 구축하지 않아도 된다. 4. 사전 렌더링 작동 방식 & vs..

  Read More