JavaScript Date UTC KST 차이: 시간대 변환 기준 잡기
주요 포인트 한눈에 보기 이 글은 프론트엔드 개발자가 반드시 이해해야 하는 UTC와 KST 시간 기준을 개념부터 실무 기준까지 정리합니다. 단순한 시간 차이 설명이 아니라, JavaScript Date 객체의 …
더 읽기프론트엔드
프론트엔드 카테고리에서는 사용자 화면을 구현하는 데 필요한 핵심 기술과 실무 지식을 정리합니다. HTML, CSS, JavaScript를 비롯해 React, Next.js, UI 컴포넌트 설계, 상태 관리, API 연동, 성능 최적화, 반응형 웹까지 프론트엔드 개발 전반을 다룹니다.
Next.js 커스텀 훅 설계: 프론트엔드 상태 관리 구조 잡기
프로젝트 개요 이 프로젝트는 실제 서비스 운영을 전제로 설계된 개인 포트폴리오이며, 인증, 사용자 데이터, 장바구니, 포인트, 대시보드, 공통 유틸, 입력 처리 등 반복적으로 사용되는 로직을 모두 Custom Hook으로…
더 읽기
JavaScript reduce 사용법: 배열 누적 계산을 이해하는 기준
주요 포인트 한눈에 보기 JavaScript의 reduce() 함수는 배열을 하나의 값으로 축약하는 기능을 넘어서, 초심자에게는 복잡하게 느껴질 수 있는 데이터 변환을 단계별로 안전하고 예측 가능하게 처리해주는 핵심 도구입니다. 이 글에서는 완전 기초 개…
더 읽기
JavaScript 실행 컨텍스트 기준: 스코프 호이스팅 클로저 연결하기
이 글에서 정리하는 내용 스코프, 렉시컬, 실행 컨텍스트, 호이스팅, 클로저는 자바스크립트를 공부할 때 거의 한 번에 묶여서 나오는 개념입니다. 처음에는 전부 다른 단어처럼 보이지만, 실제로는 자바스크립트가 변수를 어디서 찾는지 정하고, 실행 전에 무엇을 먼저 준비하…
더 읽기
JavaScript 투두리스트 만들기: DOM 조작과 이벤트 처리 익히기
주요 포인트 한눈에 보기 프론트엔드 코딩테스트에서 바닐라 자바스크립트로 투두리스트를 구현했던 경험을 정리합니다. 시험 당시에는 appendChild로 문제를 해결했지만, 이후 DOM 조작을 다시 공부하며 insertAdjacentElement라는 다른 선…
더 읽기
TypeScript 6.0 업데이트: 마이그레이션 전 확인할 변화
이 글에서 정리하는 내용 저는 이 글에서 TypeScript 6.0을 처음 접하는 주니어 개발자도 흐름을 따라올 수 있도록, 어려운 용어를 먼저 쉬운 말로 풀고 기존 방식과 비교하면서 설명해보겠습니다. 단순히 무엇이 추가됐는지 나열하는 것이 아니라, 왜 바뀌었는지와 내…
더 읽기
Firebase 초기화 구조: Next.js firebase.ts 설계 기준
주요 포인트 한눈에 보기 이 글은 완성된 포트폴리오 코드를 기준으로 Next.js + TypeScript + Firebase를 사용할 때 어떤 방식으로 제작되었는지 프로젝트를 분석합니다. 그 중 이번 챕터에서는 firebase.ts 초기화 …
더 읽기
Next.js 보안 패치 기준: v16.2.5 릴리스로 영향 범위 점검하기
Next.js 보안 패치는 버전만 올리고 끝내면 부족합니다 Next.js 보안 패치를 확인할 때는 “최신 버전으로 올리면 된다”에서 멈추지 않고, 내 프로젝트가 어떤 기능을 쓰는지와 릴리스 노트의 advisory가 어디에 해당하는지 함께 봐야 합니다. 이 글은 Next…
더 읽기
Next.js package.json: scripts dependencies 이해
이 글에서 정리하는 내용 Next.js 프로젝트를 처음 열었을 때 많이 보게 되는 scripts, dependencies, devDependencies, next dev/build/start를 초심자 기준으로 한 흐름으로 정리합니다. 용어를 따로 외우기보다 프로젝트가 …
더 읽기
Next.js 성능 최적화: 배포 플랫폼별 개선 기준
주요 포인트 한눈에 보기 Next.js는 서버 사이드 렌더링, 코드 분할 등 강력한 기능으로 웹 성능 최적화를 지원합니다. 이 글에서는 코드 및 배포 최적화 실제 사례를 분석하고, Vercel, AWS, Netlify 등 주요 배포 플랫폼을 비교하여 프로젝트에 맞는 최…
더 읽기