1. Next.js? Next.js는 React를 사용한 서버사이드 렌더링 프레임워크다. 따로 설정을 해주지 않아도 SSR, SEO와 TypeScript 등 생산에 필요한 많은 기능을 제공하는 프레임워크다. 2. 사용하는 이유 1. SSR Next.js를 사용하는 가장 큰 이유로 SSR이 있다. React는 SPA 즉, Single Page Application로 필요한 정적 리소스를 최초 한 번만 다운로드하고 이후 변경이 필요한 경우 전체를 Reload하지 않고 필요한 변경된 부분만 갱신된다. SPA 방식을 사용하는 이유는 React가 CSR 방식으로 작동되기 때문이다. CSR은 Client Side Rendering이고 작동 순서는 서버에서 브라우저로 응답을 보낸다. 브라우저에서 JS를 다운로드한다...

0. 들어가며 앞서 채팅방편을 보지 않으셨다면 먼저 보고 오시는 것을 추천합니다. 1. [Node.js] Zoom 클론코딩 - 세팅편 2. [Node.js] Zoom 클론코딩 - 채팅편 3. [Node.js] Zoom 클론코딩 - 채팅방편 기본적인 Socket IO에 대해서 어느 정도 공부가 되었다고 판단해서 React에서 간단한 채팅 기능을 만들 생각이다. 결국 React에서 사용하는 것이 목적이기 때문! 1. 구성하기 React npm install socket.io-client Socket IO는 React에서 기본적으로 제공하는 패키지가 당연히 아니므로 설치해준다. Node npm install express cors npm install nodemon @babel/core @babel/cli @..

웹소켓? TCP 연결에 완전한 이중 통신 채널을 제공하는 컴퓨터 프로토콜이다. 서버와 클라이언트 간의 웹소켓 연결은 HTTP 프로토콜을 통해 이루어지는데, 연결이 정상적으로 이루어진다면 서버와 클라이언트 간에 웹소켓 연결(TCP/IP)이 이루어지고 일정 시간이 지나면 HTTP 연결은 자동으로 끊어진다. 서버와 클라이언트 간의 효율정인 양방향 통신과 데이터 전송을 위해서 사용된다. 일반적으론 클라이언트에서 Request를 보내면 서버에서 Response로 응답하는 StateLess 관계로 알고 있다. 즉, HTTP 통신은 클라이언트가 요청을 보내는 경우에만 서버가 응답하는 단방향 통신 방식 하지만, 웹소켓은 StateFull하다. 매번 요청을 보내는 것이 아닌 한 번의 요청으로 HandShake 과정을 거..

MobX를 비동기화하는 방법은 async await을 사용하는 방법과 generator를 사용하는 방법이 있다. 1. async await import { makeObservable, action, runInAction, observable } from "mobx"; import axios from "axios"; export default class Test { info = ""; constructor() { makeObservable(this, { info: observable, get: action, }); } get = async () => { const data = await axios.get("/info"); runInAction(() => { console.log(data); this.inf..

슈퍼마켓 구현하기 MobX를 깊게 다루기 위해서 슈퍼마켓을 추상적으로 구현하려고 한다. market 스토어 작성 import { observable, action, computed, makeObservable } from "mobx"; export default class MarketStore { selectedItems = []; constructor() { makeObservable({ selectedItems: observable, put: action, take: action, total: computed, }); } put = (name, price) => { const exists = this.selectedItems.find((item) => item.name === name); if (!e..

카운터 만들기 yarn add mobx mobx-react import React, { Component } from "react"; import { observable, action, makeObservable } from "mobx"; import { observer } from "mobx-react"; class Counter extends Component { number = 0; constructor() { super(); makeObservable(this, { number: observable, increase: action, decrease: action, }); } increase = () => { this.number++; }; decrease = () => { this.number--..

MobX는 Redux와 같은 인기있는 React 상태 관리 라이브러리이다. MobX의 주요 개념들 1. Observable State( 관찰 받고 있는 상태 ) MobX를 사용하고 있는 앱의 상태는 Observable하다. 즉, 관찰 받고 있는 상태이다. 앱에서 사용하고 있는 State는 변할 수 있고, 만약 특정 부분이 바뀌면 MobX에서 어떤 부분이 바뀌었는지 알 수 있다. 2. Computed Value ( 연산된 값 ) 연산된 값은 기존 상태값과 다른 연산된 값에 기반하여 만들어질 수 있는 값이다. 주로 성능 최적화를 위해서 사용된다. 어떤 값을 연산해야 할 때, 연산에 기반이 되는 값이 바뀔때만 새롭게 연산하고, 바뀌지 않으면 기존의 값을 사용할 수 있다. 예를들어, 800원짜리 물병을 4병 살..

1. 나무 흔들기 나무 흔들기(tree shaking)는 불필요한 코드를 제거해 주는 기능이다. 웹팩은 기본적으로 나무 흔들기 기능을 제공한다. 단, 웹팩에서 제대로 동작하지 않는 경우가 있다. 나무 흔들기를 잘 이해하고 있어야 번들 크기를 최소로 유지할 수 있다. npm install webpack webpack-cli // src/util_esm.js export const func1 = () => { console.log("func1_esm"); }; export const func2 = () => { console.log("func2_esm"); }; ESM(ECMAScript Modules) 문법을 사용하는 코드다. ESM에서는 import, export 등의 키워드를 사용한다. // src/u..