원티드 프리온보딩 프론트엔드 챌린지 후기

원티드 프리온보딩 프론트엔드 챌린지

원티드 프리온보딩 챌린지는 누구나 참여할 수 있는 아주 좋은 강의이다.

강사님의 경험과 기술 지식을 전달받을 수 있고, 함께 참여하고 있는 사람들과 대화하며 다양한 지식을 습득할 수 있다.

우연히 알게 된 그 기회를 놓치고 싶지 않았고, 나는 6월 원티드 프리온보딩 프론트엔드 챌린지에 참여했다.

 

첫 번째 날

첫 날은 월요일 저녁 8시에 시작되었고, 강사님의 소개로 강의는 본격적으로 시작했다.

강사님은 "캐치테이블" 서비스를 운영하고 있는 와드에서 근무하고 계신다고 소개하셨다. 와드는 최근 자주 듣고 있는 기업이다. 배달의 민족을 운영하는 우아한 형제들 개발자들이 많이 이직했다는 곳으로 알고 있기 때문이다.

강사님은 많이 바쁜 와중에도 챌린저들을 위해 강의를 진행하셨다.

 

소개가 끝나고, "컴포넌트 주도 개발"이라는 주제로 강의가 본격적으로 시작하였다.

자주 듣고, 자주 봤기 때문에 알고 있었다고 생각했었던 주제였지만, 막상 강의를 듣고 나서 모르는 내용들이 너무 많았다. 새롭게 알게 된 내용이 너무나 많았다. 스스로 알고 있었다는 것이 착각임을 알게 되었고, 이번 기회에 "컴포넌트 주도 개발"에 대해 제대로 배울 수 있었다.

 

특히, 프론트엔드 개발하면 자주 사용하게 되는 "React" 컴포넌트 강의를 통해 "아, 이런 게 있었구나.", "그게 이 뜻이였어?"하는 부분들이 많았다. 무료로 진행되는 강의라고 생각하지 못할 만큼 너무나 좋은 시간이었다.

 

내가 강의에서 가장 좋았다고 생각하는 부분은 마지막 Q&A 시간이었다.

챌린저들이 궁금해하는 거의 모든 것을 강사님 본인의 지식, 경험을 활용해 답변해 주셨다. 그리고, 질문들에 대한 답변은 강사님 뿐만 아니라 챌린저 분들도 같이 의견을 나누었고, 다양한 의견들을 확인할 수 있었다.

 

두 번째 날

토요일 오전에 시작된 두 번째 강의는 "아토믹 디자인 패턴"에 대해 강의를 들었다.

아토믹 디자인 패턴에서는 무엇이 중요한 지, 그렇다면 그게 정확히 무엇인 지 예시 내용과 함께 전달되어 쉽게 이해할 수 있었다.

 

아토믹 디자인 패턴은 좋은 방법론이지만, 꼭 정답은 아니라는 것도 배웠다. 그렇기 때문에 본인의 프로젝트에 맞게, 구성 기준과 React 컴포넌트에 맞게 활용해야 한다는 것을 배웠다. 그래서 아토믹 디자인 패턴이 어렵다는 것을 느꼈다. 왜냐하면 개개인마다 정의하는 게 다르기 때문이다.

 

그리고 개발에서 가장 생각해봐야 할 것이 "상향식 컴포넌트 개발"과 "하양식 컴포넌트 개발"이다.

CDD라고도 불리우는 컴포넌트 주도 개발에서의 개발 방법이다.

 

상향식 컴포넌트 개발은 가장 작은 단위의 하위 컴포넌트부터 개발해 나가는 것을 말한다. 가장 하위의 컴포넌트들을 조합하여 전체적인 컴포넌트를 조합한다. 이는 아토믹 디자인 개발의 가장 적합한 방법이다. 그렇기 때문에 상향식 컴포넌트 개발은 정말 어렵다고 한다. 그래서 능숙하지 않으면 많은 시간을 소요하게 될 것이라는 이야기를 들었다.

 

반대로 하양식 컴포넌트 개발은 전체 시스템의 큰 구성요소들을 먼저 개발하는 것으로, 중복되는 작은 컴포넌트를 분리하거나 공통 혹은 교차되는 컴포넌트를 분리하는 개발이다. 즉, 전체 시스템의 디자인과 구조를 먼저 구성하고, 이를 바탕으로 세부적인 요소들을 개발한다. 이 방법이 우리가 자주 하게 되는 방법이라고 한다. 단점은 일명 "쓰레기 코드"를 나중에 수정하기 어렵다고 한다.

 

이 후, 제어 컴포넌트와 비제어 컴포넌트에 대해 배웠고, Q&A 시간 전에 이번 챌린지 주제인 스토리북 프로젝트를 생성하였다.

 

세 번째 날

