후기

6주라 긴 시간처럼 보이지만, 챌린지 맞는 진도 맞추고 챌린지 과제 수행하기에는 많이 어려울 것 같습니다. 강의 1독을 하고 챌린지 참여하면 난이도는 어렵지 않을 것 같습니다. 바로 챌린지 참여하면 양의 압박이 상당할 것 같습니다.

전체적으로 챌린지 과제들이 우버이츠 코스 관련하여 복습하는 데에 적절했다고 생각합니다. 타입스크립트를 배워보고 싶었는데, nestjs도 배우고 typeorm도 배우고, 아주 유익한 강의와 챌린지였습니다.

테스트 관련 파트는 양이 많기 때문에 챌린지 하시는 분들은 관련 과제를 나중에 하지 말고 빨리 끝내 놓는게 좋을 것 같습니다.

아쉬운 점은 graphql subscription 관련 과제가 없어서 좀 아쉬웠습니다. 챌린지에서 복습하고 싶었던 파트중 하나였는데 없어서 좀 아쉬웠습니다.

마지막 주차 과제인 졸업 과제 완성은 연휴가 끼어서 시간이 모자라서 좀 아쉬웠지만, 만들고 싶었던 것들 만들어 보고 추가해봐서 제일 재밌는 부분이긴 했었습니다. 그런데, 챌린지 다음에 참여하실 분들은 백엔드는 챌린지 과제 외에도 많이 생각을 해보셔야할 것 같은 것이.. 정말 백엔드 수정할 것이 많더라구요. 챌린지 과제만으로는 백엔드가 많이 부족하여 백엔드는 미리미리 구현해 놓으시면 좋으실 것 같습니다.

(밑에 부분은 혹시 챌린지 관련 사항 유출이면 삭제하겠습니다.)

우버이츠 클론 1기 챌린지 일지 및 이슈

(편의상 음슴체를 사용했습니다. 적은 내용들은 다음 챌린지 하시는 분들 도움되시라고 적어 놓은 것이지, 절대적으로 옳은 내용은 없습니다. 주관에 따라 적은 것이기 때문에 참고만 해주시면 감사하겠습니다. 노마드코더 커뮤니티가 있지만 대부분 질문을 슬랙에 올리시는데, 슬랙에 올리면 질문 내용들이 삭제 되니까, 예전에 제가 질문했던 내용들을 다들 반복하시길래.. 이런 정리가 있으면 어떨가 싶어서 같이 올려봤습니다.)

챌린지 관련사항

• 코드샌드 박스 이용함
• 코드샌드박스는 아무래도 로컬에서 하는 것보다는 느리기 때문에, 보통 로컬에서 작업하고 코드샌드박스에 올리는 식으로 많이들 함.
• 매일 나오는 blue print이용하면됨
• 꼭 blue print를 이용하진 않아도 본인 코드로 챌린지 과제 목표 달성만 해도 괜츈.
• 니코 픽은 다음날 블루프린트로 이용.

😀 챌린지 일지 및 이슈

🥳 1st week.

Assign ment1 (Day 1)

• 퀴즈
• 무난

Assignment2 (Day 2)

• 코드 챌린지
  NestJS를 이용하여 과제에서 주어진 REST API 구현하기.
• TypeORM 이용할 필요 없음
• 배열로 fake db 구현하면 됨. 따라서, 모델도 따로 만들 생각 안해도 됨.
• NestJS 무료 강의 기반.
• 질문 거의 없었음.

Assignment3 (Day 3)

• 코드 챌린지
• apollo를 이용하여 전날 챌린지를 graphql화 시킴.
• 질문들이 별로 안 올라 온 것을 보니, 난이도는 그리 높지 않음.

Assignment4 (Day 4-5)

• 코드 챌린지
• 첫 이틀짜리 챌린지
• TypeORM을 도입함, db는 sqlite3 엔진이기 때문에 따로 postgre db 서버를 돌릴 필요는 없음.
• TypeORM 세팅은 대부분 되어 있어서 세팅은 크게 신경 쓸 필요 없음.
• 먼저 양일간의 챌린지는 entity가 없이 fakedb를 이용한 것이지만, 그것을 real entity로 만드는게 과제였음.
• 역시 질문들이 많이 없었음.

Day 6, 7 토/일

😏 2nd week

Assignment5 (Day 8)

• 퀴즈

Assignment6 (Day 9-10)

• 주어진 조건에 따라 User Entity만드는 게 과제.
• jwt 및 로그인 토큰, auth guard, role(host, listner)를 만드는 게 목적.
• 양이 꽤 많음. jwt module만들고 auth 관련 모듈을 만들고 로그인 관련 로직도 만들어야 하기 때문에.

🥶 이슈

