Jin's Dev Log | [코드잇] 프론트엔드 단기심화 3기 수료 회고

2024년 8월 20일부터 10월 21일까지(총 40일간) 코드잇 프론트엔드 단기심화 과정을 무사히 마쳤다. 월요일부터 목요일까지는 아침 9시부터 저녁 7시까지, 금요일은 아침 9시부터 저녁 6시까지 진행되는 과정으로, 짧은 기간이지만 오전과 오후를 꽉 채워 3주 기본교육과 6주 팀 프로젝트를 소화하는 것이 결코 쉽지는 않았다.

나에게는 회사에서의 경력과 개인 공부를 통해 이미 경험한 내용이 있었기에 3주의 기본교육은 비교적 쉽게 느껴졌다.

6주 동안 진행된 팀 프로젝트에서는 팀장 역할을 맡아 개발을 이끌었다. 팀원들이 열심히 따라와 주어 개발 과정은 순조롭게 진행되었지만, 처음으로 팀원들과 협업을 하면서 팀장까지 맡은 나로서는 많은 부담을 느꼈고, 쉽지 않은 일들이 계속되었던 것 같다.

그럼에도 불구하고 프론트엔드 팀원들과 협업 경험이 부족했던 나에게는 좋은 기회였다.

좋았던 점

1. 기술 선택과 사용의 어려움을 해결할 수 있는 지원이 있었다.

3주 기본교육 및 6주 팀 프로젝트 동안 상주해 계신 주강사님 덕분에 프로젝트 진행 중 겪은 어려움에 대해 질문하고, 피드백을 통해 보완할 수 있었다. 혼자서 검색하거나 AI를 사용해도 해결되지 않던 문제들도 주강사님의 적극적인 도움으로 큰 문제 없이 해결할 수 있었다. 또한, 매주 정해진 멘토링 시간을 통해 프로젝트에 대한 조언과 다양한 멘토링을 받을 수 있었던 점이 좋았다.

2. 프론트엔드 팀원간의 협업 경험

나는 3년간의 회사 생활 동안 같은 프론트엔드 팀원과 협업해 본 경험이 없었다. 두 번의 회사에서 혼자 프론트엔드 작업을 진행했기 때문에 협업에 대한 결핍을 느끼고 있었다. 이번 단기심화 과정을 통해 그 결핍을 조금이나마 해소할 수 있었다. 관심이 많았던 브랜치 전략(Trunk based)과 폴더 구조(FSD)를 팀 프로젝트에서 경험하면서 협업의 중요성을 다시금 깨닫게 되었다.

3. 체계회된 부가 서비스

주마다 제공되는 셀프체크, 출석부 및 수강확인서(실업급여 관련 서류), 코드잇 전체 강의 무료 수강 등 코드잇에서 제공하는 부가적인 서비스들이 만족스러웠다.

배웠던 점

1. shadcn/ui 컴포넌트 폴더 생성 위치 변경 자동화 스크립트 제작

./scripts/add-component.sh

#!/bin/bash

# 입력받은 첫 번째 인자를 component-name으로 사용
COMPONENT_NAME=$1

# shadcn/ui로 컴포넌트 생성
npx shadcn/ui@latest add $COMPONENT_NAME

# 생성된 컴포넌트를 원하는 폴더로 이동
mv ./src/components/ui/* ./src/shared/ui/

# 기존 폴더 삭제
rm -rf ./src/components

echo "Component $COMPONENT_NAME has been added to src/shared/ui and components/ui has been deleted."

add-component.sh 권한 부여

chmod +x ./scripts/add-component.sh

yarn script에 추가

{
  "scripts": {
    "add-component": "bash ./scripts/add-component.sh"
  }
}

팀 프로젝트에서는 tailwindCSS와 shadcn/ui를 이용해 UI 컴포넌트를 제작했는데, 기본적으로 shadcn/ui에서 컴포넌트를 생성하면 자동으로 /src/components/ui/* 폴더에 저장되는 문제가 있었다. FSD 폴더 구조를 유지하기 위해, shell script를 작성해 이 문제를 해결했고, 팀원들이 작업할 때 일관성을 유지할 수 있도록 자동화 스크립트를 도입했다. 이 경험이 특히 기억에 남는다.

2. 지식의 저주를 경계하라

팀 협업 중 나는 현업 경력이 있기 때문에 코드리뷰에서 필수 리뷰자로 지정되었다. 팀원들이 작성한 코드를 리뷰하면서 처음에는 내가 이해하지 못하는 코드들이 많았다. 나처럼 코드를 작성할 것이라 생각한 ‘지식의 저주’에 빠져 있었던 것이다. 팀원들의 개발 경력과 능력을 고려하지 않고 너무 엄격하게 생각했던 부분이 있었다. 코드리뷰를 진행할 때 상대방의 기분을 상하지 않도록 신경 썼으며, 이번 경험이 앞으로의 코드리뷰에 큰 도움이 될 것 같다.

3. 트러블 슈팅

CORS 에러 해결

withCredentials 옵션을 설정하지 않아 발생한 CORS 에러를 해결하면서 프론트엔드와 백엔드 간의 상호작용에서 세심한 설정이 얼마나 중요한지 다시 한 번 느꼈다.

Firebase 배포 후 Next.js의 rewrite 문제 해결

Firebase 호스팅 환경에서 Next.js의 rewrite 기능이 제대로 동작하지 않았던 문제를 해결하면서, 배포 환경에 따른 API 요청 흐름의 차이를 경험했다.

Set-Cookie 문제 해결

SameSite 속성 누락으로 인해 로컬에서 API 요청 시 refreshToken이 제대로 동작하지 않던 문제를 해결하면서, 보안 설정의 중요성을 배웠다.

아쉬웠던 점

나보다 비슷하거나 경력이 많은 팀원이 있었더라면…

나와 비슷하거나 더 많은 경력을 가진 팀원이 있었더라면 어땠을까 하는 아쉬움이 남는다. 상대적으로 경험이 적은 팀원들과 함께 작업하다 보니 내가 배우기보다는 가르쳐주는 상황이 많았다. 복습의 기회로서는 좋았지만, 경력이 비슷한 팀원들과의 협업을 통해 더 많은 것을 배웠을 거라는 아쉬움이 남는다.