봉보로봉봉

구질구질한 라우터에 질린 사람 헤쳐 모여~ 라우터를 저렇게 만드는 방법밖에 몰랐는데 새로운 방법을 알게 되었다. 바로 createBrowserRouter 사용하기! 😀👍 createBrowserRouter createBrowserRouter를 사용하면 라우터를 생성할 수 있다. 라우팅 정보를 담은 배열을 인자로 넣어주면 된다. 그리고 path에 경로를 설정하고 해당 경로에서 보여줄 컴포넌트를 element에 넣는다. 만약 한번 더 들어가는 경로라면(예: /board/all 과 /board/notice) children에 넣으면 된다. 경로가 계속 타고 간다면 같은 방법으로 타고 갈 수 있도록 정해주면 된다. import { createBrowserRouter } from 'react-router-dom'..

React 프로젝트를 CRA로 구축하셨나요 ? 자바스크립트 프로젝트인가요 ? import 할 때마다 ../../ 에 지치셨나요 ? 그렇다면 이제 절대 경로를 사용해보세요!!! 가장 상위 경로에 jsconfig.json을 생성한다. 그럼 절대경로가 src로 설정되어 바로 접근 가능하다. // jsconfig.json { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 혹시 eslint를 사용하시나요 ? 나는 eslint 때문에 적용이 안됐었다. eselintrc에도 코드를 추가해주니까 적용이 됐다. // .eslintrc // 아래 코드 추가 "settings": { "import/resolver": { "node": { "paths": ["s..

Recoil Selector atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)다. 상위의 atoms 또는 selectors가 업데이트되면 하위의 selector 함수도 다시 실행된다. 컴포넌트들은 selectors를 atoms처럼 구독할 수 있으며 selectors가 변경되면 컴포넌트들도 다시 렌더링된다. Selectors는 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용된다. 최소한의 상태 집합만 atoms에 저장하고 다른 모든 파생되는 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지한다. get 함수만 제공되면 Selector는 읽기만 가능한 RecoilValueReadOnly 객체를 반환한다. ge..

클래스형 컴포넌트 라이프 사이클 함수형 컴포넌트 라이프 사이클

커스텀 훅을 쓰는 이유 자주 사용하는 로직을 하나로 묶어 반복을 최대한 줄이고 재사용하기 위해서 사용한다. useTitle 커스텀 훅을 만들 땐 똑같이 use~로 시작하는 함수를 선언한다. 넘겨받을 인자가 있다면 넘겨주면 된다. 커스텀 훅을 만들 때도 useState나 useEffect와 같은 리액트 훅을 사용할 수 있다. 컴포넌트에 전달하는 값이 아닌 커스텀 훅은 바로 실행시켜서 사용할 수 있다. const useTitle = initialTitle => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector("title"); htmlTitle..

필요한 패키지를 설치한다. npm i typescript @type/node @type/react @type/react-dom @type/react-router-dom // jest도 사용한다면 추가한다. npm i typescript @type/node @type/react @type/react-dom @type/react-router-dom @type/jest 파일 확장자를 변경한다. .js => .ts .jsx => .tsx tsx로 변경한 파일부터 타입 스크립트를 얹어준다. interface를 선언하여 props에 type을 정해주거나 generic을 사용해가며 에러들을 해결해준다. ref.current 에러 해결하기 jsx를 tsx로 파일 속성을 변경하면 e와 ref.current에 빨간 줄이 ..

props로 받아온 id를 html태그의 id로 넣어주려고 하는데 자꾸 에러가 떴다. Type 'number' is not assignable to type 'string'. 이유 html id는 숫자로 시작할 수 없다. 이런 기본적인 것도 까먹다니 정신을 차려야한다....... 변수도 첫글자가 숫자면 선언이 안되는데!!!!!!! W3C 문서 ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). 참고1 참고2

Vite로 프로젝트를 구축해서 진행하고 있었다. firebase api key를 감춰야해서 .env 파일을 생성하고 사용하려고 했다. process.env.변수명으로 접근하려니까 이용할 수 없다는 에러가 떴다... 왜....? uncaught referenceerror process is not defined. 이유 Vite에서는 process.env를 사용하지 않고 import.meta.env를 사용한다. // process.env 대신 사용 import.meta.env 그래서 다 고쳐줬더니 에러는 없는데 undefined이 떴다... 왜....? 기존에 .env에서 변수를 선언할 때 REACT_APP_ prefix를 붙여주는 것처럼 Vite에서는 VITE_ prefix를 붙여줘야만 인식을 하기 때문이..