프론트엔드

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

총 177개의 글

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

프론트엔드 일정은 백엔드 API가 완성될 때까지 기다릴 수 없는 경우가 많습니다. API 명세만 있다면 MSW로 요청을 가로채 가짜 응답을 만들고 UI 개발을 먼저 진행할 수 있습니다.

Next.js Next.js · 초급 설명 7분 2026.09.19

App Router의 Server Component는 서버에서 직접 비동기 데이터를 읽을 수 있습니다. 모든 데이터를 브라우저 useEffect로 가져올 필요가 없습니다.

Next.js Next.js · 초급 설명 8분 2026.09.19

App Router는 페이지마다 로딩·오류·404 상태를 특수 파일로 분리할 수 있습니다. 사용자는 데이터가 늦거나 실패했을 때도 현재 상태를 이해할 수 있어야 합니다.

Next.js Next.js · 초급 설명 7분 2026.09.19

Intercepting Routes를 사용하면 클라이언트 이동에서는 상세 화면을 modal로 보여 주고, URL을 직접 열거나 새로고침했을 때는 전체 상세 페이지를 보여 줄 수 있습니다.

Next.js Next.js · 초급 설명 6분 2026.09.19

Parallel Routes는 하나의 layout 안에 여러 독립 UI 영역을 동시에 렌더링하는 기능입니다. 본문 위에 modal slot을 함께 렌더링하는 구조가 대표적입니다.

Next.js Next.js · 초급 설명 8분 2026.09.19

App Router에서는 폴더가 URL 구조를 만들지만, 모든 폴더가 URL에 반영되는 것은 아닙니다. Route Group과 Private Folder를 이용하면 URL은 유지하면서 프로젝트 구조를 정리할 수 있습니다.

Next.js Next.js · 초급 설명 8분 2026.09.19

App Router에서 가장 먼저 이해해야 할 경계는 Server Component와 Client Component입니다. App Router의 컴포넌트는 기본적으로 서버에서 렌더링할 수 있고, state·이벤트·브라우저 AP…

Next.js 설명 10분 2026.09.19

React 과정에서 만든 TaskFlow는 브라우저 안에서 동작하는 SPA입니다.

React React · 고급 설명 6분 2026.09.19

React 화면이 느리다고 느껴질 때 가장 먼저 useMemo와 useCallback을 추가하는 것은 좋은 순서가 아닙니다. 먼저 어떤 상호작용에서 어떤 컴포넌트가 얼마나 렌더링되는지 측정해야 합니다.

React React · 중급 설명 8분 2026.09.19

사용자가 작업을 완료 처리했을 때 서버 응답이 올 때까지 아무 변화가 없다면 UI가 느리게 느껴질 수 있습니다. 반대로 서버 성공 여부를 확인하지 않고 화면을 영구 변경하면 실패 시 데이터와 UI가 어긋납니다.