도리쓰에러쓰

1️⃣ 절대경로 설정 방법 >> tsconfig.json "compilerOptions": { "baseUrl": "src" } 2️⃣ Delete 'CR; eslint (prettier/prettier) 에러 한 줄마다 Delete 'CR; eslint (prettier/prettier) 라는 에러가 생겼다. 그래서 아래와 같이 수정하였다. - prettierrc.js에서 endOfLine: 'auto'로 수정 module.exports = { bracketSpacing: false, jsxBracketSameLine: true, singleQuote: true, trailingComma: 'all', endOfLine: 'auto', }; - vscode 하단바에 CRLF를 LF로 설정 변경 3️⃣ ..

이번주는 5인이서 팀 과제를 하는데 redux-toolkit이나 react-query를 사용해본 경험이 없어서 공부하고 프로젝트를 진행하기로 하였다..! 1. react-query 1️⃣ react-query 사용 방법 - react-query를 설치한다. yarn install react-query - src > index.js에서 react-query를 사용할 수 있도록 태그를 감싸준다. import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { QueryClient, QueryClientProvider } from "react-query"; import { ReactQueryDevtools..

오늘은 배포와의 뜻하지 않은 전쟁....😂 빨리 배포하고 자려고 했는데 에러가 고쳐지지 않아 뜻하지 않은 날밤을 샜다.. 1️⃣ git pages에 배포하였는데 마주한 흰 화면.. git pages로 배포한 페이지가 흰 화면으로 나왔다. 원인을 파악해보니 router로 프로젝트를 만들었고 경로가 달랐기 때문에 흰 화면이 출력된 것 같았다. 그래서 Router basename에 process.env.PUBLIC_URL을 추가하려고 했는데 process를 찾을 수 없다고 나왔다. 열심히 구글링했지만 에러는 해결되지 않았고 몇시간 사투 끝에 해결됐다! 🔓 eslintrc.js 파일에서 아래 코드처럼 node: true 추가하기 ! (eslintrc.js 파일 들어가보니 module에서 에러나고 있었다는..) ..

1️⃣ 검색하였을 때 영화 list에 즐겨찾기 아이콘 보이게 설정하기 - 우선 아래 코드로 local에 있는 데이터 가져오려고 하였는데 데이터가 없을 때는 에러가 났다. 그래서 null도 해보고 undefined도 해봤지만 에러가 해결되진 않았다. const data = JSON.parse(localStorage.getItem('favorites') - 아래와 같이 local 데이터를 불러왔더니 데이터가 없는 상태일 때도 에러가 나지 않았다. (이 에러 고치느라 꽤나 오래 걸렸다...😂) const data = JSON.parse(localStorage.getItem('favorites') || '[]') - useState()가 아닌 변수로 즐겨찾기 아이콘을 보이게할지에 대한 설정을 하였다. let s..

1️⃣ Infinite Scroll - Infinite Scroll을 구현하기 위해 react-intersection-observer 라이브러리를 사용하였고, import 하였다. import { useInView } from 'react-intersection-observer' - ref는 요소 지정하고, inView는 ref로 지정한 요소가 보이면 false였던 값이 true로 바뀐다. const [ref, inView] = useInView() - 그래서 useEffect()로 ref 요소가 보이면(inView 값이 변경되면) api의 page값을 +1 시켰다. useEffect(() => { if (inView) setPage((prev) => prev + 1) }, [inView]) 2️⃣ Se..

1️⃣ ref의 prop 타입 지정 interface Props { ref: React.RefObject } 2️⃣ NavLink의 isActive activeClassName을 사용하려고 했는데 속성이 뜨지 않아서 구글링 해본 결과, react v6부터 activeClassName은 사라졌다고 한다. 그 대신 isActive라는 것을 사용하여 className을 지정할 수 있다. cx({ [styles.isActive]: isActive })}> Movies 3️⃣ 포스터가 없는 영화 처리 원래 movie.Poster값에 이미지 주소가 들어가 있는데 "N/A" 값이 있는 포스터가 없는 영화도 있었다. 그래서 아래와 같이 처리하였다. 💡 앞으로 해야할 일 📍 Movies Component - 인피니트 스..

요즘 몸이 좋지 않아 진도가 빨리 나가지질 않는다. 우선 CSS 부분을 수정하고 api를 불러오는 곳에서 문제가 생겨 이 문제를 해결하는데 하루가 다 지났다. api에서 온 데이터의 response값을 boolean으로 잡고 했는데 알고보니 string이였다. ('True', 'False' 실화냐..) 그리고 recoil 생각 안하고 습관처럼 useState()로 만들었다가 나중에 생각이 나서 모두 useRecoilState()로 변환해줬다.. 오늘 뭔가 많이 한듯 안한 느낌.. 제출 기간까지 얼마 안남았으니 더 열심히 하자! 1️⃣ props setState 타입 지정 interface Props { setSearchWord: Dispatch } const Modal = ({setSearchWord} ..

1️⃣ 상태 관리 Tool :: Recoil 오늘 처음으로 상태 관리 Tool인 Recoil을 사용해봤다. 그동안 props로 전달하고 또 전달하는게 무의미하다고 생각했는데, react를 좀 더 공부하고 상태 관리 툴을 공부해보자고 한게 갑자기 사용하게 될 줄은 몰랐다. 나는 recoil 폴더 생성해서 폴더 안에 관리해주고 있는데 코드는 아래처럼 작성하였다. export const moviePageState = atom({ key: '#moviePageState', default: 1 }) 우선 key와 default를 작성해줘야 하는데 멘토님께서 key를 구분하기 위해 앞에 #을 넣는다고 하셔서 나도 따라 썼다..! 아직 key를 사용해본 적이 없어서 좋은지는 모르겠지만 확실히 구분이 갈 것 같다.. ..