Components와 Props 이제 Components에 대해서 설명을 시작한다. function Welcome(props) { return Hello, {props.name}; } 제일 먼저 컴포넌트의 이해를 돕기 위해서 다음과 같은 함수가 나왔다. 데이터를 가진 Props 객체를 받아서 React 엘리먼트를 반환하는 React 컴포넌트이다. 함수 형태로 만들어져있기 때문에 " 함수 컴포넌트 "라고 불린다. function Welcome(props) { return Hello, {props.name}; } const root = ReactDOM.createRoot(document.getElementById('root')); const element = ; root.render(element); 컴포넌..

리액트를 사용하는 어느날 당연하게 주어진 리액트를 과연 어떻게 만들 수 있을까? 라는 생각을 했다. 결국 리액트로 자바스크립트를 기반으로 만들었기 때문에 나도 만들 수 있지 않을까? 이 작업은 얼마나 이어질지 모르겠지만 시작되었다. 리액트 홈페이지 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다. 일반적으로 상태 (State)가 변경되었을 때 우리는 다시 화면에 변경된 상태를 토대로 그려줘야한다. 이것을 리액트는 아주 쉽게 해준다. 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만드세요. 그리고 이를 조합해 복잡한 UI를 만들어보세요. 컴포넌트 형식으로 한 화면에 나타나야할 정보를 나눠서 개발하고 이를 조합해서..

0. 들어가며, 기본적으로 Redux와 Redux - Toolkit에 대한 이론을 공부한 뒤, 작성하였습니다. [React] Redux - 기본편 [React] Redux - toolkit편 1. 프로젝트 세팅 yarn add @reduxjs/toolkit react-redux redux를 사용하기 위해서 toolkit과 react-redux만 추가로 설치해준다. 2. 개발 1. Todos Reducer import { createSlice } from "@reduxjs/toolkit"; const initialState = { todos: [], }; export const todoSlice = createSlice({ name: "todos", initialState, reducers: { addTo..

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

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

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

1. Plugin? Webpack의 Plugin은 로더보다 강력한 기능을 가지고 있다. 로더는 특정 모듈에 대한 처리만 담당하지만 Plugin은 Webpack이 실행되는 전체 과정에 개입할 수 있다. 2. 프로젝트 준비 npm install webpack webpack-cli react react-dom import React from "react"; import ReactDom from "react-dom"; const App = () => { return ( Webpack Plugin ); }; ReactDom.render(, document.getElementById("root")); 테스트를 위해서 간단한 React 프로그램 코드를 작성하였다. npm install @babel/core @babe..

0. Webpack? 웹팩은 모듈 번들러이다. 여기서 모듈은 각 리소스 파일을 말하고, 번들은 Webpack 실행 후 나오는 결과 파일이다. 하나의 번들 파일은 여러 모듈로 만들어진다. 즉, Webpack을 이용하면 우리가 제작한 여러 가지 리소스(js, css, ... )를 사용자에게 전달하기 좋은 형태로 만들 수 있다. 필요 이유? 초기 웹 페이지는 페이지가 바뀔 때마다 새로운 HTML을 요청해서 화면을 그리는 방식이었다. 자바스크립트는 돔을 간단하게 조작하는 역할만 했고, Ajax가 유행했을 때는 자바스크립트의 비중이 더 커졌지만 페이지당 자바스크립트 파일 몇 개면 충분했다. 하지만 SPA가 나오면서 하나의 HTML에 수십, 수백 개의 자바스크립트 파일을 포함하기 때문에 기존 방식이 통하지 않았다...