프로젝트 (34) 썸네일형 리스트형 [ 항해99 실전프로젝트 ] 기존 유저의 아바타는 사용중 띄우기 현재 유저의 아바타정보는 객체형태로 저장되고 있다. //유저의 아바타정보 { Eye: 1, Mouth: 1, Hair: 1, Back: 1 } 아바타샵의 아이템들은 카테고리와 넘버라는 키값으로 관리되고 있다. //아바타의 아이템들 { Category: "Eye", Num: 1 } 이제 구현해야할 로직은 기존 유저가 사용하고 있는 아바타의 아이템들은 아바타샵에서 300포인트가 아닌, 사용중이라는 텍스트를 띄워주어야 한다. 즉 아바타의 아이템들에서 유저가 사용하고 있는 아이템을 골라내어야 한다. 위를 구현하기 위해서, 아래와 같은 순서를 생각했다. 첫 번째로, 유저 아바타의 정보를 아바타샵의 아이템들과 똑같은 형태로 만들어 준다. 그 다음, 필터함수를 이용해 카테고리별로 데이터를 나눈다 분리된 카테고리별로 .. [ 항해99 실전프로젝트 ] 아바타샵 포인트 차감 로직 유저의 기존 아바타 정보와 다른 개수만큼 포인트를 곱하면 되는 것인데... 가장 깔끔한 방법은, 최종 포인트를 합산해서 서버로 넘겨줄 때 계산을 해서 포인트가 음수일 경우 알럿을 띄워주면서 초기포인트값으로 다시 돌리는 방법인 것 같은데 if문이 순서대로 작동하지않아 문제가 된다. 초기에 생각한 포인트 차감 로직은 다음과 같다. const discountPoint = () => { if (userSelect?.Eye !== initialuserSelect?.Eye) { console.log(userSelect?.Eye !== initialuserSelect?.Eye); setPoint((prev) => prev - 300); } if (userSelect?.Mouth !== initialuserSelect.. [ 항해99 실전프로젝트 ] 프로젝트 튜토리얼 만들기 실제 웹을 다른 사람이 사용해보니, 어떠한 기능들이 있는 지 몰라 그냥 넘어가는 경우가 대다수 였다. 실제로 힘들게 구현을 해놓고는 기능을 사용하지 않는 모습을 보니, 너무 마음이 아팠다. 그래서, 첫 회원가입 후 로그인 시 사용방법을 알려주는 모달을 만들기로 하였다. 위와 같은 튜토리얼을 만들어보고 싶었다. 순서대로 각 기능들을 설명해주는 말풍선이 생기고, 배경을 클릭하면 다음 말풍선이 뜨는 방식이다. 어떻게 구현할 지 생각해보았다. 생각생각 z-index를 활용하여, 하나씩 벗겨내는 형식으로 구현해보자. 조건문은 어떻게 짜야되지? 생각보다 그냥 간단한 로직이라서, 바로 결과물로 보여주자. 튜토리얼 완료 시, 보상과 좀 더 다양하게 설명 말풍선을 꾸며볼 필요가 있는 것 같다. 기존 회원가입 시, 디폴트.. [ 항해99 실전프로젝트 ] 리액트 쿼리 입문하기 리액트 쿼리는 서버상태관리라이브러리이다. 리덕스는 클라이언트의 데이터상태를 전역으로 관리하게 해주는 라이브러리이고, 리액트 쿼리는 클라이어트가 아닌 서버의 상태를 관리하는 라이브러리이다. 리액트 쿼리를 왜 쓰는데? => 위의 개념과 비슷하다. 기존에 Redux, Mobx, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들을 관리하기에 적합할 순 있어도 서버 쪽의 데이터들을 관리하기에는 적합하지 않은 점들이 있다. 이 점을 해결하기 위해 React-Query가 만들어졌다. 리액트 쿼리 다양한 기능들 React Query는 별도의 설정 없이 즉시 사용 가능하다 캐싱을 효율적으로 관리해준다 같은 데이터에 대한 여러번의 요청이 있을 시 중복을 제거한다. 백그라운.. [ 항해99 실전프로젝트 ] 외면하지 말기 이제 런칭까지 1주일이 채 남지 않았다. 이때까지 구현된 기능들을 배포 후, 팀원들끼리 직접 이용해보았는 데 사소한 오류들이 많이 발생했다. 이 오류들을 들쳐보니, 사실 이미 알고있었으나 귀찮아서 잠깐 미뤄둔 문제들이였다. 그래서 오늘부터 사소한 오류들을 외면하지 않기로 하였다. 오류가 생기면, 지금 당장 고치기로 하였다. 현재 런칭을 이번주 토요일인 , 12월 3일로 목표를 삼았다. 런칭까지 최대한 오류들을 잡고, 최적화까지 진행해볼 생각이다. 아래는 런칭까지 해결해야할 투두리스트이다. 기능 수정 마이페이지 및 편집페이지 수정 (디자인만 나오면 ㄱㄱ) 아바타샵 아바타이미지 넣기 랭킹페이지 api만 준비되면됨 모임작성할때, 오늘날짜가 디폴트값으로 예약현황의 최대숫자는 빼기 마감을 하면, 참가하기버튼 막힘.. [ 항해99 실전프로젝트 ] 초기 렌더링 개선 리액트는 SPA로 사용자가 느끼기에 페이지를 넘길 때 마다, 이미 준비된 페이지를 보여주기 때문에 매우 매끄러운 인상을 줄 수 있다. 허나 이것의 단점이라면, 초기에 모든 파일을 하나의 번들로 만들어 로드한다는 것이다. 그래서 초기 로드시간을 줄이려면, 한꺼번에 모든 파일을 로드하는 것을 여러 개의 번들로 나누어 주고 쓸모없는 번들 사이즈를 최대한 줄여야 한다. 가장 먼저, 구글의 Lighthouse를 통해 최적화를 하기 전 상태를 분석해보자. 그리고 아래는 최적화 하기 전, 번들 파일들을 사이즈별로 정리해놓은 이미지다. 아이콘들이 생각보다 엄청난 사이즈를 차지하고 있었다. moment-timezone도 대체해야겠다. 시간만 가져오는 거 치고, 너무 사이즈가 큰데? react-icons를 그래봤자 5-6.. [ 항해99 실전프로젝트 ] 중간발표 회고록 실전프로젝트를 시작한 지, 벌써 3주가 지나갔다. 아무래도 처음으로 진행하는 실전프로젝트이다보니 아쉬움이 많이 남는 것 같다. 무엇이 아쉬운 지는 그냥 잘 모르겠다. 근데 실전프로젝트인데 오히려 미니프로젝트 때보다 열정이 식은 느낌을 나 혼자 받았다. 중간 2주차일때는 정말 코드짜기가 귀찮을 때도 있었다. 아마도 1주짜리 프로젝트만 해오다가, 6주라는 소리에 살짝이나마 안주했던 것 같다. 중간발표때는 서비스 소개 및 아키텍처등을 5분간 발표하여, 멘토님을 통하여 피드백을 받았다. 일단 끝까지 사이트기능에 온 신경을 쓰다가 늦잠을 잤고, 기술질문에 대한 답변을 준비하지도 못했다. 그래서 대답이 매끄럽게 나오지 못했다. 사실 한편으로는 아무것도 찾아보지않고, 내 머릿속에 있는 지식으로 대답하면 어디까지 할 .. [ 항해99 실전프로젝트 ] interceptor를 활용해 refresh token 관리 결국 받아온 토큰을 저장할 때, 1. refresh token은 local storage에 저장하고, access token은 cookie에 저장하라 2. 요청 헤더에는 access token을 넣어라 3. access token이 만료됐다고 하면, refresh token을 가져와 새로운 token을 발급받는 요청을 하여 갱신해라 여기서 axios의 interceptor를 사용하면, 서버에서 오류를 던져주고 클라이언트에 도착하기전에 http요청을 가로채 다시 요청을 할 수 있다? 아래는 interceptor를 연습한 코드이다. instance.interceptors.response.use( (response) => { return response; }, async (error) => { const { .. 이전 1 2 3 4 5 다음
