[TIL] 자바스크립트 비동기 처리 방식 (feat. 이벤트 루프)

📌 들어가며자바스크립트는 흔히 싱글 스레드 언어라고 한다. 즉, 한 번에 하나의 작업만 수행할 수 있는 구조처럼 보인다.그런데 우리는 실제로 웹사이트에서 네트워크 요청을 보내고, UI가 끊김 없이 렌더링되고, 이벤트도 정상적으로 처리되는 경험을 한다. 어떻게 싱글 스레드가 멀티 스레드 처럼 동시에 여러 일을 하는 것처럼 보일까?오늘은 그 비밀인 자바스크립트의 비동기 처리 모델을 정리했다. 📌 자바스크립트의 싱글 스레드자바스크립트는 원래 브라우저의 DOM 조작을 안전하게 하기 위해 싱글 스레드로 설계되었다.여러 스레드가 동시에 DOM을 만지면 Race Condition이 발생할 수 있기 때문이다. 그래서 JS 엔진은 하나의 콜 스택(Call Stack) 만 두고 코드를 순차적으로 실행한다.콜 스택이란?..

• format_list_bulleted FE/Javascript
• · 2025. 11. 16.
• textsms

[TIL] 나는 React Query를 왜 사용했을까?

📌 들어가며React를 사용하며 처음에는 API 요청을 useEffect와 useState로 직접 관리했다.단순한 데이터 요청이라면 괜찮았지만, 프로젝트가 커질수록 아래와 같은 문제가 생겼다.동일한 데이터를 여러 컴포넌트에서 사용하면서 중복 요청이 발생데이터가 갱신되어도 화면에 즉시 반영되지 않음로딩/에러 상태를 직접 관리해야하는 불편함 발생결국 "서버에서 가져온 비동기 응답을 어떻게 효율적으로 처리할 것인가" 가 중요한 과제가 되었다.📌 React Query가 뭔데?React Query는 위와 같은 문제를 해결하기 위해 만들어진 서버 상태 관리 라이브러리다. Zustand나 Redux가 클라이언트 상태를 관리하는 데 초점을 둔다면, React Query는 서버의 데이터(fetch, cache, sy..

• format_list_bulleted FE/React
• · 2025. 11. 14.
• textsms

[TIL] 제어 컴포넌트와 비제어 컴포넌트 (feat. React Hook Form + Zod)

📌 들어가며React의 폼 입력 관리 방식인 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)를 비교하고, 비제어 방식의 단점을 React Hook Form이 어떻게 보완하는지, 그리고 Zod와 함께 사용하면 좋은 이유를 정리한다.📌 제어 컴포넌트 (Controlled Component)React의 state가 입력값을 직접 제어하는 방식function ControlledInput() { const [value, setValue] = useState(""); return ( setValue(e.target.value)} /> ); }입력값(value)이 항상 state에 의해 결정됨React 렌더링마다 값이 ..

• format_list_bulleted FE/React
• · 2025. 11. 14.
• textsms

프리코스 1주차 KPT 회고

✅ Keep - 계속 유지하고 싶은 점사고를 구조화하고, 꾸준히 기록하며, 여러 주제로 소통하고 나누기구현 전 설계의 중요성이번 과제에서 가장 크게 배운 점은 '구현보다 설계가 먼저'라는 것이다. 처음엔 단순히 기능을 빠르게 완성하는 데 초점을 맞췄지만, 요구사항을 세분화하고 흐름을 정리하는 과정에서 사고를 구조화하는 힘을 체감했다.기능 단위로 나누고, 입력부터 출력까지의 흐름을 미리 설계해보니 코드를 작성할 때의 혼란이 줄고, 구현 방향이 명확해졌다.이 경험은 앞으로 어떤 프로젝트를 하더라도 '먼저 설계하고, 그다음에 구현한다'는 원칙으로 남을 것 같다.테스트 코드와의 친화력 형성기능을 추가할 때마다 '이전 기능이 혹시 깨지진 않을까?' 하는 불안이 늘 따라붙었다. 테스트가 없을 때는 직접 실행해 확인..

• format_list_bulleted 우아한테크코스/프리코스
• · 2025. 10. 21.
• textsms

[TIL] 커밋 메시지 컨벤션 (Angular Style)

📌 들어가며프리코스 과제에 앞서, README.md에 정의된 기능 단위별로 커밋하고 AngularJS Commit Message Conventions를 참고해 메시지를 작성하라는 요구사항이 있었다.평소에는 단순히 : 형태로 커밋을 작성했지만, 이번 기회를 통해 좀 더 의미 있는 커밋 메시지 구조를 정립하고자 문서를 자세히 살펴보며 정리해보았다.📌 커밋 컨벤션의 목적CHANGELOG.md 자동 생성→ feat, fix, breaking change를 기반으로 자동화 가능불필요한 커밋 구분→ 단순 포매팅이나 주석 수정 등은 style, chore로 분리히스토리 가독성 향상→ 어떤 기능이 어디에서 수정되었는지 명확히 남김📌 커밋 메시지 구조(): → 각 줄은 100자 이내로 유지 1️⃣ 종류f..

• format_list_bulleted 우아한테크코스/프리코스
• · 2025. 10. 16.
• textsms

[TIL] npm update의 동작 원리와 npm-check-updates로 최신화하기

📌 들어가며우테코 8기 프리코스를 준비하면서, 이전에 우테코 7기에서 사용했었던 package.json을 그대로 가져와 프로젝트를 세팅했다.1년 넘는 시간이 지나며 내부 패키지들이 여러 번 업데이트되었을 것 같아 npm update 명령어로 최신 버전으로 맞추려 했지만, 의외로 아무것도 바뀌지 않았다.이유를 찾아보니 npm은 단순히 모든 패키지를 최신으로 올려주는 게 아니라, package.json에 지정된 버전 범위(^, ~, 또는 고정 버전) 에 따라 업데이트를 제한적으로 수행한다는 걸 알게 되었다.그래서 오늘은 npm update가 실제로 어떻게 동작하는지, 그리고 그 한계를 넘어 최신 메이저 버전까지 한 번에 업데이트하는 방법을 정리했다.📌 npm update의 동작 원리npm update는 ..

• format_list_bulleted 우아한테크코스/프리코스
• · 2025. 10. 15.
• textsms