프론트엔드

HTML·CSS부터 JavaScript, React와 상태관리까지, 화면을 만들고 데이터를 다루는 기술을 배웁니다.

총 177개의 글

TypeScript · 초급 설명 9분 2026.06.11

TypeScript 기초 문법을 배운 뒤 React 프로젝트에서 props, state, API, 상태 관리, 폼, Next.js까지 어떤 순서로 타입을 적용하면 좋은지 정리합니다.

TypeScript · 초급 설명 9분 2026.06.11

TypeScript가 JavaScript를 대체하는 언어가 아니라 JavaScript 위에 타입 검사를 더하는 도구라는 점을 입문자 기준으로 정리합니다. 정적 타입 검사, JavaScript 변환, 런타임과의 차이를 함께 설명…

React React · 중급 설명 6분 2026.05.29

React 컴포넌트의 렌더링은 props와 state를 읽고 JSX를 계산하는 순수한 과정이어야 합니다. 렌더링 도중 다른 컴포넌트의 state를 바꾸면 “Cannot update a component while renderi…

Next.js Next.js · 중급 설명 7분 2026.05.19

cookies와 headers는 현재 요청의 정보를 읽는 API입니다. 요청마다 값이 달라질 수 있으므로 정적 결과와 요청 단위 렌더링의 경계를 이해해야 합니다.

React React · 중급 설명 7분 2026.05.19

Maximum update depth exceeded는 React에서 무한 업데이트가 발생했을 때 볼 수 있는 대표적인 오류입니다. Effect에서 state를 바꾸고, 그 state 변화가 다시 Effect를 실행하는 구조가…

Next.js Next.js · 초급 설명 5분 2026.05.19

최신 App Router에서는 params가 Promise 형태로 전달되는 API가 사용됩니다. 오래된 예제를 그대로 복사하면 params should be awaited 계열 경고나 타입 오류를 만날 수 있습니다.

React React · 초급 설명 6분 2026.05.16

useState 문법을 알고 있어도 실제 프로젝트에서는 “값을 바꿨는데 화면이 안 바뀐다”, “console.log에는 이전 값이 나온다” 같은 문제를 자주 만납니다. 대부분은 React가 느리기 때문이 아니라 state를 일…

Tailwind CSS · 중급 설명 14분 2026.05.16

Tailwind CSS 클래스가 className에는 들어가 있는데 화면에 적용되지 않을 때 확인할 원인을 정리합니다. 전역 CSS import, 소스 감지, 동적 클래스, 상태 variant, CSS 우선순위 문제를 순서대로…

Tailwind CSS · 중급 설명 12분 2026.05.15

Tailwind CSS에서 flex 레이아웃이 깨질 때 부모 방향, 자식 너비, 줄바꿈, shrink 동작을 기준으로 원인을 나눠 확인하는 방법을 정리합니다.

Zustand · 중급 설명 8분 2026.05.15

Zustand selector를 사용해 컴포넌트가 필요한 상태만 구독하는 방법을 정리합니다. 전체 store 구독의 문제, 여러 값을 가져올 때의 참조 비교, useShallow 적용 기준까지 필터 UI 예시로 설명합니다.