🧐 처음 생각한 인증 과정 현재 로그인이 된 유저라면 모든 페이지에서 처음에 /members 요청으로 유저가 인증된 유저인지 판단합니다. 만약 Access Token이 만료되어서 /members 요청에서 error status가 410이 온다면, /reissue 요청으로 Refresh Token을 사용하여 Access Token을 재발급합니다. 재발급이 되었다면 다시 /members 요청을 보내어 인증된 유저인지 다시 확인합니다. 만약 RefreshToken마저 만료되었다면 로그인을 해제합니다. 😡 문제 상황 Access Token이 만료된 상황에서 다른 페이지로 이동하면 reissue는 작동하지만, members 요청은 보내지 않아서 인증된 유저라고 판단하지 않게 되어 유저의 데이터를 불러오지 않는 에..
⭐️ 일정 수정 기능 기존에 만들어 놓았던 일정 등록 페이지를 재활용해서 조건부 렌더링으로 일정을 수정할 수 있는 기능입니다. 😇 useQuery 타입 에러 const dispatchDestinationList = async () => { const response = await GetCourse({ courseId, }); const { destinationList }: PostReadT = response.data as PostReadT; dispatch(scheduleListActions.updateList(destinationList)); }; useQuery({ queryKey: ['modify'], queryFn: dispatchDestinationList, refetchOnWindowFocu..
🔍 직접 구현하지 않고 라이브러리를 쓴 이유가 무엇인가요? 직접 구현해 보는 게 실력 향상에 도움도 될 것이고 재미도 있을 것 같지만, 굉장한 시간이 소모될 것이라고 생각했습니다. 현재는 솔로 프로젝트를 진행하는 것이 아니고 정해진 시간 안에 팀원들과 협업하여 프로젝트를 완성해야 하는 상황이기 때문에, 라이브러리를 사용하여 어떤 느낌인지 맛 좀 보고, 빠르게 완성했습니다. 🔍 react-dnd가 아니라 react-beautiful-dnd를 선택한 이유가 무엇인가요? react-dnd는 react-beautiful-dnd에 비해 자유도도 높고 커스텀하기도 훨씬 편하다고 합니다. 하지만 변경 애니메이션이나 위치 변경을 직접 정의해야 한다는 단점이 있었습니다. 저는 굳이 커스텀을 해야할 정도로 영역이 크지도 ..
😡 장소 리스트 리렌더링 이슈 지금은 검색을 하고 원하는 장소를 눌렀을 때, 장소 리스트들이 한 번 삭제됐다가 다시 불러오고 있습니다. 장소를 누를 때 마다 번쩍번쩍해버리니 보기에 딱히 좋지 않았습니다. 또한, 원래는 선택한 장소를 보여주는 숫자 마커가 장소를 나타내는 기본 마커위에 나타남으로써, 선택한 장소를 명확하게 보여주게 구현했는데, 검색한 장소 리스트들이 모두 삭제됐다가 다시 생성되어 숫자마커를 가려버리는 현상까지 생겼습니다. 문제라고 생각한 코드 useEffect(() => { const ps = new kakao.maps.services.Places(); if (searchPlace) ps.keywordSearch(searchPlace, placesSearchCB, { x: Number(x)..
😇 카카오 맵 API type 관련 any 오류 처리 처음 카카오 맵 타입 처리한 것 import { PayloadAction, createSlice } from '@reduxjs/toolkit'; interface IInitial { map: any; } const initialState: IInitial = { map: {}, }; const mapSlice = createSlice({ name: 'map', initialState, reducers: { setMap(state, action: PayloadAction) { state.map = action.payload; }, }, }); export const mapReducer = mapSlice.reducer; export const mapAc..
Github 링크 https://github.com/FE-Sprint-Study/Namu-Movie GitHub - FE-Sprint-Study/Namu-Movie Contribute to FE-Sprint-Study/Namu-Movie development by creating an account on GitHub. github.com 배포 링크 https://scania-namumovie.netlify.app/ React App scania-namumovie.netlify.app 😋 담당한 페이지 & 기능 무한스크롤 영상 🤯 마주한 문제들 📌 영화 제목 검색 시에 추천 영화가 한 번씩 밀리는 현상 예를 들어, 아이언맨을 검색했다면 검색 결과로 제목에 아이언맨이란 단어가 포함된 영화들과 아이언맨과 관련..
Github 링크 https://github.com/novice-hero/fe-sprint-coz-shopping GitHub - novice-hero/fe-sprint-coz-shopping Contribute to novice-hero/fe-sprint-coz-shopping development by creating an account on GitHub. github.com 🤯 마주한 문제들 📌 북마크 기능에서의 문제 처음에 구현한 로직은 북마크 버튼을 누르면 로컬 스토리지에는 정상적으로 상품 정보가 담겼습니다. 하지만 바로 렌더링이 되지 않고 다른 상품을 북마크해야 렌더링이 되는 형식으로 구현이 되었습니다. 즉, 하나씩 밀려서 렌더링이 되었습니다. ✅ 해결 const initialState = l..
🥯 애피타이저 안녕하세요. useReducer에 대해 공부하는 김에 TodoList를 만들어보게 되었읍니다. 매우 간단하고 디자인이라곤 1도 찾아볼 수 없으니 감안하고 봐주세요. 혹여나 코드에 대해 피드백이 있으시다면 댓글로 알려주세요. 그렇다면 제가 무한 감사를 드릴 것입니다. 🍖 메인 TodoList의 얼굴 해야 할 일을 써넣을 input 태그와 등록 버튼을 담은 form, TodoItem 컴포넌트, TodoItem들을 담을 TodoList 컴포넌트, 이렇게 3개의 컴포넌트로 구성된 간단한 앱입니다. reducer // reducer 함수 const reducer = (state, action) => { switch (action.type) { case "INIT": return [...action...
