fpzmfks 님의 블로그

드디어 내일이 발표일이다. 나는 발표준비 중에서 발표자 역할을 맡게 되어서 오늘은 발표 스크립트 짜기와 발표 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번으로 기실 비슷한 구조의 함수이긴 하지만 세세한 처리를 다르게 해야하기 때문에  둘 다 로직이 충분히 길다.  아래는 리팩토링하며 ..

오늘은 ut(유저 테스트) 관련 회의를 하고 먼저 메인 페이지 리팩토링을 진행했다.  기능적으로 문제는 없지만 메인페이지에는 코드적으로 결함이 있었기 때문인데, 첫째가 가장 하단에 있는 엄청 길고 쓸데없이 복잡한 데이터 요청 코드이고, 둘째가 useEffect를 2개 사용해서 불필요한 렌더링을 유발한다는 것이다.  첫째는 내가 최근에 작성한 코드이니만큼 그냥 대충 분리하면 딱히 문제될 것도 없어보이지만, 문제는 두번째이다. 내가 useEffect를 두 번 쓴 이유는 페이지네이션 이슈 때문인데, 데이터 필터링으로 인해 페이지 수가 줄어들 경우 현재 머물고 있는 페이지가 없는 페이지가 될 경우가 발생할 수 있다. 때문에 필터 값 변경이 발생할 때마다 setPageNumber(1)을 통해 페이지를 1로 리셋하..

오늘은 중간 발표 준비와, 중간 발표, 추후 일정 관리를 하였다.  어제는 피드백 받은 크리티컬한 문제들을 해결했고, 오늘 이를 기반으로 readme를 작성하며 발표 준비를 했다. 다행히 트러블 슈팅 같은 것들은 이미 블로그에 작성해 둔 것을 좀 정리하면 되어서 큰 문제는 없었지만, gif 파일을 생성하는 것이나 마크다운 문법을 활용하는 데에 약간 어려움을 겪었다. 그래도 이번에 readme를 작성하면서 또 하나 마크다운 문법을 배웠다.  토글을 사용하는 법인데  토글 제목 토글 내용이런 문법을 사용하면 토글을 사용할 수 있었다. 개인적으로 토글은 인터넷 글쓰기에서 중요한 기능이라고 생각해서 큰 수확을 얻은 기분이다. 이렇게 작성한 readme도 너무 길지 않고 한 눈에 보기가 좋았다.    이후 중간 ..