fpzmfks 님의 블로그

최종적으로 무한 스크롤을 프로젝트에서 빼게 되었고, 어째서 이렇게 되었는지 서술해보겠다. 무한 스크롤의 문제는 어제 병합하면서 생겼는데 리액트-인터셉션-옵저버 라이브러리와 슬릭-캐러셀 라이브러리의 충돌, 그리고 json-server의 버전 문제로 인해 발생한 것이었다. 전자의 경우, 라이브러리의 충돌이니 무한스크롤과 캐러셀 중 하나의 기능을 라이브러리 없이 구현하면 해결될 수 있을 것 같다는 결론이 나왔었다. 때문에 일단 내가 라이브러리 없이 무한 스크롤을 구현하도록 노력하기로 했는데, 또 하나의 문제가 있었으니 json-server의 배포버전에 따라 페이지네이션 기능이 있다가 없어진다는 것이었다. 우리가 로컬 환경에서 사용한 json-server의 버전은 1.0.0으로 이 버전의 기능을 이용하여 _pe..

오늘은 변경한 db.json 구조를 기반으로 데이터 불러오는 것을 한 다음, react-intersection-observer라이브러리를 이용하여 무한 스크롤 기능을 구현하였다. 과연 도전과제인지 오늘 하루를(오전에 챌린지반 수업이 있어서 정확히는 오후시간이지만) 쏟아서 겨우겨우 완성할 수 있었다.  먼저 어제 마음먹은대로 아래와 비슷한 형태로 url을 구성하여 선별적으로 데이터를 불러왔다. 이렇게 불러오고http://localhost:4000/posts?foodType=한식이렇게 불러오면 된다http://localhost:4000/posts?local=서울그리고 아마 최종적으로 이렇게 불러와서 무한 스크롤 기능을 구현해야 할 것이다http://localhost:4000/posts?foodType=${c..

추석연휴가 지나고, 오늘도 열심히 프로젝트를 진행했다. 물론 추석연휴 동안에도 열심히 코드를 짜서 기능을 구현했기 때문에 프로젝트의 필수 기능은 이미 다 구현했다. 내가 맡은 부분은 메인페이지와 게시글 추가/수정 페이지의 지도인데, 특히 지도 API를 다루는 게 힘들었다.  먼저 메인페이지를 살펴보자면, 아래와 같다. 헤더, 상단스크롤버튼, 게시글 추가 버튼, 탭으로 게시글 필터링하기, 카드 클릭하면 상세페이지로 넘어가기 같은 기능들을 넣었고, 약간 어려웠던 건 탭으로 게시글 필터링하기였다. 사실 이건 어려웠다기보다는 swtich문이 너무 길어져서 이게 맞나 하는 생각이 들었던 것과, 현재의 데이터베이스 구조로는 이러한 탭과 함께 무한스크롤 기능을 넣을 수 없었던 것이 주요한 고민이었다. switch문이..

오늘은 기능 20% 완성을 목표로 잡은 날이다. 내가 맡은 역할은 홈과 router, 레이아웃 컴포넌트 같은 전체적인 구조를 잡는 것, 그리고 게시글 추가에서 지도 API로 위치 정보를 찍어갈 수 있도록 하는 것이다.  홈 구축 같은 전자는 대부분 tailwindcss를 다루기 어렵다는 것 말고는 크게 문제될 부분은 없었는데, router접근권한 처리 부분에서 접근 권한을 zustand state에서 가져오지 않고 로컬스토리지에서 바로 가져오도록 로직을 짜버려서 리렌더링 이슈가 있었다. 문제의 존재를 인지하면 바로 고칠 수 있는 부분이었어서, 오늘도 나의 검증 미숙을 자책하는 나날이다... 진짜 문제는 지도API였는데, 이 문제 또한 내가 실수한 비율이 90% 정도는 되었다. 카카오맵 API가이드를 따라..

오늘은 아웃소싱 프로젝트를 시작하며 팀 회의를 하며 하루를 보냈다. 과제의 필수요건이 지도, 유튜브, 설문조사 API 중에서 반드시 한 가지를 사용하라는 것이었는데, 나는 처음에 이 3가지를 다 사용할 수 있도록 점메추 설문조사를 해서 => 나온 음식메뉴 결과를 기반으로 => 해당 음식 관련 영상과 맛집 위치를 띄운다. 라는 아이디어를 내었다. 다만 사용할 API를 조사하면서 이런저런 요건을 고려해본 결과, 설문조사는 어렵고, 설문조사가 날아갔으니 관련 영상도 애매해져서 날아가 맛집 위치를 보여주기 위한 지도 API만을 사용한 맛집추천 사이트를 구현하기로 하였다.  이렇게 주제를 정하고 피그마를 통해 와이어프레임을 만든 뒤, 역할을 나누고 프로젝트를 세팅하고 db구조에 대해 의논을 했다. 아래가 최종적으..