• TypeORM의 Synchronize 관련 이슈 중 데이타가 갑자기 사라져요?
• https://github.com/typeorm/typeorm/issues/2712
• dist 폴더를 우선 삭제 해보는 것을 추천.
• 계속 synchronize 문제가 있으면 entity 수정이 있을 때에만 true, 수정 없이 코드 테스트 시에는 false로 하는 것을 추천.

Assignment7 (Day 11-12)

• podcast, user, jwt의 service를 unit test하고, coverage 100% 달성하는 것이 목적.
• jest 관련 내용이 많기 때문에 강의나 실제 챌린지 코드 내용이나 양이 상당히 많다.
• 특히 podcast 관련 unit test는 양이 많다.

🥶 이슈

• podcast 테스트에서 data 타입관련된 질문이나, service 관련하여 method를 mocking하는 질문등이 좀 나왔었음.
• jest.spyOn method를 이용하면 됨.
• else가 없는 if문 테스트 시 branch 풀커버리지 하려면, https://stackoverflow.com/questions/58877215/else-path-not-taken-in-unit-testing 참고.
• coverage가 일부에서 안나와요?
• jest의 캐쉬 청소를 해주면 된다
• npx jest --clearCache

😟 3rd week

Assignment 8 (Day 15-16)

• 코드 챌린지 2일.
• unit test에 이은 e2e 테스트.
• users.resolver.ts and podcasts.resolver.ts의 e2e test.
• 강의에서와는 달리 세팅이 다 되어 있어서 쾌적.

🥶 이슈

• mutation이나 query 만들 때, quotation 기호 주의.
• expect(200)인데 400이 나오면 거진다 query입력이 잘못되어서...

• 생각보다 질문이 없었음

Assignment 9 (Day 17)

• 코드 챌린지 1일
• resolver에 role based authorization을 추가.
• 슬랙에 질문 거의 없었음.
• 전의 두 과제에 비해 양도 적고 비교적 아주 간단.

Assignment 10 (Day 18)

• 코드 챌린지 1일
• listener 관련하여 resolver를 추가.

🥶 이슈

• sqlite는 ILIKE sql query가 없다.
• sqlite에서는 LIKE가 case-insensitive하여 raw sql 사용 시에는 LIKE를 사용하거나(ILIKE가 없기 때문에 ILIKE사용 시 오히려 에러 발생)
• 또는 typeorm의 ILike를 사용한다.

Assignment 11(Day 19)

• 코드 챌린지 1일
• deploy using heroku. 갑분배포. gql의 subscription을 할 줄 알았는데..
• heroku 배포 단계에서는 sqlite는 가급적 안 쓰는게 낫기 때문에 postgres로 배포
• sqlite 사용 시 db 내용 수시로 지워짐.
• pg module 설치, PORT 설정, typeorm db 설정(ssl 설정 포함 heroku는 ssl만 가능), graphql playground 설정 정도 하면 웬만하면 쉽게 성공

Day 21, 22 토/일

😙 4th week.

Assignment 12(Day 22, 23)

• 코드 챌린지 2일. frontend 파트 시작.
• heroku deploy한 backend를 이용하여 login 구현.
• 다들 쉬웠는지 별 질문없음.

🥶 이슈

• apollo client 세팅에 관한 질문 소수 있었음.
• codesandbox의 blueprint를 로컬에서 하려고 코드를 그대로 가져오면, typescript의 에러맛을 볼 수 있는데..
• 해결 방안 1: typescript의 버전을 낮춘다. 4.0.3 또는 4.0.1까지 낮추고.. -> 해결 안되면 방안2로..
• 해결 방안 2: reactscripts의 버전을 높인다 4.0.1로 올린다. -> 해결이 안되면 방안 3으로.
• 해결 방안 3: 그냥 CRA 새로 만들고, tailwindcss 홈페이지가서 index.html에 추가할 css cdn 주소를 넣어주면 tailwind 따로 설치하지 않고, blueprint처럼 사용할 수가 있다.
• codesandbox에 static 파일들만 사용할 수 있도록 설정되어 있는지...??(개인적인 추측, 아닐 수도 있읍니다😳), tailwindcss를 custom하거나 @apply 등등을 사용 못하는 단점은 있지만, codesandbox에서 해도 속도는 충분했던 것 같아서, 웬일로 로컬에서 작업안하고 codesandbox에서 작업을 했는데 꽤 괜찮았고, 모듈 설치 때문에 자꾸 멈추지만 새로고침하면 (코샌박을 새로고침한게 아니라 아웃풋에 있는 브라우져를 새로고침), 충분히 빠르게 작업할 수 있었다.
• 위와 같은 이유로 apollo codegen도 이용할 수 없었는데, typescript 설정이 강하게 되어 있지 않아서 그런지, 로컬에서 만든 CRA에서는 type error 때문에 실행이 안되었는데, 코샌박에서는 apollo codegen으로 type을 따로 지정해주지 않았어도 graphql query가 잘 돌아갔다.

