2024-07-20 ~ 2024-11-09 약 5개월동안 진행한 Inner Circle 과정 수료 후기를 작성하고자 한다.
Before - 기술적 한계와 마주했던 시기
"리액트 실무 경험 2년 이상..." 채용 공고를 볼 때마다 마음이 무거워졌다. Vue3와 Nuxt로 실무 경험을 쌓고는 있었지만, 시장의 수요가 높은 React와 TypeScript 실무 경험이 전무한 상태였다. React로 포트폴리오 하나 만든 게 전부였고, Next.js는 이름만 들어본 상태였다. TypeScript는 토이 프로젝트에서만 살짝 맛본 정도여서, 이력서 기술 스택란이 허전하기 그지없었다.
우리 회사의 특징이라고 하면... "혼자서도 잘해요!"를 증명할 수 있다는 것이다🫠. 프로젝트 초기 세팅부터 테스트 코드 작성까지 모든 걸 혼자 진행하다 보니, 내가 작성한 코드가 과연 올바른 방향으로 가고 있는지 늘 불안했다. 이러한 기술적 고립을 타개하고자 Inner Circle 과정에 지원하게 된다.
During - 본질을 배우며 성장하던 시기
Inner Circle 과정은 프론트엔드 개발의 본질을 깨닫게 해준 소중한 시간이었다. 김태곤 리더님의 지도 아래 세 가지 핵심 미션을 수행했다. 첫 번째로 'FE1 Holiday' 미션을 통해 요구사항을 꼼꼼히 확인하는 중요성을 배웠다. "개발자는 코드부터 작성하는 거야!"라는 오만한 생각으로 시작했다가 여러 번 수정하는 고통을 맛보았다. 마치 설계도 없이 집을 짓다가 날마다 벽을 부수고 다시 짓는 것 같았다.
'Fe1 Vending Machine' 미션에서는 Vanila JS로 자판기를 구현하며 프레임워크의 본질을 이해했다. 프레임워크가 제공하는 편의성이 실제로 어떤 문제를 해결해주는지 체감할 수 있었다. 마지막으로 '오픈소스 라이브러리' 미션에서는 Vue 한글 타이핑 라이브러리를 개발했다. 한글의 자모 조합을 고려한 도깨비불 현상 보완과 의존성 없는 라이브러리 설계를 통해 기술적 깊이를 더할 수 있었다. 아래의 링크로 들어가면 내가 만든 라이브러리를 확인할 수 있다.
vue-hangul-typing
실전 프로젝트는 그야말로 서바이벌 게임이었다. 처음에는 프론트엔드 8명, 백엔드 8명이라는 '드림팀'으로 시작했으나, 도메인 설정과 방향성 결정에 어려움을 겪으며 팀원들이 하나둘 이탈했다. 프론트엔드 4명, 백엔드 3명 남은 인원으로 도서 구매 사이트를 개발하기로 결정했고, 나는 프론트엔드 팀장을 맡아 일정 관리와 백엔드 협업을 주도했다. 프로젝트 중반에는 한 명의 팀원이 더 이탈하면서 해당 팀원의 작업까지 맡게 되어 프로젝트 전체 기여도가 40,000줄 이상을 기록하게 되었다;;
특히 사용자 인증 부분에서 큰 기술적 도전이 있었다. Next-auth를 도입했으나, CSRF 토큰과 JWT 토큰 관리에서 어려움을 겪었다. Next-auth는 자체적으로 JWT를 관리하기 때문에 외부 서버의 JWT를 통합하는 것이 불가능했다. 결국 Next.js 공식 문서를 참고하여 독자적인 인증 시스템을 구축했다. 외부 서버의 JWT를 쿠키에 저장하고, Access Token과 Refresh Token을 활용한 재인증 로직을 구현하여 보안성을 확보했다.
우리 팀의 특징은 다른 팀들과 달랐다. 어떤 팀은 React 실무 경험이 풍부한 멤버들로 구성되어 코드 리뷰를 중점적으로 진행했지만, 우리 팀은 대부분의 멤버가 Next.js를 처음 사용해보는 상황이었고, 나를 포함한 몇몇 팀원은 React 경험도 많지 않았다. 그래서 우리는 처음부터 끝까지 완성해보는 것, 즉 프로젝트의 완성도에 집중했다. 회원가입부터 회원 탈퇴, 장바구니, 마이페이지 등 기본적인 커머스 기능 구현과 반응형 디자인 적용, 단위 테스트 및 통합 테스트 코드까지 하나의 프로젝트를 처음부터 끝까지 작업을 했다. 상호 간의 코드 리뷰가 상대적으로 부족했던 점은 아쉬웠지만, 결과적으로 이너써클에서 가장 완성도 높은 프로젝트를 만들어냈고, 나를 포함한 다수의 팀원이 우수 수료생으로 선정되는 성과를 거두었다.
After - 새로운 도전을 시작하는 시기
Inner Circle 과정을 통해 기술적 역량과 협업 능력이 크게 향상되었다. TypeScript와 React, Next.js에 대한 실무 경험을 쌓았고, 특히 인증 시스템 구현과 같은 복잡한 기술적 과제를 해결하는 능력도 키웠다. MSW, Zustand, Vitest, Shadcn UI 등 다양한 프론트엔드 기술을 학습하고 실제 프로젝트에 적용해보면서, 커밋 컨벤션과 브랜치 전략 같은 협업을 위한 규칙도 함께 고민하고 발전시켰다.
이러한 경험은 실무에서 즉시 빛을 발했다. MSW를 활용하여 백엔드 개발자가 참여하지 못하는 상황에서도 프로젝트를 독립적으로 진행할 수 있었고, TypeScript를 본격적으로 도입하여 서버 단의 데이터 검증을 한번 더 보완함으로써 서비스의 안정성을 높였다. 또한 Inner Circle에서 경험한 코드 리뷰와 코드 컨벤션을 실무에 적용하면서 후배 개발자와의 협업도 수월하게 진행할 수 있었다.
현재는 프로젝트의 리드 개발자로서 팀원들과 협업하며, Inner Circle에서 배운 본질적인 개발 접근 방식을 실무에 적용하고 있다. 특히 요구사항 분석의 중요성, 프레임워크의 본질적 이해, 그리고 협업의 가치를 팀원들과 공유하며 함께 성장해나가고 있다.