오늘 챌린지반 수업에서는 발행자/구독자 패턴을 배우고 이것을 활용하여 Potal로 Toast를 만드는 과제를 받았다. 과제를 실행하기에 앞서 수업에서 사용된 코드를 가져와 분석해보는 시간을 가졌다.  아래가 바로 발행자/구독자 패턴이다. 쉽게 말해 구독을 통해 이곳에 명령어(topic)와 그와 매칭되는 함수들(listeners)을저장 (subscribe) 하고 그것들을 실행 (publish) 시킬 수 있도록 하는 것이다. // PUB/SUB 패턴const EventBus = () => { // 명령어를 저장하는 곳 const topics = new Map(); const subscribe = (topic, listener) => { // 가장 먼저 명령어를 저장함 // 값을 배열로 줌으로..

오늘은 개인과제 마지막 날이다. 3일 차에 다 했다고 섣불리 제출했다가 여태껏 리팩토링과 수정을 하고 있는 것을 보니 다음부터는 트러블 슈팅을 더 철저히 해야겠다는 생각이 든다.  일단 4일 차에 생각했던 대로 구조분해 할당으로 분리된 파일에 선언한 함수를 가져와 사용하여 useMutation코드를 리팩토링하였다.  리팩토링 이전 코드// 결과 데이터 업데이트 함수 const updateMutation = useMutation({ mutationFn: async (updateData) => { await axios.patch(`${API_URL}/${result.id}`, updateData); }, });리팩토링 이후 코드 // 결과 데이터 업데이트 함수 const update..

오늘은 안내에 따라 완성한 프로젝트를 배포하고 useMutation으로 조금 리펙토링을 해보았다.  배포는 두 단계로 나뉘는데, json-server배포와 내 프로젝트 배포이다. 내 프로젝트 배포는 gitHub의 기능을 통해 이전에도 몇 번 해보았으니 넘어가고(다만 시간이 걸리는지 배포한 프로젝트가 정상작동하는 것은 확인하지 못하고 있다.), json-server배포에 대해서 조금 말해보고자 한다.  설명을 하려고 해도, 이런 서버 쪽 구조는 전혀 배운 게 없어서 잘 모르겠는데, 이번에 json-server를 배포하는 데 필요했던 단계는 아래와 같다. api폴더 생성-db.json 파일 생성-package.json 파일 생성-server.js 파일 생성 => 깃허브 레포지토리에 해당 폴더 업로드 => g..

useMutaion 써서 리팩토링한 것 리액트 심화 4일 차 @배포, 리펙토링오늘은 안내에 따라 완성한 프로젝트를 배포하고 useMutation으로 조금 리펙토링을 해보았다.  배포는 두 단계로 나뉘는데, json-server배포와 내 프로젝트 배포이다. 내 프로젝트 배포는 gitHub의 기fpzmfks.tistory.com개인과제 영상보면서 리팩토링하고 트러블 슈팅한 것 리액트 심화 5일 차 @프로젝트 다듬기, 개인과제 재제출오늘은 개인과제 마지막 날이다. 3일 차에 다 했다고 섣불리 제출했다가 여태껏 리팩토링과 수정을 하고 있는 것을 보니 다음부터는 트러블 슈팅을 더 철저히 해야겠다는 생각이 든다.  일단 4fpzmfks.tistory.com   오늘은 기능 구현을 완료하고 css도 조금 손을 대보았..

오늘은 개인 프로젝트를 시작했다. 개인 프로젝트 주제는 MBTI테스트를 만들어서 배포하는 것으로, JWT인증과 json server를 주로 이용하여 여태껏 데이터를 저장하지 못하거나 외부 데이터베이스에 의존하던 것에서 벗어나 자체적으로 데이터를 보관하고 활용할 수 있도록 하는 것이 목적이다.  오늘은 우선 로그인/회원가입 기능을 만들어보았다. 이를 구현하기 위해서 오후 시간을 다 썼는데, 대부분의 이유가 회원가입 기능 테스트 할 때 내가 '이미 존재하는 아이디로 회원가입'을 하려고 했기 때문이었다. 방금 전까지 supabase로 auth 기능을 사용하던 경험이 너무 크게 다가와서 JWT가 공개된 API라는 것을 잊었다. 다행히 나중에 가서 Thunder Client를 사용하여 이런 문제였다는 것을 알게 ..