Dony :)

FE로 성장 중 🌱

TIL 🧐

주절주절

엄청난 분량의 미션

이번 주는 3주 짜리 미션으로 airbnb를 클론하는 미션이였다.

  • Material UI와 같은 라이브러리 사용하여 화면 꾸미기
  • 달력 팝업으로 날짜 선택하기
  • 날짜에 따른 요금이 그래프로 표현되고 드래그로 최소, 최대값을 선택하기
  • 지도 API를 통해 데이터에 숙소들이 지도에 반영되어 보이기
  • 타입스크립트를 부분적으로 적용해보기 화면을 만드는 것 외에 기능들은 라이브러리를 쓰지 않고 구현해야하는 미션이라 걱정이 많았다..

3주 안에 가능한 분량인가..?

협업과 분업

백엔드 없어 옐로우와 함께 둘이 진행해야하기 때문에 데이터를 어떻게 만들지도 고민이였다.
팀플이기 때문에 협업과 분업을 잘 활용해야 최대한 많이 할 수 있지 않을까 싶었다.
때문에 초기 환경 설정과 해더와 메인을 구성하는 큰 화면은 협업으로 진행하고,
팝업 기능들은 분업으로 진행하려고 계획을 짰다.
지난 번 포키와 한 todo list 프로젝트 때는 기능이 많지가 않아서 카드를 추가 / 삭제, 수정 이렇게 나누어 진행했는데 아무래도 카드를 조정하는 기능이다 보니 겹치는 로직들이 있었고, 그 로직들을 조금씩 다르게 사용해서 서로의 코드를 합칠 때 좀 힘들었던 기억이 있다.
때문에 두 기능 다 구현해보면 좋지만 그래도 서로 더 하고 싶어하는 기능별로 분업하여 진행하기로 얘기했다.
얘기 끝에 나는 요금 그래프 팝업, 옐로우는 달력 팝업을 구현하기로 결정!
canvas를 한번도 써보지 못해 그래프를 하고 싶었는데 서로 하고싶은 기능이 달라서 다행이였다ㅎㅎ

생각지 못한 빌런들

이번 주에 팝업을 거의 구현하고자 목표를 잡았는데.. 그러기엔 빌럼들이 많았다..
Material UI를 사용하려고 했는데 MUI의 장점은 이미 만들어진 컴포넌트들을 가져와서 사용할 수 있다는게 장점인데..
처음 써보는 UI다보니 API를 하나씩 읽어가며 진행해야 하는데, 이렇게 읽어서 적절한 컴포넌트를 찾으면 또 컴포넌트들의 기본 css들이 디자인과 너무 동떨어져 있다보니 전부 커스터마이징해야 했다.
솔직히 사용하면서 이럴거면 그냥 styled componenets를 사용해서 직접 만드는게 낫지 않나란 생각이 들었다.
솔직히 그렇게 했으면 몇시간만에 다했을텐데..
MUI로 하루 반을 날리고 나서 결국 옐로우와 MUI 장점을 살리지 못할거면 그냥 styled components를 쓰는게 나을거 같다라고 결론 지었다.
깔끔하게 MUI 삭제..

그러고 두 번째 관문.. typescript..
아직 동적인 기능들이 별로 없다보니 props가 많이 없어 기본 타입들을 사용하면 될거 같아 tsx로 전부 작성했지만..
문제는 SVG를 리액트 컴포넌트로 만들어 사용하는 부분이였다.
객체로 키값에 따른 SVG 컴포넌트가 나오는 객체를 만들었는데 value가 모두 FunctionComponent로 같기 때문에 타입 추론이 가능하기 때문에 따로 적지 않았는데 타입 에러라고 계속 오류가 났다.
그래서 FunctionComponent를 키마다 타입으로 적어줬지만 계속 에러..🤬
알고보니 변수로 가져올 때 키에 변수를 넣으면 키의 타입도 정해줬어야 했다..
타입이 FunctionComponent가 아닌건 줄 알고 이걸로 계속 찾아봤는데.. 흐ㅠㅠ

const icons: { [key: string]: FunctionComponent } = {
  menu: Menu,
  search: Search,
  xCircle: Xcircle,
};

const Icon = icons[icon];

잔소리꾼

이번 주에 옐로우가 많이 방황을 했다.
여쭤보니 지난 미션부터 하기 싫어서 많이 쉬셨던 거 같다.
사실 나도 지난 주에 너무 하기 싫어서.. 정말 꾸역꾸역 했던 거라 어떤 맘인지 이해는 갔다.
솔직히 지금은 코드스쿼드가 빨리 끝났으면 싶기도 하다.
쉬고 싶다고 몸이 말하고 있는데 머리에서 억지로 조종하고 있는 느낌이다.
그래도.. 이번 미션부터 포트폴리오에 사용한다는 생각으로 질을 높여보라고 크롱이 말하셨기 때문에 쉴 수 없었다.
죄송하지만 어쩔수 없이 옐로우에게 잔소리를 좀 했다 😬
때마침 지난 수업 때 말이 나왔던 크롱과의 상담 신청을 받는다길래 옐로우와 나란히 신청헀다.
크롱의 잔소리를 듣고 옐로우도 번쩍하시겠지!ㅎㅎ

아쉬워요 🙁

이번에 열심히 안한 것은 아니였는데..
항상 느끼는거지만 새로운 걸 사용할 때 학습속도가 너무 느리다ㅠ
응용하는데도 한참 걸리는거 같고..
지난 주부터 리액트를 잘 못쓰고 있는게 느껴져서 너무 속상했는데 이번 주에 타입스크립트도 바로 이해 못하고
Material UI도 사용법을 보면서 하는데 속도가 느려서 스스로 얼마나 답답하던지.. 😢
프론트엔드는 빠르게 변하는데 변화에 맞춰 빠르게 적응할 수 있었으면 좋겠다.
옐로우와도 얘기했지만 난 천재형이 아니라 남들보다 시간을 훨씬 들여 노력해야 한다.
불행인지 다행인지 나는 나의 장단점을 알기 때문에 잘하지는 못해도 열심히 하는건 늘 잘한다고 생각했다.
그런데 요즘 좀 지치다보니 코드스쿼드에 학습 능력이 빠른 사람들이 많아 좀 부럽기도 했다.
난 늘 새벽까지 하는데 저 사람들은 왜 이렇게 빠를까하는 ㅠㅠ
이번 주는 뭘 못했다기 보단 내가 프론트엔드에 재능이 있는가 하는 의심으로 계속 보냈던 거 같아 그게 좀 아쉽다.
담주 크롱과 상담해서 극복 방법을 여쭤봐야겠다.

잘했어요 🙂

이번 잘한 점은.. 목요일 밤새서 그래프를 그린 것..??
그게 제일 잘한 점 같다.
생각하고 계산한 로직대로 canvas에 그려진 걸 봤을 때 그 뿌듯함은 밤 샌 피로가 싹 사라졌달까..🥹
MUI와 typescript로 잃은 자신감을 그래프로 충전했다ㅎㅎㅋㅋ
그리고 프로젝트 전체 일정이나 task 조정 같은 걸 아직은 부족하지만 좀 더 세분화해서 하는게 몸에 익숙해지고 있다는 점??
다음 주는 크롱이 말씀하신대로 issue를 좀 더 작게 세분화하여 써봐야겠다!
옐로우도 이제 각성하신다고 했으니ㅎㅎ
그만 자괴감에 빠지고 열심히 해보자 또!!

참고