사이드 프로젝트 (5) 썸네일형 리스트형 [React Project] 코드 리팩토링 - 메인 페이지 tsx 오늘은 메인 페이지 tsx를 간단하게 리팩토링 해보았다. 정리해야 할 코드들이 너무 많아서, 시간이 날 때마다 조금 씩 진행해볼까 한다. 일단 코드 리팩토링 전 파일을 보면 코드 리팩토링 전import ContainerLayout from 'src/components/common/layout/ContainerLayout'import Content from 'src/components/common/layout/Content'import MuiMain from '../../components/common/mui/MuiMain'import MainHomeContent from 'src/components/specific/main/MainHomeContent'import { UseUserInfo } from.. [React 프로젝트] 로그인 로직 설정.. (UseQuery, axios, typescript) 로그인 로직 작성기.. 일단 간단하게 로직을 작성 해 보자면 1. 로그인 (이 때 응답 값에서 받은 액세스 토큰 로컬스토리지에 설정)2. 로그인 후 api 요청을 하다가 액세스 토큰이 만료 되어 에러가 남.2. 쿠키 값에 있는 리프레시 토큰을 통해, 새로운 액세스 토큰 요청3-1. 만약 리프레시토큰 또한 만료 되었으면 로그인 페이지로 이동3.2 액세스 토큰을 새로 등록 했을 시엔, 다시 api 요청 로그인 시 공통으로 활용하는 api 설정const api = axios.create({ baseURL: `${process.env.REACT_APP_API_DOMAIN}`, headers: { Authorization: getAccessToken() }, withCredentials: true,}.. [React 프로젝트] 무한 스크롤 도입기.. (react-intersection-observer, typescript) 프로젝트에 공통적으로 재사용 가능한 무한 스크롤 컴포넌트를 만들어보았다 react-intersection-observer의 useInViewuseInView는 요소가 화면에 보이는지 여부를 감지해 주는 역할을 하는데 이 것을 활용해서 무한 스크롤 컴포넌트가 보이면 다음 페이지 api를 요청할 수 있도록 하면 된다. EndLine.tsximport { useEffect } from 'react'import { useInView } from 'react-intersection-observer'import styled from 'styled-components'export default function EndLine({ hidden = false, mt = '17px', onShowEndPage,}:.. [React 프로젝트] 코드 리팩토링 과정, 퍼블리싱 변경 현재 진행 하고 있는 사이드 프로젝트의 퍼블리싱 변경 및 코드 리팩토링을 진행해보았다. AS-IS 화면 TO-BE 화면 여기서 내가 변경한건 1. Alert Modal 변경 > 기존에 공통으로 사용하던 Alert 모달을 버리고, 새로 만든 Alert 모달로 통일. 2. 도감 이동을 클릭 하고 요청이 진행 중인 경우 로딩 스피너 띄우는 기능 추가3. 변경된 퍼블리싱 적용4. 코드 리팩토링 크게 이 네 가지이다. 1. Alert Modal 변경Alert에서 사용하던 상태값을 Recoil에서 Usestate로 변경하고 버튼 퍼블리싱을 변경했다.Recoil을 사용하니, 의도 하지 않은 리 렌더링이 일어날 때가 있었다. 그래서 Usestate를 사용하는 Alert 컴포넌트로 바꾸고 해당 컴포넌트는 ButtonC.. [React 프로젝트] redux-toolkit 도입기... with typescript 도입 배경 프로젝트 기능 중에 다른 유저들이 본 식물들을 띄우는 기능이 있다.북마크를 클릭하면 내 도감 목록들 중에 하나를 선택하여 도감에 식물을 넣을 수 있다.서버에서, 도감에 이미 있는 아이템을 확인해서 구분해 주면 좋겠지만도감이 여러개이기 때문에 구분하는 것이 여러모로 복잡하기 때문에 기능을 단순화 시키기로 했다. 다른 유저들이 본 식물들을 띄워주고 사용자가 특정 식물을 선택해서 도감에 넣으면그 식물은 목록에서 필터링된다.이 과정을 클라이언트에서 맡게 됐고, 그렇기 때문에 상태값은 로그인 ~ 다음 로그인 전까지 유지 된다. 로직이.. 따로 어려울 건 없다.플로우차트가 익숙하진 않지만 그냥 끄적여 봤다.. 1. 추천 식물 정보 목록을 받고 2. 추천 식물 정보를 하나 선택해서 도감에 넣으면 3. 다.. 이전 1 다음
