001_원티드 프론트엔드 프리온보딩 2기 후기_1주차(上)

@원티드 프리온보딩 코스 x 17팀(17Seoul)

원티드 프리온보딩에 합격했다.

 지난 주 금요일 원티드 프리온보딩 프론트엔드 코스에 합격했다는 문자를 받았다. 불과 한 달 전 6개월간의 엘리스 AI 트랙을 마치고 다들 이력서를 넣으며 기업에 지원을 하는데 왜 또 프로그램을 듣게 됐을까? 그 이유는 다음과 같다.

1. 엘리스 AI 트랙은 프론트엔드 뿐만 아니라 백엔드, 데이터분석, AI까지 배우기 때문에 내가 희망하는 프론트엔드에 대한 학습이 부족하다고 생각했다.
2. 그리고 그것이 현실로 나타났다.
3. 기초 지식이 부족하다는 판단하에 집중적으로 프론트엔드 파트에 대해 학습하고 싶었다.
4. 하지만 취업은 빠른 시일 내에 하고 싶기 때문에 짧고 굵게 진행하는 프로그램을 알아보았고 프리온보딩 코스를 알게 됐다.

 이러한 이유로 이번 주 월요일부터 본격적으로 시작된 프리온보딩! 첫 시간은 간단한 오리엔테이션과 간략한 강의, 그리고 대망의 과제 안내로 진행됐다. 우선 오리엔테이션에서는 다음과 같은 내용을 설명해주셨다.

 

1. 과제 제출 매너(비즈니스 매너)
   1. 프론트엔드의 기본은 요구사항을 '똑같이 구현' 하는 것이다.
   2. 어려운 기능이 있다면 어떻게든 혼자 힘으로 공부하면서 하는 것도 중요하지만, 검색해 최대한 좋은 예제를 찾고 따라하면서 공부해 100% 내 것으로 만드는 방법이 더 효율적이다.
   3. .gitignore 관리, depth가 한 번 더 들어간 폴더 구조 금지, README.md 관리는 필수다.
   4. README에는 배포 주소, 과제 구현 목록, 설치 및 시작 방법, 프로젝트 구조 설명, 기능별 영상 등이 들어가야 한다.
   5. Commit은 진행 과정이 보이게 구분지어서 진행하고 팀별로 정한 Commit Message의 일관성을 지켜야 한다
2. TIL (Today I Learned)
   1. 채용하는 입장에서는 이력서만 보고 지원자가 어떤 사람인지 파악하기 어렵기 때문에 블로그를 많이 참고한다.
   2. TIL을 습관화해 잘 쓴다면 지원자가 정확히 어떤 학습을 했고 그 과정에서 어떤 문제를 겪었으며 어떻게 해결했는지 등 개발자로써의 지원자를 더 잘 알 수 있다.
   3. 프로그램을 진행하면서 프로젝트가 끝나는 수요일, 토요일에 프로젝트 및 강의를 복기할 겸 TIL을 작성하면 좋을 것 같다.
3. 프로그램 진행
   1. 5주간 월 / 목 에 2시부터 4시까지 교육을 받으며 교육이 끝난 시간부터 각 팀별로 기업 과제를 시작한다.
   2. 기업 과제는 월요일 기준 수요일 오전 10시까지, 목요일 기준 토요일 오후 5시까지 제출 기한으로 한다.
   3. 과제는 팀원 전체가 하나의 프로젝트를 진행하기도 하고 팀 내부의 인원을 나눠 프로젝트를 진행하기도 한다. 또한 개인 프로젝트를 받는 경우도 있다.

 이렇게 간단히 앞으로 5주간 진행할 프로그램에 대한 설명을 끝내고 간단한 강의를 진행하셨다.

