fpzmfks 님의 블로그

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

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

오늘은 css 과정을 마치고 튜터님의 피드백을 받아서 ux를 개선하거나 코드를 리펙터링 하는 등의 작업을 거쳤다. 필수 입력 과정 조정내가 만든 참가하기 기능은 모집 하기 이후에 반드시 실행되어야 하는데, 모달 창을 사용자가 닫지 못하게 했지만 이 정도로는 부족하다는 것을 피드백을 통해 통감했다. 아예 새로고침하거나 브라우저나 탭을 닫아버리면 문제가 일어나는 것은 똑같았기 때문이다.  그래서 나는 모집하기 마지막에 기본 프로필로 참가하기 로직을 삽입하고 이후 뜨는 모달창에서는 이미 삽입한 기본 프로필을 업데이트하는 방식을 선택했다. 이러한 방법을 사용하면 사용자가 예상 외의 행동을 하더라도 오너 정보가 없어서 오류가 뜨지는 않을 것이다.  검색 디바운싱또 지적 당한 것이 크게 필요성을 느끼지는 못했던 검..

오늘도 어제와 같이 드롭 다운, 모달 창 조정 및 css 작업을 했다.  select태그에 css를 넣기 위해서 아예 드롭 다운으로 select를 만들었고, 오늘도 모달 창 이슈가 있어서 모달 창을 조정했고, 다른 자잘한 css 작업들도 진행했다.  다행히 드롭 다운은 전에 만들어둔 hook을 이용하여 쉽게 구현할 수 있었고, css 작업들도 품이 많이 드는 것 말고는 별 문제 없었지만, 모달 창 이슈가 가장 큰 문제였다.  참가하기 모달 창이제껏 모달 창을 다룬 경험으로 인해 모달 창의 구조에 대해서 많이 이해하게 되었다. 다만 여전히 모달 창의 오픈 클로저 트리거를 다루는 것이 골치가 아팠는데, 내가 세세한 오픈 클로저 로직을 구현하길 원하는 '참가하기' 모달은 총 3곳에서 사용되며 2가지 방식으로 ..

지난 주말 동안 열심히 css 작업을 하고 오늘도 계속 css 작업을 했다. css 작업이라고 얕볼 것이 아니라, 그저 유저에게 어떻게 보이는지가 목적일지라도 state로 관리하며 유저의 동작에 즉각 반응하도록 만들어야하기 때문에 여전히 해야할 일이 많았다.  드롭 다운먼저 일요일에 작업한 드롭 다운을 예시로 들자면 나는 드롭다운을 만들기 위해서커스텀 훅을 만들고변수들의 타입을 맞추고relative와 absolute로 html 요소의 위치를 조정해야했다. 또 드롭다운을 만드는 것이 처음이었기 때문에 여러 블로그를 살펴보며 드롭다운에 대해 공부하고 예시 코드 또한 살펴보아야 했다.  아래는 드롭다운을 위한 커스텀 훅인데, 코드 자체는 예시 코드를 따왔다지만 타입을 지정하는 것이 정말 어려웠다. RefObj..

오늘은 어제 완성한 기능들을 zustand를 이용하여  헤더에 올리고 css작업을 시작했다. 또한 font와 테마컬러를 설정하기 위해 tailwind.config.ts 파일을 설정했다.  zustand오늘 zustand를 하면서 next.js 과정에 들어오고 나서 처음으로 간단한 zustand 설정을 해보았다. 전에 zustand를 간단하게도 사용할 수 있다는 얘기를 듣기는 했는데, 정말 엄청 간단해서 놀랐다. 아래의 첫번째가 간단한 zustand가 두번째가 어제 만진 복잡한 zustand이다. 이 둘의 차이가 무엇인지, 또 복잡한 설정에서의 이점이 구체적으로 무엇인지(이점이 명확하지 않으면 굳이 복잡한 설정을 디폴트로 두지 않았을 테니까) 알아보아야겠다.  // 간단한 zustand 설정import {..

오늘은 시청중/모집중 필터 구현과 필터와 검색 기능을 헤더로 옮기는 작업을 하였다.  페이지네이션과 데이터 요청필터나 정렬, 검색, 페이지네이션 같은 기능들은 하나하나 놓고 본다면 별 것 아니지만, 이번 프로젝트와 같이 데이터베이스 구조가 복잡할 때에는 이런 기능들을 합치는 것이 가장 큰 이슈 중 하나인 것 같다.  이전의 정렬, 필터, 검색 기능들도 supabase 메서드에 대해 조사하고 잘 활용해야만 페이지네이션과 결합할 수 있었는데 데이터 요청/응답 이슈로 인해 이번에 기어코 시청중/모집중 필터 기능을 구현하는 데에 실패했다. 정확히는 필터 기능 구현 자체는 쉽게 성공했으나 이를 페이지네이션과 결합하는 것이 불가능했다. 이 글의 가장 하단에 노력했지만 실패한 코드가 남아있다.  문제의 핵심은 '시청..

오늘은 어제 붙잡고 있던 것들을 마무리 했고, 내일 남은 헤더 기능만 구현하면 나의 기능 구현은 끝이 난다. 페이지 2개를 구현하려니 너무 힘이 드는데, 그래도 그 어느 때보다도 배우는 게 많았다는 점이 위안이 된다.  먼저 메인 페이지 기능들을 짚어보자면정렬 / 필터정렬은 supabase order를 통해, 필터는 supabase textSearch를 통해 구현했다.  이 중 정렬의 인기순 기능은 어제 붙잡고 한참을 고민하던 것이었다. 문제의 원인은 인기순 정렬을 위한 count값이 배열로 들어오는 것을 곧장 order로 정렬할 수 없었기 때문에 sql editer를 사용해야 했다는 것이다. 하지만 sql에서 사용되는 언어는 내가 모르는 영역이기 때문에 한정된 프로젝트 시간 내에 할 수 있을 지 장담할..

오늘은 메인 페이지 정렬/필터(페이지네이션 전제)과 모달 창 조정을 하면서 시간을 보냈다.  메인 페이지 정렬/필터먼저 메인 페이지 정렬/필터에 대해서 이야기하자면, 페이지네이션과 정렬/필터 기능을 조합하기 위해서는 supabase에 데이터를 요청할 때 정렬/필터가 되어야 한다. 우리 프로젝트의 경우 최신순/인기순 정렬과 채널 별 필터 기능을 가지고 있는데, 이러한 정렬/필터 기능을 구현하기 위해서 supabase에 다음과 같은 요청을 보냈다. const response: PostgrestSingleResponse = await browserClient .from('party_info') .select( 'party_id,party_name,party_detail..

오늘은 정말 많은 일이 있었다. 어제 이미지 업로드를 했고, 제목에 있는 나머지를 오늘 다 했다. 정말 머리가 터지는 줄 알았는데, 이전 작업들을 잘 기억해두고 있어서 이러한 수정 작업들이 그래도 순조롭게 이루어진 것 같다.  이미지 업로드먼저 이미지 업로드를 짚고 넘어가자면 간단하게 input 창 2개만 띄워놓았던 초대하기(이미지, 닉네임)를 파일 업로드 방식으로 바꾸는 작업이었다. 이건 마이페이지 편집하기 기능을 작업하신 분이 이미 해놓은 코드가 있어서 그 코드를 분석해서 변형하는 과정을 통해 구현할 수 있었다.  그 분과 내 코드에서 다른 점이 있다면, 그 분은 기존의 데이터를 수정(update)하는 과정에서 이미지를 업로드하고, 나는 새 파티 프로필을 등록(insert)하는 과정에서 이미지를 업로..