코드잇 프론트엔드 부트캠프 (스프린트 FE 9기) 최종 회고

지난 6개월 동안 프론트엔드 개발자가 되기 위해 경험한 학습 과정, 도전, 성장을 회고해보자 

기간: 2024.07.01 - 2024.12.30 (수료)

- 소개 
여러분을 간단히 소개하고, <코드잇 스프린트: 프론트엔드 트랙 9기>에 참여하여 프론트엔드 개발 학습을 시작하게 된 배경에 대해 이야기해주세요. 여러분이 프론트엔드 분야에 관심을 가지게 된 계기는 무엇인가요?

 

저는 재료공학이라는 개발과 무관한 전공을 했고, 직장 생활을 6년 가까이 하다가 코드잇 스프린트에 참여하였습니다. 

회사에서 엑셀을 자주 사용하면서 업무를 자동화하고자 VBA 언어를 배우게 됐고, 이를 계기로 프로그래밍에 관심을 갖게 되었습니다. 이후 유튜브 등 무료 강의를 보며 HTML, CSS 를 배우고 클론 코딩을 해보기도 했는데 이때 처음으로 내가 뭔가를 만들 수 있구나 하는 흥미를 느끼게 되었습니다. 그렇지만 그 이상으로 나아가 JavaScript 를 배우는 것은 어려움을 느껴 독학으로 하기는 무리가 있다고 느꼈습니다.

이 시기에 비전공자도 개발자로 전직하는 사례를 접하며 용기를 얻었고,  나만의 기술을 갖춘 사람이 되고 싶다는 목표가 생겼습니다.

당시 회사에 6년째 재직 중이었지만, 앞으로 3년 후 제 모습을 떠올렸을 때, 10년차 직장인 보다는 1,2년차 주니어 개발자로 새로운 도전을 하고 싶다는 것을 깨닫게 되었습니다.

이러한 이유로 부트캠프를 통해 체계적으로 프론트엔드 개발 공부를 시작하게 되었습니다. 

나는 내가 좋아하는게 뭔지를 알지 못한 채 대학에 진학했다. 

아마도 과학을 좋아하는것 같으니 화학 관련된 과를 선택했고 그게 재료공학이었다. (근데 물리를 더 많이 했다) 

제일 먼저 프로그래밍을 접한건 대학 시절 전공 필수 수업으로 들었던 '컴퓨터 언어' 수업이었다.

전공과는 무관해보이지만 아마도 공학 인증 프로그램에 포함되어 해당 수업을 전공으로 듣게 된것같다.

아무튼, 당시 C++ 을 처음 접해서 가위바위보 게임 만들기 뭐 그런걸 했고, 난 그 수업이 너무 재미있어서 늘 앞자리에서 수업듣고 성적도 좋게 받았다. 그렇지만 단 한 과목, 3학점만 듣고서 그게 내 흥미라고는 생각 못했고 단순히 교양 수준에서 배웠다고 생각을 했기때문에 전과한다거나 하는 생각은 더더욱 못했다. 그래서 재료공학을 전공한 채 무사히 졸업을 하고, 취업까지 하게되어 직장을 6년 가까이 다녔다. 나중에 코로나 시절에 개발자 붐이 있었을때 아 나도 그때 컴공과로 전과할걸 그랬나? 하고 우스개소리로 하고 말았었다. 

 

이후로는 회사에서 엑셀을 굉장히 많이 사용했기때문에 엑셀 매크로를 사용해 자동화를 좀 해보고싶었다.

그래서 사내 강의를 들었는데 VBA 언어를 배우면서 재미를 느꼈고 그때부터 좀더 배워볼까? 하는 생각이 들었다.

그즈음 건강상의 이유로 휴직을 하게 됐다. 수술 후 회복하고 집에서 혼자 개발 공부를 해봐야겠다 싶어서 유튜브를 보면서 HTML, CSS 를 접하고 클론 코딩을 해보게 됐다. 나는 컴퓨터와 인터넷이 너무 익숙하고 잘 사용하는 세대이지만 어떻게 구동되는지는 전혀 몰랐다. 그런데 직접 HTML, CSS 로 웹페이지 비스무리하게 만들어볼수있으니까 그게 너무 재미있게 느껴졌다. 그런데 자바스크립트는 도무지 모르겠어서 다가갈수없는 어떤 벽 뒤의 세계처럼 느껴졌다. 

그렇게 짧은 휴직 후 개발 공부는 후순위가 되었고 좀 미적지근한 상태가 되었는데..