1. utils 함수
   • 미들레벨의 개발자가 되면 단순히 기능을 잘 구현하는 것에서 끝나는 것이 아닌 다른 사람이 재사용할 공통 함수를 잘 만들어야 한다.
   • utils는 의존성 없이 공통적으로 자주 사용되는 로직을 모아놓은 폴더이다.
   • Custom Hook, Constants, Date 등 재사용되는 폴더를 포함하며, 이번에 프로그램을 진행하면서 이 함수들에 대한 unit test를 진행하는 것을 꼭 추천한다.
2. Client 리소스로 데이터 사용 (Mock Data)
   • UI 구성에 필요하지만 백엔드 API가 준비되지 않았을 때, 프론트엔드 개발자가 필요에 의해 샘플로 데이터로 만들어 UI를 미리 개발할 수 있다.
   • 이 때 필요한 것이 JSON(JavaScript Object Notation)이며 JSON은 데이터를 주고 받을 수 있는 일종의 데이터 형식이다.
   • JSON에서는 String, Number, Boolean, Null, Object, Array와 같은 기본형과 참조형 데이터를 사용할 수 있으며 Function, Data, undefined는 사용할 수 없다.
   • stringify()로 자바스크립트 객체를 JSON 문자열로 직렬화하고, parse()를 통해 자바스크립트 값으로 바꿀 수 있다.
   • JSON을 활용해 JSON-Server를 만들어 미리 백엔드에서 받아올 데이터와 이를 활용한 UI 로직을 만들고 추후 API 링크만 변경해주면 되기도 하고, 상수 데이터를 만들어 직관적이고 간편하게 데이터를 관리할 수도 있다.

프리온보딩에 합격하고 내 인생이 달라졌다?!

이렇게 간단히 오리엔테이션과 강의를 끝내고 드디어 팀 프로젝트가 시작됐다. 첫 프로젝트 과제는 '환율 계산기'로 API를 받아와 각 국가별 환율을 선택하고 송금액을 입력했을 때 수취금액이 나오는 간단한 과제였다. 하지만 이렇게 고생할줄 그 땐 알았을까.. 환경설정부터 막혀 첫 날부터 거의 날밤을 새게 됐다. 그 때 마주친 문제는 다음과 같다.

• 팀 깃허브 계정을 만들어 로컬 환경에 설치했는데 로컬 환경에 팀 계정에 대한 정보가 없어 push를 하려면 토큰을 비밀번호로 입력해야 했다.
• eslint 설치 방법이 다양해 어떤 방법이 맞는건지 헷갈렸다.

 우선 첫 문제는 그 당시에 로컬 환경에 팀 계정 정보를 삽입하는 방법을 몰라 팀 레포지토리를 각자 계정으로 Fork하고 그것을 받아 작업하고 팀 계정에 Pull Request를 보내 합치는 방식을 사용했다. 이 방법이 정말 정말 비효율적이었던게 깃허브 로그인을 번갈아가면서 Pull Request를 수락하고 다시 내 계정에 가서 Fetch and Merge 과정을 거친 뒤 로컬에서 pull을 받아와야하기 때문에 불필요한 과정이 너무 많았었다. 이러한 문제가 있었던 원인은 우선 깃랩으로만 팀 프로젝트를 진행하다 처음으로 깃허브로 협업을 진행하면서 어떻게 해야하는지에 대해 무지했었고, 다른 원인은 다른 팀에서 제공한 이 방식을 맹신했다는 점이다. 좀 더 알아보거나 팀원들과 같이 회의했다면 이러한 문제를 해결할 수 있었을텐데 팀장이라는 부담 때문인지 내가 어떻게든 혼자 해결하려다보니 이와 같은 문제가 발생했던 것이다. 프로젝트를 마치고 팀원들과 이야기하며 지금은 어떻게 해야하는지 방법을 알게 됐지만, 이번 일을 통해 독단적으로 판단하기보다는 팀원들과 상의를 하며 함께 해결해야겠다는 점을 깊이 새겼다.

 다음으로 eslint 설치 과정에서는 이것저것 설치하며 에러가 많이 발생했었지만 오리엔테이션에서 말씀하셨듯 검색하고 좋은 예시를 찾아 활용하는 방식으로 해결했다. 내가 참조한 곳은 Github Wecode의 프로젝트 레포지토리였는데, 여러 프로젝트들이 동일한 환경설정을 가진 것을 착안해 우리 프로젝트에도 동일하게 적용했고 이로 인해 빠르게 해결할 수 있었다.

 

