원티드 프리온보딩 프론트엔드 코스 2,3주차

프리온보딩 프론트엔드 코스 2,3주차를 한번에 작성하는 이유는 2주차 중간에

추석이 껴있어서 2,3주차를 한번에 작성하게 되었습니다.

1. 2주차 첫번쨰 과제 영화 웹사이트 만들기

2. 3주차 첫번쨰 과제 깃헙 이슈를 가져와라!

3. 3주차 두번쨰 과제 댓글 CRUD구현!

4. 여담

2주차 첫번쨰 과제 영화 웹사이트 만들기

이번에는 아이엠랩이라는 헬스케어 제품을 만드는 기업에서 과제를 내주셨습니다.

기업과제의 목표는 영화 트레일러 사이트를 만드는 것이었는데

처음 과제를 받고서는 "어 뭐야 영화 웹사이트? 간단하겠는데" 라는 안일한 생각을했습니다.

하지만 생각보다 어려웠던것이 Infinite scroll기능을 구현해서 홈,개봉예정작,평점순,개봉작

등등 페이지에서 무한스크롤 기능을 구현하는것이 과제 조건이었기때문입니다 ㅠㅠ

저는 아직 무한 스크롤을 구현해본적이 없어서 생각보다 힘들었습니다.

또한 API Response 데이터 캐쉬를 저장하기위해서 전에 사용해본적이있는

react-query를 사용해서 res정보를 캐싱했습니다.

또한 조건중에 상세페이지에 해당 영화에대한 트레일러가 비디오 태그로 존재해야하는데

당시 상세페이지를 작성해주시는분이 비디오를 처리를 못하시고 계셔서 제가 youtube에서

해당트레일러 key값을 받아와 처리하는 방법을 과제 제출 전 10분전에 부랴부랴해서

진땀이 빠져 생각보다 매우 어렵게 과제를 진행했습니다. ㅠㅠ

저는 개봉 예정작 페이지를 맡았습니다.

3주차 첫번쨰 과제 깃헙 이슈를 가져와라!

3주차 첫번째 과제는 특정 깃헙의 repo에서 이슈를 코멘트가 많은 순으로 리스트로

가져와서 해당 이슈를 클릭하면 상세 이슈페이지로 넘어가는 간단(?)해 보이는

과제였습니다. 이 과제를 내주시는 멘토님이 하시는 말씀이 4시간정도 구현하게

하는 과제였다고합니다. 전 깃헙 api를 사용해 본적이 없어서

만약에 저한테 4시간안에 만들라고 한다면 api부분에서 문제가 생겨서 과제 통과를

못할것 같습니다.(실력을 더 키워야할 듯..)

👇 와이어 프레임

또한 요구조건에는 Context API를 활용한 API 연동이 있습니다. (어려움..)

이번 개발을 할떄는 총 6명이서 3명씩 ui와 설계를 맡았습니다.(사진은 저입니다.)

저는 상세페이지 구현을 맡았는데 data를 api에서 받아오면 body라는 key값에

해당이슈 마크다운이 문자열로 저장되어있는 형태입니다. 문자열로 저장되어있는 마크다운을

사용자들이 보기 편하게 바꿔주는 부분이 문제였는데 react-markdown이라는 패키지가

다행히 존재해서 마크다운 부분을 구현을 했습니다. 하지만 밑줄, 링크, code태그에서는

react-markdown이 먹히지가 않더라구요 그래서 remark-gfm(밑줄, 링크등등처리..)

react-syntax-highlighter(code태그를 입맛대로 구현가능) 패키지등을 사용해서

마크다운을 처리했는데 code부분을 처리할때는 정규표현식을 사용하는데 정규표현식이

성능에 안좋은 영향을 미치는지 github feat브랜치에 push했을때 github측에서

경고 메세지를 날리더군요.. 다른 좋은방법을 찾아봤지만 없어서 경고를 패스했습니다. 😥

3주차 두번쨰 과제 댓글 CRUD구현!

이번에는 제가 많이 해봐서 자신이 있었던 CRUD구현입니다. 하지만 호락호락하지

않은것이 기업과제인가 봅니다. Redux, Redux-saga를 사용해서 비동기 처리를 하는것이

과제의 요구조건이었습니다. (과제를 낸 기업이 Redux를 사용중!)

저는 사실 예전에 Redux를 사용해 본적이 있지만 너무 어려워서 그만둔 경험이 있었기때문이죠

이번과제는 사실 6명이서 하나씩 맡아서 구현하기에는 over한다고 생각이 들어서

모두 각자 한명씩 브랜치를 따서 과제를 수행해 best를 찾아서 best를 베이스로 코드를

작성하자는 것이 회의에서 나온 결과였습니다. 결과적으로 저는 8시간동안 매달려서 요구사항을

충족하는 댓글 CRUD를 구현했습니다!! (역시 하면 되는것인가 봅니다.)

토요일 하루만에 각자 과제를 수행해 투표 해야했기 때문에 6명중 저 포함 2명만이 수행을 완료했습니다.

2명중 결국 투표로 정하게 되었고 그 결과...

저는 2표를 받았고 다른 한분께서 3표로 best가 정해졌습니다. 저는 다른분 코드가 구조적으로 분리가

잘 되어있다고 생각이 들어서 다른분께 투표를 했습니다. (2표 감사합니다!)

여담

이번에 이렇게 다른 분들과 수많은 과제를 함께 진행하면서 필요한것들이 정말 많다는

것을 깨달았습니다. 코딩컨벤션, 리드미, 역할분담, 사용할라이브러리, 디스코드, github연동 슬랙

전에는 한번도 해본적이없는 것들을 해보면서 많은 성장을 했지만 개인적으로

엄청나게 많은 스트레스가 있었습니다. 연락이 잘되지 않는다거나

리드미 작성이 별로였던지(태클하기 조심스러움) 개인사정 불참 등등 수많은 요소에

스트레스가 많았지만 점점 시간이 지나감에따라 "아! 저분은 주말에 특정 스케줄이있어서 어쩔수없구나",

"저분은 연락은 잘 안되지만 코드는 끝내주게 작성하시는구나" 등등 마음가짐을 고쳐먹어서

팀 프로젝트시 갖춰야할 마인드를 얻는 좋은 시간이었습니다. 😄