[지난 글 요약 한 줄] 화면과 데이터를 분리하면서 읽기 쉬운 흐름을 만들기 시작했다. 하드코딩을 줄이고, 중복을 제거하는 작은 시도에서 출발했다. 이전 글 보기: 읽기 쉬운 코드를 위한 작은 출발 # 같은 변경을 여러 곳에서 반복하고 있다면? 각 SECTION마다 카드 UI가 비슷하게 보이지만, 실제 코드에서는 구조와 클래스가 조금씩 달랐다. 여기...

# 하드코딩의 벽에 부딪히다 프로젝트를 처음 접했을 때 가장 눈에 들어온 건, 수많은 텍스트와 이미지 URL이 컴포넌트 코드 안에 그대로 적혀 있는 하드코딩(Hard-coding)의 흔적이었다. 새로운 데이터를 추가/수정하거나 이미지를 교체하려면, 매번 tsx 파일을 열어 코드를 직접 수정해야 했다. 작은 오타를 고치기 위해 컴포넌트 로직을 건드려야 ...

문서화는 결국 시간을 벌어준다 인턴을 시작하고 나서 제일 먼저 붙잡은 건 기능 개발이 아니라 커뮤니케이션과 문서화 루틴이었다. 말로 합의해도 회의실 문이 닫히면 기억은 흐려지고, 각자 머릿속의 그림이 다르게 그려진다. 큰 오해를 크게 겪은 적은 없지만, 애초에 나는 회의 후 정리 → 공유를 꾸준히 돌려왔다. 덕분에 “그때 뭐라고 했지?”가 자연스럽게...

두 번째 인턴을 시작하며 첫 번째 인턴이 끝나고, 이번에는 미래내일일경험 프로그램으로 약 5개월 동안 두 번째 인턴이 시작됐다. 온라인으로만 일하던 지난번과 다르게 이번엔 오프라인 출근이라 그런지, 지하철 문이 열릴 때부터 마음이 싱숭생숭했다. 앉을 자리를 찾고 한숨 돌리려던 순간, 옆자리 분이 노트북을 펼쳤는데 슬랙 워크스페이스가 스쳐 지나갔다. ...

지난 글에서는 성능 측정 도구 5가지를 활용하여 각 특징에 대해 살펴보고, 간단하게 측정 방법까지 다루었다. 참고 : 성능 개선을 위한 웹 진단 도구 가이드 이번 글에서는 웹폰트 최적화의 필요성과 실제 개선 사례를 바탕으로, 그 전후 차이와 효과를 직접 체감해볼 예정이다. # 상황에 적합한 측정 도구 선정하기 Google Lighthouse와 Pag...

# Google Lighthouse로 성능 · 접근성 · SEO 한 번에 측정하기 Google Lighthouse는 구글에서 만든 오픈소스 자동화 웹 품질 진단 도구다. 크롬 브라우저에 내장되어 있어서 별도 설치 없이 사용할 수 있다. 성능, 접근성, SEO(검색

@ alias

fetch, merge, pull, rebase, staging area, stash에 대해서 숙지하기

# 코드 조각의 힘, 모듈이란 무엇인가? 모듈(Module)은 소프트웨어에서 하나의 기능 단위로 분리되어, 재사용과 관리가 쉽도록 만든 독립적인 코드 조각이다. 예를 들어, 자바스크립트에서 로그인 기능, 카드 UI, 유틸 함수 등을 각각 별도의 파일로 분리하면, 이

왜 다들 Sass! Sass! 하는 걸까? Sass(Syntactically Awesome Style Sheets)는 CSS의 한계를 보완하고, 더 효율적으로 스타일을 관리할 수 있도록 도와주는 CSS 전처리기(pre-processor)이다. Sass는 CSS에 없