Front-end/etc

매번 팀프로젝트를 진행할 때마다 팀 레파지토리를 클론해와서 프로젝트를 진행하는데 끝난뒤에는 내 개인 레파지토리에 옮기고 싶어서 로컬에 있는 소스들을 한꺼번에 개인 레파지토리에 푸쉬하곤 했다. 이렇게 하니 그동안 쌓아두었던 커밋기록들이 없어져서 아쉬움에 방법을 찾아보니 아주 간단하게 해결할 수 있었다.  개인 레파지토리를 만들고 로컬에서 원격저장소를 추가해주면 된다!  1. 개인 레파지토리 생성내 깃허브에 가서 새로운 레파지토리를 생성한다. 2. 로컬에 새로운 원격저장소 추가 git remote add 새로운저장소이름 https://github.com/yourusername/레파지토리주소.gitex) git remote add personal https://github.com/yourusername/my-..

🚨 에러 발생 목데이터 서버를 구축하기 위해 MSW를 사용하려고 설치를 한 뒤 mockServiceWorker.js를 생성하기 위해npx msw init public/ --save 로 를 설치하고 생성하려고 하는데 ES Module 에러가 발생함.  처음에는 당연히 노드 문제라고 생각하고 찾아서 한참 헤맸다. 찾아도 안나오길래 노드문제가 아니라 다른 문제인거 같아서 방향을 다르게 해서 찾아보니 내가 사용하고 있는 패키지 관리자가 yarn 인데 yarn 1의 의존성 문제라는 걸 찾아냈다.  💡 에러 해결yarn cache clean --allrm node_modules/ yarn.lock package-lock.jsonyarn 패키지 관리자 캐시를 지우고 현재 프로젝트의 yarn.lock package..

🚨 문제 상황 위에 사진과 같이 필터값은 제대로 받아와서 해당 필터값에 따른 데이터를 받아오지만 해당 카테고리를 눌렀을 때 상태값이 초기값으로 돌아가서 제대로 동작하지 않는 문제가 발생함 카테고리 코드 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react"; import { Navigation } from "swiper/modules"; import "swiper/css"; import { FaArrowLeft, FaArrowRight } from "react-icons/fa"; import { useState } from "react"; type FiltersArray = { filters: string[]; onFilterChange: (fi..

🤷🏻‍♀️ 제목이 필터링 기능 잔혹사인 이유는? 그냥 내가 혼자 삽질을 하다가 두 번 일하는 잔혹한 일이 벌어졌기때문 홈페이지 카테고리 필터링 기능구현을 맡은 나 이미 필터링 기능을 구현해 본 나는 자신만만하게 이전에 했던 코드를 참고해서 필터링 기능을 구현하기 시작했다. 그런데? 문제가 생겨버렸다. 아직 백엔드의 데이터를 사용하기 전 간단하게 목데이터를 만들어 사용하고 있었는데 내가 만든 필터링 기능이 전체 데이터를 필터링 하는게 아니라 이미 받아온 데이터에 한해서 필터링을 하고 있던 것이다. 그니까 무한스크롤을 구현하기로 한 우리 프로젝트에서 1페이지에서만 받아오는 데이터만 필터링 할 수 있게 만들었다는것..!! ㅠ 자신만만해 했지만 꽤나 걸린 코드를 다 고칠 수 밖에 없었다는 슬픈이야기.. 다음에는..

처음으로 백엔드와의 프로젝트를 진행하며 가장 크게 느낀점은...? 데이터가 필요하다...! 막연히 레이아웃을 짜고 틀은 만들었는데 막상 사용할 수 있는 데이터가 없으니 프로젝트 속도가 더뎌지는 기분이 들고 이렇게 있다가 나중에 발등에 불 떨어진듯 진행하게 될것 같은 예감이 들었다.ㅋㅋㅋㅋ 멘토링 시간에 질문했더니 멘토님께서 MSW를 추천해주셨다. 프로젝트 시작부터 알았다면 더 좋았겠지만 나중을 위해서라도 지금 단단히 공부해두려고 한다. Getting started Three steps to get started with Mock Service Worker. mswjs.io Mock Service Worker(MSW)란? Service Worker를 사용해 네트워크 호출을 가로채고 응답을 보내주는 API ..

📌 근래에 프로젝트들을 진행하면서 꼭 필수적으로 들어가는 기능들이 있었다. 구태여 프로젝트 뿐만아니라 대부분 사이트에 있는 필수 기능이기도 한 바로 회원가입, 로그인 기능이다! 토이프로젝트를 진행하면서 JSON Server로 로그인기능을 구현해보기는 했는데 Firebase가 훨씬 더 구현하기 간편한 것 같다. 로그인 기능 이해하기 1. 회원가입 서비스를 사용하는 사람들은 우선 회원가입을 하는데 email, password 등 필요한 정보를 db에 저장한다. 2. 로그인 그 후 사용자들은 email, password를 입력하면 db에서는 해당 user를 구별하여 해당 user에 대한 token을 전달한다. 3. 로그인 이후 token을 전달 받은 사용자들은 db에 해당 token을 header에 넣어 원하..