원래 각 주차별로 후기를 상세히 남기려고 했으나
아직 부족해 배우고 싶은건 많지만
시간 관리를 효율적으로 하지 못했다.
(반성반성...)
그래도 3주차는 설 연휴가 겹치면서 여러 프로젝트들이 방학을 맞이해
멋사xABLY externship 3주차 후기를 남긴다.
현재 3주차 결과는
가장 1, 2주차와 비교해 가장 낮은 평점을 받은 상태.
어느정도 예상은 했으나 슬픈건 어쩔수 없었다.
오랜만에 유튜브에서 고시생의 브이로그를 보며 동기부여를 얻었다
(나도 고시생 라이프를 살았던 적이 있기에 ....)
지금부터 내가 부족했던 점들을 기록해보겠다!
- Header / nav 등 큰 범위의 카테고리를 컴포넌트로 나누지 않았다.
변명을 하자면 이 부분이 3주차 미션의 포인트가 아니라고 안일하게 생각했다.
눈에 보이는 상품 리스트들만을 미션의 포인트라고 생각했다.
=> 전체 페이지를 봤을때 역할이 구분이 된다.
=> component들을 적극적으로 사용하기로한 상황에서 분리해야한다.
- Header 디자인
미션 중에 Header의 offset 값을 판단에 나타나고 사라지고의 이벤트를 추가해줘야하는데 시간이 촉박해 아슬아슬하게 완성할 수 있었다.
그래서 자랑스럽게 형광색으로 "저 ... 했어요....!!"
했는데 ;;;;;
나중에 확인해보니 해당 Header가 다른 디자인들을 침범했나보다..
디자인보다 기능의 완성을 어필하고 싶었지만 워낙 다른 분들께서 디자인 신경을 빡세게 하다보니 페널티를 받게 되었다.
- Composition API
이건 심화 도전 과제라 평점에는 영향이 없었을 것 같다.
하지만 아마 구현한 사람들에겐 가산점이 붙었을게 분명...
결국 페널티나 마찬가지....
뒤늦게 어떤 기능인가 했더니
Vue3에서 나온 Vue의 코드 난잡이라는 단점을 일정부분 해결해줄 수 있는 기능이었다.
https://www.youtube.com/watch?v=g1b8bILajcA
위의 유튜브에서 정말 이해하기 쉽게 설명해준다.
Vue를 이용해 코딩을하다보면 기능별로 묶는게 아닌
수단을 카테고리로 묶어서 코드들이 정리되어있다보니
(ex, methods, data)
A의 기능과 관련된 코드들을 맨 위에서도 찾고 맨 아래에서도 찾고
해당 코드들을 찾아다니기 너무 힘들었다.
그런데 이 composition API를 활용하면
기능별로 코드들을 분류할 수 있어 해당 코드를 찾고 한눈에 파악하기 편리해보인다.
대신, 여러 라이브러리들을 끌어와야하지만 .
- 테스트 코드들의 분리
어차피 하나의 페이지를 테스트한다는 생각으로 한곳에 많은 코드들 테스트를 진행했다.
Header / Nav를 별도 컴포넌트로 분리하지 않은 것도 원인이 됐지만.
사실 분리할 생각도 하지 않았다.
테스트 코드도 특정 모듈로 분리해 코드의 가독성 및 확장성을 확보하자.
- 애니메이션 및 이벤트 유닛 테스트 하지말자.
불가능은 아니지만 해당 테스트는 e2e testing에서 다뤄야할 내용이라는 강사님의 의견
실제로 시도를 해보려 했으나 코드 짜는 것도 너무 어려웠다.
유닛 테스트에 대한 적절 범위를 정확히 구분해놓고 코딩하는게 필요해보인다.
- 데이터 디폴트값 정해주기
props도 마찬가지로 data 안의 json 형식의 데이터들을
{type:string, default:' '}이런식으로 정해줄 수 있다...
이 방법에 대해 고민이 지난 주차 때도 많았는데
이제야 굿 정답에 가까운 해결책을 확인함..