Assignment 13(Day 24, 25)

• 코드 챌린지 2일.
• 전번 과제인 login에 이어 create account를 구현.
• 사실 2일짜리 챌린지 아니어도 되지 않았을까 하는게, 전날 구현한 login에 조금만 손대면 끝나기 때문.
• 물론 추가 과제로 최대한 ui 꾸며보라 하였으나.. 나같은 잼병에게는... 꺼흑..

Assigment 14(Day 26)

• 퀴즈.
• Enjoy friday에는 Yes 밖에 없었다.
• 주말에도 일이 있어서 enjoy를 할 수가 없..😭

Day 27, 28 토/일

🤪 5th Week.

Assignment 15(Day 29, 30)

• 코드챌린지 2일
• 기존 코드챌린지에 이어 팟캐스트 본격적인 frontend 클로닝.
• 기존의 backend가 사실.. description도 없고, thumbnail 관련된 필드도 없고 해서.. 백엔드 수정에 시간이 많이 걸렸음.

🥶 이슈

• 블루프린트로 당첨(?)이 되어 백엔드를 공유하게 되었는데, 자꾸 백엔드가 죽어서 어떻게 된 건가 봤더니.. 딱히 backend 코딩에서 문제가 있어서 서버가 죽었던게 아니라 postgres 관련된 내용으로 서버가 죽었던 것으로 추정해서.. postgres를 중간에 지우고 새로 만들어줬더니 작동이 다시 잘 되었음.
• 여기서 원인파악 한다고 시간이 많이 걸림..
• 사실은 데이터베이스에 내용이 너무 없으면 frontend 구현하는 맛이 안날 것 같아서.. faker를 이용해서 data를 무차별하게 만들어서가 원인입니다. heroku postgres의 free tier는 10,000 레코드 밖에 못 만드는데.. 생각보다.. 10,000레코드 금방 쓰더라구요.

Assignment 16(Day, 31, 32, 33)

• 코드 챌린지 3일(!?)
• ui unit test
• 잘되다가 한 번 안되기 시작하니까.. 답도 없이..
• 1기 도전자들이 가장 어렵다한 과제..
• 사실 어렵다기 보다는 mocking한 부분이 원하는대로 값을 내뿜지 않아서..?? 인 것 같다.
• 내용자체는 backend에서 했던 unit test와 크게 다를 바는 없다고 본다.

🥶 이슈

• 특히 useQuery, useParams에서 시간을 많이 보냄
• useParams mocking이 잘안되는 것 관련
  https://stackoverflow.com/questions/58883556/mocking-react-router-dom-hooks-using-jest-is-not-working
• <Router history={history}> ... 이 부분 이용해서 history에 가짜 주소를 줘서, useParams를 원하는대로 작동시킴.
• 제가 useParams를 mocking 못했다는 것이지 될 수도 있으니, 그냥 참고정도만 해주시길 바랍니다.
• useQuery에서 loading이 그대로거나, data가 undefined가 나오는 것 관련
• loading이 안넘어가는 경우
• async 관련 이슈인 경우에는
  으로 loading으로 state가 update될 때까지 기다려야 한다.

• loading은 넘어가는데, data가 계속 undefined로 나온다
  추론1. type 관련 문제일 가능성이 많다.
• mock apollo client를 이용하여 setRequestHandler를 이용하여 mocking하는 경우에는 codegen으로 만들어진 type을 import하여, type을 맞춰주면.. 해결 가능? __typename을 꼭 넣어준다.(저는 이 방법으로 해결이 되었습니다.)

추론2. 위의 loading이 안넘어가는 것처럼 혹시 비동기 관련 state가 업데이트되는 것을 기다리지 않았나 확인 해본다.

• MockedProvider를 이용하는 경우에는 addTypename={false}로 __typename을 적어주지 않아도 되는데..
• 내 경우에는 addTypename false로 MockedProvider를 줬는데 실행이 잘 안되었다. (저의 코드가 잘못되었을 수도 있는데 이부분은 확인을 못했습니다.)

day 34, 35(토/일)

👻 6th week

졸업작품

• 5일 코드 챌린지..???
• 5일이 긴 줄 알았다.
• 챌린지 요구사항이 간단한 줄 알았다..???
• 생각보다 많은 백엔드 수정..이 있었다.(너무 많음)
• 포기자들의 속출..??
• 명절이 끼어서 ... 실제 코딩 시간이 별로 없음..???
• 생각보다 할게 정~~말 많음.

질문 사항이 있을 부분은 아니어서.. 질문은 없었지만, 백엔드를 수정 많이 했다는 분들이 꽤 있었음.