#frontend
노트 312개
Frontend
브라우저와 모바일 화면에서 사용자가 직접 만나는 UI를 만드는 분야의 지식 모음.
Frontend
Accessibility장애가 있는 사람도 웹을 인지하고 조작하고 이해할 수 있게 만드는 일. 장애는 능력과 환경의 불일치이고, 브라우저는 시맨틱 HTML로 접근성 트리를 만들어 보조 기술에 넘기며, WCAG가 최소선을 정한다. 표준을 지켜도 쓰기 어려울 수 있어 장애인과의 사용성 테스트와 조직 차원의 우선순위가 필요하다. 사용자 관점과 WCAG, 시맨틱 구조·대체 텍스트·폼·ARIA·키보드·위젯·CSS 기법, 자동·수동 평가와 스크린 리더 테스트를 하위 노트로 잇는다.
Frontend › Accessibility
대체 텍스트, 링크, 쉬운 글대체 텍스트는 이미지가 그 자리에서 하는 일을 글로 바꾼 것이라 같은 사진도 맥락에 따라 alt가 달라진다. 링크는 맥락 없이 목록으로만 들어도 뜻이 통해야 하고, 본문 글은 짧은 문장·익숙한 낱말·논리적 구성으로 인지 부담을 줄인다.
Frontend › Accessibility
복합 위젯의 ARIA 패턴: 콤보박스·날짜 선택기·메뉴·상태 알림네이티브 요소가 없는 복합 위젯을 스크린 리더가 이해하고 조작할 수 있게 만드는 패턴. 자동완성 콤보박스, 날짜 선택기(grid)와 날짜 직접 입력, 사이트 메뉴와 menubar의 구분, 수량 조절 버튼, 정렬 표, 페이지 번호, 툴팁, 좌석 배치 같은 2차원 선택, 그리고 로딩·토스트·글자 수·실시간 검증 같은 상태 알림을 정리한다.
Frontend › Accessibility
색과 움직임의 접근성저시력·색각 결핍 사용자는 스크린 리더가 아니라 화면을 본다. 색만으로 정보를 전하지 않고, 텍스트와 필수 그래픽의 대비를 지키고, prefers-color-scheme·prefers-contrast·prefers-reduced-motion으로 사용자 설정을 존중하고, 움직임은 기본을 줄인 상태로 두고 5초 넘는 자동 애니메이션은 멈출 수 있게 한다.
Frontend › Accessibility
스크린 리더로 테스트하기스크린 리더 테스트는 읽는 순서, 대체 텍스트, 제목·랜드마크·폼·표의 의미가 실제로 어떻게 들리는지 확인한다. 데스크톱은 NVDA나 JAWS 하나에 VoiceOver를, 모바일은 iOS VoiceOver와 Android TalkBack을 쓰고, 각 스크린 리더의 최소 단축키(읽기 시작·중지, 제목·랜드마크·폼 이동, 요소 목록)만 익히면 기본 점검이 된다.
Frontend › Accessibility
자막, 대본, 음성 해설동영상과 오디오에는 소리를 글로 바꾼 자막, 소리와 화면을 모두 글로 담은 대본, 화면 정보를 말로 전하는 음성 해설이 필요하다. 자막은 동기화·동등·접근 가능해야 하고, 실시간 콘텐츠는 속기나 사람이 검수한 음성 인식으로 자막을 단다. 웹에서는 <track>과 WebVTT로 붙인다.
Frontend › Accessibility
장애 유형별 웹 사용시각·청각·운동·인지·발작과 전정·말하기 장애 사용자가 어떤 보조 기술로 웹을 쓰고 어디서 막히는지 정리한다. 진단명보다 기능적 어려움으로 보고, 하나의 설계가 사용자의 조정과 보조 기술을 받아들이게 만드는 것이 핵심이다.
Frontend › Accessibility
접근 가능한 위젯: 펼침·탭·캐러셀펼침(디스클로저)·아코디언은 <details>/<summary>와 name 속성으로 먼저 만들고, 직접 만들면 button + aria-expanded + hidden을 쓴다. 탭은 APG 패턴대로 tablist·tab·tabpanel과 로빙 tabindex, 방향키를 갖추고, 캐러셀은 정지 버튼·포커스 시 정지·숨은 슬라이드 차단·라이브 영역을 갖춘다.
Frontend › Accessibility
접근 가능한 페이지 구조스크린 리더·키보드 사용자는 페이지를 위에서부터 읽지 않고 제목·랜드마크·링크 목록으로 건너뛰며 탐색한다. 페이지 제목, 문서 언어, 제목 계층, 영역, 목록, 건너뛰기 링크, 사이트 검색, iframe 제목, 데이터 표의 머리글 연결이 그 탐색 경로를 만든다.
Frontend › Accessibility
접근 가능한 폼과 오류 처리모든 입력 칸에는 코드로 연결된 이름이 있어야 한다. label을 기본으로, 표처럼 일대일이 안 되는 곳은 aria-labelledby, 보조 설명은 aria-describedby로 잇고, 묶음은 fieldset·legend로 준다. 검증은 서버와 클라이언트를 함께 두고, 오류는 알리고·데려가고·다시 제출하게 하는 세 단계로 복구시킨다. WCAG 2.2의 중복 입력 금지와 인지 테스트 없는 인증까지 다룬다.
Frontend › Accessibility
접근성 평가 방법과 도구접근성 감사는 기준선을 잡고 개발 주기 내내 반복하는 자동·수동·보조 기술 테스트의 조합이다. 자동 검사 도구는 명백한 오류와 사람이 볼 곳을 짚어 줄 뿐 접근 가능한지는 판정하지 못하므로, DevTools로 이름을 확인하고 키보드·시각·콘텐츠·확대·스크린 리더 순으로 수동 점검한다. 결과는 ACR(VPAT)로 보고하고, 오버레이 제품은 이 과정을 대신하지 못한다.
Frontend › Accessibility
접근성을 위한 CSS와 타이포그래피CSS는 표현만 맡고 의미는 HTML이 진다. 소스 순서와 화면 순서를 맞추고, 숨김은 모두에게 숨길지(display:none·hidden) 화면에서만 숨길지(visually-hidden) 구분한다. 400% 확대에서도 가로 스크롤 없이 읽히게(1.4.10 Reflow), 사용자가 줄·글자 간격을 넓혀도 깨지지 않게(1.4.12 Text Spacing) 만들고, 글꼴·정렬·글줄 길이로 읽기 부담을 줄인다.
Frontend › Accessibility
키보드 접근성과 포커스 관리모든 기능은 키보드만으로 쓸 수 있어야 한다. 표준 키 조작, :focus-visible로 지키는 포커스 표시와 WCAG 2.2의 Focus Not Obscured, 소스 순서와 tabindex, inert와 <dialog>로 만드는 안전한 모달, 장치 독립 이벤트와 동적 콘텐츠의 포커스 처리를 정리한다.
Frontend › Accessibility
ARIA와 접근 가능한 이름ARIA는 HTML로 표현할 수 없는 role·state·property를 접근성 트리에 더하지만 동작은 더하지 않는다. 다섯 가지 사용 규칙, 접근 가능한 이름과 설명이 계산되는 순서(aria-labelledby > aria-label > 네이티브 label·alt > 내용 > title > placeholder), Label in Name, 라이브 영역을 정리한다.
Frontend › Accessibility
WCAG와 POUR 원칙WCAG는 인지·운용·이해·견고(POUR) 네 원칙 아래 13개 지침과 성공 기준으로 웹 콘텐츠 접근성의 최소선을 정한다. 2026년 기준 권고안은 WCAG 2.2(86개 기준, 4.1.1 삭제)이고 따로 요구되는 기준이 없으면 AA를 목표로 한다. 형제 지침(ATAG·UAAG)과 각국 법, 원칙별 점검 질문, 모든 성공 기준의 체크리스트를 정리했다.
Frontend
Frontend Architecture폴더 구조, 의존성, SOLID, Feature-Sliced Design처럼 프론트엔드 코드를 어떻게 나누고 어디에 두는지에 관한 설계 원칙 모음.
Frontend › Architecture
가독성을 높이는 전략읽기 좋은 코드는 한 번에 고려할 맥락이 적고, 위에서 아래로 읽히고, 시각적 배치와 의미적 묶음이 일치한다. 같이 실행되지 않는 코드 분리, 구현 상세 추상화, 로직 종류별 함수 쪼개기로 맥락을 줄이고, 복잡한 조건·매직 넘버에 이름을 붙이고, 시점 이동과 중첩 삼항을 줄이고, 게슈탈트 법칙(근접성·공통 영역·유사성·연속성·폐쇄성)으로 빈 줄·주석·배치·이름을 점검한다.
Frontend › Architecture
결합도를 낮추는 전략결합도는 코드를 고쳤을 때 영향이 미치는 범위다. 모듈 결합도의 고전적 6단계 분류(자료~내용)와 높은 결합의 신호를 정리하고, 페이지 전체 쿼리 파라미터를 한 훅에 몰지 않고 책임별로 쪼개고, 앞으로 갈라질 수 있는 코드는 중복을 허용하고, Props Drilling은 조합(children) 패턴으로 먼저 풀고 마지막에 Context를 쓴다. 앱 규모에서는 기능 모듈이 서로를 부르지 않고 퍼사드(샌드박스)와 중재자(앱 코어)를 거치게 한다.
Frontend › Architecture
변경하기 쉬운 코드의 네 가지 기준좋은 프론트엔드 코드는 변경하기 쉬운 코드다. 가독성·예측 가능성·응집도·결합도 네 기준으로 판단하고, 네 기준은 서로 부딪히므로 상황에 따라 무엇을 우선할지 고른다. 기준별 개선 전략과 자주 논쟁되는 컨벤션, 코드 품질을 챙기는 이유·타이밍·감각 기르는 법을 함께 정리한다.
Frontend › Architecture
예측 가능성을 높이는 전략예측 가능한 코드는 이름·파라미터·반환 값만 보고 동작을 알 수 있다. 라이브러리와 같은 이름으로 다른 동작을 하지 않고, 같은 종류의 함수는 반환 타입을 통일하고(Discriminated Union), 이름에 드러나지 않는 로깅 같은 숨은 로직은 호출부로 꺼낸다.
Frontend › Architecture
응집도를 높이는 전략응집도는 함께 수정돼야 할 코드가 항상 함께 수정되는지다. 모듈 응집도의 고전적 7단계 분류(기능적~우연적)와 낮은 응집의 신호를 정리하고, 함께 바뀌는 파일을 도메인 디렉토리에 모으고, 매직 넘버를 상수로 묶어 한쪽만 바뀌는 일을 막고, 폼은 변경 단위에 따라 필드 단위 검증과 스키마 기반 폼 전체 검증 중 하나를 고른다.
Frontend › Architecture
추상화 계층과 데이터 흐름요구사항을 데이터로 표현하면 구현이 되고, 구현에 알맞은 수준의 이름을 붙이면 추상화가 된다. 잘 변하지 않는 추상화가 쌓여 계층이 되고, 계층 사이를 사용자 중심으로 순환하는 데이터 흐름이 코드의 자리를 정한다. 요구사항을 이 계층과 흐름의 구간으로 쪼개 채우는 사고법(그라데이션 사고)을 정리한다.
Frontend › Architecture
컴포넌트를 분리하는 기준과 방법컴포넌트를 나누는 이유는 재사용, 복잡성, 렌더링 범위 세 가지다. 재사용할 컴포넌트는 주변 HTML 문맥에 기대지 않을 만큼 일반적이어야 하고, 쓰는 곳마다 조건문이 붙는다면 중복이 아니므로 고유한 부분은 props로 넘긴다. 복잡한 컴포넌트는 책임과 변경 빈도(UI vs 비즈니스 로직)를 기준으로 나누고, 서로 무관한 상태는 각자의 컴포넌트로 내린다.
Frontend › Architecture
프론트엔드 폴더 구조의 진화역할 기반 폴더(components·hooks·services)에서 출발해 순수 UI와 도메인 컴포넌트를 나누고, 페이지를 독립시키고, 다시 엔티티(데이터)·위젯(화면)·기능(행동) 중심으로 응집해 가는 과정을 따라가며, 좋은 폴더 구조는 팀의 멘탈 모델과 일치하는 구조라는 결론을 정리한다. FSD를 규칙이 아니라 렌즈로 쓰는 법.
Frontend › Architecture
프론트엔드 MV* 아키텍처의 흐름: MVC에서 MVI까지MVC·MVP·MVVM의 구조와 차이, 수동적 뷰·감독 컨트롤러·프레젠테이션 모델·Model 2 같은 변형, 웹 프론트엔드의 아키텍처가 MVC → MVVM → Container-Presenter → Flux → 가벼운 전역 스토어·서버 상태 관리로 바뀌어 온 흐름과, Flux가 reducer와 단일 스토어의 Redux로 줄어든 과정, 그 흐름을 정리한 MVI(Model-View-Intent) 아키텍처. 뷰와 비즈니스 로직을 분리하고, 뷰는 의도만 전하고, 데이터는 한 방향으로 돈다.
Frontend › Architecture
프론트엔드에서 관심사의 분리관심사의 분리는 한 단위가 하나의 선명한 기준으로 구분되게 해 인지 부하를 줄이는 일이다. 프론트엔드는 역할(HTML·CSS·JS) → 기능(컴포넌트) → 컴포넌트 안의 다시 계층으로 분리 축을 바꿔 왔고, 관심사는 모듈·레이어·데이터 흐름 여러 방향이 있어 프로젝트 시기마다 우선순위가 달라진다.
Frontend › Architecture
프론트엔드에서 의존성 관리하기의존성은 곧 변경에 노출되는 관계다. 변수는 스코프를 좁히고 값을 바꾸는 길을 하나로 만들고, 여러 곳이 쓰는 함수는 의존성 역전으로 계약에 기대게 하고, 타입은 API 응답이 아니라 잘 바뀌지 않는 도메인 타입에 기대게 한다.
Frontend › Architecture
프론트엔드와 SOLID 원칙객체 지향 설계 원칙 SOLID(SRP·OCP·LSP·ISP·DIP)를 React 컴포넌트와 함수 위주 JS·TS 코드에 옮겨 본다. 책임은 요구 사항 단위로 나누고, 분기 대신 확장으로 기능을 늘리고, props는 필요한 만큼만 받고, 데이터 소스는 추상화 뒤에 숨긴다.
Frontend › Architecture
Atomic Design과 컴포넌트 폴더 구조Brad Frost의 Atomic Design(원자 → 분자 → 유기체 → 템플릿 → 페이지)은 디자인 시스템을 이해하기 위한 멘탈 모델이지 폴더 구조 규칙이 아니다. 그대로 폴더로 쓰면 분자·유기체 경계가 흐려지고 계층 하나로는 분류가 안 된다. 기획·디자인이 부르는 이름으로 먼저 나누고, 이름이 더 없는 곳부터 계층 구조를 쓰는 절충안을 정리한다.
Frontend › Architecture
Feature-Sliced Design프론트엔드 코드를 레이어 → 슬라이스 → 세그먼트 3단계로 나누고, 위 레이어만 아래 레이어를 쓰게 하며, 슬라이스는 Public API로만 드나들게 하는 아키텍처 방법론. 구조, 규칙, 다른 구조와의 비교, Next.js와 함께 쓸 때의 충돌, 그리고 레이어 경계를 정하고 점진적으로 도입하는 법을 정리한다.
Frontend › Architecture
UI 변경 감지: 상태가 바뀌면 화면은 어떻게 따라 바뀌나UI 프레임워크의 핵심 문제는 상태를 화면으로 투영하고, 상태가 바뀌었을 때 최소한의 DOM만 고치는 것이다. 전부 새로 그리기, 수동 재렌더, 데이터 바인딩(관찰 가능한 모델·Proxy), 더티 체킹(AngularJS digest·zone.js), 가상 DOM 비교, 불변 데이터로 비교 건너뛰기, 시그널, 컴파일러까지 변경을 '언제·어떻게 아는가'로 나눠 비교하고, React Fiber가 렌더링을 쪼개 우선순위를 매기는 방식을 정리한다.
Frontend
CSSHTML 요소의 모양과 배치를 지정하는 스타일 언어.
Frontend › CSS
객체 지향 CSS(OOCSS)구조와 겉모양을 분리하고, 컨테이너와 콘텐츠를 분리해 재사용 가능한 클래스 '객체'로 CSS를 짜는 방법론. 미디어 객체 같은 대표 패턴, 특정도 전쟁을 피하는 규칙, 시맨틱 클래스와의 긴장, 캐스케이드 기본값·타이포그래피 전략·객체 범위 같은 실무 전략과 흔한 오용, BEM·유틸리티 CSS로 이어진 흐름까지.
Frontend › CSS
노치와 폴더블 화면 대응: env()와 뷰포트 세그먼트노치·둥근 모서리·홈 표시줄처럼 화면을 가리는 하드웨어는 viewport-fit=cover와 env(safe-area-inset-*)로 비켜 간다. 두 화면에 걸친 폴더블은 horizontal·vertical-viewport-segments 미디어 기능으로 감지하고 env(viewport-segment-*)로 경첩을 피해 칸을 나눈다. 세그먼트 기능은 아직 실험 단계라 점진적 향상으로만 쓴다.
Frontend › CSS
무한 캐러셀과 자동 슬라이드 구현끝에서 처음으로 자연스럽게 이어지는 캐러셀을 만드는 기법. 양끝에 복제 슬라이드를 붙이고 transitionend에서 전환 없이 제자리로 점프하는 버튼형 캐러셀, 애니메이션 중 연속 클릭 잠금, 페이지 단위 이동, 목록을 두 번 이어 붙여 translateX(-50%)로 흘리는 CSS 마키, @keyframes 퍼센트로 멈춤 구간을 만드는 자동 슬라이드, 가장자리 페이드와 움직임 줄이기까지.
Frontend › CSS
미디어 쿼리 문법과 미디어 기능미디어 쿼리는 미디어 타입(all·screen·print)과 미디어 기능으로 이루어진다. and·or·not과 범위 문법으로 조건을 묶고, 뷰포트 크기·화면 비율·해상도·갱신 속도·표시 모드·색 표현력·입력 장치·사용자 설정·스크립트 여부까지 묻는다. 입력 방식은 화면 크기로 짐작하지 않고 pointer·hover로 직접 묻는다.
Frontend › CSS
박스 모델과 display모든 요소를 content·padding·border·margin의 네모로 다루는 박스 모델, 내용이 크기를 정하는 내재적 크기와 바깥이 정하는 외재적 크기, margin·padding·gap으로 간격을 주는 방법과 margin 병합, 병합과 float를 안에 가두는 블록 서식 맥락(BFC), 배치 방식을 결정하는 display.
Frontend › CSS
반응형 디자인과 다국어 타이포그래피유동 그리드·유동 미디어·미디어 쿼리라는 세 요소에서 출발해 뷰포트 메타 태그, 미디어 쿼리와 브레이크포인트, 부모 크기에 반응하는 컨테이너 쿼리와 미디어 쿼리 없는 레이아웃, 모바일 퍼스트, 해상도와 기기 픽셀 비율, 상대 단위로 화면 크기에 맞추는 법. rem과 :lang()으로 언어마다 글자 크기를 바꾸는 다국어 반응형 타이포그래피까지 다룬다.
Frontend › CSS
쓰기 모드와 논리적 속성writing-mode가 정하는 블록·인라인 축, 그리고 top·left·width 같은 물리 속성 대신 block-start·inline-end·inline-size처럼 글의 흐름을 기준으로 쓰는 논리적 속성. 그리드와 플렉스박스가 왜 start·end로 생각하는지도 여기서 풀린다.
Frontend › CSS
웹 타이포그래피: 가독성, 글줄 길이, 웹폰트사람이 화면의 글을 읽는 방식에서 출발해 글줄 길이(45~85자, ch 단위), 글자 크기와 줄 간격의 균형, x-height를 맞추는 font-size-adjust, 자간·단어 간격과 가변 폰트, 양쪽 정렬과 하이픈, 대비와 다크 모드, 그리고 @font-face로 웹폰트를 선언하는 법까지.
Frontend › CSS
유틸리티 우선 CSS속성 하나짜리 클래스를 조합해 화면을 만들고, 반복이 보일 때만 컴포넌트로 뽑는 CSS 작성 방식. '관심사의 분리'를 의존 방향의 선택으로 다시 보는 관점, 시맨틱 클래스에서 유틸리티까지 넘어가는 단계, 정해진 값만 고르게 해 생기는 일관성, 인라인 스타일과의 차이, 장단점과 Tailwind CSS v4 기준의 현재 사용법을 정리한다.
Frontend › CSS
커서와 포인터 입력입력 장치에 맞춰 상호작용을 알리는 CSS. 상태를 알리는 cursor와 caret-color, 마우스·터치를 구분하는 pointer·any-pointer·hover 미디어 쿼리, 브라우저 기본 제스처를 고르는 touch-action, 상호작용을 끄는 pointer-events를 정리한다.
Frontend › CSS
테마와 다크 모드 구현: theme-color, color-scheme, accent-color테마는 페이지 색만이 아니라 브라우저 UI(theme-color), 브라우저가 그리는 폼·스크롤바(color-scheme), 체크박스·라디오 강조색(accent-color), 아이콘과 사진까지 함께 바꿔야 완성된다. 색 값은 커스텀 속성에 모아 한 번만 재정의하고, 사진은 밝기를 낮추거나 picture로 바꿔 끼운다.
Frontend › CSS
팝오버와 앵커 위치 지정툴팁·드롭다운·토스트를 JS 위치 계산 없이 만드는 두 기능. popover 속성은 auto·manual·hint 세 종류의 열고 닫기 규칙과 최상위 레이어를 주고, CSS 앵커 위치 지정은 anchor-name·position-anchor·position-area·anchor()로 요소를 다른 요소 옆에 붙이며 position-try-fallbacks로 화면 밖으로 나갈 때의 대안 위치를 정한다.
Frontend › CSS
CSS 그리드 레이아웃행과 열을 동시에 다루는 2차원 레이아웃 CSS 그리드의 용어, 핵심 속성, fr·minmax·auto-fill 같은 크기 도구와 명시적·묵시적 그리드, 서브그리드, 그리고 접근성과 플렉스박스와의 역할 분담 같은 실무 원칙.
Frontend › CSS
CSS 기초: 문법, 적용 방법, 단위선택자와 선언으로 이루어진 CSS 문법, 스타일 적용 방법 3가지, 수·퍼센트·절대·상대 길이와 각도·해상도 단위, 그리고 hex·rgb·hsl부터 oklch·display-p3·color()·상대 색상 문법까지의 색 표현, 브라우저 기본 스타일을 맞추는 리셋과 노멀라이즈.
Frontend › CSS
CSS 목록과 카운터목록 항목은 display: list-item이라 ::marker를 가진다. list-style로 기호 종류·위치·이미지를 바꾸고, ::marker로 기호를 직접 꾸미고, @counter-style로 새 번호 체계를 만든다. counter-reset·counter-increment·counter()·counters()로 각주·절 번호·중첩 번호를 매기는 법과 reversed 목록까지 정리한다.
Frontend › CSS
CSS 배경과 그라디언트모든 박스 뒤에는 배경 레이어가 있다. background-color 위에 이미지·그라디언트를 여러 겹 쌓고, repeat·position·size·attachment·origin·clip으로 각 겹을 조절한다. linear·radial·conic 그라디언트와 반복형, 색 공간을 고르는 보간(in oklch)까지 정리한다.
Frontend › CSS
CSS 선택자와 우선순위스타일을 적용할 요소를 고르는 선택자(속성 연산자, 결합자, 상태·위치·폼 가상 클래스, 가상 요소)와 네이티브 CSS 중첩, 스타일이 겹칠 때 무엇이 적용되는지 정하는 캐스케이딩·특정성, 그리고 상속과 inherit·initial·unset·revert·revert-layer 키워드.
Frontend › CSS
CSS 설계 방법론: BEM과 ITCSS전역 범위와 명시도 문제를 규칙으로 다스리는 CSS 방법론. 이름으로 관계를 드러내는 BEM(.block__element--modifier), 파일을 일반→구체 순서의 일곱 층으로 쌓는 ITCSS와 BEMIT 접두사, OOCSS·SMACSS와의 차이를 비교하고, 지금은 @layer·@scope·CSS Modules가 같은 일을 어떻게 나눠 맡는지 정리한다.
Frontend › CSS
CSS 시각 효과: 필터, 블렌드 모드, 클리핑, 마스킹그래픽 도구에서 하던 효과를 CSS로 실시간 적용한다. 요소 픽셀을 바꾸는 filter와 뒤 배경만 바꾸는 backdrop-filter, 겹친 층의 색을 섞는 블렌드 모드와 isolation, 도형으로 보이는 영역을 자르는 clip-path, 이미지 픽셀로 투명도를 정하는 mask, 글이 도형을 따라 흐르게 하는 shape-outside까지 정리한다. 같은 이미지 효과를 필터·블렌드·SVG·캔버스로 걸 때의 비용 차이와, 비표준 반사(-webkit-box-reflect)를 마스크로 대신하는 법도 다룬다.
Frontend › CSS
CSS 실전 팁: 리셋과 작은 패턴프로젝트마다 반복해 쓰는 짧은 CSS 패턴 모음. 새 프로젝트의 출발점이 되는 최소 리셋(box-sizing·margin·line-height·미디어·폼 글꼴)과 all: unset으로 버튼 초기화하기, 쉼표 목록·빈 링크 주소 표시·깨진 이미지 꾸미기·연속 <br> 숨기기 같은 생성 콘텐츠·선택자 패턴, table-layout: fixed와 높이 펼치기 애니메이션, 그리고 다른 노트에 집이 있는 팁의 위치와 이제 쓰지 않는 옛 팁.
Frontend › CSS
CSS 애니메이션: transition과 @keyframes상태 변화를 부드럽게 잇는 transition과, 여러 단계를 스스로 재생하는 @keyframes 애니메이션의 차이와 속성. 부드러운 애니메이션을 위한 transform·opacity 원칙, 움직임 줄이기 설정 존중, Animate.css·Hover.css·Animista 같은 CSS 애니메이션 라이브러리와 JS 라이브러리로 넘어갈 시점을 정리한다.
Frontend › CSS
CSS 오버플로와 스크롤: 넘침 처리와 스크롤 스냅내용이 박스보다 클 때 보일지·자를지·스크롤할지를 정하는 overflow, 한 줄 말줄임을 만드는 text-overflow, 스크롤 영역의 키보드 접근성, 스크롤바 스타일, scroll-behavior와 overscroll-behavior, 갤러리처럼 칸마다 멈추는 스크롤 스냅까지 정리한다.
Frontend › CSS
CSS 점진적 향상: 폴백과 피처 쿼리새 CSS 기능을 지원하지 않는 브라우저를 '똑같이 보이게'가 아니라 '쓸 만하게' 지원하는 방식. 모르는 CSS는 무시된다는 규칙, 새 레이아웃이 옛 레이아웃을 덮어쓰는 규칙, @supports 피처 쿼리로 폴백을 정리하는 패턴, 브라우저 대신 컴포넌트에 매기는 지원 등급, 무거운 폴리필을 피하는 이유, 실제 브라우저 테스트까지.
Frontend › CSS
CSS 커스텀 속성으로 색상 체계 짜기색상 변수를 팔레트·기능 색상·컴포넌트 색상의 세 단계로 나누고 CSS 커스텀 속성으로 연결하면 테마, 다크 모드, 화이트 라벨, 대비 조정이 변수 몇 개만 바꾸는 일이 된다. 전처리기 변수와의 차이, 모든 변수를 :root에 두면 안 되는 이유까지.
Frontend › CSS
CSS 테두리와 그림자테두리는 style을 정해야 보이고, 색은 기본으로 currentColor를 따른다. border-radius의 타원 모서리와 아홉 조각으로 자르는 border-image, 그리고 상자에 붙는 box-shadow, 글자에 붙는 text-shadow, 투명 영역의 윤곽을 따르는 drop-shadow() 필터를 용도별로 비교한다.
Frontend › CSS
CSS 함수: calc()·clamp()와 수학 함수CSS 함수는 인자를 받아 값을 돌려주는 내장 기능이다. 중첩해 쓸 수 있고, `@function`으로 직접 정의하는 기능은 아직 Chromium 계열만 지원한다. 값을 꺼내는 var()·attr()·url(), 단위를 섞어 계산하는 calc()·min()·max()·clamp(), 삼각·지수·부호 함수, 도형 함수, 변형 함수를 용도별로 묶고 브라우저 지원 범위를 정리한다.
Frontend › CSS
CSS Houdini: 렌더링 엔진에 끼어드는 API브라우저 CSS 엔진의 파싱·스타일·레이아웃·페인트·합성 단계에 개발자 코드를 걸 수 있게 하려는 저수준 API 묶음. CSS 폴리필이 왜 어려운지에서 출발해 워크릿, Properties and Values(@property), Typed OM, Paint·Layout·Animation Worklet의 역할과 2026년 기준 지원 상태를 정리한다. 모든 브라우저에 들어간 것은 @property와 일부 Typed OM뿐이다.
Frontend › CSS
CSS position과 z-index요소를 문서 흐름 안팎에서 원하는 위치로 옮기는 position 속성, 쌓임 순서를 정하는 z-index와 쌓임 맥락, 다른 요소에 붙여 배치하는 앵커 위치 지정.
Frontend › CSS
CSS-in-JS와 CSS Modules대규모 CSS의 일곱 가지 문제(전역 이름 공간, 의존성, 죽은 코드, 압축, 상수 공유, 비결정적 우선순위, 격리 깨짐)와 이를 빌드 도구로 푼 CSS Modules, JS로 푼 CSS-in-JS를 비교한다. 런타임 방식에서 빌드 타임(zero-runtime) 방식으로 옮겨 간 이유와 서버 컴포넌트 시대의 선택지까지 정리한다.
Frontend › CSS
CSS가 동작하는 방식: 핵심 개념과 픽셀이 되기까지속성 암기보다 먼저 익혀야 할 CSS의 핵심 개념(캐스케이드·상속·특정도, 박스 모델, 일반 흐름, 서식 맥락, 흐름 안팎, 정렬, 크기 결정)과, 브라우저가 CSS를 해석·캐스케이드·계산해 레이아웃으로 넘기는 과정.
Frontend › CSS
CSS의 역사로 본 CSS가 어려워진 이유문서를 꾸미려고 만든 CSS가 웹 애플리케이션을 만들게 되면서 생긴 두 구조적 문제(전역 범위와 명시도)와, 이를 풀려고 등장한 시맨틱·Sass·BEM·Flexbox·CSS Modules·CSS-in-JS·유틸리티 CSS, 그리고 @layer·@scope·네이티브 중첩처럼 문제를 CSS 스스로 푸는 최근 스펙까지의 흐름을 정리했다.
Frontend › CSS
Float와 Flexbox 레이아웃Normal Flow를 벗어나 요소를 배치하는 float와 flow-root로 float 담기, 축을 기준으로 아이템을 정렬하는 1차원 레이아웃 모델 Flexbox. 속성의 초깃값과 flex 키워드, 내용 기반 공간 분배, auto margin으로 그룹 나누기, 쓰기 모드에 따라 바뀌는 축, min-width: auto 함정, 그리고 글을 여러 단으로 흘리는 다단 레이아웃까지.
Frontend › CSS
line-height와 vertical-align: 글꼴 지표와 인라인 서식 맥락같은 font-size라도 글꼴마다 높이가 다른 이유(em 사각형과 ascent·descent 지표), 인라인 요소의 두 높이(content-area와 line-height가 만드는 가상 영역), 줄 상자(line box)의 높이가 정해지는 방식, line-height: normal의 실제 값, vertical-align이 줄 상자를 키우는 원리와 이미지 아래 틈 같은 증상의 원인.
Frontend › CSS
PostCSS와 CSS 변환 도구CSS를 AST로 파싱해 플러그인으로 변환하는 도구 PostCSS. 기능을 한 덩어리로 묶은 Sass와 달리 필요한 기능만 플러그인으로 고르는 구조, Autoprefixer·postcss-preset-env·browserslist로 브라우저 대상에 맞춰 변환하는 흐름, 미래 문법을 미리 쓸 때의 위험, 그리고 Lightning CSS·Vite·Tailwind v4가 맡은 지금의 역할 분담을 정리한다.
Frontend › CSS
Sass: 파일 구조, 믹스인과 @extendCSS 전처리기 Sass의 쓰임새와 설치, 파셜 파일을 폴더별로 나누는 아키텍처(7-1 패턴), 중첩·파일 크기 규칙, 믹스인과 @extend의 차이와 둘을 합친 DRY 믹스인, @extend로 프레임워크 클래스를 시맨틱한 이름 뒤에 숨기는 법.
Frontend › CSS
transform: 이동·회전·확대·기울이기요소를 문서 흐름에 영향 없이 이동·확대·회전·기울이는 transform 함수들과, top·left 50%에 translate(-50%, -50%)를 더하는 가운데 정렬 패턴.
Frontend › CSS
View Transitions: 화면 전환 애니메이션SPA에서 DOM을 바꾸는 코드를 document.startViewTransition()으로 감싸면 브라우저가 옛 화면을 스냅숏으로 찍고 새 화면과 교차 페이드한다. ::view-transition-old·new·group 가상 요소로 애니메이션을 바꾸고, view-transition-name으로 특정 요소를 이어 움직이고, 전환 유형으로 방향을 나누고, 움직임 줄이기 설정을 존중하는 법을 정리한다.
Frontend
Graphics브라우저가 GPU로 그리는 원리(WebGL·WebGPU·셰이더), Three.js로 그리는 웹 3D, 영상을 투명 배경 애니메이션 아이콘으로 쓰는 방법을 다루는 노트 모음.
Frontend › Graphics
Animated Icon: 영상을 투명 배경 아이콘으로 쓰기Airbnb 스타일 3D 아이콘을 영상으로 만든 뒤, Lava 같은 투명 배경(알파 채널) 애니메이션 포맷으로 바꾸면 앱·웹에서 움직이는 아이콘으로 쓸 수 있다. 포맷별 선택지와 제작 흐름을 정리했다.
Frontend › Graphics
Canvas 2D API<canvas>에 JavaScript로 픽셀을 그리는 즉시 모드 그래픽 API. SVG와의 차이(비트맵 vs DOM), getContext의 종류, 상태 스택과 Path2D, 고해상도 화면에서 흐려지지 않게 devicePixelRatio로 키우는 법, 레이어 분리·오프스크린 미리 그리기·정수 좌표·alpha: false 같은 성능 요령, OffscreenCanvas로 워커에서 그리기, 접근성 한계를 정리한다.
Frontend › Graphics
Three.js로 웹에서 3D 그리기WebGL을 쉽게 쓰도록 감싼 JavaScript 3D 라이브러리 Three.js의 구성 요소(Scene·Camera·Mesh·Renderer)와 활용 사례, 장단점.
Frontend › Graphics
WebGL과 셰이더: 브라우저가 GPU로 그리는 방식브라우저가 GPU에 그림을 그리게 하는 API인 WebGL·WebGPU와, GPU에서 도는 작은 프로그램인 정점 셰이더·프래그먼트 셰이더, 셰이더 언어 GLSL ES·WGSL의 관계를 정리했다. 프론트엔드 개발자는 대개 Three.js 같은 라이브러리로 충분하고, 셰이더는 특수 효과가 필요할 때 배운다.
Frontend › Graphics
WebXR: 브라우저의 VR·AR브라우저에서 VR 헤드셋과 AR 기기에 3D 장면을 보여 주는 WebXR Device API. 세션 종류(inline·immersive-vr·immersive-ar), 기준 공간과 3DoF·6DoF, XR 전용 프레임 루프와 눈마다의 뷰, 입력 소스, AR 모듈(히트 테스트·앵커·DOM 오버레이)을 정리하고, 평면 화면·휴대폰 AR·헤드셋을 한 페이지로 지원하는 점진적 향상과 브라우저 지원 범위, 전신인 WebVR을 다룬다.
Frontend
JavaScript브라우저를 조작할 수 있는 유일한 언어이자, ECMAScript 표준을 따르는 동적 타입 언어.
Frontend › JavaScript
가비지 컬렉션과 메모리 누수JavaScript 엔진은 루트에서 참조를 따라 닿을 수 있는(reachable) 값만 남기고 나머지를 자동으로 회수한다. 루트와 도달 가능성, 서로 참조해도 닿을 수 없으면 지워지는 '섬', 기본 알고리즘 mark-and-sweep과 순환 참조에 약했던 참조 카운팅, 세대별·점진적·병렬·유휴 시간 수집 같은 최적화(V8의 스캐빈지·mark-compact·쓰기 장벽), 그리고 GC가 막지 못하는 누수 패턴(전역, 잊힌 타이머·리스너, 클로저, 떨어져 나간 DOM, 끝없는 캐시)과 WeakMap·WeakRef·FinalizationRegistry를 정리한다.
Frontend › JavaScript
객체 지향 프로그래밍과 JavaScriptgoto → 절차적 프로그래밍 → 구조체 → 클래스로 이어지는 흐름에서 객체 지향이 왜 나왔는지, 캡슐화·상속·추상화·다형성이 무엇을 풀었는지 정리하고, 클래스 없이 프로토타입과 일급 함수로 OOP를 흉내 낸 JavaScript에서는 객체 지향과 함수형의 균형을 잡는 것이 핵심이라는 결론을 다룬다.
Frontend › JavaScript
객체의 원시형 변환객체가 연산자나 문자열 자리에 오면 엔진은 먼저 원시값으로 바꾼 뒤 계산한다. 불리언 변환은 늘 true이고, 숫자·문자열 변환은 hint(string·number·default)에 따라 Symbol.toPrimitive → toString/valueOf 순서로 메서드를 찾는다. 연산자별 hint, 기본 객체·배열·Date의 동작, [] + {}와 [] == false 같은 결과의 이유, 직접 구현할 때의 규칙을 정리한다.
Frontend › JavaScript
구조 분해 할당배열·이터러블은 순서로, 객체는 이름으로 값을 꺼내 변수에 담는 문법. 건너뛰기와 나머지(rest), undefined일 때만 쓰이고 필요할 때만 평가되는 기본값, 이름 바꾸기, 중첩 패턴, 이미 선언한 변수에 할당할 때의 괄호, 두 변수 교환, entries와 함께 도는 반복, 그리고 매개변수 객체를 분해하는 '똑똑한 함수 매개변수'와 = {} 기본값을 정리한다.
Frontend › JavaScript
날짜 라이브러리: date-fns와 Day.js기본 Date 다루기(타임스탬프, 생성자 네 형태, 날짜만 쓴 ISO 문자열은 UTC라는 함정, get·set과 범위를 넘으면 넘겨 주는 자동 고침, 빼기로 재는 시간 차, Date.now와 performance.now), 0부터 시작하는 월과 그 유래, 유지보수 모드에 들어간 Moment.js 대신 많이 쓰는 date-fns(함수형·트리 셰이킹)와 Day.js(초경량·Moment 호환 API)의 사용법 비교, 그리고 Date를 대체할 표준 API Temporal의 지원 현황.
Frontend › JavaScript
데코레이터와 콜 포워딩함수를 고치지 않고 감싸서 동작을 더하는 데코레이터 함수. 캐싱 래퍼로 보는 기본 모양, 감싼 메서드가 this를 잃는 문제와 func.call(this, ...args)로 넘기는 콜 포워딩, call과 apply의 차이, 여러 인자를 키 하나로 바꾸는 해시, 유사 배열에 배열 메서드를 빌려 쓰는 메서드 빌리기, 래퍼가 원래 함수의 속성을 잃는 한계를 정리한다. 부분 적용은 함수형 프로그래밍 노트에 있다.
Frontend › JavaScript
모듈: export와 import, export defaultES 모듈의 named·default export와 여러 import·다시 내보내기 형태, 모듈 스코프·한 번만 평가·라이브 바인딩·import.meta 같은 성질, 브라우저에서 모듈 스크립트로 쓰는 법(defer, async, CORS)과 동적 import(), import attributes로 JSON 가져오기, CommonJS와의 관계(exports와 module.exports, AMD·UMD 비교), default와 named 중 무엇을 쓸지에 대한 논쟁. 로드 3단계(구성·연결·평가), CommonJS 래퍼 함수와 Node.js의 형식 판별·상호 운용 규칙까지.
Frontend › JavaScript
문(Statement)과 식(Expression)식은 값을 만들어 내는 코드이고, 문은 무언가를 하라는 명령이다. 문에는 식을 끼우는 자리가 있고, 식은 늘 어떤 문 안에 있다. 블록 문과 그룹 연산자, 세미콜론과 자동 세미콜론 삽입(ASI) 규칙과 함정. 함수 인자, 화살표 함수의 간결한 본문, JSX의 중괄호는 식만 받는 자리라서 if·for 대신 삼항 연산자·map을 쓴다.
Frontend › JavaScript
문자열 다루기JavaScript 문자열은 UTF-16 코드 단위의 나열이고 바꿀 수 없는 원시값이다. 따옴표와 이스케이프, 백틱 템플릿 리터럴(여러 줄·표현식 삽입·중첩)과 styled-components의 바탕인 태그드 템플릿, 글자 접근(at·charAt), 검색(includes·indexOf와 0의 함정), 부분 문자열(slice·substring·substr의 차이), 대소문자·공백·패딩, 유니코드 순 비교와 localeCompare·Intl.Collator, 서로게이트 쌍과 코드 포인트, normalize로 맞추는 유니코드 정규화, 짝 잃은 서로게이트를 찾는 isWellFormed까지 정리한다.
Frontend › JavaScript
바이너리 데이터와 파일: ArrayBuffer, Blob, FileJavaScript가 바이트를 다루는 층위를 정리한다. 메모리 덩어리 ArrayBuffer와 그것을 읽는 뷰(TypedArray·DataView), 문자열과 바이트를 잇는 TextEncoder·TextDecoder, 타입이 붙은 불변 바이너리 Blob과 그 하위 File, 그리고 Blob을 화면·다운로드·업로드에 쓰는 object URL·data URL·FileReader·Promise 메서드까지.
Frontend › JavaScript
반응형 프로그래밍과 RxJS반응형 프로그래밍은 데이터 흐름과 변경 전파에 초점을 둔 선언적 패러다임이다. 스프레드시트와 웹 프레임워크로 개념을 잡고, Pull에서 Push로, 제어의 역전으로 비동기를 단순하게 보는 법, 이벤트를 배열처럼 다루는 RxJS의 Observable과 연산자, 실무에서 막히는 소스 만들기와 Hot·Cold, Vue·MobX·시그널이 쓰는 의존성 추적(읽을 때 구독, 쓸 때 통지)의 원리를 정리한다.
Frontend › JavaScript
배열·객체 다루기배열의 주요 메서드, length가 가장 큰 인덱스 + 1인 이유와 shift가 느린 이유, 배열 리터럴과 new Array(n)의 빈 슬롯(희소 배열), Array.from 같은 정적 메서드, 원본을 바꾸는 메서드와 바꾸지 않는 메서드(slice·toSorted·with), sort 비교 함수, 콜백을 받는 헬퍼 메서드와 콜백을 만드는 함수, reduce로 세기·묶기, 객체 리터럴과 키가 문자열로 바뀌는 규칙, 속성 접근과 Object.keys·entries, in·Object.hasOwn으로 속성 확인, spread의 얕은 복사가 빠뜨리는 것, rest, 형식화 배열. 문자열·구조 분해·JSON은 각자의 노트로 나눴다.
Frontend › JavaScript
번들러의 역사와 Vite모듈 없이 태어난 JavaScript가 CommonJS·AMD·ES 모듈을 거쳐 번들러를 필요로 하게 된 이유, 번들러의 느린 빌드를 네이티브 언어 도구와 '개발은 쪼개서, 배포는 합쳐서' 방식이 풀고, Vite가 그 개념을 모아 Rust 번들러 Rolldown 기반의 표준 빌드 도구가 되기까지를 정리했다.
Frontend › JavaScript
변수와 데이터 타입식별자 규칙과 이름 짓기, let·const·var의 차이와 호이스팅, 원시 타입과 참조 타입, 원시값의 래퍼 객체(new String을 쓰지 않는 이유), typeof, null과 undefined의 구분, 값 복사와 참조 공유(비교·얕은 복사·structuredClone·함수 인자·const와 Object.freeze), 스택·힙과 가비지 컬렉션, 동적 타입과 여덟 가지 타입, 대문자 상수를 쓰는 때와 변수를 재사용하지 않는 이유.
Frontend › JavaScript
브라우저에서 JavaScript가 동작하는 원리: 이벤트 루프싱글 스레드인 JavaScript가 렌더링과 나눠 쓰는 메인 스레드, 실행 컨텍스트가 쌓이는 콜 스택, Web API, 태스크·마이크로태스크 큐, 이벤트 루프의 협업으로 화면을 멈추지 않고 비동기 작업을 처리하는 방식. 태스크 하나 → 마이크로태스크 전부 → 렌더링 순서의 한 바퀴, queueMicrotask, 긴 작업 쪼개기·진행률 표시·이벤트 처리 뒤로 미루기, 무거운 일을 메인 스레드 밖으로 빼는 Web Worker.
Frontend › JavaScript
비동기 처리: 콜백과 Promise언제 끝날지 모르는 비동기 작업의 결과를 다루는 콜백 함수(오류 우선 콜백)와 Promise. 상태와 핸들러 규칙, 체이닝과 에러 전파(암시적 try...catch, 다시 던지기, thenable), 처리되지 않은 거부, 콜백 API를 Promise로 감싸는 프로미스화(wait, promisify), all·allSettled·race·any·resolve·try로 여러 Promise를 조합하는 법.
Frontend › JavaScript
속성 설명자(Property Descriptor)객체의 모든 속성에는 값 말고도 writable·enumerable·configurable 같은 숨은 설정이 붙어 있다. 데이터 속성과 접근자(getter·setter) 속성의 차이, Object.defineProperty의 기본값이 리터럴과 정반대라는 점, enumerable이 for...in·Object.keys·spread·JSON에 미치는 영향, Object.create의 두 번째 인자, preventExtensions·seal·freeze의 차이를 정리한다.
Frontend › JavaScript
숫자와 MathJavaScript의 숫자 타입 하나(double)로 생기는 일: 지수·진법 리터럴과 toString(base), 산술·나머지·거듭제곱 연산자, Math의 반올림·무작위 수, 문자열을 숫자로 바꾸는 방법의 차이, NaN이 생기는 경우와 Infinity 판별, 0과 -0을 가르는 Object.is, 0.1 + 0.2 오차와 돈은 정수 최소 단위로 다루는 원칙, 안전한 정수 범위를 넘는 BigInt, Intl.NumberFormat으로 표시하기.
Frontend › JavaScript
스코프와 클로저변수를 어디서 쓸 수 있는지 정하는 스코프(전역·모듈·함수·블록)와 globalThis, 안쪽에서 바깥으로 찾아가는 스코프 체인과 섀도잉, 정의된 위치로 정해지는 렉시컬 스코프, 선언이 끌어올려지는 호이스팅과 TDZ, var가 블록을 무시하는 동작, 렉시컬 환경과 함수가 기억하는 태어난 환경으로 설명하는 클로저의 원리, 클로저의 쓰임새(함수 공장, private 상태)와 메모리·디버깅 주의점을 정리했다.
Frontend › JavaScript
실행 컨텍스트엔진이 코드를 실행할 때 만드는 실행 단위인 실행 컨텍스트를 정리한다. 전역·함수·eval·모듈 컨텍스트와 실행 컨텍스트 스택(콜 스택), LexicalEnvironment·VariableEnvironment·PrivateEnvironment와 this가 담기는 자리, 선언을 먼저 등록하는 생성 단계와 값을 채우는 실행 단계, 그 결과로 생기는 호이스팅·TDZ·스코프 체인·var의 블록 무시를 한 흐름으로 묶는다. 선언적·객체 환경 레코드와 with·eval이 최적화를 깨는 이유, 매개변수 기본값이 만드는 별도 스코프, 클로저가 푸는 funarg 문제, ES3의 변수 객체(VO)·활성 객체(AO) 용어와의 대응까지 다룬다.
Frontend › JavaScript
에러 처리: try...catch와 커스텀 에러JavaScript 언어 차원의 에러 처리. try...catch...finally가 잡는 것과 못 잡는 것(문법 에러, 예약된 콜백), 에러 객체의 name·message·stack·cause, 내장 에러 종류, throw와 다시 던지기, finally와 return의 우선순위, Error를 상속한 커스텀 에러와 계층, cause로 예외 감싸기, 전역 에러 이벤트, 에러를 삼키지 않고 클라이언트에서 수집해 보내는 법까지.
Frontend › JavaScript
연산자와 제어문연산자 우선순위와 그룹 연산자, 단항 +·전위/후위 증감·할당의 반환값·쉼표 연산자, 형변환(coercion)과 truthy·falsy, == vs ===(그리고 == true가 불리언 비교가 아닌 이유), 단축 평가와 ?.·??, 논리 할당 &&=·||=·??=, 삼항 연산자, if의 평가 순서와 early return, switch의 fall through와 case 스코프, for·for...in·for...of·while·do...while·forEach 반복문.
Frontend › JavaScript
요소 크기·스크롤·좌표JavaScript로 요소와 창의 크기·스크롤·위치를 읽고 바꾸는 법. offset·client·scroll 계열 기하 속성이 각각 무엇을 재는지, CSS width 대신 기하 속성을 읽는 이유, 창 크기와 문서 높이, scrollTo·scrollIntoView와 스크롤 막기, 창 기준(clientX·getBoundingClientRect)과 문서 기준(pageX) 좌표, elementFromPoint를 정리한다.
Frontend › JavaScript
이터레이터와 제너레이터for...of·spread·구조 분해가 공통으로 쓰는 약속인 이터러블·이터레이터 프로토콜(Symbol.iterator와 next()의 { value, done }), 직접 iterable 만들기, 실행을 멈췄다 이어 가는 제너레이터 함수(function*, yield, next(값)으로 값 돌려보내기, return, yield*), 게으른 무한 수열, ES2025 이터레이터 헬퍼와 비동기 이터레이션을 정리한다.
Frontend › JavaScript
자바스크립트 패키지 매니저: npm, yarn, pnpm패키지 설치·업데이트·의존성 관리를 맡는 패키지 매니저의 기본(dependencies와 devDependencies, npm 스크립트, 패키지 고르는 법), npm·yarn·pnpm(그리고 Bun)의 차이와 고르는 기준, packageManager 필드와 Corepack, 설치 스크립트 차단 같은 공급망 보안 기본값, npm EINTEGRITY 오류의 원인과 해결.
Frontend › JavaScript
자바스크립트에서 타임존 다루기타임존은 오프셋이 아니라 한 지역의 표준시·서머타임 변경 이력 전체이고, 표준은 IANA tz database다. JS의 Date는 OS의 로컬 타임존에 묶여 있어 오프셋을 더하고 빼는 방식으로는 다른 타임존의 날짜 연산을 정확히 할 수 없다.
Frontend › JavaScript
작은 모듈 철학과 npm 의존성의 비용한 가지 일만 하는 작은 모듈을 조합한다는 Node.js·npm의 유닉스 철학과, 한 줄짜리 패키지까지 의존성으로 들이는 하이퍼 모듈화를 둘러싼 찬반을 정리한다. left-pad 삭제(2016)가 바꾼 npm 정책, 의존성 트리가 깊어질수록 커지는 공급망 위험, 표준 API가 작은 패키지를 대체해 온 흐름, 지금 의존성을 들일 때의 판단 기준까지.
Frontend › JavaScript
정규 표현식: 문법·플래그·메서드JavaScript 정규 표현식을 사전처럼 찾아보는 표 모음. 문자 클래스·세트·앵커·수량자·그룹·역참조·대안·전후방탐색 문법, g·i·m·s·u·v·y·d 플래그, match·matchAll·replace·split·exec·test의 반환값과 lastIndex 함정, 명명된 그룹과 중복 이름, v 플래그의 집합 연산, d 플래그의 indices, 인라인 플래그 수정자, 사용자 입력을 안전하게 넣는 RegExp.escape까지.
Frontend › JavaScript
책임감 있는 자바스크립트JS는 압축해도 파싱·실행 비용이 그대로 남아 저사양 기기에서 가장 비싼 자원이다. 웹 플랫폼(HTML·CSS)을 먼저 쓰고, 트리 셰이킹·코드 분할·최신 문법 빌드·작은 대체재로 줄이고, 서드파티 스크립트는 담당자를 두고 관리한다. 성능은 저사양 Android와 느린 4G, 표준 지원은 Baseline으로 기준을 잡는다.
Frontend › JavaScript
타이머: setTimeout과 setIntervalsetTimeout은 한 번, setInterval은 반복해서 콜백을 예약한다. 예약은 비동기라 다음 줄이 먼저 돈다. 반환된 ID를 저장해야 clearTimeout·clearInterval로 취소할 수 있고, 지연 시간은 최소 대기일 뿐이다. 즉시 시작하는 interval, 재귀 setTimeout, Promise로 감싼 sleep, 애니메이션용 requestAnimationFrame, React에서의 정리까지.
Frontend › JavaScript
페이지 생명주기와 리소스 로딩 이벤트문서가 열리고 닫히는 동안 일어나는 이벤트. DOMContentLoaded가 기다리는 것과 기다리지 않는 것, load와 readyState, 떠날 때의 beforeunload·pagehide·visibilitychange와 숨은 탭의 rAF 정지·타이머 제한, 피해야 할 unload, sendBeacon·keepalive로 마지막 데이터 보내기, 스크립트·이미지의 load·error 이벤트와 crossorigin 속성으로 다른 출처 스크립트의 오류 정보 얻기를 정리한다.
Frontend › JavaScript
폼 컨트롤과 포커스 이벤트JavaScript로 폼을 다루는 DOM API. document.forms와 form.elements로 컨트롤 찾기(라디오 묶음, fieldset, form.name 단축 표기의 함정), value·checked·select의 옵션 다루기, focus·blur와 버블링하는 focusin·focusout, change·input·beforeinput·클립보드 이벤트의 차이, 폼 submit 이벤트를 듣는 이유를 정리한다. 제출 동작 자체는 폼 제출 노트에 있다.
Frontend › JavaScript
프로토타입과 상속JavaScript 객체는 프로토타입 객체에 연결되어, 자기에게 없는 속성을 그 체인을 따라 찾는다. 클래스와 다른 철학적 뿌리(분류 대 가족 유사성·원형), 생성자 함수와 new가 하는 일, F.prototype과 constructor, 인스턴스 속성과 프로토타입 메서드의 구분, 프로토타입 체인과 섀도잉, 읽기만 체인을 타는 규칙, 내장 객체의 프로토타입, Object.create와 getPrototypeOf, __proto__의 역사와 프로토타입 오염, instanceof와 타입 확인, class 문법이 프로토타입 코드로 어떻게 풀리는지, 내장 프로토타입을 고치면 안 되는 이유와 폴리필을 정리했다.
Frontend › JavaScript
함수와 this함수 선언식·표현식(이름 있는 함수 표현식)·화살표 함수·IIFE(식 자리에 문장 쓰기)·메서드·new Function, 블록 안 함수 선언의 스코프, 함수도 객체라는 점(name·length·커스텀 속성), 매개변수와 인자(호출마다 평가되는 기본값·arguments·rest·spread), return과 early return, 이름 짓기, 생성자 함수(new.target·return 규칙)와 팩토리 함수, 호출 방식에 따라 달라지는 this(전역·암묵적·명시적·new·이벤트 핸들러), 화살표 함수에 없는 것들, bind·call·apply와 이벤트 리스너에 메서드를 넘길 때의 함정, 재귀와 콜 스택 깊이.
Frontend › JavaScript
함수형 프로그래밍함수형 프로그래밍을 순수 함수·불변성·선언적 패턴이라는 학술 용어 대신 액션·계산·데이터 구분, 카피 온 라이트와 방어적 복사, 계층형 설계와 추상화 벽으로 다시 읽고, 인자를 미리 채워 함수를 특수화하는 커링과 부분 적용을 다룬다. 액션에서 계산을 빼내 테스트하기 쉬운 코드를 늘리고, 상태·변경·효과를 줄이고 모으고 미루는 리팩터링, 효과를 데이터로 반환하는 기법, 로직을 데이터로 적는 데이터 주도 프로그래밍, 프론트엔드의 요구사항을 입력에서 화면까지의 파이프라인으로 보는 법을 정리한다. 구조적 공유(영속 자료구조), data-last·자동 커링 라이브러리 규칙, 어플리커티브와 지연 Future, 대수적 데이터 타입까지.
Frontend › JavaScript
AJAX와 HTTP 요청페이지를 새로고침하지 않고 서버와 비동기로 데이터를 주고받는 AJAX. fetch의 Response·본문 형식·FormData, URL·URLSearchParams, 스트림으로 읽는 다운로드 진행률과 업로드 진행률, AbortController 취소·타임아웃, 나머지 fetch 옵션(credentials·cache·keepalive 등), 업로드 재개, axios, 자주 만나는 오류, 클라이언트에서 보이는 CORS와 프록시, 브라우저 코드가 공개된다는 전제의 API 키 관리.
Frontend › JavaScript
async/await와 비동기 에러 처리Promise를 동기 코드처럼 읽히게 해 주는 async/await 문법, 순차·동시 실행과 반복문 안의 await, try/catch·호출 시점 catch·고차 함수로 나누는 에러 처리, 실무에서 주의할 점.
Frontend › JavaScript
class 문법ES6 class로 객체의 틀을 정의하는 방법: 선언과 표현식(익명 클래스, TDZ), constructor, 계산된 메서드 이름, 인스턴스·정적 멤버, 클래스 필드와 #private 필드·메서드, _ 관례로 흉내 내는 protected, 정적 초기화 블록, new this를 쓰는 정적 팩토리 메서드, extends와 super(파생 constructor가 super()를 먼저 불러야 하는 이유, 필드 오버라이딩의 함정, HomeObject), 내장 클래스 확장과 Symbol.species, getter·setter, 프론트엔드에서 클래스를 꺼낼 때(관련 함수·데이터 묶기, 값 객체). class가 단순한 문법적 설탕이 아닌 지점(strict mode, new 강제, 열거 불가 메서드)까지.
Frontend › JavaScript
Debounce와 Throttle연속으로 일어나는 이벤트의 실행 횟수를 줄이는 두 기법. 디바운스는 마지막 호출만, 쓰로틀은 일정 간격마다 한 번만 실행한다.
Frontend › JavaScript
DOM 이벤트: 전파, 위임, 커스텀 이벤트DOM 이벤트는 캡처 → 타깃 → 버블 순서로 트리를 오간다. 핸들러를 붙이는 세 방법(HTML 속성·on 속성·addEventListener)과 handleEvent 객체, target과 currentTarget의 차이, 전파·기본 동작 제어와 stopPropagation 대신 defaultPrevented로 알리기, 부모 하나로 자식 이벤트를 받는 이벤트 위임과 data 속성 행동 패턴, once·passive·signal 옵션, Event·CustomEvent 생성과 dispatchEvent의 동기 실행, 바깥 클릭 감지 패턴을 정리한다.
Frontend › JavaScript
DOM 조작JavaScript로 DOM 요소를 선택·탐색하고(live·static 컬렉션, 표 탐색 속성), 노드의 내용(innerHTML+=의 함정, outerHTML 대입, textContent)을 다루고, 속성(property)과 어트리뷰트(attribute)의 동기화 규칙, 클래스와 인라인 스타일·계산된 스타일을 읽고 쓰고, 요소를 만들어 원하는 위치에 넣고 지우는 방법. 문자열 HTML을 넣는 법과 위험, 리플로우를 줄이는 일괄 삽입까지 다룬다.
Frontend › JavaScript
ECMAScript 표준과 TC39 프로세스JavaScript의 표준 ECMA-262를 누가 어떻게 정하는지 정리한다. ECMA International과 TC39, 제안이 Stage 0부터 4까지 올라가 매년 새 판(ES2015, ES2016 …)에 실리는 과정, ES6와 ES2015 같은 이름 규칙, ES2015~ES2021 판별 주요 기능, ES2022의 클래스 필드·top-level await·at()·Object.hasOwn부터 ES2026까지의 주요 추가 기능, Java와 무관한 이름과 실행 환경별 제약, 표준 내장 객체와 호스트 객체, 명세·MDN 같은 참고 자료, 새 기능을 옛 환경에서 쓰는 트랜스파일러와 폴리필을 다룬다.
Frontend › JavaScript
ESLint와 Prettier 설정코드 품질은 ESLint가, 모양은 Prettier가 맡도록 역할을 나누고 둘이 충돌하지 않게 연결하는 방법. VS Code 저장 시 자동 수정, flat config(eslint.config.js) 읽는 법과 ESLint 10에서 제거된 .eslintrc와의 대응, husky + lint-staged로 커밋 직전에 스테이징된 파일만 검사하는 법까지. React·Vue·React Native 어디서나 절차는 같다.
Frontend › JavaScript
JavaScript 디자인 패턴: 생성 패턴객체를 만드는 방식을 다루는 생성 패턴 중 생성자·모듈·싱글톤·프로토타입 패턴을 JavaScript 코드로 정리하고, 프로토타입 기반 언어라서 달라지는 점을 짚는다. 단일 상속을 보완해 여러 클래스에 동작을 섞어 넣는 믹스인(Object.assign 방식, 클래스 팩토리 방식, 이벤트 믹스인)과 관찰자 패턴을 독립 클래스로 만든 이벤트 이미터 구현도 함께 다룬다.
Frontend › JavaScript
JavaScript 애니메이션: requestAnimationFrame과 Web Animations APICSS로 부족한 애니메이션을 JavaScript로 만드는 두 방법. requestAnimationFrame 위에 duration·timing·draw로 나눈 범용 animate 함수를 짜고, 타이밍 함수(power·back·bounce·elastic)와 easeOut·easeInOut 변환을 직접 만든다. 브라우저 엔진을 그대로 쓰는 element.animate()는 재생 제어, finished 프로미스, commitStyles, 스크롤 타임라인을 준다.
Frontend › JavaScript
JavaScript 주석: 쓰는 법과 네 가지 문법무엇을 주석으로 쓰고 무엇을 코드로 말할지(무엇·어떻게 대신 왜, 함수 추출, JSDoc), 그리고 ECMAScript 명세에 정의된 주석 네 가지(//, /* */, #! 해시뱅, <!-- --> HTML 유사 주석)의 문법과 동작, 유래를 정리한다. 주석은 공백처럼 취급되지만 줄바꿈을 품은 여러 줄 주석은 줄바꿈으로 취급되고, 나머지 두 형식은 인터프리터 지정과 옛 브라우저 호환을 위해 생겼다.
Frontend › JavaScript
JSON: stringify와 parseJSON은 언어와 무관한 데이터 교환용 텍스트 형식이다. 문법 규칙(큰따옴표, 주석 없음), JSON.stringify가 빠뜨리거나 바꾸는 값(undefined·함수·Symbol·NaN·Date·Map)과 순환 참조·BigInt 오류, replacer·space·toJSON으로 직렬화를 조절하는 법, JSON.parse의 reviver로 Date를 되살리는 법, 큰 정수를 지키는 source 접근과 JSON.rawJSON, 깊은 복사용으로는 structuredClone을 쓰는 이유까지 정리한다.
Frontend › JavaScript
Map과 SetMap은 어떤 값이든 키로 쓰고 넣은 순서를 지키는 키-값 컬렉션, Set은 중복 없는 값의 모음이다. 일반 객체와 비교해 언제 무엇을 쓸지, 주요 메서드와 순회, 객체와 서로 바꾸기, JSON으로 보낼 때의 제약, WeakMap·WeakSet, ES2025의 Set 집합 연산까지.
Frontend › JavaScript
MutationObserverDOM 트리의 변화(자식 추가·삭제, 속성, 텍스트)를 지켜보다 모아서 알려 주는 MutationObserver. observe 옵션(childList·subtree·attributes·characterData·attributeFilter·oldValue), MutationRecord의 내용, 서드파티 스크립트가 넣는 DOM에 반응하기와 동적으로 들어온 콘텐츠를 한곳에서 처리하는 쓰임, takeRecords·disconnect, 마이크로태스크로 전달되는 특성과 무한 루프 주의, 폐기된 뮤테이션 이벤트를 정리한다.
Frontend › JavaScript
npm install이 하는 일: 내 컴퓨터와 앱에 생기는 변화npm으로 패키지를 설치하면 레지스트리에서 코드를 받아 캐시·node_modules·lock 파일에 쓰고, 설치 스크립트를 내 권한으로 실행하고, 명령을 PATH에 연결한다. 로컬·전역 설치가 컴퓨터의 어디를 바꾸는지, 앱의 코드·번들·배포에 무엇이 들어가는지, 되돌리는 법을 정리한다.
Frontend › JavaScript
Proxy와 Reflect객체에 가해지는 읽기·쓰기·in·delete·호출·new 같은 기본 동작을 트랩으로 가로채는 Proxy와, 그 동작을 원래 객체에 그대로 넘기는 Reflect. 기본값·검증·가상 속성·함수 래퍼 같은 쓰임, getter 상속에서 receiver가 필요한 이유, 내부 슬롯·private 필드·동일성 비교에서 생기는 한계, Vue·Immer 같은 라이브러리가 Proxy를 쓰는 방식을 정리한다.
Frontend › JavaScript
Selection과 Range문서의 일부를 가리키는 Range(시작·끝 경계점)와 사용자의 현재 선택을 나타내는 Selection(anchor·focus). Range를 만들고 내용 지우기·복제·감싸기, 선택 읽기와 바꾸기, selectionchange 이벤트, input·textarea 전용 선택 API(selectionStart·setSelectionRange·setRangeText)로 커서 위치 다루기, 선택 막기, DOM을 바꾸지 않고 칠하는 CSS Custom Highlight API를 정리한다.
Frontend › JavaScript
SharedArrayBuffer와 Atomics: JavaScript의 공유 메모리 병렬 처리워커끼리 메시지 복사 없이 같은 메모리를 읽고 쓰게 하는 SharedArrayBuffer와, 그 메모리를 경쟁 상태 없이 다루는 Atomics(load·store·add·compareExchange·wait·notify)를 정리한다. 메시지 전달·소유권 이전·공유 메모리의 차이, Spectre 이후 교차 출처 격리(COOP·COEP)가 필수가 된 이유, 메인 스레드에서 wait 대신 waitAsync를 쓰는 규칙, 언제 병렬화가 값을 하는지까지.
Frontend › JavaScript
strict mode(엄격 모드)ES5가 하위 호환을 깨지 않고 언어의 오래된 함정을 막으려고 만든 선택적 규칙 집합. 파일·함수 맨 앞의 "use strict"로 켜고, ES 모듈과 class 본문은 자동으로 켜진다. 암묵적 전역, 조용한 실패, this의 전역 객체 대체, 블록 밖으로 새는 함수 선언 같은 동작이 에러나 더 엄격한 규칙으로 바뀐다.
Frontend › JavaScript
SymbolSymbol은 만들 때마다 세상에 하나뿐인 값이 되는 원시 타입이다. 다른 코드와 겹치지 않는 속성 키로 쓰고, 일반 순회와 JSON에서는 숨겨진다. 설명(description)과 고유성, 전역 레지스트리의 Symbol.for·keyFor, 언어의 내장 동작을 여는 well-known symbol(Symbol.iterator·toPrimitive·toStringTag 등)을 정리한다.
Frontend › JavaScript
TypeScript 실용 패턴구조적 타입 위에서 자주 쓰는 TypeScript 패턴을 모았다. 브랜드 타입으로 명목 타이핑 흉내 내기, enum 대신 as const 객체, 예외 대신 Result 유니언 반환, 클래스를 합성하는 믹스인, 이벤트 맵으로 만드는 타입 안전 이벤트 이미터, 인스턴스화 표현식으로 제네릭 특수화, 배열 만들기·커링·정적 초기화 블록 같은 작은 관용구까지 코드와 함께 정리한다.
Frontend › JavaScript
TypeScript 오류 메시지 읽기와 흔한 오류TypeScript 오류는 한 줄 요약과 「왜?」를 따라 내려가는 상세 사슬로 되어 있다. 사슬을 맨 아래부터 읽는 법, TS 코드로 검색하는 법, 자주 만나는 오류 코드(TS2322·2345·2339·2304·2307·7006·18048·2353·2741·2352·1196 등)의 원인과 해결, 리터럴 넓히기·빈 객체 초기화 같은 흔한 함정, 오류를 덮는 방법의 우선순위와 진단용 컴파일러 플래그를 정리한다.
Frontend › JavaScript
TypeScript 컴파일러 내부 구조TypeScript 컴파일러는 스캐너(토큰) → 파서(AST) → 바인더(심볼) → 체커(타입 검사) → 이미터(JS·.d.ts·소스맵) 순으로 일한다. 문법과 의미의 차이, Program·SourceFile·Node·SyntaxKind, 주석을 담는 트리비아, 심볼과 심볼 테이블·컨테이너, 지연 검사와 진단의 종류, 소스맵, Go로 옮긴 TypeScript 7에서 달라진 점을 정리한다.
Frontend › JavaScript
TypeScript 코딩 컨벤션TypeScript 팀 컨벤션 문서의 규칙을 주제별로 묶었다. 이름 짓기, 타입, 선언, 클래스, 표현식, 제어문, 함수, 에러 처리, 내장 객체, 모듈 규칙을 필수·권장과 이유까지 함께 정리하고, 중괄호·줄 길이·빈 줄·중첩 줄이기·헬퍼 함수 위치 같은 코드 모양과 유지보수를 괴롭히는 패턴(닌자 코드) 목록을 더했다. Airbnb JavaScript 스타일 가이드의 객체·함수·형 변환 규칙과, 공개 스타일 가이드끼리 갈리는 지점(export default, for...of, ++, getter, 약어 표기)도 비교했다.
Frontend › JavaScript
TypeScript 타입 연산: 타입으로 타입 만들기기존 타입에서 새 타입을 계산하는 TypeScript의 연산을 정리한다. keyof·typeof·인덱스 접근으로 타입을 꺼내고, 매핑 타입으로 속성을 순회하며 수식어를 붙이거나 떼고 키를 바꾸고, 조건부 타입과 infer로 분기·추출하며, 유니언을 만나면 분배된다는 규칙과 [T]로 막는 법, 템플릿 리터럴 타입의 조합, 유틸리티 타입을 직접 구현하는 법까지.
Frontend › JavaScript
TypeScript 타입 호환성: 어떤 값을 어디에 대입할 수 있나TypeScript의 타입은 값의 집합이고, 대입은 좁은 집합을 넓은 집합에 넣는 일이다. 구조적 타이핑과 잉여 속성 검사, 유니언·인터섹션의 넓이, 객체 인터섹션과 원시 인터섹션의 차이, 튜플·readonly 배열, 함수 대입의 공변·반공변·이변성, interface extends와 &의 충돌 처리, 유니언 객체가 섞이는 문제와 구분자를 정리한다.
Frontend › JavaScript
TypeScript 프로젝트 설정: tsconfig·모듈 해석·선언 파일tsconfig.json이 정하는 컴파일 컨텍스트와 TypeScript 6·7의 새 기본값(strict, esnext, types: []), strict 계열 옵션, 파일 모듈과 전역 스크립트, moduleResolution bundler·nodenext, verbatimModuleSyntax와 타입 전용 import, 타입·값 선언 공간, declare·.d.ts·declare global·lib·@types로 바깥 코드를 설명하는 법, JS에서 옮겨 오는 순서를 정리한다.
Frontend › JavaScript
TypeScript: 개념과 문법 한눈에 보기TypeScript는 JavaScript에 타입 검사와 자동완성을 더한 슈퍼셋이다. JavaScript가 정적 타입을 얻기까지의 역사와 흔한 오해, 실행 환경(tsc·Go로 다시 쓴 TypeScript 7·Vite·Node.js 타입 제거), 기본 타입과 any·unknown·never, 추론·단언·가드·satisfies, type과 interface, 제네릭, 함수 오버로드와 클래스 수식어, 모듈과 @types, 구분된 유니언, 표준 데코레이터(예전 방식과의 차이, 적용 순서), 유틸리티 타입을 표 중심으로 정리하고, 추론 → API 스키마 → 좁히기 → strict 순으로 익히는 순서를 덧붙인다.
Frontend › JavaScript
TypeScript로 동적인 코드에 정적 타입 입히기Express식 라우터를 예로, 리터럴 유니온·never 완전성 검사·제네릭·제네릭 기본값·템플릿 리터럴 타입·infer를 쓴 재귀 조건부 타입으로 '경로 문자열에서 매개변수 이름을 뽑아 req.params 타입을 만드는' 과정을 정리한다. 동적인 JS의 동작을 실행 전에 검사하는 것이 TypeScript의 목적이다.
Frontend › JavaScript
webpack 동작 원리webpack은 진입점에서 import를 정적으로 따라가 의존성 그래프를 만들고, 로더로 파일을 모듈로 바꾸고, 플러그인으로 빌드에 개입해 번들을 만든다. 로더 적용 순서, 빌드 시 코드 주입 플러그인(Define·Environment·Provide·Ignore), 모듈이 아닌 옛 코드를 다루는 shimming, 스코프 호이스팅, HMR의 동작, Rollup과의 차이를 정리한다.
Frontend
Mobile웹 프론트엔드 지식을 모바일 앱 개발로 확장하는 방법과 프레임워크 선택.
Frontend › Mobile
React Native 실무 팁: 키보드, 로컬 저장소, 실기기 디버깅입력창이 키보드에 가려질 때 KeyboardAvoidingView와 ScrollView를 함께 쓰는 법, AsyncStorage로 키-값 저장하기, ADB로 안드로이드 실기기 연결하기, Snackbar·전역 폰트 같은 자잘한 도구.
Frontend
Next.jsReact 위에 라우팅·렌더링 전략·캐싱을 얹은 프레임워크. 왜 쓰는지, App Router가 데이터를 어떻게 가져오는지, 서버·클라이언트 컴포넌트를 어떻게 섞는지 정리한 노트 모음.
Frontend › Next.js
서버 컴포넌트와 클라이언트 컴포넌트 조합 규칙React Server Components에서 서버·클라이언트 컴포넌트를 어떻게 섞을 수 있는지 한 장으로 정리한다. 클라이언트는 서버 안에 넣을 수 있지만 서버를 클라이언트에서 import할 수는 없고, 대신 children·props로 넘길 수 있다. 클라이언트에서 서버 코드를 부르는 Server Function과 그 주의점까지 Next.js 16 문서 기준으로 확인했다.
Frontend › Next.js
Next.js App Router의 내비게이션과 데이터 가져오기App Router는 서버가 라우팅하고 클라이언트가 내비게이션한다. Link·useRouter, prefetch와 클라이언트 캐시, 서버 컴포넌트의 병렬·순차 fetch, 요청 중복 제거, React cache()와 preload 패턴을 정리한다.
Frontend › Next.js
Next.js App Router의 파일 규칙과 라우팅App Router는 폴더가 URL 세그먼트, 특수 파일이 그 세그먼트의 역할이 된다. page·layout·template·loading·error·not-found·route·default의 렌더링 계층, 동적 세그먼트([id]·[...slug]·[[...slug]])와 Promise인 params, URL에 안 나오는 라우트 그룹과 프라이빗 폴더, 병렬 라우트(@slot)와 가로채는 라우트((.)·(..))로 만드는 URL 있는 모달, Route Handler, Metadata 병합과 title 템플릿까지 Next.js 16 기준으로 정리한다.
Frontend › Next.js
Next.js를 쓰는 이유SSR·SSG·파일 기반 라우팅·자동 코드 스플리팅을 제공해 React 앱의 초기 로딩과 SEO를 개선하는 프레임워크. App Router의 fetch 캐싱과 재검증, Next.js 16의 'use cache'까지.
Frontend › Next.js
React Server Components의 동작 원리서버가 컴포넌트 트리를 렌더링해 HTML이 아니라 직렬화된 React 트리(RSC Payload)를 스트리밍하고, 브라우저가 클라이언트 컴포넌트 참조를 실제 코드로 바꿔 트리를 재구성하는 과정을 정리한다. SSR과의 차이, 요청 왕복을 줄이려고 나온 배경과 서버 컴포넌트 모델(XHP)에서 출발한 역사, 다시 렌더링되지 않는다는 성질과 클라이언트 경계, 갱신 방식, 제약까지.
Frontend
React상태가 바뀌면 필요한 부분만 다시 그리는, 컴포넌트 기반 UI 라이브러리.
Frontend › React
동시성 렌더링: useTransition과 useDeferredValueReact는 업데이트를 급한 것(입력)과 급하지 않은 것(전환)으로 나눠, 급하지 않은 렌더링은 중간에 끊고 급한 것을 먼저 처리한다. useTransition·startTransition은 상태 업데이트를 전환으로 표시하고(React 19부터 async 함수도 받아 Actions의 바탕이 된다), useDeferredValue는 값의 반영을 늦춘다. Suspense와 use는 기다리는 동안의 화면을 맡는다.
Frontend › React
로직 재사용 패턴: HOC, Render Props, 커스텀 훅여러 컴포넌트가 같은 상태 로직(구독, 마우스 위치, 마운트 여부)을 나눠 쓰는 세 가지 방법. 컴포넌트를 받아 감싼 컴포넌트를 돌려주는 고차 컴포넌트(HOC), 무엇을 그릴지 함수로 받는 render props, 훅 안에 로직만 담는 커스텀 훅을 비교하고, 컨테이너 컴포넌트와 커스텀 훅 중 무엇을 재사용할지 고르는 기준을 정리한다.
Frontend › React
리렌더링 원인과 추적리렌더링을 일으키는 원인, React.memo가 효과 없는 경우, useQuery가 최소 두 번 렌더링하는 이유, DevTools로 추적하고 줄이는 순서.
Frontend › React
리스트 가상화(Windowing)항목이 수천 개인 목록에서 화면에 보이는 항목만 DOM에 그리고 나머지는 높이만 차지하게 하는 기법. 원리(전체 높이 + 보이는 구간 계산 + 절대 위치), TanStack Virtual·react-window 사용법, 가변 높이·접근성·찾기 기능 같은 한계와 content-visibility 대안을 정리한다.
Frontend › React
리스트와 Key배열을 map으로 엘리먼트 목록으로 바꿔 렌더링하는 방법과, 각 항목을 식별하는 key의 역할. key 값(없음·랜덤·인덱스·id)에 따라 리렌더링과 리마운트가 어떻게 달라지는지, 인덱스 key가 오히려 빠른 경우까지 다룬다.
Frontend › React
리액트 상태 관리의 흐름과 고르는 기준상태를 종류(로컬·서버·URL·폼·전역 클라이언트)로 먼저 나누고, 전역 상태 라이브러리는 읽기·쓰기·리렌더링 최적화·메모리 네 가지 문제를 어떻게 푸는지로 비교한다. Flux·Redux에서 Context, 서버 상태 라이브러리, atom·proxy 기반 라이브러리로 이어진 흐름까지.
Frontend › React
실시간 채팅 앱의 데이터 흐름: REST와 WebSocket 역할 나누기채팅 앱은 상태 조회·변경은 REST로, 새로 생기는 이벤트 전달은 WebSocket으로 나눈다. 리소스 계층이 드러나는 URL 설계, 소켓 연결의 수명 관리, optimistic UI와 중복 방지, 긴 메시지 목록의 렌더링 최적화 포인트를 정리한다.
Frontend › React
재사용 컴포넌트를 위한 리액트 패턴 5가지Compound Components, Control Props, Custom Hook, Props Getters, State Reducer를 제어 역전(IoC) 정도와 구현 복잡도로 비교한다. 제어권을 많이 넘길수록 유연해지지만 쓰기 어려워지므로, 필요한 만큼만 고르는 것이 핵심이다.
Frontend › React
재조정(Reconciliation)과 state 보존React가 리렌더링 때 이전 엘리먼트 트리와 새 트리를 비교해 DOM 변경을 최소로 계산하는 과정. render 단계와 commit 단계, 타입이 다르면 하위 트리를 통째로 리마운트하고 같으면 속성만 고치는 비교 규칙, state가 트리의 '위치'에 묶여 보존·초기화되는 원리와 key로 초기화하는 법을 정리한다.
Frontend › React
조건부 렌더링조건에 따라 서로 다른 컴포넌트를 그리거나 아예 그리지 않는 React의 렌더링 패턴.
Frontend › React
컴포넌트 생명주기컴포넌트가 화면에 나타나고(마운트) 바뀌고(업데이트) 사라지는(언마운트) 흐름. 함수 컴포넌트에서는 useEffect의 의존성 배열과 cleanup으로 다루고, 클래스 생명주기 메서드는 기존 코드를 읽기 위한 대응표로 정리한다.
Frontend › React
컴포넌트와 PropsUI를 재사용 가능한 조각으로 나누는 컴포넌트와, 부모가 자식에게 값을 넘기는 읽기 전용 입력값 props. 타입은 TypeScript로 정하고, React 19부터 ref도 일반 prop으로 받는다.
Frontend › React
포털: createPortal로 다른 DOM에 그리기createPortal(children, domNode)은 컴포넌트 트리의 위치는 그대로 두고 DOM만 다른 곳(보통 document.body)에 그린다. 모달·툴팁·토스트가 부모의 overflow·z-index에 갇히지 않게 할 때 쓰며, 이벤트 버블링과 Context는 DOM이 아니라 React 트리를 따른다.
Frontend › React
폼과 제어 컴포넌트입력값을 React state로 관리하는 제어 컴포넌트, 여러 입력 다루기, 파생 값 계산, 그리고 React 19의 폼 액션(useActionState·useFormStatus).
Frontend › React
프런트엔드 에러 핸들링: 분류와 선언적 처리에러를 '예상 가능한가'와 '사용자가 해결할 수 있는가'로 나눠 대응(가이드·격리·모니터링)을 정하고, React에서는 Suspense·ErrorBoundary로 로딩·에러를 선언적으로 처리한다. 이벤트 핸들러 에러를 경계로 넘기는 법과 예상치 못한 에러의 전역 처리까지.
Frontend › React
합성: 상속 대신 Compositionchildren과 props로 컴포넌트를 조합해 재사용하는 React의 방식. children, 이름 있는 슬롯 props, 특수화, as prop, 합성으로 props drilling 줄이기를 언제 쓰는지 정리하고, 상속을 권장하지 않는 이유를 덧붙인다.
Frontend › React
Context와 전역 상태props를 일일이 내려주지 않고 컴포넌트 트리 전체에 값을 공유하는 Context API와, Context로 부족할 때 고르는 전역 상태 라이브러리(Redux Toolkit, Zustand, Jotai).
Frontend › React
JSX와 엘리먼트 렌더링JavaScript 안에서 HTML처럼 UI를 선언하는 JSX 문법과, 그 결과물인 불변 React 엘리먼트의 렌더링.
Frontend › React
MUI Dialog로 삭제 확인 창 만들기되돌릴 수 없는 동작 전에 한 번 더 묻는 확인 다이얼로그를 MUI Dialog로 재사용 가능하게 만들고, 위험한 버튼을 덜 눈에 띄게 디자인하는 방법.
Frontend › React
React 버전 변천사: 16부터 19.3까지React가 메이저 버전마다 무엇을 바꿨는지 한 장으로 본다. 16의 Fiber와 Hooks, 17의 새 JSX 변환과 루트 이벤트 위임, 18의 createRoot·자동 배칭·동시성 기능·스트리밍 SSR, 19의 Actions·use·ref as prop·서버 컴포넌트와 제거된 레거시 API, 19.2의 Activity·useEffectEvent, 19.3의 ViewTransition·Fragment ref, 그리고 React Compiler까지 버전별 변경점과 개념 노트를 잇는다.
Frontend › React
React 빌드 환경 직접 구성하기: webpack·Babel·TypeScriptReact 코드가 브라우저에서 돌기까지 Babel(문법 변환)과 webpack(번들링)이 무엇을 하는지, CDN 한 줄 실습부터 webpack+Babel+TypeScript 직접 구성, 라우팅·코드 스플리팅, 도구별 클라이언트 환경 변수 규칙까지 정리한다. CRA는 지원이 끝났다.
Frontend › React
React 스타일링: Sass, CSS Modules, styled-componentsReact 컴포넌트에 스타일을 입히는 방법들. Sass와 clsx로 옵션이 많은 재사용 컴포넌트 만들기, CSS Modules의 고유 클래스 이름과 :global, CSS-in-JS 라이브러리 styled-components·emotion의 css 헬퍼·테마·transient props·퇴장 애니메이션까지.
Frontend › React
React 이벤트 처리JSX 속성으로 핸들러 함수를 넘기는 React의 이벤트 처리 방식과 DOM 이벤트와의 차이.
Frontend › React
React Hooks함수 컴포넌트에서 state·생명주기·메모이제이션을 쓰게 해 주는 API와 그 규칙, 커스텀 훅. useEffect를 생명주기가 아니라 동기화로 보는 관점, deps를 줄이는 법, 요청 경쟁 상태 처리까지.
Frontend › React
React Router: 라우팅 기초와 레이아웃·BreadcrumbsSPA에서 URL마다 다른 컴포넌트를 그리는 React Router의 기초(Routes·Route·Outlet, Link·NavLink, useParams·useSearchParams, useNavigate, 중첩 라우트)와, 일관된 URL 규칙 위에서 레이아웃이 경로별 버튼과 Breadcrumbs를 그리는 패턴. v5 시절 API(Switch, exact, withRouter, history)와의 대응표 포함.
Frontend › React
react-hook-form과 MUI Selectreact-hook-form의 Controller로 MUI Select 같은 외부 UI 컴포넌트를 연결하고, 빈 값·placeholder·수정 폼 초기값을 다루는 방법.
Frontend › React
React에서 음성 녹음하고 파일로 보내기getUserMedia로 마이크 권한을 얻고 MediaRecorder로 녹음해 Blob을 만든 뒤, 다운로드 링크로 저장하거나 FormData(multipart/form-data)로 서버에 보내는 흐름. react-media-recorder로 간단히 쓰는 방법까지.
Frontend › React
React와 TypeScriptReact 코드에 타입을 붙이는 자리별 방법. 컴포넌트는 props 타입을 매개변수에 붙인 평범한 함수로 쓰고, children은 ReactNode, HTML 요소 감싸기는 ComponentProps<'button'>, ref는 React 19부터 Ref<T> prop으로 받는다. props 조합은 판별 유니언·never·오버로드로 제한하고, 제네릭 컴포넌트로 목록 항목 타입을 이어 준다. 이벤트·훅(useState·useRef·useReducer·useActionState·useOptimistic)·Context·클래스·Redux의 타입까지.
Frontend › React
Redux 미들웨어와 비동기 처리미들웨어는 dispatch와 reducer 사이에 끼어 액션을 기록·변형·무시하거나 다른 액션을 일으키는 함수 체인(store => next => action)이다. 비동기 처리는 thunk가 기본이고, 지금은 데이터 요청에 RTK Query나 createAsyncThunk, 액션에 반응하는 흐름에 listener middleware를 쓴다. redux-saga는 취소·디바운스가 얽힌 복잡한 흐름에만 남았다.
Frontend › React
Redux와 react-redux앱 전체가 공유하는 state를 store 한 곳에 두고, reducer에 정의한 방식대로 dispatch로만 바꾸게 하는 상태 관리 라이브러리. 지금은 Redux Toolkit의 createSlice·configureStore로 쓰고, react-redux의 Provider·useSelector·useDispatch로 컴포넌트와 연결한다.
Frontend › React
State와 useState컴포넌트가 스스로 관리하는 변하는 데이터인 state, useState와 함수형 업데이트, 배열·객체를 불변으로 바꾸는 방법(ES2023 복사 메서드, Immer), 공통 부모로 state 끌어올리기.
Frontend › React
SWR로 서버 데이터 가져오기캐시를 먼저 보여 주고 백그라운드에서 재검증하는 데이터 패칭 훅 SWR의 사용 패턴. mutate 옵션 객체와 optimisticData로 캐시를 갱신하고, SWR 캐시로 로그인 상태를 판단해 보호된 페이지를 만든다.
Frontend › React
TanStack Query(React Query)서버에서 가져온 데이터의 캐싱·재요청·로딩/에러 상태를 훅 하나로 다루게 해 주는 서버 상태 라이브러리. QueryClientProvider 설정, query key 설계, 캐시의 fresh·stale·inactive 생명 주기와 isPending·isFetching, 다시 가져오는 시점(mount·focus·reconnect·interval), select·enabled·의존 쿼리·useQueries, 페이지네이션과 useInfiniteQuery, useMutation 뒤 무효화·setQueryData·낙관적 업데이트, SSR(dehydrate·HydrationBoundary)까지.
Frontend › React
use 훅과 리액트 비동기 처리use는 컴포넌트가 Promise나 Context의 값을 직접 읽게 해 주는 React 19 API다. 조건문·반복문 안에서도 부를 수 있지만 컴포넌트·훅 밖과 try-catch 안에서는 안 되고, 클라이언트에서는 캐시된 Promise만 넘겨야 한다. 서버 컴포넌트에서 만든 Promise를 내려받아 읽는 것이 기본 패턴이다.
Frontend
Testing프론트엔드 코드의 동작을 테스트로 보장하고, 테스트로 설계를 이끄는 방법.
Frontend › Testing
의존성이 있는 컴포넌트 테스트하기fetch로 데이터를 받고, 자식 컴포넌트를 가져오고, Context에서 콜백을 받는 컴포넌트를 Vitest와 Testing Library로 테스트하는 세 가지 기법: 전역 fetch 바꿔 끼우기(vi.stubGlobal), 모듈 목(vi.mock), Provider로 테스트용 값 주입. 각 기법의 정리 방법과 한계, 그리고 MSW와 테스트하기 쉬운 설계로 넘어갈 시점을 정리한다.
Frontend › Testing
접근성 기반 UI 테스트 자동화UI 테스트가 xpath·CSS 선택자 때문에 쉽게 깨지던 문제를 WAI-ARIA의 role과 접근 가능한 이름(accessible name)으로 요소를 찾는 방식으로 푸는 법. getByRole 쿼리, aria-label·aria-labelledby·aria-current·aria-expanded 활용, 헤드리스 컴포넌트, 인수·회귀 테스트로서의 효과, 접근성 트리를 LLM·AI 에이전트의 입력으로 쓰는 법을 정리한다.
Frontend › Testing
정적 분석: 실행하지 않고 검사하기코드를 실행하지도, 테스트를 쓰지도 않고 자동으로 검사하는 정적 분석을 테스트의 맨 아래 층으로 본다. ESLint 규칙(no-unsafe-finally 같은 올바르지만 틀린 코드, eslint-plugin-compat 같은 브라우저 지원 검사)과 TypeScript 타입 검사(noImplicitAny, 검사 대상 포함 확인)가 무엇을 잡고, 무엇은 여전히 테스트로 확인해야 하는지 정리한다.
Frontend › Testing
테스트 실행 환경: Node, DOM 에뮬레이션, 실제 브라우저테스트가 도는 런타임(Node·Deno·Bun 또는 브라우저)과 그 안에서 쓸 수 있는 API가 테스트 환경이다. 순수 로직은 어디서든, 작은 컴포넌트는 jsdom·happy-dom 같은 DOM 에뮬레이션에서, 레이아웃·제스처·사용자 흐름은 실제 브라우저(CI에서는 헤드리스, 필요하면 Xvfb)에서 테스트한다. 환경에 기대지 않는 로직을 떼어 낼수록 테스트가 쉬워진다.
Frontend › Testing
프론트엔드 테스트의 종류와 도구정적·단위·통합·E2E 테스트가 각각 무엇을 확인하는지, 무엇부터 테스트할지, 피라미드·트로피 같은 전략의 모양과 스모크·회귀·시각 같은 목적별 테스트, 폴더 역할(apis·components·hooks·context·pages)별로 무엇을 검증할지, 테스트 대역(더미·스텁·스파이·페이크·목)의 차이, 구현이 아니라 사용자 행위를 검증하는 원칙과 테스트 작성 원칙(AAA, 블랙박스, 현실적인 데이터), 그리고 층마다 쓰는 도구(TypeScript·ESLint, Vitest·Jest, Testing Library, MSW, Playwright).
Frontend › Testing
험블 객체 패턴: 테스트하기 쉬운 코드가 좋은 코드인 이유목은 비용에 따라 네트워크 목·전역 목·스파이·더미/스텁 네 단계로 나뉘고, 비싼 목이 많다는 것은 설계 문제의 신호다. 전역 객체·네트워크처럼 테스트하기 어려운 코드를 얇은 험블 객체로 떼어 내 인터페이스 뒤에 두면 나머지는 더미와 스텁만으로 테스트되고, 코드는 자연스럽게 SOLID에 가까워진다.
Frontend › Testing
API 모킹: MSW와 json-server백엔드 API가 없거나 불안정할 때 프론트엔드가 가짜 응답으로 개발·테스트하는 방법. 코드 속 가짜 데이터, json-server 같은 가짜 REST 서버, 네트워크 단에서 요청을 가로채는 MSW를 비교하고, MSW 2의 핸들러(http·HttpResponse)와 브라우저(Service Worker)·Node(setupServer) 설정, 테스트에서 핸들러를 바꿔 끼우는 법을 정리한다.
Frontend › Testing
JavaScript 테스트 모범 사례'테스트는 보자마자 이해되게 단순하게'라는 황금률에서 나오는 원칙들을 한곳에 모았다. 테스트 이름·AAA·블랙박스·테스트 대역 고르기, 현실적인 데이터와 필요한 것만 드러내기, 프런트엔드와 E2E, 백엔드 컴포넌트 테스트와 HTTP 가로채기·장애 시나리오·검증할 결과 다섯 가지·DB 정리 전략, 커버리지와 뮤테이션 테스트, CI에서 지킬 것까지.
Frontend › Testing
Storybook: 컴포넌트를 상태별로 떼어 보는 도구컴포넌트를 앱에서 떼어 내 상태별 '스토리'로 등록하고 보고·조작·테스트하는 UI 작업장. CSF3 스토리 객체와 args·argTypes, meta·스토리·전역 3단계 설정, decorators, 사이드바 계층, Storybook 9부터 코어에 들어간 Controls·Actions·Viewport 같은 도구, TypeScript의 Meta·StoryObj와 satisfies, 스토리를 그대로 테스트로 쓰는 흐름까지 정리한다.
Frontend
UI Design디자인 시스템과 핸드오프, 레이아웃, 전자상거래·제스처 UI 패턴, UX 라이팅까지 화면의 생김새와 쓰임새를 다루는 노트 모음.
Frontend › UI Design
개발자를 위한 시각 디자인 요령: 위계, 대비, 그림자, 구분선디자이너 없이 UI를 다듬을 때 쓰는 요령. 위계는 크기보다 색과 굵기로, 색 배경 위 글자는 회색 대신 배경색 계열로, 그림자는 퍼짐보다 세로 오프셋으로, 구분은 테두리 대신 그림자·배경색·여백으로, 버튼은 의미보다 중요도로 스타일을 정한다. 뉴모피즘 같은 스타일 유행의 원리와 한계도 함께 본다.
Frontend › UI Design
디자이너는 어떻게 코드를 배우나디자이너가 코드를 배우는 목적은 엔지니어가 되는 것이 아니라 디자인의 재료를 이해하는 것이다. 터미널과 코드 에디터, Git의 포크·커밋·풀 리퀘스트, 시맨틱 HTML과 CSS 기초, 토큰·컴포넌트·DRY 같은 공학 개념을 순서대로 익히고, 공학적 결정은 엔지니어에게 맡긴다.
Frontend › UI Design
디자인 도구와 개발자 핸드오프디자인 핸드오프는 이미지와 문서를 메일로 넘기던 방식에서 브라우저 기반 공유 파일(Figma)로 옮겨 왔다. 개발자는 스타일·변수 확인, 치수 측정, 애셋 추출, 프로토타입 흐름 읽기, 댓글로 협업한다. Inspect 코드는 그대로 쓰지 않고, absolute 좌표는 흐름으로, Auto Layout은 Flexbox로 옮긴다. 디자인은 실제 데이터와 여러 화면 크기로 검증하고, 도구 이전은 비용을 계산해 한 번에 끝낸다.
Frontend › UI Design
디자인 시스템: 구성, 도입, 구축과 배포디자인 시스템은 팀이 같은 UI를 같은 규칙으로 만들게 하는 원칙·스타일·컴포넌트·문서의 묶음이다. 무엇으로 이루어지는지, 작은 팀도 필요한 이유와 도입 시점, 감사→기준 합의→파운데이션·컴포넌트 정리→개발 합의→QA로 이어지는 구축 절차, 토큰과 컴포넌트를 중앙 모노레포에서 패키지로 배포하는 구조까지 정리했다. 감사는 인터페이스 인벤토리로, 시각 방향은 스타일 타일·요소 콜라주로 가볍게 합의한다.
Frontend › UI Design
로딩 UI: 스피너, 로딩 애니메이션, 스켈레톤, 프로그레스 바기다림을 줄일 수 없을 때 체감을 다루는 로딩 UI 네 가지를 정리했다. 짧고 부분적인 로딩은 스피너, 핵심 액션은 브랜드 로딩 애니메이션, 페이지 전체는 스켈레톤, 10초 넘는 작업과 단계형 흐름은 프로그레스 바를 쓴다. 1초 미만이면 아무것도 띄우지 않는다.
Frontend › UI Design
모바일 앱 UI 가이드라인: 한 손 조작, 내비게이션, 버튼, 입력모바일 화면 설계의 관례를 주제별로 모은 노트. 화면을 보는 영역과 조작 영역으로 나누고, 내비게이션은 얕고 중복 없이, 버튼은 위계와 행동 중심 레이블로, 입력은 맞는 키보드·실시간 피드백·실수 복구로 설계한다. 대화상자 버튼 배치, 선택 컨트롤 고르기, 터치 크기 기준까지.
Frontend › UI Design
웹 레이아웃 디자인: 인쇄와 다른 매체웹은 크기가 고정되지 않은 매체다. 화면 폭 대응은 고정폭·리퀴드·적응형을 거쳐 반응형으로 왔고, 지금은 플렉스박스·그리드·컨테이너 쿼리로 콘텐츠에 맞게 늘고 줄어드는 본질의 웹 디자인(Intrinsic Web Design)이 기본이다. 페이지(매크로)와 컴포넌트(마이크로) 레이아웃을 나눠 설계하고, 인쇄의 단락·문자 스타일은 CSS의 블록·인라인 규칙으로, 칼럼 그리드와 8pt 간격 체계는 CSS 그리드와 디자인 토큰으로 이어지며, 이미지 위 텍스트는 대비·위치·심도로 읽히게 한다.
Frontend › UI Design
전자상거래 UI 디자인쇼핑몰 UI의 목표는 구매 여정(진입 → 탐색 → 상품 검토 → 옵션 선택 → 결제)에서 마찰을 없애는 것이다. 얕은 메뉴·필터·정렬·검색으로 찾게 하고, 상품 페이지 첫 화면에 가격·옵션·배송·반품을 담고, 옵션 종류에 맞는 선택 UI와 품절 표시를 쓰고, 가격 필터 슬라이더는 실제 범위와 재고 분포를 보여 줘 결과 0건을 막는다.
Frontend › UI Design
제스처 기반 인터페이스터치 기기에서는 스와이프·당기기·드래그 같은 제스처가 버튼과 바를 줄이고 화면을 콘텐츠에 내준다. 대신 제스처는 보이지 않아서 학습 곡선이 생기고, 운영체제 제스처와 충돌하며, 일부 사용자는 쓸 수 없다. 점진적 힌트로 가르치고, 같은 기능을 버튼으로도 제공하고, 시간과 애니메이션까지 프로토타입으로 검증한다.
Frontend › UI Design
제품 언어로서의 디자인 시스템: 토큰, 기능과 형태, 컴포넌트 API디자인 시스템을 범용 UI 라이브러리가 아니라 회사의 디자인 결정을 관리하는 제품 언어로 보는 관점을 정리한다. 결정을 값·의도·맥락으로 인코딩하는 디자인 토큰과 섣부른 시맨틱 토큰의 함정, 아토믹 단위가 하나로 정해지지 않는 이유와 컴포넌트를 기능(구조·상태·상호작용·맥락)과 형태(구조·시각 옵션·상태 옵션·디자인 결정)로 해부하기, 상태 압축, 공통 인터페이스로 디자인-개발의 순환 참조 끊기, 사전 조합 컴포넌트와 조합 가능한 패키지를 나눠 일관성과 유연성을 함께 주는 API를 다룬다.
Frontend › UI Design
Apple Human Interface Guidelines 요약: 원칙, 레이아웃, 바, 버튼, 알림Apple의 Human Interface Guidelines(HIG)에서 앱·모바일 UI 전반에 쓸 수 있는 지침을 모은 노트. 설계 원칙 여섯 가지, 적응형 레이아웃과 안전 영역·44pt 터치 영역, 내비게이션 구조, 계정 생성·삭제, 알림·배지, 평가 요청, 애니메이션·브랜딩·색·시작 화면·용어·타이포그래피·이미지 해상도·앱 아이콘, 내비게이션 바·검색 바·상태 바·탭 바·툴바, 경고창, 버튼(스타일·역할·토글·팝업·닫기), 진행 표시, 텍스트 필드까지 다룬다.
Frontend › UI Design
SVG 아이콘: 형식, 넣는 방법, 이름 붙이기, 스타일아이콘은 콘텐츠가 아니라 인터페이스의 일부라 글자처럼 커지고 색이 바뀌어야 한다. 그래서 크기마다 파일이 필요한 PNG보다 한 파일로 모든 크기를 그리는 SVG가 맞다. 글과 함께 있는 아이콘은 장식이니 숨기고, 아이콘만 있는 버튼은 뜻을 이름으로 준다. 인라인 SVG는 currentColor로 글자색과 테마를 따라가게 한다. 프레젠테이션 속성의 낮은 우선순위, transform-box: fill-box, 선 그리기 효과, 넣는 방법별로 되는 CSS도 다룬다.
Frontend › UI Design
UI 모션 디자인: 애니메이션 원칙, 모션 커브, 안무UI 애니메이션을 자연스럽게 만드는 원리. 디즈니의 애니메이션 12원칙을 웹에 옮기는 법, 속도는 모션 커브의 기울기라는 이해와 cubic-bezier 읽기, 축마다 다른 타이밍으로 곡선 경로를 만드는 겹친 애니메이션과 offset-path, 여러 요소를 시차로 움직이는 안무, 60fps를 지키는 구현 규칙을 정리한다.
Frontend › UI Design
UI 요소 용어집: 입력·내비게이션·정보·컨테이너디자이너와 같은 말을 쓰기 위한 UI 요소 32가지를 입력 컨트롤·내비게이션·정보·컨테이너 네 범주로 묶고, 각각 언제 쓰는지와 구현할 때 기댈 HTML 요소·ARIA 패턴을 함께 정리한다. 햄버거·케밥·미트볼·벤토·도너 메뉴처럼 헷갈리는 아이콘 메뉴 이름도 구분한다.
Frontend › Web
결제·주소 폼결제 흐름은 비회원 결제를 기본으로, 단계와 다음 행동을 드러내고, 방해 요소를 걷어 낸다. 카드 칸은 한 칸·inputmode="numeric"·cc-* 토큰·카드 종류 선택 없음, 이름은 한 칸과 유니코드 허용, 주소는 street-address 한 칸이나 address-line1/2, 우편번호는 선택 항목으로 둔다. 나라마다 다른 이름·주소·용어를 받아들이는 국제화 원칙과 enterkeyhint로 단계를 안내하는 법까지 정리한다.
Frontend › Web
권한 모델과 기기 API브라우저가 기기 기능을 여는 방식. 보안 컨텍스트·Permissions-Policy·사용자 동작·권한 프롬프트를 묶어 보여 주는 Permissions API의 query()와 granted·denied·prompt 상태, 그리고 권한이 걸린 기기 API인 위치, 기기 방향·움직임(iOS의 requestPermission), 게임패드(폴링), 음성 합성·인식, 진동의 쓰임과 지원 범위를 정리한다.
Frontend › Web
다국어 페이지: lang·hreflang과 국제화여러 언어로 페이지를 제공할 때 언어마다 URL을 나누고 lang·dir·hreflang으로 표시하는 법, Accept-Language를 쓰되 강제로 넘기지 않는 언어 선택, 문자열 연결 금지·Intl API·텍스트 길이·방향·이미지 속 글자 같은 국제화 설계 주의점을 정리했다.
Frontend › Web
더 나은 폼을 만드는 팁폼 사용성은 사용자의 통제권을 지키고 노력을 줄이는 데서 나온다. 묻는 칸 줄이기, 짧은 라벨과 한 열 배치, 브라우저 기본 동작 존중, 모바일 키보드(inputmode), 보이는 검증 메시지, 커서·포커스를 빼앗지 않는 입력 처리, 그리고 기기·사람·데이터로 폼을 시험하고 측정하는 법을 정리한다.
Frontend › Web
데이터 최소화와 프라이버시 실천개인정보는 모으지 않는 것이 가장 안전하다. 수집하지 않기 → 뭉개서 모으기(구간화·무작위 응답·차등 프라이버시) → 쓰고 지우기(Clear-Site-Data) → 왜 필요한지 설명하기 순으로 효과가 크고, 조직에서는 데이터 목록 문서화·정기 감사·목적 외 사용 차단으로 유지한다.
Frontend › Web
동영상 성능: 형식·poster·자동 재생·임베드동영상은 컨테이너와 코덱을 고르고 FFmpeg로 줄여 여러 source로 준다. 움직이는 GIF는 muted·loop·playsinline 자동 재생 video로 바꾼다. 사용자가 누를 동영상은 preload='none'과 poster, 화면 밖은 지연 로딩, 무거운 서드파티 플레이어는 퍼사드로 늦춘다. poster와 첫 프레임은 LCP 후보다.
Frontend › Web
로그인·가입 폼과 인증 입력가장 좋은 가입 폼은 없는 가입 폼이다. 필요할 때만 계정을 요구하고, 로그인·가입 폼은 비밀번호 관리자가 알아보게 만든다(new/current-password, 다른 name·id, 성공 감지, 붙여넣기 허용). 비밀번호 보기 버튼, 두 단계 로그인, 모바일 키보드 가림, 패스키 자동 완성(username webauthn), 일회용 코드(one-time-code·WebOTP), NIST SP 800-63B-4의 비밀번호 규칙, 계정 설정과 /.well-known/change-password까지 정리한다.
Frontend › Web
리소스 힌트와 미리 불러오기: preconnect·preload·fetchpriority·Speculation Rules브라우저가 스스로 늦게 발견하는 자원을 앞당기는 힌트. 다른 출처 연결은 preconnect·dns-prefetch, 늦게 발견되는 중요한 자원은 preload, 우선순위는 fetchpriority로 조정한다. 다음 이동을 위해서는 prefetch, Speculation Rules의 prefetch·prerender, 서비스 워커 프리캐싱을 쓰되 확신이 있을 때만 쓴다.
Frontend › Web
링크와 내비게이션 마크업<a href>가 가리킬 수 있는 곳(절대·상대 URL, 프래그먼트, mailto·tel, blob·data), download로 내려받기, target과 rel=noopener·noreferrer, 이름 붙은 브라우징 맥락으로 탭 폭증 막기, rel·hreflang·type·ping, 그리고 링크 목록을 <nav>로 묶는 건너뛰기 링크·목차·브레드크럼·로컬·전역 내비게이션 패턴을 정리한다.
Frontend › Web
목록과 표 마크업ul·ol·dl의 허용 자식과 중첩 규칙, ol·li의 번호 속성, dl을 div로 묶는 법, 그리고 표의 자식 순서(caption → colgroup → thead → tbody → tfoot), th·scope·headers, colspan·rowspan, colgroup·col로 열 꾸미기, 표 CSS를 정리한다. 목록인지·용어 쌍인지·표인지 고르는 기준도 함께 둔다.
Frontend › Web
문서 head와 메타데이터<head>는 화면에 보이지 않지만 인코딩·제목·뷰포트·스타일·스크립트·아이콘·대체 버전·대표 URL·검색과 SNS 미리보기 정보를 모두 담는다. 모든 페이지에 넣을 다섯 줄, 성능을 위한 요소 순서, link의 rel 종류, meta의 세 갈래(charset·http-equiv·name)와 이제 쓰지 않는 태그, Open Graph와 SEO의 관계, 미리보기가 안 나오는 이유, base의 함정, 웹 앱 매니페스트로 정리한다.
Frontend › Web
미디어 캡처와 Web Audio API브라우저에서 카메라·마이크·화면을 받아 다루는 Media Capture and Streams(MediaStream·MediaStreamTrack의 소스와 소비자, getUserMedia·getDisplayMedia, enumerateDevices)와, 소리를 노드 그래프로 만들고 가공하는 Web Audio API(AudioContext, 소스·효과·분석·출력 노드, 정밀한 예약 재생, 자동 재생 정책과 resume, AudioWorklet)를 정리한다.
Frontend › Web
반응형 이미지: srcset·sizes와 picture같은 이미지를 크기만 바꿔 줄 때는 srcset·sizes로 브라우저에 선택을 맡기고(서술형), 자르기·형식 대체처럼 규칙을 강제할 때는 picture를 쓴다(지시형). 크기만 맞춰도 작은 화면의 이미지 용량이 70% 넘게 준다. sizes는 레이아웃에서의 폭이라 도구가 알 수 없으니 근삿값을 주거나, 지연 로딩 이미지는 sizes="auto"에 맡긴다.
Frontend › Web
브라우저 기본 동작을 존중하기스크롤바·스크롤·선택 강조색·글자 크기·고대비·키보드 포커스·클립보드·방문 기록은 OS와 브라우저가 모든 앱에 같은 방식으로 제공하는 기능이다. 사이트가 이를 바꾸면 외부 일관성이 깨져 일부 사용자가 밀려난다. 덮어쓰지 말고, 필요하면 기본 위에 선택지를 더한다.
Frontend › Web
브라우저 렌더링 과정브라우저의 구성 요소와, HTML을 DOM으로·CSS를 CSSOM으로 파싱해 렌더 트리로 레이아웃(리플로우)·페인팅·합성을 거쳐 화면을 그리는 과정. HTML 파서의 특성, 스크립트·스타일 시트의 차단, 더티 비트와 강제 동기 레이아웃, 변경마다 다시 도는 단계까지.
Frontend › Web
브라우저 실시간 통신: 롱 폴링, SSE, WebSocket 클라이언트서버가 먼저 보내는 데이터를 브라우저에서 받는 세 가지 방법의 클라이언트 쪽 구현을 정리한다. 재요청 루프로 만드는 롱 폴링, HTTP 위의 텍스트 스트림인 SSE(EventSource의 메시지 형식·자동 재연결·Last-Event-ID와 fetch로 직접 읽는 방법), 그리고 WebSocket API의 바이너리·버퍼·종료 코드·재연결까지.
Frontend › Web
브라우저 아키텍처: 다중 프로세스, 내비게이션, 렌더러 스레드, 입력 처리Chrome을 예로 브라우저가 프로세스를 어떻게 나누는지(브라우저·렌더러·GPU·네트워크 등, 사이트 격리), 주소를 입력한 뒤 어느 프로세스가 무엇을 하며 페이지를 커밋하는지, 렌더러 안의 메인·컴포지터·래스터 스레드가 프레임을 만드는 방식, 입력 이벤트가 컴포지터를 거쳐 메인 스레드로 가는 길과 passive 리스너·이벤트 병합까지.
Frontend › Web
브라우저 안 빌드·프리뷰 환경: AI가 만든 화면을 바로 띄우기AI가 생성한 React 코드를 사용자 브라우저에서 바로 빌드해 보여 주는 프리뷰 런타임. 데이터 정책은 API 프록시 플랫폼이 맡고 화면만 AI가 만드는 분리, 서버 dev 서버·Sandpack·WebContainers·직접 구성의 비교, 가상 파일 시스템 + esbuild-wasm + 패키지 조합 해시로 미리 번들한 의존성 + import map 구조를 다룬다.
Frontend › Web
서비스 워커 등록·스코프·생명주기와 업데이트서비스 워커는 페이지와 서버 사이에서 스코프 안의 요청을 가로채는 별도 스레드의 스크립트다. 등록 → 설치 → 활성화 순서로 생명주기를 밟고, 파일이 한 바이트라도 바뀌면 새 버전이 설치되지만 옛 버전이 모든 창에서 물러날 때까지 대기한다. skipWaiting·clients.claim의 위험, 메모리 상태가 사라지는 수명, 브라우저별 디버깅 도구를 정리한다.
Frontend › Web
서비스 워커 캐싱과 응답 전략Cache Storage API로 요청·응답 쌍을 저장하고, fetch 이벤트의 respondWith()로 캐시 우선·네트워크 우선·stale-while-revalidate·네트워크 전용·캐시 전용 중 하나를 URL별로 골라 응답한다. 무엇을 언제 프리캐시할지, 불투명 응답과 addAll의 원자성 함정, 오프라인 대체 페이지, Workbox로 줄이는 코드, 페이지를 조각별로 캐시하는 서비스 워커 인클루드와 스트리밍까지 정리한다.
Frontend › Web
성능 측정 API: Navigation·Resource·User Timing과 PerformanceObserver브라우저가 실제 사용자 환경에서 기록하는 성능 항목(performance entry)을 읽는 API들. 문서 요청은 Navigation Timing, 하위 자원은 Resource Timing, 앱이 직접 찍는 구간은 User Timing의 mark·measure로 재고, 모두 PerformanceObserver에 buffered로 구독해 모은다. 교차 출처 자원은 Timing-Allow-Origin 헤더가 있어야 세부 시간이 보인다.
Frontend › Web
스크립트·스타일 로딩 순서와 점진적 렌더링<script>, async, defer, type=module이 HTML 파싱과 실행 순서에 주는 차이, 프리로드 스캐너가 못 보는 늦게 발견되는 자원, CSS는 <head>에 두고 스크립트는 defer로 미루는 이유와 예외, @import를 피하고 중요 CSS만 인라인하는 CSS 경량화, 콘텐츠를 받는 대로 먼저 보여 주는 점진적 렌더링 기법을 정리했다.
Frontend › Web
스트리밍 SSRHTML을 한 번에 다 만들어 보내지 않고 Suspense 경계 단위로 나눠 흘려보내는 SSR. React 18에서 도입됐고, 지금은 React 19의 부분 사전 렌더링과 Next.js Cache Components의 기반이 되어 기본 동작으로 자리 잡았다.
Frontend › Web
시맨틱 HTML과 문서 구조태그로 모양이 아니라 의미를 표시하는 시맨틱 HTML. 랜드마크 태그, 제목 계층(h1~h6), <article>과 <section>을 언제 쓰는지, 요소의 암묵적 역할과 role 속성의 한계를 접근성 관점에서 정리했다. 아웃라인 알고리즘은 구현되지 않았으니 제목 수준은 직접 매긴다.
Frontend › Web
웹 개발에 대한 이상한 믿음들브라우저 엔지니어·표준 제정자·웹 개발자가 웹 개발을 잘 안다는 믿음, 브라우저는 SPA에 맞지 않는다, MPA가 SPA를 대체한다, 모든 사이트는 JS 없이 동작해야 한다, 빌드 단계는 필요 없다는 주장을 하나씩 따져 본다. 공통된 오류는 내가 겪는 웹이 웹 개발 전체를 대표한다고 여기는 것이다.
Frontend › Web
웹 성능 지표와 LighthouseFCP·LCP·INP·CLS·TTFB 같은 웹 성능 지표의 뜻과 기준값, Core Web Vitals 세 지표가 무엇을 어떻게 재는지(LCP 후보 요소, INP의 세 구간, CLS의 세션 창), 실험실·필드 데이터와 web-vitals 라이브러리로 재는 법, Lighthouse를 정리했다. 지표별 개선법은 따로 나눈 최적화 노트로 연결한다.
Frontend › Web
웹 앱 매니페스트웹 앱 매니페스트는 설치된 PWA의 이름·아이콘·시작 URL·표시 방식·색·바로 가기를 정하는 JSON이다. 앱을 식별하는 id, 내비게이션 범위 scope, 마스크 가능 아이콘, display와 display_override의 대체 순서, 설치 화면을 키우는 description·screenshots, iOS가 따로 쓰는 link·meta, 그리고 바뀐 메타데이터가 플랫폼마다 언제 반영되는지 정리한다.
Frontend › Web
웹 워커로 메인 스레드 비우기웹 워커는 JS를 메인 스레드가 아닌 별도 스레드에서 돌린다. DOM과 window에는 접근할 수 없고 postMessage로만 메인 스레드와 대화한다. 가져오기·파싱·대용량 계산처럼 DOM이 필요 없는 무거운 일을 옮기면 긴 작업이 줄어 INP가 좋아지고, 그 일에 쓰는 라이브러리의 다운로드·컴파일 비용도 함께 빠진다.
Frontend › Web
웹 이미지 형식: 벡터·래스터와 GIF·PNG·JPEG·WebP·AVIF·JPEG XL도형으로 된 그림은 SVG, 사진처럼 실제 세계의 디테일이 있는 그림은 래스터다. 래스터는 손실 압축이 가능한 형식을 고르되, 사진은 AVIF·WebP를 먼저 주고 JPEG로 받친다. PNG는 반투명이 필요한 단순 그림과 원본 보관용, GIF는 거의 쓸 곳이 없다. JPEG XL은 크롬·파이어폭스·사파리가 지원하지만 엣지가 빠져 있어 picture로 대체를 둔다.
Frontend › Web
웹 컴포넌트: template·slot·Shadow DOM라이브러리 없이 재사용 가능한 요소를 만드는 웹 표준. <template>은 렌더링되지 않는 HTML 조각, 커스텀 요소는 HTMLElement를 상속한 클래스와 라이프사이클 콜백, Shadow DOM은 마크업과 스타일을 캡슐화하는 별도 트리, <slot>은 바깥 내용을 끼울 자리다. :host·::slotted()·::part()·커스텀 속성으로 경계를 넘어 꾸미고, 이벤트는 리타게팅되며 composed 이벤트만 밖으로 나간다. 선언적 Shadow DOM으로 서버에서 그린다.
Frontend › Web
웹 폰트 성능 최적화: 발견·내려받기·렌더링웹 폰트는 레이아웃이 필요로 할 때에야 요청되는 늦게 발견되는 자원이다. preload나 인라인 @font-face로 일찍 발견되게 하고, 자체 호스팅·WOFF2·서브셋으로 빨리 받고, font-display로 글자가 숨거나 밀리는 방식을 고른다.
Frontend › Web
이미지 압축과 인코딩 자동화JPEG는 밝기보다 색을 더 버리고(크로마 서브샘플링) 고주파 디테일을 양자화해 줄인다. WebP는 블록 예측과 영역별 양자화로 같은 품질에서 더 작다. 품질 값은 0~100 하나로 조절하되 도구마다 뜻이 달라 눈으로 확인한다. 실제 서비스에서는 사람이 아니라 빌드 도구·정적 사이트 생성기·CMS가 원본에서 여러 형식과 크기를 만든다.
Frontend › Web
이미지 CDN과 Accept 헤더 협상이미지 CDN은 원본 한 장을 올려 두면 URL 매개변수로 크기·자르기·품질·형식을 바꾼 변형을 만들어 캐시한다. 브라우저의 Accept 헤더를 보고 AVIF·WebP 중 지원하는 가장 효율적인 형식을 주므로 picture·type 없이 srcset·sizes만으로 형식 대체가 된다. 같은 URL이 형식마다 다른 응답이 되므로 Vary: Accept로 캐시를 나눠야 하고, 비용이 주된 단점이다.
Frontend › Web
이미지·오디오·비디오 임베드내용인 이미지는 HTML, 장식은 CSS다. <img>의 필수 src·alt, 레이아웃 이동을 막는 width·height, loading·fetchpriority, figure·figcaption, SVG의 role="img"를 정리하고, <video>·<audio>의 source·type·codecs, poster, controls, autoplay와 muted, track의 다섯 kind, 배경 영상과 사용자 정의 컨트롤의 원칙을 다룬다.
Frontend › Web
이전 페이지 URL 알아내기사용자가 어느 페이지에서 왔는지 알아내는 세 가지 방법(document.referrer, 직접 기록, 쿠키·sessionStorage)과 각각의 한계.
Frontend › Web
자동 완성과 autocomplete 토큰브라우저는 name·id·type과 autocomplete 값으로 칸의 정체를 짐작해 저장된 주소·카드·비밀번호를 채운다. 짐작에 맡기지 말고 autocomplete 토큰을 명시하고, section-·shipping/billing·home/work·webauthn 순서 문법, 이름·주소·전화·카드·비밀번호 토큰표, autocomplete="off"가 듣지 않는 경우, :autofill 스타일링, 자동 완성을 깨는 흔한 실수를 정리한다.
Frontend › Web
자바스크립트 코드 분할시작할 때 받는 JS가 크면 파싱·컴파일·실행 동안 메인 스레드가 막혀 TBT와 INP가 나빠진다. 커버리지로 시작 때 안 쓰는 코드를 찾고, 동적 import()로 나중에 필요한 코드를 별도 청크로 떼어 상호작용할 때 불러온다. 청크 크기는 캐시·압축·평가 시간의 균형으로 정한다. 로딩 전략 전체는 PRPL(Preload·Render·Pre-cache·Lazy load)로 묶는다.
Frontend › Web
정적 사이트 생성기와 Jamstack정적 사이트 생성기(SSG)는 마크다운 콘텐츠와 템플릿을 빌드 때 HTML로 합쳐 CDN에 올린다. 서버·DB가 없어 빠르고 안전하며, Git push가 곧 배포다. 콘텐츠 사이트는 JS를 거의 보내지 않는 Eleventy·Hugo·Astro가 맞고, 상호작용이 많으면 Next.js 같은 프레임워크를 쓴다. WordPress에서 옮기는 흐름도 정리한다.
Frontend › Web
제약 검증: required·pattern·ValidityState브라우저 내장 검증은 HTML 속성(required·type·minlength·pattern·min·max·step)으로 켜고, CSS 의사 클래스(:invalid·:user-invalid)로 보여 주고, Constraint Validation API(ValidityState·setCustomValidity·checkValidity·reportValidity)로 넓힌다. pattern이 v 플래그로 컴파일되는 점, 빈 값은 pattern 검사를 하지 않는 점, 언제 오류를 띄울지, 서버 검증이 왜 따로 필요한지를 정리한다.
Frontend › Web
지속 가능한 웹 디자인웹사이트의 에너지 사용은 전송 데이터·CPU·서버 자원으로 어림할 수 있고, 이를 줄이는 일은 곧 성능·접근성·SEO 개선이다. 필요 없는 요청과 기능을 빼고, 이미지·폰트·영상·분석 도구를 의심하고, 서버 캐시와 재생 에너지 호스팅을 쓴다.
Frontend › Web
지연 로딩: 이미지·iframe·퍼사드화면 밖 이미지·iframe은 loading='lazy'로 미뤄 첫 화면 자원에 대역폭을 몰아 준다. 첫 화면 이미지와 LCP 후보에는 절대 쓰지 않는다. 무거운 서드파티 임베드는 가짜 UI(퍼사드)를 보여 주다 상호작용할 때 바꾸고, 네이티브로 미룰 수 없는 video·배경 이미지는 IntersectionObserver 기반 라이브러리로 미룬다.
Frontend › Web
창과 프레임: 팝업, iframe, postMessage다른 창(팝업)과 프레임(iframe)을 열고 서로 참조하는 법, 동일 출처 정책이 창 사이에서 허용하는 것과 막는 것, sandbox 속성, 출처가 달라도 안전하게 대화하는 postMessage와 같은 출처 탭끼리의 BroadcastChannel, 그리고 내 페이지가 남의 iframe에 갇혀 클릭을 빼앗기는 클릭재킹과 그 방어 헤더까지 정리한다.
Frontend › Web
텍스트 의미 요소와 문자 참조문단·인용·강조·기술 문서·정의·수정 이력·줄 바꿈을 표현하는 HTML 텍스트 요소를 용도별로 고르는 법. blockquote·q·cite의 구분, em·strong·mark·i·b·u·s의 의미 차이, code·kbd·samp·var·data·time, abbr·dfn, br·hr·wbr, 그리고 꼭 이스케이프해야 하는 문자 참조를 정리한다.
Frontend › Web
포커스 속성과 details·dialogHTML만으로 포커스를 다루는 속성(tabindex·contenteditable·autofocus·disabled·inert)과 JavaScript 없이 동작하는 두 인터랙티브 요소를 요소 사전처럼 정리한다. 포커스를 빼는 세 방법의 차이, <details>/<summary>의 open·name·마커·오류 처리, <dialog>의 show·showModal·close, method="dialog"와 returnValue, ::backdrop, 열고 닫을 때의 포커스, commandfor로 스크립트 없이 여는 법까지 다룬다.
Frontend › Web
폼 스타일링폼 컨트롤은 기본 크기가 작고 브라우저마다 모양이 다르다. 글자 1rem 이상(iOS 확대 방지), 보이는 테두리, 48px 탭 영역, 한 열 배치로 기본을 잡고, appearance: none과 배경 화살표로 select를, 접근성 트리를 지키는 숨김 기법으로 체크박스·라디오를 꾸민다. accent-color, field-sizing: content, 실험 단계의 customizable select(appearance: base-select), pointer 미디어 쿼리와 env()까지 정리한다.
Frontend › Web
폼 제출과 데이터 전송<form>은 Enter 제출·검증·자동 완성·보조 기술 지원을 공짜로 주므로 데이터를 보내는 곳에는 항상 쓴다. GET과 POST 고르기, 제출 버튼의 종류와 type="button" 함정, 제출 버튼을 언제 막는가, FormData와 fetch로 새로 고침 없이 보내는 점진적 향상, 같은 엔드포인트에서 HTML·JSON 응답 나누기, HTTPS·데이터 최소화·허니팟 같은 보안·개인정보 원칙을 정리한다.
Frontend › Web
프론트엔드 개발자가 알아야 할 지연 시간 숫자네트워크 왕복, 파싱, 프레임 예산, 사람의 체감 한계를 밀리초 단위로 정리한 표. 지연은 워터폴로 곱해지므로 요청 체인을 서버로 옮기고, JS를 줄이고, 사용자 가까이 배포한다.
Frontend › Web
프론트엔드 성능 최적화: 언제, 무엇을최적화는 측정한 뒤에, 최악의 사용자(p95·p99)를 기준으로, 무엇을 희생하는지 알고 한다. 느림은 초기 로딩(대역폭·지연 시간·JS 실행)과 런타임(실제 성능과 체감 성능)으로 나눠 본다. 캐싱·프리패치·코드 분할, 긴 작업 줄이기와 쪼개기, 파생 상태와 리렌더링 범위 좁히기를 각 원인에 맞춰 고른다.
Frontend › Web
프론트엔드 웹 개발 용어집API부터 Yarn까지 프론트엔드 개발에서 자주 듣는 용어 70여 개를 주제별로 묶어 한두 줄로 설명하고, 자세한 노트가 있는 용어는 그 노트로 연결했다.
Frontend › Web
프론트엔드 출시 전 체크리스트웹 페이지를 배포하기 전에 확인할 항목을 head·HTML·CSS·이미지·폰트·JavaScript·보안·성능·접근성·SEO 열 가지로 나눠, 우선순위와 자세한 설명이 있는 노트로 잇는 점검표. 항목은 사람이 외우지 않고 린터·Lighthouse·CI로 자동화하는 것이 기본이다.
Frontend › Web
프론트엔드의 등장 배경초기 웹에는 프론트엔드라는 개념이 없었다. 이미지·CSS·JavaScript·AJAX가 차례로 등장하고 Flash가 물러나고, 구글·페이스북이 웹을 앱 플랫폼으로 밀어붙이면서 화면을 만드는 일이 전문 영역이 되었고, 트래픽이 커지자 프론트엔드와 백엔드가 나뉘었다. React 이후에는 프레임워크·상태 관리·타입·스타일링·빌드 도구·렌더링 방식이 해마다 바뀌었지만, 갈래별로 보면 방향은 일정했다.
Frontend › Web
AMP: 규칙으로 빠르게 만드는 모바일 페이지AMP(Accelerated Mobile Pages)는 HTML에 제약을 걸고(외부 JS 금지, 인라인 CSS 상한, 자원 크기 명시) 전용 런타임과 캐시 CDN으로 페이지를 빠르게 만드는 프레임워크다. 성능 원리는 일반 페이지에도 그대로 쓰이지만, URL 이원화와 플랫폼 종속 때문에 비판을 받았고 검색 우대가 사라진 뒤로는 Core Web Vitals를 직접 맞추는 쪽이 일반적이다.
Frontend › Web
CLS 최적화: 자리를 먼저 잡기레이아웃 이동은 늦게 도착한 것이 자리를 비집고 들어올 때 생긴다. 이미지·동영상에는 width·height나 aspect-ratio, 광고·임베드에는 min-height, 늦게 뜨는 배너는 자리 확보나 오버레이, 애니메이션은 transform, 웹 폰트는 font-display와 대체 폰트 지표 보정으로 막는다. 필드와 실험실 값의 차이로 로딩 중 이동인지 이후 이동인지 가른다.
Frontend › Web
HTML 기초와 HTML5웹 문서의 구조와 의미를 태그로 표현하는 마크업 언어와 그 핵심 문법. 요소와 태그, 대체·빈 요소, 생략 가능한 태그, 불리언·열거형·전역 속성, data-* 속성, 속성 하나로 끝나는 기능(enterkeyhint·form·download·loading·fetchpriority·integrity·popover 등), DOCTYPE, form 데이터 규칙, HTML5까지 다룬다.
Frontend › Web
HTML 입력 요소 치트시트input의 22가지 type과 label·select·textarea·fieldset·datalist까지, 폼에서 쓰는 입력 요소를 용도별로 정리하고, 값의 성격에 맞는 type·선택 컨트롤 고르기와 inputmode 8가지 값까지 다룬다.
Frontend › Web
IndexedDB브라우저에 내장된 출처별 트랜잭션 키-값 데이터베이스의 API. 버전으로 스키마를 바꾸는 upgradeneeded, 객체 저장소·키·인덱스·키 범위·커서로 저장하고 찾는 법, 자동 커밋되는 트랜잭션의 함정과 오류 처리, 다른 탭과의 버전 충돌, 그리고 네이티브 개념이 idb 래퍼에서 어떻게 보이는지 정리한다.
Frontend › Web
INP 최적화: 긴 작업 쪼개기와 양보INP는 입력 지연, 처리 시간, 표시 지연의 합이다. 필드 데이터로 느린 상호작용을 찾고, 시작할 때의 스크립트 평가를 줄여 입력 지연을, 핸들러를 가볍게 하고 메인 스레드에 양보해 처리 시간을, DOM 크기·content-visibility·클라이언트 HTML 렌더링을 손봐 표시 지연을 줄인다.
Frontend › Web
LCP 최적화: 네 구간으로 나눠 줄이기LCP는 TTFB, 자원 로드 지연, 자원 로드 시간, 요소 렌더 지연의 합이다. 두 「지연」 구간은 0에 가깝게, 나머지 둘은 40%씩이 목표다. LCP 자원을 HTML에서 바로 발견되게 하고, fetchpriority로 앞당기고, 지연 로딩하지 않고, 작게 만들고, 막는 CSS·JS와 긴 작업을 걷어 낸다.
Frontend › Web
OAuth 2.0비밀번호를 넘기지 않고 다른 서비스의 자원 접근 권한을 위임하는 OAuth 2.0. 네 역할, Authorization Code + PKCE 흐름, 토큰 종류, OIDC와의 차이, 프론트엔드 보안 주의점, OIDC로 구현하는 SSO를 정리한다.
Frontend › Web
PWA 기능과 OS 통합PWA가 운영 체제와 이어지는 기능을 지원 범위별로 정리한다. 웹 푸시와 알림(iOS는 16.4부터 홈 화면 웹 앱에서만, 18.4부터 선언적 웹 푸시), 앱 배지, 공유하기와 공유 대상, 파일 시스템 접근과 파일 핸들러, 프로토콜 핸들러, 링크 캡처, 연락처 선택기, 하드웨어 API, 그리고 Project Fugu·오리진 트라이얼로 새 기능을 시험하는 법과 기능 감지·권한 요청 원칙을 다룬다.
Frontend › Web
PWA 설치와 설치 유도설치 기준은 브라우저마다 다르다. Chrome은 HTTPS, name·아이콘(192·512px)·start_url·display를 갖춘 매니페스트와 최소한의 사용자 참여를 본다. 데스크톱 Chromium·Android(WebAPK와 바로 가기)·iOS 홈 화면·macOS Safari의 Dock 추가·Firefox의 Windows 작업 표시줄 웹 앱까지 플랫폼별 설치 방식, beforeinstallprompt로 직접 띄우는 설치 버튼, display-mode로 실행 방식을 알아내는 법, 앱 스토어 배포를 정리한다.
Frontend › Web
PWA 앱 경험 설계와 창 관리설치된 PWA는 브라우저 탭이 아니라 자기 창을 가진다. 200×100px 미니 모드까지 견디는 반응형·점진적 향상의 기초와 오프라인을 기본 상태로 보는 오프라인 우선 원칙(마지막 상태 지키기, 동작 큐, 충돌 해결) 위에, display-mode 미디어 쿼리, 창 제목, 선택·당겨서 새로고침·safe area 같은 앱다운 CSS를 더한다. 스코프 밖 링크가 여는 앱 안 브라우저와 OAuth 흐름, 창 이동·크기·새 창, 제목 표시줄 오버레이, 여러 화면 배치, 화면 꺼짐 방지, 가상 키보드 API까지 정리한다.
Frontend › Web
PWA 오프라인 데이터와 저장소 관리URL로 요청하는 자산은 Cache Storage에, 검색·조합할 구조화 데이터는 IndexedDB에 둔다. 저장소 할당량은 출처 단위로 묶이고 StorageManager.estimate()로 확인한다. 브라우저는 압박이 생기거나 오래 쓰지 않으면 데이터를 지우므로 persist()로 영속 저장을 요청하고, 지워진 뒤에도 앱이 온라인에서 다시 뜨게 만든다. 데이터를 뒤에서 최신으로 유지하는 백그라운드 동기화 계열 API도 정리한다.
Frontend › Web
PWA와 서비스 워커 캐시 전략PWA는 HTTPS·웹 앱 매니페스트·서비스 워커 세 가지를 갖춘 웹사이트일 뿐이고, 사이트 종류와 상관없이 득이 된다. 서비스 워커로 캐시를 직접 다룰 수 있게 된 만큼, 필요한 것만 작게 요청하고 미디어를 중요도별로 나눠 캐시하고, 캐시 크기를 제한해 사용자의 데이터와 디스크를 아낀다.
Frontend › Web
SEO 기초: 크롤링부터 메타 태그까지검색 엔진이 페이지를 크롤링·색인·순위 매기는 흐름과, 프론트엔드가 챙길 robots.txt·사이트맵·메타 태그·canonical·리다이렉트·렌더링 방식, 링크와 버튼의 구분을 정리했다.
Frontend › Web
TTFB 줄이기: 리디렉션·HTML 캐시·압축·CDN페이지의 첫 요청인 HTML이 빨리 와야 FCP·LCP가 기준을 넘는다. 리디렉션 체인을 없애고, HTML은 짧게 캐시하거나 ETag로 재검증하고, Server-Timing으로 서버 시간을 재고, 텍스트 자원은 Brotli로 정적 압축하고, CDN 엣지에서 내려 준다.
Frontend › Web
Web Storage: localStorage와 sessionStorage브라우저에 키-값 문자열을 저장하는 localStorage·sessionStorage의 API, 객체를 JSON으로 직렬화해 저장하고 복원하는 법, 다른 탭과 동기화하는 storage 이벤트, 예외 처리와 보안상 넣지 말아야 할 것을 정리한다.
Frontend › Web
WebAssembly: 브라우저의 두 번째 언어C·C++·Rust 같은 언어를 컴파일해 브라우저에서 거의 네이티브 속도로 돌리는 바이트코드 형식 WebAssembly(Wasm)를 정리한다. JavaScript와 비교해 어디서 시간이 줄어드는지(받기·파싱·컴파일·재최적화·실행·GC), Module·Memory·Table·Instance라는 네 개념과 JS API, 툴체인, MVP 이후 Wasm 2.0·3.0에 들어간 기능, 브라우저 밖 실행(WASI)과 쓸 곳·안 쓸 곳까지.
Frontend
기술 스택 고르기기술 스택은 혼자가 아니라 함께 쓰는 것이라 커뮤니티가 키운다. 기술 수용 주기·캐즘·하이프 사이클로 유행이 만들어지는 과정을 보고, 범용성·학습 비용·커뮤니티·인력·지속 가능성 다섯 기준, 큰 팀이 유지 보수성과 안정성을 위해 보는 결정 축(도구 강제·경계·재현성), 언어부터 배포·모니터링까지 계층별 2026년 기본 선택과 고르는 이유, 레거시를 대하는 자세를 정리했다.
Frontend
프론트엔드 개발자의 업무 범위와 역량프론트엔드의 일을 데이터 흐름 기준 여섯 영역(보여 주기·조작·보내기·받기·환경 관리·도구 만들기)으로 나누고, 퍼블리셔·백엔드·풀스택과의 경계, 회사와 동료가 보는 잘하는 프론트엔드 개발자의 조건을 정리했다.
Frontend
프론트엔드 엔지니어의 세 가지 성장 트랙주니어 이후 프론트엔드 엔지니어가 깊어질 방향을 웹 특화(소프트웨어 엔지니어)·제품 특화(프로덕트 엔지니어)·운영 특화(풀스택 엔지니어) 세 트랙으로 나누고, 트랙별 지식·성장법·함정·시니어 이후 진로, 모든 트랙의 바탕인 탁월한 엔지니어의 다섯 역량과 시니어다운 일하기를 정리한다.
Frontend
프론트엔드 학습 로드맵웹 표준(HTML·CSS·JavaScript·DOM)에서 TypeScript, React와 메타 프레임워크, 데이터 가져오기, 테스트·배포로 이어지는 프론트엔드 학습 순서, 필수와 관심·직무에 따른 선택 기술, 함께 쌓을 CS 기초, 공부하는 방법.
Frontend
Electron: 웹 기술로 데스크톱 앱 만들기Electron은 Chromium과 Node.js를 한 앱에 묶어 HTML·CSS·JavaScript로 macOS·Windows·Linux 데스크톱 앱을 만든다. 앱 수명과 OS 기능을 맡는 메인 프로세스, 창마다 뜨는 렌더러 프로세스, 둘을 잇는 preload·contextBridge·IPC 구조와, 기본으로 켜진 컨텍스트 격리·샌드박스 같은 보안 기본값, 패키징과 릴리스 주기, OS 웹뷰를 쓰는 Tauri와의 차이를 정리한다.
Frontend
Quasar 프레임워크 기초Vue 3 기반 UI 프레임워크 Quasar의 q- 컴포넌트와 유틸리티 클래스, 레이아웃·페이지 구조와 중첩 라우팅, 플러그인으로 쓰는 기능(Dialog), 폼 검증 라이브러리 연동을 정리한다.
Frontend
React와 Vue 말고: Svelte, Angular, Preact, Alpine.js, HTMXReact·Vue 다음으로 많이 쓰이는 프레임워크들의 특징을 비교한다. 컴파일러, 풀스택 프레임워크, 경량 대체재, HTML 속성 기반 도구로 성격이 갈린다. Knockout부터 Svelte까지 프레임워크의 계보와 컴파일러 방식이 빠른 이유도 다룬다.
Frontend
React와 Vue 비교같은 범주(컴포넌트 기반 선언형 UI, 가상 DOM)에 속하는 React와 Vue의 차이를 정리한다. JSX와 템플릿, 불변 상태와 반응형 상태, 단방향 흐름과 v-model, 라이브러리와 공식 생태계의 범위를 비교하고, 흔한 오해와 고르는 기준을 다룬다.
Frontend
UI 엔지니어링의 열두 가지 문제UI 엔지니어링의 실력은 라이브러리가 아니라 문제를 아는 데서 나온다. 일관성·반응성·지연·내비게이션·낡은 캐시·엔트로피·우선순위·접근성·국제화·전달·복원력·추상화라는 열두 문제는 툴팁부터 대형 SNS까지 어느 규모에서나 나타나며, 각 문제에 오늘날 쓰는 도구와 함께 정리한다.
Frontend
Vue 상태 관리: Pinia(옛 Vuex)여러 컴포넌트가 함께 쓰는 데이터를 스토어 한 곳에 모으는 Vue의 상태 관리. 지금 공식 라이브러리는 Pinia이고, defineStore로 state·getters·actions를 정의한다. Vuex의 mutations/actions 구분은 사라졌다.
Backend › Architecture
BFF (Backend For Frontend)프론트엔드 하나마다 그 화면에 맞춘 중간 서버를 두는 BFF 패턴. 여러 API를 묶고, 필요한 필드만 가공해 내려 주고, CORS·인증·MSA 엔드포인트 변경을 흡수한다. Next.js를 BFF로 쓰는 법과 GraphQL 정규화 캐시 함정을 정리한다.
Backend › Django
Django Template과 Static 파일DTL의 변수·필터·태그와 템플릿 상속으로 화면을 구성하고, CSS·이미지 같은 정적 파일을 연결하는 방법.
Computer Science › Network
CDN전 세계 엣지 서버에 콘텐츠를 캐시해 사용자 가까운 곳에서 응답하는 CDN. 동작 방식, 얻는 것과 비용·위험, 캐시 무효화와 프론트엔드 배포에서의 쓰임을 정리한다.
Computer Science › Network
DNS도메인 이름을 IP 주소로 바꿔 주는 DNS. 이름 공간의 트리 구조(레이블, FQDN·PQDN, gTLD·ccTLD·역방향 도메인), UDP와 TCP를 쓰는 경우, 재귀·반복 질의 흐름과 DNS 포워더, hosts 파일의 우선순위, 손실 재시도, 주요 레코드 종류, TTL과 캐시(잘못된 캐시 바로잡기), 프론트엔드에서 쓰는 dns-prefetch·preconnect를 정리한다.
Computer Science › Network
HTTP 캐시Cache-Control, ETag·Last-Modified로 브라우저와 CDN이 응답을 재사용하는 HTTP 캐시. 신선도와 재검증, 자주 쓰는 지시어, 자산별 캐시 전략을 정리한다.
Computer Science › Network
HTTPS와 TLSHTTP를 TLS로 감싸 도청·변조·위장을 막는 HTTPS. 대칭키·공개키를 섞어 쓰는 TLS 핸드셰이크, 첫 HTTP 요청의 빈틈을 막는 HSTS와 preload, HTTPS만으로는 부족한 경우를 정리한다.
Computer Science › Network
WebSocket한 번 맺은 연결로 서버와 브라우저가 양방향 실시간 통신을 하는 WebSocket. OS 소켓과의 차이, HTTP Upgrade 핸드셰이크와 버전, 프레임과 텍스트·바이너리, ping/pong, 압축 확장, 폴링·SSE·HTTP/2와의 비교, 보안과 인증, 로드 밸런싱·프록시·우아한 종료, 라이브러리 선택과 디버깅을 정리한다.
Computer Science
개발자가 빠지는 함정 모음CSS·유니코드·부동소수점·시간·SQL·동시성·React·Git·네트워크 등에서 직관과 다르게 동작해 버그를 만드는 지점을 분야별로 묶고, 이름·주소·전화번호·이메일 같은 현실 데이터에 대한 착각(Falsehoods)을 덧붙였다. 공통 교훈은 '기본값과 경계를 믿지 말고, 표현과 비교의 기준을 명시하라'다.
DevOps
S3·CloudFront로 정적 사이트 배포하기빌드한 SPA·정적 사이트를 AWS에 올리는 표준 구성. 비공개 S3 버킷을 원본으로 두고 CloudFront가 OAC로만 읽어 HTTPS·압축·엣지 캐시를 맡으며, ACM 인증서(us-east-1)와 Route 53 별칭 레코드로 커스텀 도메인을 붙인다. SPA 라우팅 처리, 캐시 헤더와 무효화, GitHub Actions에서 OIDC로 배포하는 워크플로까지 정리한다.
AI & Data
디자인 시스템을 아는 화면 생성 에이전트 설계하기프롬프트→코드 한 번의 점프 대신 구체화·기억·참고·생성·검증·축적 루프를 하네스로 묶고, 중간 표현(스펙)·온디맨드 스킬·자동 채점기·세션 간 메모리로 결과를 일관되게 만드는 에이전틱 코딩 기법.
AI & Data
AI 기능의 UX 패턴: 배경형·제한형·개방형AI 기능은 사용자에게 드러나는 정도에 따라 배경형(조용히 기존 경험을 돕는다), 제한형(버튼으로 정해진 작업을 부른다), 개방형(자유 입력)으로 나뉜다. 노출이 클수록 유연하지만 위험도 커진다. 유형별 예와 모범 사례, 둘 중 고르는 기준, 투명성·안내·제어·신뢰 보정·실패 관리 패턴 표를 정리한다.
AI & Data
AI 네이티브 프론트엔드 개발코드를 AI만으로 쓰는 팀에서 프론트엔드가 일하는 방식. 금지 규칙 대신 대화로 뽑은 스킬, 구조를 직접 바꾸며 이해하기, 의도 정렬 순서, 이슈·PR로 맥락 관리, 병렬 작업과 이탈 감지, 디자인 픽셀 비교와 상태 재현 환경, BE·디자인을 정본으로 삼아 FE를 얇게 만들기, AI에게 관측 통로 달아 주기, 통합과 완성도로 옮겨 가는 역할을 정리한다.
AI & Data
AI 모델로 완성도 높은 프론트엔드 디자인 뽑기AI는 상상보다 모방을 잘한다. 디자인 시스템·시각 레퍼런스(와이어프레임·스크린샷·무드보드)·서사·검증 도구를 미리 주고 기본 폰트·아이콘을 바꾸면 흔한 템플릿 대신 의도가 분명한 UI가 나온다.
Tools
Chrome DevToolsChrome에 내장된 웹 개발자 도구 모음. 여는 법, 할 일별로 어느 패널을 쓰는지, 명령 메뉴·단축키·설정, 검색·문제·변경사항 같은 보조 도구를 한곳에 모은 DevTools 노트 안내.
Tools › Chrome DevTools
DevTools Application 패널: 저장소·서비스 워커Application 패널은 매니페스트·서비스 워커·캐시 저장소(PWA), Local/Session Storage·IndexedDB·쿠키, 저장소 지우기, bfcache 테스트, 추측 규칙(prefetch·prerender) 디버깅, 프레임 보안 정보를 한곳에서 보고 고치는 곳이다. 무엇을 확인하려 할 때 어느 탭을 열고 무엇을 보는지 정리한다.
Tools › Chrome DevTools
DevTools Console 활용Chrome DevTools 콘솔로 메시지를 읽고 걸러 내는 법, console.table·group·time·assert·count·trace 같은 Console API와 %c 서식, 실시간 표현식, $0·$_·$()·$$()·copy()·monitorEvents·getEventListeners·queryObjects 같은 콘솔 전용 유틸리티, 페이지 위에서 JavaScript를 실행하는 법을 정리했다.
Tools › Chrome DevTools
DevTools Network 패널리소스가 실제로 오가는지, 헤더·페이로드·응답·쿠키가 무엇인지, 어느 단계에서 시간이 드는지 확인하는 패널. 기록·필터·검색으로 요청을 좁히고, 캐시 끄기·스로틀링·오프라인·요청 차단으로 조건을 바꾸고, HAR·fetch·cURL로 내보내거나 다시 보낸다. HTTPS·혼합 콘텐츠·서드 파티 쿠키는 개인 정보 보호 및 보안 패널에서 본다.
Tools › Chrome DevTools
DevTools로 성능·메모리 분석하기Performance 패널의 실시간 지표 화면과 트레이스 녹화·읽기(메인 트랙, 플레임 차트, Bottom-up·Call tree, 긴 작업, 인사이트, 주석, 저장·공유, 선택기 통계), 성능 모니터, 렌더링 탭과 레이어 패널, 커버리지, 메모리 패널로 누수·팽창·잦은 GC를 찾는 절차, Lighthouse 실행법을 정리한다.
Tools › Chrome DevTools
DevTools로 DOM과 CSS 다루기Elements 패널에서 DOM을 고르고 고치는 법, 스타일 창의 취소선·흐림·경고 표시로 CSS가 안 먹는 이유를 읽는 법, 상태 강제(:hov)·색상 선택기·Flex/Grid/컨테이너 오버레이·애니메이션 패널로 레이아웃과 움직임을 디버깅하는 법, CSS 개요·자동 완성 패널, 접근성 트리·대비·포커스 검사까지 정리한다.
Tools › Chrome DevTools
DevTools로 JavaScript 디버깅하기Chrome DevTools Sources 패널로 JavaScript를 디버깅하는 법. 상황별 중단점(줄·조건부·로그포인트·DOM·XHR/fetch·이벤트 리스너·예외·debugger 문), 단계 실행과 Scope·Watch·Call Stack, 스니펫, 소스 맵과 무시 목록, 로컬 파일에 저장하는 Workspaces와 응답을 바꿔 끼우는 로컬 재정의, Recorder까지 정리했다.
Tools › Dev Environment
로컬 개발 환경에 HTTPS 적용하기localhost는 대부분 보안 컨텍스트로 취급되지만 Secure 쿠키·HTTP/2·커스텀 호스트가 필요하면 로컬 HTTPS가 필요하다. mkcert로 내 기기만 믿는 로컬 CA를 만들어 인증서를 발급하고, 웹 서버·Node·프레임워크 개발 서버에 붙인다.
Tools
Retool: 로우 코드로 내부 도구 만들기어드민 페이지·대시보드 같은 내부 도구를 UI 개발 없이 약간의 JS와 SQL로 만드는 로우 코드 플랫폼 Retool의 특징과 어울리는 쓰임.
Career › Job Search
프론트엔드 면접 유형과 준비법프론트엔드 면접은 알고리즘보다 도메인 지식과 실전 구현을 본다. JavaScript 코딩, UI 코딩, 알고리즘, 퀴즈, 프론트엔드 시스템 디자인, 비헤이비어럴 여섯 유형별로 무엇을 보고 어떻게 준비하는지, 유형별 대표 문제, 시스템 디자인용 RADIO 프레임워크, UI 구현 때 짚을 체크리스트를 정리하고 개념은 Frontend 노트로 잇는다.
Career › Product
상세페이지 9단계 구조상세페이지는 고객이 의심을 하나씩 풀며 구매 버튼까지 스크롤을 내리게 하는 싸움이다. 유입과 전환, 세일즈 퍼널을 바탕으로 판매 증거 → 판매 관리 → 인증 → 메인 이미지 → 문제 → 상세 이미지 → 공감 → 액션 → 상세 정보의 9단계를 고객의 질문 순서로 정리하고, 강점을 위로 올리는 조정법과 표시·광고 규정, 접근성 주의점을 덧붙인다.