2025년 1분기 회고
2025년 3월 30일
목차
- 들어가면서
- hoonie-blog: 개인 기술 블로그 개발
- 토이 프로젝트 MOTY 개발 및 연사 참여
- 한입 챌린지 4기: TypeScript
- 가상 DOM의 오해와 진실 이해하기
- 함수형 프로그래밍 스터디
- Container/Presentational React 디자인 패턴 학습
- 오픈소스 기여: Zed 에디터 이슈 제보
- 이력서 작성 및 지원
- 이번 분기의 수확
- 나오면서: 2분기 계획
들어가면서
마지막으로 작성했던 회고가 2023년이었습니다. 그동안 회고를 써야지 써야지 했다가 그렇게 2025년의 1분기가 다 지나갔습니다. 시간은 참 빠르게 흘러가는 것 같습니다. 그동안은 회고를 작성하면서 다양한 방식을 사용해 봤습니다. KPT와 4L 방식의 회고를 사용해 봤었는데, 모든 회고에 같은 방식을 사용하기보다는 상황에 맞게 각자 다른 회고 방식을 적용해보는 것이 좋을 것 같다는 생각이 들었습니다. 이번에 회고 방법에 대해서 조사하면서 STAR라는 회고 방식에 대해 알게 되었습니다. 해당 회고 방식은 다음과 같이 이루어져 있습니다.
- Situation: 상황
- Task: 목표
- Action: 행동
- Result: 결과
이러한 방식을 사용하면 각 회고 항목에 대해 체계적으로 정리할 수 있다는 생각이 들었습니다. 이번 회고에서는 STAR 회고 방식을 적용하여, 2025년의 1분기를 주니어 프론트엔드 개발자로 취업을 준비하며 했던 다양한 활동을 중점으로 되돌아보고자 합니다.
hoonie-blog: 개인 기술 블로그 개발
Situation (상황)
블로그 플랫폼을 옮겨다니는 "블로그 유목민" 생활에 지쳐, 글쓰기에 집중할 수 있는 나만의 블로그가 필요했습니다. 또한 블로그를 직접 만들어보고 꾸준히 가꿔나가는 과정을 통해 성장하고 싶었습니다.
Task (목표)
- 불필요한 의존성을 최소화한 블로그 구축
- 글쓰기 경험을 해치지 않는 미니멀한 디자인 적용
- SEO 최적화를 통한 검색 노출 향상
- 기초부터 시작해 개선해나가는 과정을 통한 성장
Action (행동)
- Next.js와 MDX를 기반으로 한 블로그 시스템 구축
- 다크모드 기능 구현 및 FOUC(Flash of Unstyled Content) 문제 해결을 위한 쿠키 기반 접근법 적용
- 사이트맵과 robots.txt 생성하여 SEO 최적화
- Vercel Web Analytics와 Speed Insights 도입
Result (결과)
- 의존성 최소화로 유지보수가 용이한 블로그 구축 완료
- 다크모드 전환 시 깜빡임 없는 UX 구현
- 검색엔진을 위한 기본적인 SEO 최적화 완료
- 꾸준한 업데이트를 통한 개발 역량 성장
더 알아보기
토이 프로젝트 MOTY 개발 및 연사 참여
Situation (상황)
크리스마스 이후 친구와 대화를 하던 중, 친구의 토이 프로젝트에 대해서 알게 됐습니다. 연말을 맞아 비슷한 컨셉의 토이 프로젝트를 만들어보고 싶었고, 새해까지 얼마 남지 않은 상황에서 빠르게 프로젝트를 개발하고 배포해야 했습니다.
Task (목표)
- 사용자가 올해의 영화를 선택하고 공유할 수 있는 웹 서비스 개발
- 닉네임 입력, 영화 선택, 한줄 평 남기기, 결과 페이지 공유라는 주요 기능 구현
- 기능 구현을 넘어 웹 접근성, UX 등을 고려한 서비스 개발
Action (행동)
- 빠른 개발을 위해 피그마로 간단한 프로토타이핑 진행
- 불필요한 기술 스택 사용을 최소화
- TMDB API를 활용한 영화 검색 기능 구현
- 페이지별 핵심 기능 개발
- 웹 접근성 개선 및 UX 개선
Result (결과)
- 2일 만에 '올해의 영화'를 공유할 수 있는 웹 서비스 완성
- 웹 접근성 지침을 준수하여 모두가 사용할 수 있는 서비스 개발
- 이후 세미나에서 토이 프로젝트 개발 과정 및 성장을 공유할 수 있는 기회 확보
더 알아보기
한입 챌린지 4기: TypeScript
Situation (상황)
TypeScript는 이제 프론트엔드 개발 생태계에서 필수적인 기술이 됐습니다. JavaScript에 정적 타입을 추가한 TypeScript는 코드의 안정성을 높이고, 개발 경험을 개선해줍니다. 따라서 개발자로서 성장하기 위해 TypeScript에 대한 깊이 있는 이해가 필요했습니다.
Task (목표)
- 이정환님의 '한 입 크기로 잘라먹는 타입스크립트' 챌린지 참여
- 2주간 매일 강의를 수강하며 미션 완료하기
- TypeScript에 익숙해지기
Action (행동)
- 정해진 날짜별 강의를 듣고 학습한 내용 기반으로 미션 수행
- 하루 약 1시간 투자하여 강의 수강 및 미션 완료
- 학습한 개념을 실습을 통해 직접 적용해보는 경험
- 타입스크립트의 기본 문법부터 인터페이스, 제네릭, 타입 가드 등 핵심 개념 학습
Result (결과)
- 타입스크립트의 기초를 체계적으로 학습
- 타입 추론 메커니즘과 유틸리티 타입을 활용하는 방법 이해
- 실제 프로젝트에 타입스크립트를 적용해볼 예정
- 아쉬운 점으로 학습 내용의 기록 부재를 인식하고 향후 개선점으로 삼음
더 알아보기
가상 DOM의 오해와 진실 이해하기
Situation (상황)
리액트의 가상 DOM에 대해 "실제 DOM보다 빠르다"라는 오해가 있었고, 이 주장이 절반만 맞는 말이라는 인식에서 출발해 가상 DOM의 실체를 탐구하게 되었습니다. 특히 글의 설득력을 위해 보다 객관적인 근거가 될 수 있는 자료를 찾아보고 이를 바탕으로 가상 DOM의 성능을 분석하고자 했습니다.
Task (과제)
- 가상 DOM의 실제 성능과 역할을 정확히 이해하고 분석하기
- 가상 DOM의 등장 배경과 작동 원리 설명하기
- 리액트 파이버와 렌더링 프로세스, Diffing 알고리즘 탐구하기
- 가상 DOM에 대한 비판과 대안 기술 조사하기
- 실제 벤치마크 결과를 바탕으로 가상 DOM의 성능 분석하기
Action (행동)
- 가상 DOM의 등장 배경과 브라우저 렌더링 과정을 분석
- 리액트 파이버 아키텍처와 작동 방식 연구
- 리액트의 렌더링 프로세스를 단계별로 분석
- Diffing 알고리즘의 원리와 최적화 케이스 정리
- Svelte와 Million.js와 같은 가상 DOM의 대안 기술 조사
- 2020년 발표된 논문의 벤치마크 결과를 통해 다양한 프레임워크의 성능 비교 분석
Result (결과)
- 가상 DOM이 모든 상황에서 빠른 것은 아니라는 결론 도출
- 가상 DOM은 성능 최적화 도구를 넘어 선언적이고 상태 중심적인 UI 개발을 가능하게 하는 리액트의 핵심 개념임을 확인
- 가상 DOM을 무조건 기피할 필요는 없으며, 프로젝트의 특성과 요구사항에 맞는 기술을 선택하는 것이 중요하다는 결론 도출
더 알아보기
함수형 프로그래밍 스터디
Situation (상황)
선언적이고 읽기 쉬운 코드 작성을 위해 함수형 프로그래밍 패러다임에 대한 이해가 필요했습니다. 또한 앞으로 진행될 객체지향 스터디와, 그 이후의 멀티 패러다임 프로그래밍에 대한 학습을 위해 함수형 프로그래밍에 대한 이해가 필수적이라고 생각했습니다.
Task (목표)
- 함수형 프로그래밍의 핵심 개념 이해 및 적용
- JavaScript/TypeScript에서 함수형 접근법 적용 방법 학습
Action (행동)
- 온라인 스터디 그룹 결성 및 주 1회 스터디 진행
- 함수형 프로그래밍 관련 도서 및 자료 학습
- 순수 함수, 불변성, 고차 함수, 구현 패턴 등 개념 실습
Result (결과)
- 함수형 프로그래밍의 기본 원칙과 패턴에 대한 이해 확립
- 스터디 그룹 내에서 지식 공유 및 네트워킹
더 알아보기
Container/Presentational React 디자인 패턴 학습
Situation (상황)
이전 토마토들 프로젝트에서 폴더 구조에 대한 고민을 했고, 회고에서 UI와 로직을 분리하기 위해 컨테이너 패턴을 적용했다고 언급했습니다. 그러나 이력서 피드백을 통해 실제로 적용한 패턴이 제대로 된 컨테이너 패턴이 아니라는 것을 깨달았고, 해당 패턴에 대해 학습해보고자 했습니다.
Task (목표)
- React의 Container/Presentational 패턴에 대해 학습하기
- 토마토들 프로젝트에서 사용한 패턴이 무엇인지 정확히 파악하기
- 디자인 패턴의 올바른 적용과 이해에 대해 정리하기
Action (행동)
- Container/Presentational 패턴에 대한 학습
- 전통적인 Container/Presentational 패턴과, Hooks 시대의 패턴 변화 탐구
- 토마토들 프로젝트에서 사용한 패턴의 특징 분석 및 파악
- 패턴 사용의 이유와 문제점 분석
Result (결과)
- 토마토들 프로젝트에서 사용한 패턴이 제대로 된 컨테이너 패턴이 아니라는 것을 학습
- 기술적 개념을 정확히 이해하고 올바르게 적용하는 것의 중요성을 깨달음
더 알아보기
오픈소스 기여: Zed 에디터 이슈 제보
Situation (상황)
개발에 사용하는 Zed 에디터를 사용하면서 한글 관련 치명적인 문제들을 발견했습니다. JSX 파일에서 한글 입력 시 에디터가 충돌하는 현상과 내장 터미널에서 한글 파일명이 제대로 표시되지 않는 유니코드 정규화 이슈가 있었습니다. 이러한 문제들은 한국어 사용자로서 개발 경험을 크게 저해하는 요소였고, 오픈소스 프로젝트에 기여할 수 있는 기회이기도 했습니다.
Task (목표)
- Zed 에디터의 한글 관련 버그 상세 분석 및 문서화
- 재현 가능한 형태로 이슈 정리
- 개발자가 이해하기 쉽게 기술적으로 정확한 이슈 리포트 작성
- 가능한 해결책 제안
Action (행동)
- JSX 파일에서 발생하는 UTF-8 문자 경계 오류를 재현 가능한 코드 예제와 함께 정리
- 내장 터미널의 유니코드 정규화(NFC/NFD) 이슈에 대한 상세 분석
- 다양한 환경 설정을 통한 문제 해결 시도 (locale 설정 등)
- 문제를 명확히 보여주는 예제 코드 작성
- 상세한 오류 로그와 시스템 정보 수집
- GitHub 이슈를 통해 체계적으로 문제 상황 보고
Result (결과)
- Zed 개발팀으로부터 상세한 이슈 제보에 대한 긍정적인 피드백 획득
- 이슈가 개발팀에 의해 우선순위가 지정되고 국제화(internationalization) 태그가 추가됨
- 개발자들이 직접 이슈를 담당하고 해결 과정에 착수
- 오픈소스 프로젝트에 기여하는 과정에서 기술적 커뮤니케이션 능력 향상
더 알아보기
- Unicode Normalization Issue in Zed's Built-in Terminal on macOS #26036
- Zed crashes when editing JSX/React code with Korean characters due to UTF-8 character boundary error #27599
이력서 작성 및 지원
Situation (상황)
더 이상 취업이 미뤄지는 것을 막기 위해, 구직 활동을 본격적으로 시작해야 할 필요성을 느꼈습니다. 그동안 준비해온 블로그와 다양한 프로젝트 경험을 바탕으로 이력서를 작성하고 실제 지원 과정을 진행하는 단계에 접어들게 되었습니다.
Task (목표)
- 첫 개발자 이력서 작성하기
- 피드백을 통한 이력서 지속적 개선
- 적합한 회사 리서치 및 지원 시작하기
- 면접 준비 병행하기
Action (행동)
- 블로그 포스팅과 프로젝트 경험을 중심으로 이력서 초안 작성
- 개발자 지인들에게 정기적인 이력서 피드백 요청 및 수정 반영
- 필요한 부분에서 추가적인 프로젝트 경험 보완
- 관심 있는 회사들의 채용 공고 지속적 모니터링
- 회사별 특성과 요구사항에 맞춰 이력서와 자기소개서 커스터마이징
Result (결과)
- 지속적인 피드백과 개선 과정을 통해 이력서 초안 완성
- 초기에 받은 피드백을 통해 이력서 개선 방향 파악
- 꾸준한 지원을 이어가는 중
- 작성 과정에서 스스로의 강점 및 약점을 파악해 앞으로의 학습 방향에 적용
이번 분기의 수확
이번 분기는 프론트엔드 개발자로서 기술적 깊이와 폭을 모두 확장하는 시간이었습니다. 특히 블로그 개발 과정에서 실제 사용자 경험과 성능 최적화, SEO까지 고려하는 종합적인 시각을 갖게 된 점이 가장 큰 성장이었습니다.
성장한 점
이번 분기 동안 이론적 지식을 실제 프로젝트에 적용하는 과정에서 예상치 못한 문제들을 해결하는 능력을 키울 수 있었습니다. 특히 MOTY 프로젝트를 통해 기술적 내용을 다른 개발자들에게 효과적으로 전달하는 커뮤니케이션 스킬을 기를 수 있었고, 이는 세미나 발표 경험으로 이어졌습니다.
한입 챌린지와 함수형 프로그래밍 스터디를 통해 타입스크립트와 함수형 프로그래밍이 코드의 품질과 유지보수성을 높이는 데 얼마나 중요한지 체감했습니다. 또한 가상 DOM에 관한 조사를 통해 모든 상황에서 최적의 기술은 없으며, 상황에 맞는 적절한 기술 선택의 중요성을 깨달았고, 리액트 디자인 패턴 학습을 통해 기술적 개념의 정확한 이해와 적용이 얼마나 중요한지 알게 되었습니다.
개선할 점
학습 내용의 기록과 공유 부족이 가장 큰 아쉬움으로 남습니다. 한입 타입스크립트 챌린지를 수강하며 매일 배운 개념들을 정리하지 않았고, 결과적으로 핵심 개념들을 다시 찾아보는 시간이 필요했습니다. 다음 학습에서는 옵시디언과 같은 기록 앱에 당일 학습 내용을 바로 정리하는 습관을 들여야겠습니다.
이력서의 프로젝트 성과 계량화 부분이 미흡했습니다. 지인들로부터 "프로젝트에서 달성한 성과를 수치로 표현하라"는 피드백을 받았지만, 토이 프로젝트의 특성상 사용자 수나 성능 개선 지표를 제시하기 어려웠습니다. 다음 프로젝트에서는 시작 단계부터 측정 가능한 지표를 설정하고 추적할 필요가 있다고 느꼈습니다.
나오면서: 2분기 계획
다음 분기에는 개인 블로그에 페이지네이션, 태그 기능 등을 추가 개발하여 사용자 경험을 개선하고, 프론트엔드 성능 최적화에 관한 학습을 진행할 계획입니다. 특히 주 1회 이상 기술 블로그 포스팅 작성을 습관화하고, 최소 1개 이상의 오픈 소스 프로젝트에 기여하는 것을 목표로 삼고 있습니다.
또한 취업 준비 과정에서 받은 피드백을 바탕으로 부족한 역량을 보완하고, 기술 면접 준비도 주 1회 이상 꾸준히 진행할 예정입니다. 이번 분기의 경험을 토대로 더 체계적이고 깊이 있는 학습을 진행하며 주니어 프론트엔드 개발자로서의 역량을 한층 더 강화하고자 합니다.