매일 공부한거 기록하기

zzzz.ts파일에서 tsx파일을 import할때 생긴 에러이다. 이때 ts파일을 tsx파일로 수정해주면 된다

1. devtools는 reqct-query를 설치했다면 포함되어있다. 2. APP.tsx에 아래처럼 불러와준다. import { ReactQueryDevtools } from "react-query/devtools"; 3. component 내부에 추가시켜준다.

진짜... 넘 귀찮은 놈.. tag는 항상 string을 리턴한다. 여도 항상 string을 리턴한다.

최근에 React-Redux 말고 React-Query를 써봤다. 처음 써봤는데 편리하고 좋아서 제대로 정리하면서 공부해보려고 한답. 그냥 번역해보면서 읽은거니까.. 틀리면 말해주세욤 ↓공식문서↓ https://react-query-v3.tanstack.com/overview React Query : 서버스테이트를 fetching, 캐싱, 동기화 ,업데이트 해주는 React 라이브러리이다. React Query는 왜 만들었을까? : 기존 상태관리 라이브러리는 클라이언트 상태를 관리하기 좋았지만 비동기와 서버스테이트 관리에는 좋지 않았다. React Query를 쓰는 이유 : 많은 로직들을 없애줄것임 : 서버 스테이트들을 쉽고 안정적으로 유지시켜줄것임 : 최종사용자들에게 애플리케이션을 예전보다 좀 더 빠르..

최근에 json-server를 처음 사용할 일이 있었는데 생각보다 편해서 정리해보려고 한다 mock server를 만들어 REST API개발을 기다리는 동안 프론트를 개발해보자 :) 1. 현재 적용할 프로젝트로 경로를 이동한 후 아래 명령어를 입력한다. json-server설치하는것이다. npm install json-server --save-dev 2. 프로젝트 루트 폴더 또는 db.json이 있는 경로에 db.json파일을 생성한다. (필요한 data를 입력하시면 됩니당) 이제 db.json파일이 db역할을 합니당. //db.json { "product":[ { "id":1, "productName":"test1", "price":19000, }, { "id":2, "productName":"test..

className을 쓴적이 없는데 이런 에러가 왜났을까? 괜히 파일에서 className을 열심히 찾았다 .. 🤬 저번에 정리한것처럼 Next.js에서 styled-components를 사용할때 생기는 이슈이다. _document를 따로 생성해 사용할때 Next는 첫페이지를 SSR로 렌더링하고 그 후 클라이언트에서 CSR로 렌더링한다 따라서 이 후 클라이언트에서 작동하는 클래스명이 서로 달라지게 되는것이다. className이 달라지지 않게 하기 위해 1. 아래의 명령어를 설치해주고 npm install --save-dev babel-plugin-styled-components 2. .babelrc파일의 plugins에 설정을 추가한다. { "plugins": ["babel-plugin-styled-co..

(현재 내 프로젝트는 typescript이기때문에 .tsx임) 1. _app.tsx ,_document.tsx 파일은 server only file : 따라서 client에서 사용하는 로직은 사용할 수 없다. 1-1. _document.tsx 파일이 pages폴더 안에 없다면 만들면 된다. 2. 모든 페이지는 _app을 통해 가장 먼저 실행된다. : pages/_app.tsx : Global CSS는 _app에 추가한다. 3. _document.tsx는 모든 페이지에서 공통으로 사용되는 html,head(meta), body 태그등을 커스텀할때 사용한다. : HTML마크업위주이다. : 이때 Html, Head, Main, NextScript를 반드시 포함해야한다. 안넣으면 이런 에러 나옴;; (경험담ㅎ)..

이거 할때마다 왜 자꾸 안되는건지? 지금 걍 정리하면서 시작해보려고 한다 1 . typeScript와 next설치 npx create-next-app --typescript 2. project이름은 위 명령어 입력 후 입력한다 ✔ What is your project named? test 3. npm run dev 입력 후 실행한다. 4. styled-components설치하기 npm install styled-components 5. styled-components type설치하기 npm install -D @types/styled-components babel-plugin-styled-components 6. styled-components babel preset설치 npm i --save-dev b..

Next.js를 시작해보려고 한다 이런 에러는 _documnet.파일에서 NextScript가 없어서 생긴 에러이다 next/document에서 NextScript를 import해준후 안에 를 넣어주면 금방 해결된다 import Document, { Html, Head, NextScript } from "next/document"; import React from "react"; const _document = () => { return ( ); }; export default _document; 초보는 몰랐다 크크

Next.js로 만든거 실행하려고햇는데 npm run dev가 안된다 npm ERR! code ELIFECYCLE 이 가장 첫번째 줄에 뜬다. 1. npm cache 2. node_modules, 3. package-lock.json 을 삭제하고 4. npm install해주면 된다 $ npm cache clean --force $ rm -rf node_modules $ rm -rf package-lock.json $ npm install