들어가며: 모달은 화면에 띄우는 것만으로 끝나지 않아요 모달을 만들 때 처음에는 보통 이런 부분에 집중하게 됩니다. 배경을 어둡게 깔기 가운데에 박스 띄우기 닫기 버튼 만들기 바깥 영역을 클릭하면 닫기 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를 만들다 보면 사용자가 방금 한 작업을 되돌리고 싶어 하는 순간이 생겨요. 예를 들면 이런 기능입니다. 텍스트를 수정했다가 이전 내용으로 되돌리기 삭제한 블록 다시 복구하기 카드 순서를 바꿨다가 원래대로 돌리기 설정값...

들어가며: 백엔드 없이 회원가입을 만들 수 있을까? 프론트엔드 프로젝트를 만들다 보면 로그인과 회원가입은 거의 항상 필요해요. 처음에는 화면만 만들면 될 것 같지만, 실제로는 생각보다 많은 백엔드 기능이 필요합니다. 사용자 정보를 저장할 데이터베이스 이메일과 비밀번호를 검증하는 인증 시스템 로그인 세션 관리 이메일 인증 사용자...

드래그 앤 드롭, 생각보다 금방 복잡해진다 리스트 순서를 바꾸는 기능은 처음엔 단순해 보여요. 그런데 막상 구현하려고 하면 생각보다 챙길 게 많습니다. 마우스로 끌기 터치로 끌기 키보드로도 조작하기 드롭했을 때 배열 순서 바꾸기 드래그 중 UI 상태 보여주기 스크롤 컨테이너 안에서도 자연스럽게 동작하기 이럴 때 @hel...