🥞 오늘 한 일

• 최종 프로젝트
  • 공구템 리스트 더보기 구현
  • 공구 신청 체크박스 구현 (미체크 시 신청 불가)
  • 공구 종료 기능 제작
  • 상세 페이지, 공구 신청 모달 UI 구현 (와이어프레임 기반)
• 기술면접 연습 3개

기술면접 연습

• 브라우저의 렌더링 과정에 대해서 설명해주세요.
  • 렌더링 과정에 대해 간략하게 설명드리자면 HTML 파싱, CSS 파싱, DOM 트리와 CSSOM 트리를 결합, 레이아웃 계산, 페인팅 단계로 이루어집니다.
• 쿼리 스트링은 주로 어디에 사용하셨나요?
  • 저는 주로 검색 기능에 사용을 했습니다. 기존 페이지를 유지하면서도 화면이 바뀌었음을 알려주기 위해 사용을 했으며, URL이 바뀌면 히스토리 스택이 쌓여서 앞으로 가거나 뒤로 가기가 수월하고, 검색 결과를 공유할 때 쿼리 스트링이 들어간 URL을 공유하면 수월하게 검색 결과 공유가 가능하다는 장점이 있습니다.
  • (일단 개념부터 바로 잡는 게 중요, 태그 별 검색에도 쓰일 수 있을 듯?)
• 브라우저에 URL을 입력하면 일어나는 일에 대해 순서대로 설명해주세요.
  • 먼저 브라우저는 해당 URL의 프로토콜, 도메인 이름, 경로를 분석하고, 도메인 이름을 IP 주소로 변환해야 하기에 DNS 서버에 요청을 보냅니다. DNS 서버가 IP 주소를 응답으로 보내주면 브라우저는 TCP 네트워크 연결을 구축하여 해당 IP 주소를 가진 웹 서버에 데이터를 요청하고, 웹 서버는 HTTP 응답을 브라우저에 보내고 브라우저는 받아온 HTML, CSS, JS 코드를 화면에 렌더링합니다.
  • (외우려고 하면 어렵지만 이해하려고 하면 간단한 듯? 이해를 하자.)

🍽️ 트러블 슈팅

공구 종료하기 기능 오류 해결

문제

공구 종료하기 기능은 사실 수정 기능과 거의 동일하다고 볼 수 있어서, 수정 기능에 사용한 코드를 토대로 제작을 했는데 아무리 해도 제대로 값이 들어가지 않는 오류가 있었다. 때문에 가져오는 값 또는 보내는 값에 뭔가 문제가 있는지 살펴보았다.
문제의 원인은 역시 가져온 값을 어떻게 재구성하여 수정 로직으로 보내느냐에 대한 문제였다. 우선, tanstack query를 이용하여 post에 대한 정보를 가져올 때, 연동된 group_applications에 대한 값도 동시에 가져오게 된다. 그런데 나는 필요한 값을 하나하나 넣어준 수정 로직과 달리 공구 종료 로직에서 수정된 값으로 보낼 객체를 다르게 제작했다.

const finishGroupPost: TNewGroupPost = {
  ...groupPost
  is_finished: true,
};

수정할 객체에는 연동된 group_applications 값이 없어야하는데, 그냥 groupPost를 통째로 넣고 거기에 is_finished 값만 바꿔주니 당연히 제대로 들어가지 않았던 것.
때문에 아래 코드와 같이 변경했다.

const finishGroupPost: TNewGroupPost = {
  id: groupPost.id,
  user_id: groupPost.user_id,
  title: groupPost.title,
  start_date: groupPost.start_date,
  end_date: groupPost.end_date,
  people_num: groupPost.people_num,
  price: groupPost.price,
  content: groupPost.content,
  item: groupPost.item,
  link: groupPost.link,
  img_url: groupPost.img_url,
  is_finished: true,
};

필요한 값만 빼서 넣어주는 방식으로 변경을 했다. 사실 group_applications만 없으면 되기에 이렇게 하나하나 다 넣어주는게 그다지 효율적이진 않은 방법인 것 같아서, 이 코드를 더 효율적으로 만드는 방법을 생각해보아야할 것 같다.

🍴 돌아보기

다행히 내가 맡은 부분의 기능을 거진 다 끝마쳤다. 물론 모바일 디자인이 나올 경우 반응형도 해야하고 로그인 기능이 완료되면 유저 정보도 넣어줘야하고 남은 부분은 많긴 하지만 큼직하게는 마무리가 되어서, 내일부터는 다른 분들을 도와드리거나 하면서 최대한 프로젝트의 완성도를 빠르게 높여야겠다.

🍳 내일 목표

• 최종 프로젝트
  • 유저 정보 필요한 부분 적용 (로그인 기능 완료 시)
  • 자취템 부분에도 더보기 기능 적용