다시 돌아온 월요일 저녁 시간의 세 번째 강의에서는 스토리북 프로젝트를 활용해서 이전에 배웠던 내용들을 복습하였다.

중요하다고 생각되었던 "상향식 컴포넌트 개발"과 "하양식 컴포넌트 개발"을 파일과 코드들을 직접 보면서 말로만 듣는 것보다 쉽게 이해할 수 있었다.

 

강의를 통해 배운 것들을 목록화하면 다음과 같다.

 

상향식 컴포넌트 개발

1. 하나의 세트를 구성 => 사용'될' 컴포넌트 + CSS 스타일링, 사용'될' 스토리
2. 사용될 컴포넌트를 내보내고 스토리에서 사용될 컴포넌트를 가져오기
   • 컴포넌트(Componenet.jsx) ♥ 스토리(Component.stories.js)
3. 사용될 컴포넌트들은 Storybook이 무엇인지 모르게 만들어주는 게 좋음
4. 다른 개발자에게 나의 컴포넌트가 어떻게 사용될 지 상상하며 개발하게 되는 자세

하양식 컴포넌트 개발

1. 이미 만들어진 페이지 혹은 큰 단위부터 만들어 놓은 경우
2. 그것들을 하나하나 분리하여 계층을 구성
3. 컴포넌트를 만들 때, 'pnpm dev' 즉! 사용자가 보는 동일한 환경으로 개발
   • 개발자가 아닌 정말 출시된 사용자를 위해 개발을 하며 컴포넌트를 분리

 

그리고 약 한 시간 가량을 스토리북을 활용한 컴포넌트 주도 개발을 시작하였다. 스토리북을 실행하고, 기존 코드를 분석하고, 뜯어보고, 수정하면서 우리만의 스타일을 생성하는 시간을 가졌다.

마지막 날

토요일 오전의 마지막 강의는 스토리북을 활용한 컴포넌트 주도 개발을 직접 만들어 보았다. 이전 시간에 이어서 코드를 

추가적으로 작성하거나, 컴포넌트를 분리하는 시간을 가졌다.

 

그리고 지금까지 만든 것들을 모두 개인 깃허브 레포지토리에 저장하였다. 왜냐하면, "NPM"으로 배포하는 시간까지 가졌기 때문이다.

 

"NPM"으로 배포하는 건 처음이었다. "지금까지 내가 쉽게 사용했었던 NPM의 모든 것들이 이렇게 배포되었구나"라는 생각과 함께 신기했고, 그러나 어려웠다. 나는 중간에 코드 작성을 놓쳐서 눈으로 볼 수 밖에 없었지만, 그것만으로도 충분히 배움이 가득했다.

 

마지막으로, 배포된 것을 문서화하는 작업을 진행했다. 사용할 사용자가 쉽게 이해하고 사용할 수 있도록 README 작성을 하는 시간을 가졌는데, 이 때 "Awesome README"라는 README 작성 템플릿이 있다는 것도 알게 되었고, 또 기본적인 작성법도 배웠다.

 

소감

무료 강의라고는 믿어지지 않을 정도로 좋은 시간들이었다. 총 12시간의 강의가 아깝지 않았다. 오히려 강사님만 괜찮으시다면 더 많이 했으면 좋겠다는 생각이 들었다.

 

단순히 강사님이 전달하면 챌린저들은 듣기만 하는 것이 아닌 강사님과 챌린저들이 같이 소통하면서 진행하는 게 너무나 좋았다. 중간중간 질문들에 친절하게 대답해주셨고, 모르는 부분에 대해 다시 설명을 부탁했을 때도 감사히 다시 쉽게 설명해 주셨다. 이런 점들이 너무나 좋았다.

 

그리고 디자인에 관심이 많은 한 사람으로서 "스토리북"을 활용한 점이 너무나 뜻깊은 시간이었다. "디자이너와 이렇게 소통하는 구나"라는 것도 배웠고, "이렇게 쉽게 라이브러리를 사용할 수 있겠구나"라는 생각과 함께 새로운 방법도 알게 되었다.

 

원티드 프리온보딩 챌린지는 놓치지 않았으면 하는 기회이다. 나는 7월 프리온보딩 챌린지도 신청했다. 7월 챌린지의 주제는 요즘 자주 사용하고 있는 "Next JS"를 주제로 했기 때문이다. 이번 경험으로 7월의 챌린지가 너무나 기대가 된다.

 

회고록 이벤트 당첨

회고록 이벤트에 당첨이 되었다.

사실 기대를 조금 하고 있었지만, 정말로 당첨될 줄은 몰랐다.

개인적인 기록으로 회고록을 작성한 것인데 이렇게까지 좋은 선물까지 주셔서 감사하다.

글로 상을 받은 것은 학창시절 이후 처음인데, 이렇게나 기분이 좋을 수가 있을까 싶다.

후기 작성 이벤트 당첨