회사 생활을 이어가던 중, 회사에 더 머물러도 내가 원하는게 없으니 미래의 모습을 상상할수도 없었다. 

되고싶은 롤모델이 없었고, 10년뒤에 저 과장님의 모습이 나라면 난 너무 불행할 것만 같았다. (그들의 모습이 불행해서라기보단 내가 원하는 모습이 아니어서..)

3년 뒤의 내 모습을 상상했을때 10년차 직장인, 과장이 되는것보다 1,2년차 주니어 개발자가 된 내 모습이 내가 원하는 모습이었다. 

 

와 근데 이건 너무 구구절절이라 접어놔야겠다..

- 핵심 학습 내용    
여러분이 이 과정에서 중점을 둔 기술들(HTML, CSS, JavaScript, React 등)과 이러한 기술을 학습하면서 겪었던 특별한 경험을 소개해주세요. 어떤 방법이 여러분의 학습에 도움이 되었나요?

처음 리액트를 배우게 되었을때 상위 컴포넌트에서 하위 컴포넌트로 전달되는 prop이라는 개념을 이해하는데에 어려움을 겪었습니다. 특히 이벤트 핸들러를 prop으로 전달하는 것이 이해가 안됐던 기억이 납니다.

팀 미팅을 하며 다른 팀원들도 비슷한 어려움을 겪고 있다는걸 공유할 수 있었습니다.

한 팀원분이 손코딩을 하면서 각 컴포넌트 간의 관계와 prop이 전달되는 경로를 그려보는 것이 이해하는데에 도움이 된다는 걸 공유해주었는데, 이게 많이 도움이 되었다.

이후로도 기능을 구현하다가 뭔가 구조가 잘 그려지지 않고 어디서 시작해야할지 가늠이 안될때 노트를 펴서 컴포넌트의 역할과 관계를 정리해보는 게 큰 도움이 되었다.

처음 리액트를 배우면서 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 prop의 개념을 이해하는 데 어려움을 겪었습니다. 특히, 이벤트 핸들러를 prop으로 전달하는 방식은 처음에는 잘 이해되지 않았습니다.

그런데 팀 미팅 중에 다른 팀원들도 비슷한 어려움을 겪고 있다는 것을 알게 되었고, 이를 함께 논의할 기회가 있었습니다. 한 팀원이 각 컴포넌트 간의 관계와 prop이 전달되는 경로를 손코딩으로 시각화해보는 방법을 공유해주었는데, 이 방법이 제게 큰 도움이 되었습니다.

이후로도 기능 구현 시 구조가 복잡하거나 어디서부터 시작해야 할지 막막할 때, 노트에 컴포넌트의 역할과 관계를 정리해보는 습관을 들였습니다. 이러한 방식은 문제를 더 명확히 이해하고 해결 방향을 잡는 데 큰 도움을 주었습니다.

 

- 도전과 극복    
학습 과정에서 마주친 도전이나 어려움은 무엇이었고, 이를 어떻게 극복했는지 구체적인 사례를 통해 공유해주세요. 이러한 경험이 여러분의 개발 실력에 어떠한 영향을 미쳤나요?

팀 프로젝트(taskify)를 진행하며 스스로 다른 팀원에 비해 많은 기여를 하지 못하고있다고 생각하였습니다. 특히 처음으로 전역 상태 라이브러리를 도입하였는데 전역 모달을 구현한 부분이 잘 이해가 되지 않아 더욱 심리적으로 위축되었던 적이 있습니다. 또한 공통 버튼 컴포넌트를 설계했을 때 prop을 충분히 고려하지 않아 여러 차례 수정이 발생했으며, 이로 인해 프로젝트의 효율성이 떨어졌습니다.

