🥞 오늘 한 일

• 최종 프로젝트
  • Restful API 설계 완료
  • 공구템 등록 페이지
    • 구조 설계
    • 등록 기능 완료
• 기술면접 연습 2개

최종 프로젝트

Restful API 명세서 설계

어제 DB 설정에 이어 Restful API 명세서를 설계했다. 왠지 설계자가 된 기분이다.

진행하면서 바뀔 수도 있지만, 우선 팀원분들 및 튜터님께 1차 검증까지 받아낸 설계이므로 큰 수정은 없을 것 같다. (그러길 기원한다 ㅠ)

기술면접 연습

CSS

• styled-components를 써보셨나요? 사용하면서 느낀 장단점에 대해 알려주세요.
  • 답변) 제가 생각한 가장 큰 장점은 컴포넌트이므로 props를 활용할 수 있고 재사용이 수월하다는 점이었으며, 단점으로는 하나하나 이름을 지어줘야하기 때문에 시간이 오래 걸리는 단점이 있었습니다. 또한 본질이 js이므로 css로 변환하는데 시간이 오래 걸리며, next.js에서는 지원이 적다고 알고 있습니다. 때문에 styled-components보다 tailwid css를 선호하는 편입니다.

Frontend

• lazy-loading에 대해서 알고 계신가요?
  • 답변) 네, 말 그대로 게으른 로딩이라고 볼 수 있는데, 화면에서 보이지 않는 부분까지 다 가져오기에는 성능이 저하될 수 있어 화면에 보이는 부분만 먼저 로딩하는 개념입니다. 저도 lazy loading 기술을 사용해본 적이 있는데, 무한 스크롤 기능입니다. 많은 리스트를 가져올 때, 우선 화면에 보이는 부분까지만 가져오도록 한 다음 intersection observer API를 통해 특정 구간이 화면에 보여졌을 때 특정 갯수씩 더 가져오는 방식으로 lazy loading을 구현했습니다.

🍽️ 트러블 슈팅

타입 지정 Omit

트러블까진 아니지만 코드가 훨씬 간단해진 과정이 있었기에 적어보려 한다.
타입을 지정해줄 일이 있었는데, 기존 타입에서 Pick을 하여 가져오는 방식이었다. 해당 코드는 아래와 같다.

export type TNewGroupPost = Pick<
  GroupPost,
  | "id"
  | "user_id"
  | "title"
  | "price"
  | "people_num"
  | "is_finished"
  | "img_url"
  | "start_date"
  | "end_date"
  | "content"
  | "item"
  | "link"
>;

딱 보기에도 굉장히 많은 요소들을 Pick해야했고, 기존 요소에서 빠진 것은 오로지 "created_at" 하나였다.
이 코드를 보고 팀원분이 Omit이라는 개념을 알려주셨다. Omit을 사용하면 해당 요소를 제외한 모든 요소를 가져올 수 있다. Omit을 사용하여 아래의 코드처럼 변경하였다.

export type TNewGroupPost = Omit<GroupPost, "created_at">;

길던 코드가 고작 한 줄이 되었다. 이론으로 배운 기억이 나지만, 써보지 않았기에 잊고 있었다. 역시 많이 써봐야한다.

🍴 돌아보기

드디어 코드를 치기 시작했다. (편안...) 공구템 등록 페이지를 기능만 제작 완료했고, 주말 간에 찬찬히 더 제작할 예정이다.
캠프를 시작하고 계속 느끼는 거지만 역시 소통, 또 소통이다. 소통만큼 중요한 게 협업에선 없다고 봐도 될 것 같다.

🍳 내일 목표

• 최종 프로젝트
  • 공구템 페이지들 계속 제작