비동기(Asynchronous)작업이 완료될 때까지 기다리지 않고, 다음 코드를 바로 실행하는 방식한 스레드 내에서도 가능함 (JS처럼 싱글 스레드에서도 구현 가능)작업 순서와 실행 시간 분리주로 I/O, 네트워크 요청, 타이머 등에서 사용 console.log("시작");setTimeout(() => { console.log("비동기 완료");}, 1000);console.log("끝");Time 0ms: 시작 출력Time 0ms: setTimeout 등록 → 백그라운드로 이동Time 0ms: 끝 출력Time 1000ms: 이벤트 루프가 Task Queue에서 콜백 실행 → "비동기 작업 완료" 출력JS는 싱글 스레드지만, 이벤트 루프 덕분에 비동기처럼 동작 가능. 병렬(Parallel)두 개 이상의..

문득 자바스크립트는 싱글 스레드인데 왜 여러일을 하지에 대해 까먹었다..에ㅔ휴.. 생각좀하고 살걸자바스크립트 엔진 자체는 싱글 스레드JS 엔진(예: V8)은 Call Stack(호출 스택) 하나만 갖고 있어서, 동시에 여러 JS 코드를 실행하지 못함즉, JS 코드 실행 자체는 동시에 하나만 수행console.log("A");console.log("B");// => 무조건 A 먼저, B 나중에 실행하지만 브라우저/Node.js 런타임은 멀티스레드브라우저나 Node.js는 JS 엔진 외에도 Web APIs / libuv 같은 백그라운드 스레드를 갖고 있음.이들이 네트워크 요청, 타이머, 파일 읽기 같은 작업을 엔진 밖에서 실행시킴.그러다 끝나면 이벤트 루프(Event Loop)를 통해 JS 엔진의 큐(Que..

공통점둘 다 객체의 구조(Shape) 를 정의할 수 있음.둘 다 클래스에서 구현(implements) 가능.둘 다 함수 타입, 배열 타입 정의에 사용 가능. type UserType = { id: number; name: string; }; interface UserInterface { id: number; name: string; } const user1: UserType = { id: 1, name: "Alice" }; const user2: UserInterface = { id: 2, name: "Bob" };차이점확장 방식interface → extends로 확장 (여러 개 확장 가능, 합쳐짐)type → & (intersection)으로 확장// interface 확장interface A { ..

우선..오랜만에 RTK 설정을 해보자..!공식문서가 뭔가 굉장히 편해졌다...!RTK + typescript루트에 redux 폴더를 만들고 그 아래에 아래와 같이 설정을 해봅시당redux ㄴ slice ㄴ bucketSlice.ts ㄴ hooks.ts ㄴ store.tsbucketSlice.tsimport {createSlice} from "@reduxjs/toolkit";// slice 생성하기const bucketSlice = createSlice({ // slice 안에는 initial state, action creator, reducers 등 모든게 한번에 들어간다 name: "bucket", initialState: {food: "chicke..

useStateReact로 개발을 하다보면 여러가지 훅을 사용하는데 그 중, 아마 가장 많이 사용하는 훅이 useState일 것이다.useState를 이용해서 컴포넌트의 상태를 변화시키면 변화를 감지하여 컴포넌트를 리렌더링하기 위해 씀가끔.. useState 관련해서 깊게 모른다는 생각이 들곤 하는데.. 잘 몰라도 사용법만 알면 잘 작동하기 때문에 그냥 넘어간적이 한두번이 아니였던 것 같기도 하다 ;_;useState, react state에 대해 여러가지 관련된 키워드들에 좀 더 자세히 알아보자 =)immutability, closure, re-rendering, Fiber, reconciliation, 등등...대충 아는척 할 수는 있지만 제대로 모르는 것 같아서 글로 기록해본다!useState 기본..

Dist다들 Javascript 기반의 어플리케이션을 만들기 위해 build해보고 개발환경에서 실행하면서 dist라는 폴더를 자주 봤을 것이다보통 애플리케이션을 웹 브라우저에서 실행하려면 dist 디렉토리를 서버에 업로드한다사실 나는 이 폴더의 용도를 대충 알고 넘어가긴 했었다... 세상이 좋아져서 알 필요가 없었던 것일까..;~vercel, aws s3 등에서 요 빌드 파일(dist)를 올리면 알아서 잘 작동함아무튼 dist 폴더는 JavaScript 애플리케이션을 빌드한 결과물을 포함하는 디렉토리이다.dist/├── index.html├── assets/│ ├── index.[hash].js # 빌드된 JavaScript 번들│ ├── index.[hash].css # 빌드..