fpzmfks 님의 블로그

오늘은 네트워크 요청을 줄이도록 코드를 리팩토링 했다.  리스트 데이터 요청 관련 리팩토링인데, 기존에 데이터를 불러올 때는 알 수 없는 이유로 typescript의 타입 오류가 떠서 리스트 카드를 구성하는 요소들의 데이터를 따로 따로 불러왔다. 하지만 이러한 분산적인 데이터 요청은 네트워크 통신 비용을 증가시키기 때문에 리팩토링의 필요성이 있었다.  아래 빨간 표시가 데이터를 따로 불러오는 부분이다. 이 중 앞부분의 오너프로필을 통합하여 데이터를 요청하도록 해보았다.  리팩토링 과정먼저 타입오류는 as type~~ 으로 타입을 강제적으로 변환시켜주는 과정을 거쳐서 고정시켜주었다. 데이터 요청 시에 외래키로 연결된 관련 테이블의 데이터도 함께 불러오도록 했다.관련 테이블의 데이터 중에서 내가 원하는 데이..

기존 라이트하우스 점수   일부 컴포넌트 ssr로 변경 하단 컴포넌트에 Loading 컴포넌트 적용일부 적용Loading 컴포넌트 더 많이 적용

드디어 내일이 발표일이다. 나는 발표준비 중에서 발표자 역할을 맡게 되어서 오늘은 발표 스크립트 짜기와 발표 ppt 제작에 힘을 썼다. 또 오늘 오후 5시에는 튜터님의 사전발표 피드백이 있을 예정이었기 때문에 빠르게 작업을 마무리하고 튜터님께 피드백을 받았다.  내가 구성한 발표 스크립트를 진행하는 데에 있어서 걸리는 시간은 13분으로 10분 제한에서 벗어나서 스크립트를 줄일 필요가 있었다. 줄일 곳으로 주로 지적하신 것은 개발자 발표에 있어서는 크게 중요하지 않은 프로젝트 개요 소개 같은 부분이었다. 또 지적 받은 것이 코드 설명이 또 너무 적다는 것이었다. 그래서 기술적 의사결정을 설명할 때 각자의 경험을 바탕으로 코드와 관련된 이야기를 할 예정이다.  또 ppt에 나와있는 글을 너무 그대로 읽는 곳..

오늘은 드롭다운 모바일 형태 전용 모달창 제작과 그냥 모달 창 제작을 했다.  이게 무슨 소리인고 하니... 드롭다운 모바일 형태 전용 모달창이란 반응형을 위해서 전용 모달창을 새로 가져다 만들어서 썼다는 것이고, 그냥 모달 창을 제작했다는 것은 오늘 기어코 라이브러리 없이 모달창 자체를 만들어 썼다는 것이다.  전자는 기존의 드롭다운을 활용하는 방식으로는 모바일 형태에서 요구하는 ui를 구성할 수 없었기 때문에 한 일이고,  후자는 모달 라이브러리에 문제가 생긴 것 같아서 일부의 모달을 재구성하여 사용한 것이다.  전자는 지금까지 한 작업의 재탕이었으나, 후자는 성대한 삽질이었는데, 애초에 내가 모달 창에 오류가 생겼다고 생각한 게 내가 라이브러리를 잘못 활용해서 생긴 error console을 다른 ..

주말과 오늘은 반응형 구현을 위해서 다시금 큰 틀들을 만들었다.  토요일에는 드롭다운을 모달창처럼 보이게 하는 작업을 했고(하다 보니 이제는 그냥 모달 창을 만들 수 있을 것 같다는 느낌이 들기 시작했다.) 일요일에는 모바일 검색창을 새로 만들었고(엔터 치면 검색, 자동완성 목록) 월요일(오늘)은 모달 창 하단 고정과 모바일용 헤더 제작을 했다.  드롭다운 => 모달창거의 다 얼추 완성은 되었는데, 드랍다운을 모달창처럼 보이게 하는 작업만 실패해서 내일 아예 새로 만들어야 한다. 모달창처럼 보이게 하는 것 자체는 성공했는데 아래 캡쳐에 있는 빨간 x표시가 있는 부분에 들어갈 탭 기능을 구현할 수가 없었던 것이다.  뒤쪽 어두운 배경을 보면 최신순, 구독 채널의 두 가지 드롭다운이 있는데 이 두 드롭다운은..

