들어가며: dynamic은 성능 최적화 버튼이 아니에요 Next.js를 사용하다 보면 dynamic이라는 코드를 자주 보게 됩니다. import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart")); 처음 보면 이런 느낌이 듭니다. 컴포넌트를 dynami...

들어가며: 마크업은 화면에 보이는 구조만 만드는 게 아니에요 프론트엔드 개발을 하다 보면 HTML을 단순히 화면에 요소를 배치하는 도구처럼 생각하기 쉽습니다. 버튼처럼 보이면 버튼 링크처럼 보이면 링크 input처럼 보이면 input 하지만 실제 서비스에서는 보이는 모양만큼이나 중요한 것이 있습니다. 사용자가 그 요소를 어떻게 찾고, 이동하고...

들어가며: 모달은 화면에 띄우는 것만으로 끝나지 않아요 모달을 만들 때 처음에는 보통 이런 부분에 집중하게 됩니다. 배경을 어둡게 깔기 가운데에 박스 띄우기 닫기 버튼 만들기 바깥 영역을 클릭하면 닫기 z-index를 높게 주기 눈으로 보기에는 이 정도만 해도 모달처럼 보입니다. 하지만 키보드로 조작해보면 이야기가 달라집니...

들어가며: 이럴 때 이 태그를 쓰는 게 맞을까? HTML을 작성하다 보면 어느 순간부터 div만으로는 부족하다는 이야기를 듣게 됩니다. 그래서 header, nav, main, section, article, aside, footer 같은 시맨틱 태그를 사용하려고 하는데, 막상 쓰려고 하면 헷갈립니다. 이 영역은 section일까 article일...

들어가며: HTML과 화면 사이에는 DOM이 있어요 HTML을 처음 배울 때는 보통 이런 식으로 생각합니다. HTML 파일을 작성한다 ↓ 브라우저가 화면에 보여준다 틀린 말은 아니지만, 중간에 중요한 과정이 하나 있습니다. 브라우저는 HTML 코드를 그대로 화면에 붙이는 것이 아니라, HTML을 해석해서 DOM이라는 구조로 바꿉니다. 그리고...

들어가며: 애니메이션은 어려운 기술일까요? 웹 페이지를 만들다 보면 이런 효과를 자주 보게 됩니다. 버튼에 마우스를 올리면 살짝 떠오름 카드를 클릭하면 눌리는 느낌이 남 모달이 갑자기 나타나지 않고 부드럽게 등장함 로딩 중일 때 원이 빙글빙글 돎 리스트 아이템이 아래에서 위로 올라오며 나타남 처음에는 이런 애니메이션이 복잡한...

들어가며: “여기는 서버일까, 클라이언트일까?” Next.js App Router를 사용하다 보면 처음에는 이런 질문을 자주 만나게 됩니다. 이 컴포넌트에 use client를 붙여야 할까? 서버 컴포넌트에서 useState를 왜 못 쓰지? 클라이언트 컴포넌트로 함수를 넘기면 왜 에러가 나지? 서버 컴포넌트를 클라이언트 컴포넌트 안에 넣을 수는 없...

들어가며: 애니메이션은 꾸미기가 아니라 상태 변화의 설명이다 프론트엔드에서 애니메이션은 단순히 화면을 화려하게 만드는 장식처럼 보일 때가 많아요. 하지만 실제 서비스에서 좋은 애니메이션은 사용자가 화면 변화를 이해하도록 도와줍니다. 버튼을 눌렀을 때 반응이 느껴진다 메뉴가 어디에서 나타났는지 알 수 있다 모달이 갑자기 튀어나오지 않고...

들어가며: 바깥을 클릭하면 닫히는 UI 드롭다운, 모달, 툴팁, 팝오버 같은 UI를 만들다 보면 이런 동작이 자주 필요해요. 메뉴 버튼 클릭 ↓ 드롭다운 열림 ↓ 드롭다운 바깥 영역 클릭 ↓ 드롭다운 닫힘 사용자 입장에서는 너무 자연스러운 동작이지만, 막상 구현하려고 하면 한 가지 질문이 생깁니다. "지금 클릭한 곳이 이 요소 안쪽인지 바깥쪽...

들어가며: undo와 redo는 상태 기록 문제다 문서 편집기, 이미지 편집기, 폼 빌더, 캔버스 도구 같은 UI를 만들다 보면 사용자가 방금 한 작업을 되돌리고 싶어 하는 순간이 생겨요. 예를 들면 이런 기능입니다. 텍스트를 수정했다가 이전 내용으로 되돌리기 삭제한 블록 다시 복구하기 카드 순서를 바꿨다가 원래대로 돌리기 설정값...