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..

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를 작성하기 때문에 데이터가 어떻게 이루어..

Express Node.js의 API를 단순화하고 유용한 기능들을 추가시켜 Node.js를 더욱 편리하게 사용할 수 있게 해주는 프레임워크 package.json 파일 생성 npm init -y express 패키지 설치 npm i express Node.js 진입점 파일 생성 (Server.js) // Express 모듈 불러오기 const express = require('express'); // Express 서버를 위한 포트 설정 const PORT = 8080; // 호스트 지정 const HOST = '0.0.0.0'; // 새로운 Express 앱 생성 const app = express(); // '/' 경로로 요청이 오면 Hello World를 결과값으로 전달 app.get('/', (r..

Node.js 작업 처리 Node.js 가 V8과 libuv 를 바인딩 시켜줌 V8: 자바스크립트 코드를 실행해 줌 libuv: 자바스크립트 코드를 읽는 것 이외의 것들을 처리함 (DB접근, 파일 읽기 등) libuv 유니콘 벨로시랩터 라이브러리 이벤트 루프를 기반으로 하는 비동기 I/O에 대한 지원을 제공하는 다중 플랫폼 C 라이브러리 파일 시스템, DNS, 네트워크, 파이프, 신호 처리, 폴링/스트리밍을 처리하는 메커니즘 제공 원래 unix와 window는 파일 컨트롤 방법이 다르지만 libuv가 서로 호환 가능하게 해주기 때문에 Node.js를 사용하면 unix, window에서 동일한 방법으로 사용 가능 동기 & 비동기 동기 (Synchronous) console.log('1'); console...