🌱 𝐣𝐣𝐢𝐧𝐠𝐥𝐞 𝐝𝐞𝐕𝐥𝐨𝐠

1. express 로 서버 구축 express ? node.js의 프레임워크 서버 사이드 프레임워크로 Node.js의 API를 단순화하고, 쉽게 서버 구축 가능 express application으로부터 http server 생성 import express from 'express'; import http from 'http'; const app = express(); const server = http.createServer(app); 2. http 서버 위에, webSocket 서버 구축 -> 같은 포트 이용 import ws from 'ws'; //http 서버 전달 const wss = new we.WebSocketServer({ server }); 3. WebSocket Connection :..

서버 컴포넌트 vs 클라이언트 컴포넌트 처음 백엔드 서버에서 클라이언트 컴포넌트와 서버 컴포넌트가 모두 렌더링 클라인트 컴포넌트만 프론트엔드에서 다시 렌더링, 다시 hydrated(activate) 클라이언트 컴포넌트의 자바스크립트는 사용자가 다운로드하여 실행하고, 서버 컴포넌트의 자바스크립트는 사용자가 다운로드 X 서버 컴포넌트는 딱 한번만 서버에 의해 실행 -> 유저는 HTML 얻음 그 다음, 클라이언트 컴포넌트 hydrate -> 상호작용 가능 모든 이벤트 리스너 추가, useState, API, 지리 정보..etc 원하는 경우 클라이언트 컴포넌트를 서버 컴포넌트 내에 포함 가능 (반대의 경우 X) "use client"를 쓰지 않으면, 기본적으로 모두 서버 컴포넌트이다.

* Rendering : js code를 브라우저가 이해할 수 있는 html로 바꾸는 것 - React render : CSR (client side rendering) create-react-app 을 사용해 react만으로 application을 생성하면 , client side rendering client side rendering => 사용자 브라우저인 client단에서 rendering 작업을 한다. 단점 페이지의 실제 소스코드는 비어있다. ex. = UI가 없다 브라우저가 모든 JS 파일을 다운로드하고, 실행한 후에야 화면에 보여지는 것 새로고침 시, JS엔진이 위의 사항을 처리하는 시간 동안 빈 화면이 보여짐 SEO, 검색 엔진 최적화 Search Engine Optimization Goo..