HTTP HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜 웹에서 이루어지는 모든 데이터 교환의 기초 HTTP Method 수행할 작업의 종류를 나타내기 위해 서버에 보내는 메시지 브라우저와 서버 간의 더욱 풍부한 통신이 가능함 GET: 데이터를 서버로부터 받아올 때 사용 POST: 일반적으로 무언가를 생성하기 위해 서버에 데이터 블록을 수락하도록 요청함 PUT: 데이터 업데이트 시 사용 DELETE: 데이터를 서버에서 삭제 시 사용 GET Method URL 매개변수를 사용해 서버에 데이터를 요청함 웹에서 가장 일반적으로 사용되는 HTTP Method GET 요청 매개변수는 이름-값 쌍으로 형식이 지정됨 www.google.com/search?q=nodejs 가능 서버에서 데이터 검색하..

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

Automatic batching 업데이트 대상이 되는 상태값들을 하나의 그룹으로 묶어서 한 번의 리렌더링에 업데이트가 모두 진행될 수 있게 해주는 것 한 함수 안에서 setState를 여러 번 호출시켜도 리렌더링은 단 한번만 발생함 함수의 끝에서 업데이트가 되며 여러 번 리렌더링 하는 것을 막기 때문에 성능에 좋은 영향을 줌 function handleClick() { setCount(c => c + 1); // 리렌더링 X setFlag(f => !f); // 리렌더링 X // 마지막에 한 번만 리렌더링함 } batch 처리 해제 import { flushSync } from "react-dom"; function handleClick() { flushSync(() => { setCount(count..

Recoil React 애플리케이션을 위한 상태 관리 라이브러리 Redux 보다 초기 설정 코드 작성 부분이 최소화 됨 페이스북에서 만들어졌기 때문에 리액트와 호환성이 좋음 recoil 설치 npm install recoil --save RecoilRoot 루트 컴포넌트를 RecoilRoot 로 감싸주면 하위 컴포넌트에서 recoil 상태 사용 가능 import { RecoilRoot } from 'recoil'; ... const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); Atom 상태의 일부를 나타냄 모든 컴포넌트에서 읽고 쓸 수 있음 atom 의 값을 읽는 컴포넌트들은 암묵적으로 atom 을 구독함 때문에..

Mobx react 상태 관리 라이브러리 redux 다음으로 가장 많이 사용되고 있음 mobx 6 버전 이전에는 @데코레이터를 사용했지만 mobx 6 버전 부터는 데코레이터 사용을 지양하고 있음 Mobx 설치 npm install mobx 애플리케이션 상태 모델링 import { action, computed, makeObservable, observable } from 'mobx'; export default class CounterStore { count = 0; constructor() { makeObservable(this, { count: observable, isNegative: computed, increase: action, decrease: action, }); } get isNegati..

Redux Toolkit Redux 로직을 작성하기 위한 공식 권장 접근 방식 Redux 코어를 둘러싸고 있음 Redux 앱을 빌드하는 데 필수적인 패키지/기능이 포함되어 있음 Redux 작업을 단순화하고 실수를 방지할 수 있음 Redux Toolkit + 리액트 + 타입스크립트 프로젝트 생성 npx create-react-app [프로젝트 이름] --template redux-typescript 기본으로 카운터 애플리케이션이 생성됨 Redux Toolkit 설치 (기존 프로젝트에 설치) npm install @reduxjs/toolkit react-redux Store 생성 configureStore 를 사용하여 Redux Store 생성 reducer 함수를 인수로 전달받음 import { confi..