React 에서의 데이터 Fetching react 에서는 useEffect 를 사용 하여 데이터를 fetching 을 하게 된다. 이로서 컴포넌트가 렌더릴 될 때 나 데이터가 변경 되었을 때 데이터를 불러올 수 있다. 하지만 화면이 렌더링 된 후 데이터를 불러오기 시작한다. 빈화면이 보이고, 자바스크립트실행 해서 이제 드디여 화면이 보였는데 또다시 데이터 fetching 하는 시간 까지 기다려야 한다. Next.js 에서의 데이터 fetching SSR (Server Side Rendering) Next.js 에서는 사전렌더링 과정중에 데이터 fetching 까지 수행 하여서 진행 하기 때문에 React 의 느린 FCP 를 좀더 빠르게 진행할 수 있다. 컴포넌트 상단에 getSeverSideP..

react 렌더링 방식 : CSR ( Client Side Rendering ) 1) 접속요청 2) index.html 빈껍데기를 브라우저에 전달한다. 3) 빈화면을 유저에게 먼저 렌더링 4) 후속으로 서버에서 JavaScript 번들을 전달한다. 5) 브라우저에서 JavaScript 를 실행 한 후 6) 컨텐츠를 렌더링 한다 ---------------------------------- 여기까지 걸리는 시간을 FCP : First Content for Paint 라고 한다. 7) 초기접속 이후 페이지 이동 시 8) 브라우저에서 JavaScript 를 실행 해서 ( 4번에서 서버에서 JS 번들을 모두 전달 받았다 ) 9) 컨텐츠를 렌더링 한다. 장점 1. 페이지 이동이 매우 빠르고 쾌적하다 단점 ..

express pakage.json 파일에서 type 을 module 로 작성해야 import 문법으로 가져 올 수 있다.작성하지 않으면 require 로 가져오면 된다. "author": "", "license": "ISC", "type": "module", // 모듈로 작성해야 import 문법 사용 가능 하다. "bugs": { "url": "https://github.com/OZ-Coding-School/nodejs-express-axios-cors/issues" }, express 초기 설정import express from "express";import cors from "cors";const app = express(); // app을 express 로 ..

SOP와 CORS 정책 정리CORS는 Cross-Origin Resource Sharing의 약자로, 교차 출처 리소스 공유를 의미한다. 이 개념을 정확하게 이해하기 위해서는 먼저 SOP 즉, Same Origin Policy(동일 출처 정책)에 대해 알아볼 필요가 있다.SOP(Same Origin Policy)란?SOP는 같은 출처의 리소스만 브라우저가 접근할 수 있도록 허용하는 보안 정책이다. 만약 출처가 다르다면, 브라우저는 보안을 이유로 해당 리소스 요청을 차단한다.여기서 동일 출처란, 브라우저 주소창 기준으로 프로토콜, 도메인, 포트 이 세 가지가 모두 같아야 한다. 이 세 가지가 완전히 같을 때만 동일 출처로 간주한다. 기본적으로 브라우저는 동일 출처에서만 리소스를 요청하도록 설정되어 있다...

HTTPS란 무엇인가?HTTPS는 HTTP Secure의 약자이며 기존 HTTP보다 보안성이 강화된 통신 프로토콜이다. 단순히 HTTP에 S가 붙은 것처럼 보이지만, 실제로는 암호화 기술이 더해져 훨씬 안전하게 데이터를 주고받을 수 있다.HTTPS는 데이터를 암호화해서 전송하기 때문에, 제3자가 데이터를 탈취하더라도 내용을 알아볼 수 없다는 장점이 있다. 이와 달리, 기존 HTTP는 데이터를 암호화하지 않기 때문에 중간에서 가로채면 그대로 내용을 확인할 수 있다.HTTPS는 어떻게 암호화를 수행하는가? HTTPS는 SSL 또는 TLS라는 암호화 프로토콜을 HTTP에 추가하여 구성된다. 이 과정에서 두 가지 암호화 방식이 사용된다. 대칭키 암호화와 비대칭키 암호화이다.대칭키 암호화는 하나의 키로 암호화와..

HTTP란 무엇인가 HTTP는 Hypertext Transfer Protocol의 줄임말이다. 웹 기반 응용 프로그램에서 가장 많이 사용되는 프로토콜 중 하나다. 그 이유는 웹 브라우저에서 사용하는 언어인 HTML도 Hypertext Markup Language의 약자이기 때문이다. 즉, 웹에서 정보를 주고받기 위해 HTTP를 사용하게 되는 것이다. HTTP는 웹 프론트엔드 클라이언트와 웹 서버 간 통신 시 사용되는 대표적인 프로토콜이다. 이는 OSI 7계층 중 최상위 계층인 응용 계층(Application Layer)에 속하는 프로토콜이다. 사용자가 가장 가까이 접하는 계층이므로 일상에서도 HTTP 프로토콜의 사용 예를 쉽게 접할 수 있다.HTTP는 어떻게 작동하는가 HTTP는 클라이언트-서버 구..