나는 아직 배고프다부족하다.

 어찌저찌 환경설정을 마치고 본격적으로 작업을 시작했다. 이번 프로젝트는 2명씩 짝을 나눠 각각 주어진 계산기를 만드는 것이었고, 나와 함께 한 팀원은 우선 기본 레이아웃을, 나는 계산 로직을 짜는 것부터 시작했다. 이 과정에서 내가 API로 받아온 환율 데이터를 국가가 나열된 select box를 클릭했을 때 일치하는 국가의 환율이 보이도록 하는 로직에서 실수가 있었다.

  const onChangeSelect = () => {
    const key = Object.keys(data);
    const answer = key.find((element) => element.includes(select));
    setExchange(answer && data[answer].toFixed(2));
  };
  useEffect(() => {
    onChangeSelect();
  }, [onChangeSelect]);

 우선 select box의 option에는 국가를 나타내는 value가 있었고 onChange 이벤트가 발생하면 state에 저장한 국가별 환율 객체에서 키와 일치하는 값을 찾아 소수점 2자리로 환산해 새로운 state에 넣는 방식을 사용했다. 그리고 그것을 useEffect로 변화를 감지하도록 설정했는데 이 과정에서 불필요한 렌더링이 많이 발생하게 됐다. 이 문제를 파악하고 기능을 다 만들면 그 때 수정해야겠다 생각하고 있었는데, 팀원 분께서 다음과 같은 방법을 제공해줬다.

  const nowCurrency = Number(data[select]).toFixed(2);

 로직의 길이로 보나 렌더링 문제로도 보나 너무나 깔끔한 해결책이었다..! 굳이 함수로 만들어 키에 대한 변수를 만들고 find 함수를 이용해 찾는 것이 아닌 직접 state에 있는 데이터에 value값과 일치하는 숫자를 변수로 만들고 이 변수를 HTML에 바로 적용하는 방법을 제시했다. 이를 보면서 '아직 내가 한참 부족하구나'라는 점을 뼈저리게 느꼈다. 

 물론 이렇게 실수만 있었던 것은 아니다. 팀원분께서 만든 로직 중에 수취금액의 소수점이 1자리에서 2자리를 왔다갔다해서 이를 해결할 필요가 있었고, 다음과 같이 해결책을 제시했다.

setExchange(
	Number(numberValue * nowCurrency).toLocaleString(undefined, {
	minimumFractionDigits: 2,
	}),

 문제를 해결하기 위해 알아보던 중 toLocaleString에 option을 부여할 수 있고, 그 옵션 중에 소수점에 관련된 옵션이 있다는 것을 알게 됐다.

 

회고

역시 제일 좋은 학습은 직접 만들고 부딫히며 배우는 것이라는 것을 첫 프로젝트부터 알게 됐다. 불분명한 목표를 갖고 단순히 이론만 학습하며 늘어지는 것보다는 이렇게 단기간이라도 함께 만들면서 이론으로는 파악하기 쉽지 않은 지식이나 노하우를 알 수 있어서 좋은 것 같다. 이제 5주간 밤샐 일도 많고 때론 팀을 하드캐리하기도, 하드캐리당하기도(?) 하겠지만 그 과정에서 겸손한 자세로 많이 배우고 온전히 내 것으로 만들기 위해 노력할 예정이다. 5주 뒤 지금보다 더 성장한 예비 개발자가 되서 3월부터는 회사에서 그 날개를 마음껏 펼치고 싶다!