본문 바로가기

분류 전체보기56

[Next.js] 메인 페이지 로딩 속도가 3초? Next.js Image 컴포넌트로 0.8초까지 줄여본 삽질기 이번에 개인 프로젝트를 새로 런칭하고 설레는 마음으로 크롬 개발자 도구의 Lighthouse 성능 검사를 돌려보았습니다.결과는 참담하게도 성능 점수 62점, LCP(최초 대형 콘텐츠 도출) 속도 3.2초.스마트폰 모바일 LTE 환경으로 접속해 보니 메인 페이지 배너 이미지가 위에서부터 턱-턱-턱 둔하게 렌더링되면서 아래쪽에 있던 텍스트들이 밑으로 밀려나는 현상(CLS)까지 발생하고 있었습니다."요즘 같은 세상에 로딩에 3초나 걸리는 웹사이트를 누가 기다려줄까?" 하는 위기감이 들었고, 원인을 분석해 보니 아무 생각 없이 넣어둔 고용량 메인 배너 이미지(PNG, 3.8MB)가 범인이었습니다.오늘은 기본 HTML 태그를 버리고 Next.js의 Image 컴포넌트(next/image)를 도입해 로딩 속도를 .. 2026. 7. 29.
[React] useState와 useEffect 실무 적용 중 겪었던 3가지 초보적 실수와 해결책 리액트(React)를 활용해 웹 애플리케이션을 개발할 때, 가장 기본이 되면서도 개발자를 가장 흔하게 대혼란에 빠뜨리는 주범은 바로 상태 관리(useState)와 부작용 처리(useEffect)입니다.문법 자체는 매우 단순해 보이지만, 리액트 내부의 렌더링 라이프사이클과 비동기 업데이트 메커니즘을 명확히 이해하지 못하면 눈에 잘 띄지 않는 치명적인 버그를 만들어내곤 합니다.오늘은 제가 리액트 프로젝트를 진행하며 직접 경험했던 대표적인 실수 3가지와 이를 해결하며 깨달은 리액트의 핵심 원리를 상세히 정돈해 보려고 합니다.1. 실수 1: useEffect 내부 비동기 호출 시 '무한 렌더링' 루프 발생가장 식은땀을 흘렸던 버그는 컴포넌트가 마운트될 때 API 데이터를 가져오도록 작성한 useEffect 코드.. 2026. 7. 28.
[Git] "내 코드가 어디 갔지?" 초보 개발자가 자주 범하는 Git 실수 3가지와 해결법 프론트엔드 프로젝트를 진행하면서 코딩 자체보다 나를 더 식은땀 흘리게 만들었던 순간은 단연 'Git 명령어 실수'였습니다.로직을 신나게 짜두고 커밋 하나 잘못 날려서 수시간 동안 작업했던 코드를 날려먹을 뻔하거나, Git Merge 충돌이 무서워서 소스 코드를 압축 파일로 복사해 두는 웃지 못할 삽질을 겪기도 했습니다.오늘은 제가 프론트엔드 프로젝트를 진행하며 직접 겪었던 대표적인 Git 실수 3가지와, 이를 깔끔하게 해결했던 복구 명령어(Tip)를 정돈해 보려고 합니다.1. 실수 1: 잘못된 브랜치에 코드를 다 짜놓았을 때 (git stash)feature/login 브랜치에서 작업해야 하는데, 깜빡하고 main 브랜치나 다른 작업 브랜치에서 열심히 코드를 수정하고 있던 자신을 뒤늦게 발견했을 때입니다.. 2026. 7. 28.
[CSS] Tailwind CSS 도입 후기: BEM 클래스명 지옥 탈출과 가독성 극복 전략 최근 진행한 프론트엔드 프로젝트의 UI 스타일링 도구로 요즘 생태계에서 가장 핫한 Tailwind CSS를 도입해 보았습니다.이전까지는 Plain CSS, SCSS, 혹은 CSS Modules 방식을 주력으로 사용하며 클래스명을 정의하고 스타일을 입혀왔습니다. 하지만 프로젝트의 규모가 조금씩 커질수록 CSS 파일 용량이 불어나고, 클래스 이름 지정(Naming)에 소비되는 시간이 늘어나는 등 여러 한계를 체감하게 되었습니다.오늘은 유틸리티 우선(Utility-First) CSS 프레임워크인 Tailwind CSS를 실제 프로젝트에 직접 도입해 보면서 느꼈던 솔직한 장단점과, 가독성 단점을 극복했던 나만의 리팩토링 노하우를 깊이 있게 공유해 보려고 합니다.1. 기존 CSS 방식의 한계: "클래스 이름 짓다.. 2026. 7. 28.
[Web] 웹 액세서빌러티(A11y): 모두를 위한 접근성 높은 인터페이스 구축 얼마 전 프로젝트를 마치고 QA(품질 검사) 단계를 진행하던 중, 지인에게 피드백을 받았습니다. "마우스 없이 Tab 키로만 메인 페이지 조작해봤어? 모달 창이 열렸는데 초점이 모달 뒤로 넘어가서 닫을 수가 없네."순간 아차 싶었습니다. 그동안 저는 단순히 예쁜 화면을 만드는 데만 집착했지, 마우스를 쓰기 힘든 사용자나 스크린 리더를 쓰는 사용자가 내 사이트를 어떻게 이용할지 단 한 번도 깊게 고민해 본 적이 없었던 것입니다.웹 접근성(A11y)은 배려나 선택이 아닌, 모든 사용자에게 정보를 평등하게 전달하기 위한 기본입니다. 오늘은 제가 프로젝트에서 겪었던 시행착오와 함께, 프론트엔드 개발자가 반드시 챙겨야 할 웹 접근성 실무 적용기를 정리해 보려고 합니다.1. 시맨틱 마크업: 습관을 버리는 것부터 .. 2026. 5. 6.
[Future] AI 도구와 Wasm을 직접 써보며 느낀 프론트엔드 개발자의 미래와 고민 얼마 전 프론트엔드 최신 에디터로 떠오른 Cursor를 도입하고, 프로젝트의 유틸리티 로직 작성을 AI에게 맡겨본 적이 있습니다. 간단한 데이터 변환 함수를 몇 초 만에 뚝딱 만들어내는 모습을 보며 감탄하기도 했지만, 동시에 오한이 서리기도 했습니다. "단순히 Figma 시안을 보고 HTML/CSS 레이아웃을 잡는 일이라면, 머지않아 AI가 전부 대체하겠구나."실제로 최근 프론트엔드 생태계는 단순히 '화면을 구현하는 작업'에서 'AI와 협업하여 아키텍처를 설계하고, 브라우저 환경에서 고성능 로직을 다루는 영역'으로 급격하게 이동하고 있습니다. 오늘은 제가 실무에서 AI 툴과 WebAssembly(Wasm) 관련 기술들을 직접 접해보고 느낀 솔직한 생각과 준비 전략을 적어보려고 합니다.1. 코더(Coder.. 2026. 5. 5.

티스토리툴바