NextJS React 의 SSR을 쉽게 구현할 수 있도록 도와주는 프레임워크 Pre-Rendering을 통해 페이지를 미리 렌더링하며 완성된 HTML을 가져옴 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지 전달 가능 CSR (Client Side Rendering) 클라이언트에서 빈 html 파일에 자바스크립트 파일을 해석하여 페이지를 렌더링함 자바스크립트가 로드 되지 않은 페이지는 검색엔진 최적화(SEO)에 문제가 됨 SSR (Server Side Rendering) 서버에서 자바스크립트를 미리 로딩하여 페이지를 렌더링함 클라이언트에서의 자바스크립트 로딩 시간이 줄어듦 서버에서 자바스크립트, html, css를 만들기 때문에 검색엔진 최적화(SEO)에 좋음 패키지 설치 npx create-ne..

HTTP 는 상태 비저장 프로포콜 서버가 여러 요청 기간동안 각 사용자에 대한 정보/상태를 유지할 필요가 없음 각 요청에 대한 연결을 재설정하는 데 소요되는 시간을 최소화하기 위해서임 Token 1. 클라이언트에서 서버로 첫 요청을 보냄 2. 서버에서 사용자 정보를 포함하는 token 을 생성함 3. 서버에서 클라이언트로 token 을 보냄 4. 클라이언트에서 token 을 받아 저장함 5. 클라이언트에서 token 과 함께 서버로 요청을 보냄 6. 서버는 token 을 복호화하여 사용자 정보를 알 수 있음 JWT (JSON Web Token) 당사자간에 정보를 JSON 객체로 안전하게 전송하기 위한 컴팩트하고 독립적인 방식의 표준 디지털 서명이 되어있기 때문에 신뢰 가능 Header 토큰에 대한 메타 ..

Apollo GraphQL 을 client, server 모두에서 편하게 사용 가능하도록 해주는 라이브러리 Apollo Client 쿼리 캐싱 가능 loading 상태 및 Error 처리 가능 서버와 데이터 동기화 유지 가능 Apllo Server Apollo 클라이언트를 포함한 모든 GraphQL 클라이언트와 호환되는 오픈 소스 GraphQL 서버 Apollo-server 3 버전 설치 npm install apollo-server-express 소스 코드 작성 const { loadFilesSync } = require('@graphql-tools/load-files'); const { makeExecutableSchema } = require('@graphql-tools/schema'); const..

trunk: 하나의 중심 브랜치로만 관리하는 것 trunk based flow: 하나의 중심 브랜치에서 필요할 때만 브랜치를 분기하는 것 Git flow master, develop 브랜치는 영구적으로 존재함 hotfix, felease, feature 브랜치는 필요할 때마다 만들고, 머지 후에 삭제함 feature --> develop --> release --> master 큰 규모의 팀에 유용 퀄리티 보장이 중요한 프로덕트에 유용 release 된 프로덕트에 대한 관리 사이클이 긴 경우 유용 master 브랜치 (main 브랜치) 소비자가 사용하는 제품이 존재하는 브랜치 release 브랜치로부터 pull request 받음 부모 브랜치: X 자손 브랜치: hotfix, develop PR 받는 브..

Github 로 협업하기 1. github collaborator (협업자) 로 등록하기 repo > Settings > Collaborators > add people 이름 또는 이메일 입력 후 초대하기 초대받은 사람이 이메일에서 초대를 수락 해야 협업자가 됨 해당 repo 에서 push, pull 등 가능 2. git clone 으로 프로젝트 시작하기 git clone [repo 주소] git clone epo 를 그대로 내 컴퓨터로 가져오고 싶을 때 사용하는 명령어 단순한 다운로드와는 다르게 commit 기록, history 를 모두 가져옴 git reset 명령어를 통해 이전 기록으로 돌아갈 수 있음 pull, push 등을 통해 실제 repo 에 수정 사항을 반영하거나 내려받을 수 있음 clon..

GraphQL API용 쿼리 언어 1. 데이터를 묘사함 type Project { name: String tagline: String contributors: [User] } 2. 클라이언트에서 필요한 데이터를 요청함 { project(name: "GraphQL") { tagline } } 3. 서버에서 예측한 데이터를 받아옴 { "project": { "tagline": "A query language for APIs" } } GraphQL 장점 프론트엔드 개발자가 백엔드에서의 REST API 개발을 기다리지 않아도 됨 Overfetching, Underfetching을 막아줌 REST API와 달리 한 번의 요청으로 필요한 데이터를 가져올 수 있음 Schema를 작성하기 때문에 데이터가 어떻게 이루어..