봉보로봉봉

구질구질한 라우터에 질린 사람 헤쳐 모여~ 라우터를 저렇게 만드는 방법밖에 몰랐는데 새로운 방법을 알게 되었다. 바로 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..

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

커스텀 훅을 쓰는 이유 자주 사용하는 로직을 하나로 묶어 반복을 최대한 줄이고 재사용하기 위해서 사용한다. 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를 붙여줘야만 인식을 하기 때문이..

올해 초쯤에 처음으로 리액트 강의를 듣고 공부해서 만들었던 투두리스트 프로젝트를 다시 열어봤다. 코드를 이렇게 짰다니 지금 실력이 많이 늘었다는 것을 느낄 수 있었다..😀👍 맨 처음 들어가면 보이는 화면. 왜 정렬을 저렇게 했는지 모를 노릇이다.. css도 잘 못 다뤘나보다.. 수정도 가능하고, 추가도 가능하다. 용케도 투두리스트 기본 기능은 다 구현했다. 그리고 이때 달력도 달고 싶었는데 할 줄 몰라서 못 달았던 기억이 있다. 달력도 빈 파일이지만 파일은 생성되어 있었다. 그리고 코드를 뜯어봤더니 모자랐던 실력의 내가 너무 귀엽고 웃겼다🤣 !연산자를 모르는지 반대의 값을 주기 위해서 삼항연산자를 사용했다. 불리언을 조건으로 쓸 생각도 못해서 어차피 불리언인 값을 ===을 이용해서 비교하고 있다. 프로젝..