맡은 부분의 기능을 구현하는데에 급급해서 새로 도입하는 라이브러리의 러닝 커브를 극복하지 못했기에 스스로의 부족한 점을 인지하고 이를 극복하고자 다음 프로젝트(linkbrary)에서 전역 모달 구현하는 역할을 맡았습니다.
전역 모달을 구현하면서 가장 중요하게 고려한 부분은 1. 중첩되지 않는 여러 개의 모달의 효율적인 모달 관리와 2. 모달 UI의 통일성이었습니다. 이를 구체화하기 위해 전역 모달 관리 방식과 Zustand 활용법에 대해 학습했습니다. 블로그에서 상태 관리와 모달 호출 방식을 어떻게 결합할 수 있는지에 대한 해결책을 참고하고, 이를 프로젝트에 어떻게 적용할 지 고민했습니다. 이를 바탕으로, Zustand의 create 함수로 전역 스토어인 useModalStore를 정의하고, 관리할 상태와 수행할 동작(모달을 열고 닫음)을 정의하였습니다. 또한 모든 모달을 관리하고 호출된 모달을 렌더링하는 컴포넌트를 작성하였습니다. 모달을 호출할 때는 useModalStore에서 정의한 openModal 함수에 모달 이름과 필요한 prop을 전달하는 방식으로 구현하였습니다. 또한 합성 컴포넌트의 개념을 통해 모달의 각 기능을 별도의 컴포넌트로 분리하고, 이를 조합하여 일관성있는 디자인과 구조를 구현했습니다. 

이렇게 모달을 구현했을 때 여러 팀원들이 모달 사용하기가 너무 편리하다고 말해주어 굉장히 뿌듯함을 느꼈습니다. 또한, 이 경험을 통해 끈기를 가지고 하나하나 경험하다 보면 어렵게 느껴지는 것도 어느새 내 것으로 체득할 수 있다는 것을 배웠습니다. 

 

- 프로젝트 하이라이트
여러분이 가장 자랑스럽게 생각하는 프로젝트를 하나 선택해서 상세히 설명해주세요. 이 프로젝트의 목적, 사용된 기술, 구현한 기능, 그리고 프로젝트를 진행하며 얻은 교훈을 포함해주세요.

가장 애정이 가는 프로젝트는 마지막으로 진행했던 '워크루트'입니다. 이는 쉽고 간편하게 공고를 작성하고 지원할 수 있도록 돕는 구인구직 플랫폼입니다. 서비스의 특성상 정적 페이지로 구성되어야 했기 때문에, Next.js의 SSG(Static Site Generation)를 활용하기로 하고 기술 스택을 선정했습니다.

저는 주로 폼 작성 페이지 개발을 맡았습니다. 여기에서 텍스트뿐 아니라 날짜(Date), 화폐 단위 등 다양한 유형의 값을 처리하는 방법을 익혔으며, 탭 전환이 가능한 폼에서 이전 입력 내용을 유지하여 제출하는 방법도 구현했습니다. 또한, 수정 페이지에서는 기존 데이터를 불러와 입력 필드에 표시하도록 개발하며 React Hook Form 라이브러리를 깊이 있게 활용할 수 있었습니다.

이 프로젝트에서는 스토리북도 도입했는데, 독립된 환경에서 UI 컴포넌트를 개발하고 문서화할 수 있어 매우 유용했습니다. 특히, 페이지 작업 시 다른 팀원이 만든 컴포넌트를 추가할 때 스토리북을 참고하면서 효율적으로 작업할 수 있었습니다.

처음에는 컴포넌트 단위를 먼저 제작한 뒤 페이지 작업을 진행했지만, 종종 컴포넌트를 수정해야 하는 일이 발생했습니다. 이를 통해 컴포넌트를 설계할 때는 상위 컴포넌트나 페이지에서의 작동 방식을 미리 고려해야 한다는 중요한 교훈을 얻었습니다.

 

- 배운 점과 앞으로의 목표
학습 여정을 통해 얻은 가장 중요한 교훈은 무엇인가요? 앞으로 어떤 개발자가 되고 싶으며, 달성하고자 하는 목표는 무엇인가요?

코드잇 스프린트를 통해 실무에서 사용하는 실용적인 커리큘럼을 따라 학습할 수 있었던 점에 감사드립니다. 또한, 함께 학습하고 프로젝트를 진행하며 좋은 시너지를 낼 수 있는 동료들을 만날 수 있었던 것도 큰 행운이었습니다.

이 과정에서 크고 작은 성취를 경험하며 자신감을 쌓았고, 이전에는 막막하게만 느껴졌던 개발자로의 도전에 용기를 얻을 수 있었습니다.

지금까지는 주어진 과제를 충실히 수행하며 기초적인 기술을 배우는 데 집중했다면, 이제는 스스로 목표를 세우고 이를 이루기 위해 필요한 것들을 찾아 학습하는 단계로 나아가야 한다고 생각합니다. 또한, 제대로 다져지지 않은 부분이 있다면 다시 돌아가 보완하고 체득하는 과정을 통해 기초를 단단히 다지고자 합니다.

기초를 단단히 하여 새로운 기술을 배우는 것을 두려워하지 않는 개발자가 되고싶습니다.