오늘은 본격적으로 반응형 적용 작업에 들어갔다. 개발자 도구의 기기 툴바 전환 기능을 이용해서 모바일 버전을 쉽게 확인하고 css를 적용할 수 있었는데 이러한 것들을 적용하는 과정이 좀 복잡하고 번거롭기는 했지만, 진짜 문제들에 비하면 그렇게 어려운 것도 아니었다.  검색 페이지 분리우선 이전부터 준비했던 검색 페이지 분리에 대해 말하자면, pc 버전에서는 검색 페이지를 따로 분리할 필요가 없었지만 모바일에서 원활한 동작이 일어나도록 하려면 검색 페이지를 분리해야했다. 그 과정에서 기존에 쿼리 스트링으로 관리하던 검색기능을 path로 관리하게 되었고, 이와 관련된 로직들을 수정해야 했다.  css 적용은 덜 되었지만, 아래와 같이 페이지를 재구성할 수 있었다. pc 버전에서는 헤더의 검색창에 검색어를 입..

오늘은 메인페이지 모달 창을 만들고, 메인페이지 리팩토링을 진행했다. 또 계속 css 작업을 진행하기도 했다.  메인페이지 모달 창먼저 메인페이지 모달 창에 대해서 언급하자면, 이번에 신경 쓴 것은 모달 창의 위치였다. shadcn 모달 창은 state를 통해 open-close를 컨트롤 할 수 있지만 children을 props로 가져가서 사용할 수 있는데, 겪어본 바로는 전자가 더 좋은 방법이었다.  이전에 button 태그가 겹쳐진 것으로 인한 html 렌더링 오류가 children props를 사용하지 않은 가장 큰 이유였는데, 이번에 state를 통해 open-close를 조절하는 이유는 카드마다 모달 창을 달아주는 것이 비효율적이기 때문이다.  필요로 하는 모달 창은 하나밖에 없는데 이것을 띄..

오늘 아침에 팀원들에게 상담해본 결과 작성한 후기 데이터를 모아서 한 번에 submit 하는 기능으로 구현하기로 했다. 이를 위해서는 submit하는 데이터를 모아서 관리하는 state를 선언할 필요가 있고, 이 submit 데이터를 언제, 어떻게 변화시킬 지도 잘 생각해야 한다.  state 선언먼저 submit 데이터는 initialArr를 선언하고 이를 초기값으로 지정해서 state를 선언했다.  아래 코드에서 initialArr는 데이터의 양을 지정하고, type submit은 데이터의 형식을 지정하여 데이터를 관리하기 편리하게 해주었다. export type submit = { warmer_id: string; warming_user_id: string; party_id: string; ..

오늘은 파티 팀원 평가하기 페이지를 구현했다. 아래의 후기 작성하기 페이지가 그것인데, 각 평가별 포인트(-1,-2,1,2)와 코멘트('시간을 안 지켰어요','다시 함께하고 싶어요')를 남길 수 있다.  일단 구성은 아래와 같이 멤버, 평가, 코멘트로 나뉘어져 있고 '다음' 버튼을 평가 제출 트리거로 하여서  기능을 구현했다.  일단 이렇게 기능을 구현하는 것 자체는 잘 되었는데, 몇 가지 추가적으로 고민해야 되는 부분이 있다. 바로 멤버 프로필을 클릭하면 평가가 제출 되지 않고 바로 넘어간다는 점인데, 이에 대해 어떻게 대처하는 게 좋을 지 내일 조금 의논을 해보는 것이 좋을 것 같다.  일단 나의 대책은  멤버 프로필의 버튼 기능을 없애고 오직 다음 트리거로만 평가를 진행하도록 한다. 이때 '평가+다..

오늘은 참가하기 함수를 리팩토링 했고, 그 와중에 발견한 모달의 오픈클로즈 트러블을 해결했다. 참가하기 기능은 모달로 만들었고, 이 모달이 총 3곳에서 사용되는 핵심 기능 중 하나이기 때문에 중요한 데다가 이것저것 고려할 것이 많다. 그 때문에 코드가 너무 길어져 버렸고 향후의 유지보수성을 위해서 우선적으로 리팩토링을 진행했다. 참가하기 함수 리팩토링참가하기 모달창의 핵심 기능은 4개로파일업로드유저프로필에서 디폴트 이미지와 닉네임 불러오기원하는 프로필을 저장해서 참가하기(저장)디폴트 프로필로 참가하기(넘어가기)이다.   이 중 집중적으로 리팩토링을 해야 하는 것이 3번과 4번으로 기실 비슷한 구조의 함수이긴 하지만 세세한 처리를 다르게 해야하기 때문에  둘 다 로직이 충분히 길다.  아래는 리팩토링하며 ..