성연커밋 : )

Recoil이란? state management할 수 있는 라이브러리 state management가 무엇일까 ? recoil redux같은 library사용하기 props로 내려가는 계층구조 대신에, 바로 접근할 수 있다. Recoil을 사용하면 장점은? 특정 컴포넌트에 종속되지 않는다. 오직 value가 필요한 component만 그 value를 가진다. 컴포넌트에서 value에 접근하려면? component를 가진 atom에 연결하자~~ recoil 설치 yarn add recoil 를 이용하여 Recoil설치해주자 /index.ts import React from 'react'; import { useQuery, useMutation, useQueryClient, QueryClient, Query..

노마드코더를 듣다가, props를 주어야하는 상황이 생겼다. 노마드코더에서는 react-router 버전이 6이하이기 때문에, 위와 같이 주었지만, v6이상부터는 Router 내에서 element로 컴포넌트를 주어야 했기 때문에, 이 상황에서 Props를 어떻게 주어야하지 싶었다. 처음에는 노마드코더에서 하는 것처럼 Route속성으로 props를 주었지만, 에러가 계속 떴다. v6이상부터는 주고싶은 element요소 속성으로 주어야한다! 주고싶은 컴포넌트 내부에 주어야하기 때문에 element내부에서 props를 작성하여준다

react-query를 설치해보자 yarn add react-query 리액트 쿼리 설치 이후 사용법은? / index.tsx import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider, } from "react-query"; const queryClient = new QueryClient(); 를 이용하여 import 및 queryClient 선언 root.render( , ); QueryClientProvider로 감싸주면 설치는 끝이났다! ReactQuery를 쓰면 좋은점? loading같은 것을 직접 코딩하지 않아도 된다! fetcher 함수 만들기! fetch를 이용하여 함수를 만들자! /api.ts funct..

DATA-prerendering - next 9.3버전 이전에 getInitialProps만으로 데이터 패치를 전부 해결했지만, 그 이후부터는 getStaticPtops, **getStatiicPath**(Static Generation) / **getServerSideProps** 로 분화되어있음 getInitialProps - 기본적으로 **데이터 요구사항이 없는 경우 페이지가 정적인지 자동으로 확인** - getInitialProps나 getServerSideProps를 사용하지 않는다면 페이지를 정적HTML로 사전에 렌더링하여 자동으로 최적화 > 자동 정적 최적화 : getInitialProps가 없으면 페이지를 정적 HTML으로 사전렌더링해서 정적최적화를 함 SSR계산이 없기 때문에 사용자에게 ..

SWR이란? SWR 은 stale-while-revalidate 을 의미하며, 캐시에서 먼저 데이터를 반환한 다음에 요청을 보내고 마지막으로 최신 데이터를 가져온다. 즉, 리액트 훅을 사용할 때 데이터를 가져오기 위한 라이브러리 설치 yarn add swr 시작 JSON 데이터를 사용하는 일반적인 RESTful API라면 먼저 네이티브 fetch의 단순한 래퍼인 fetcher 함수를 생성해주어야한다. import axios from 'axios'; const fetcher = (url: string) => axios.get(url).then((response) => response.data); export default fetcher; json데이터는 아래와 같다 const fetcher = (...ar..

JSX 문법 및 HTML 과의 차이 JSX는 JavaScript를 확장한 문법으로, 코드 내에서 UI관련 작업을 할 수 있다. 일반 HTMl태그 사용을 할 수 있으므로 가독성이 뛰어나다. HTML과의 차이는 - 형제노드를 사용할 수 없다. - 꼭 하나의 태그 사이에 태그들이 묶여있어야한다. - 카멜표기법을 작성한다. - Javascript표현식을 사용하기 위해서 {} 내부에서 사용해야한다. - 주석 방법이 조금 다르다 클래스 vs 함수 컴포넌트 클래스 컴포넌트 클래스 컴포넌트에서는 render()메서드가 꼭 있어야한다. render() 메서드에서 렌더링하고싶은 JSX를 반환시키면 된다. props나 state를 조회시 this.props나 this.state인 오브젝트 형태로 조회해야한다. 데이터가 변경..

### - react를 한단어로 정리하면? > 컴포넌트들로 이루어진, 뷰만 신경쓰는 라이브러리 ### - React의 특성 2가지? > 독립적이다 > 구현한 함수는 재사용이 가능하다. ### - DOM? Virtual DOM? DOM > 문서 객체 모델(Document Object Model)은 HTML, XML문서의 프로그래밍 interface DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 도와주는 것. Virtual DOM > 가상 돔으로, 업데이트 되어야 하는 부분을 계산하여, 정말 필요한 부분만 업데이트가 된다. 실질적으로 보여지는 데이터만 변경될 뿐, 돔 트리에 영향을 주지 않는다. ..

React Router 버전이 v5에서 v6으로 바뀌면서 몇가지 바뀐 점들이 있다. import React from 'react'; import { Route, Routes } from 'react-router-dom'; import PostListPage from './pages/PostListPage'; import LoginPage from './pages/LoginPage'; import RegistePage from './pages/RegistePage'; import WritePage from './pages/WritePage'; import PostPage from './pages/PostPage'; const App = () => { return ( ); }; export default A..

category is not a registered scale 관련 오류가 떴다. 구글링을 하면서 찾아보았지만, 해결이 되지 않았다. javascript에서 사용하는 방법과 다르게, chart에 사용할 모듈들을 import해주어야한다. chart.js문서를 보면 무엇을 import해야하는지 다 나온다고한다. 하지만 여러 블로그에서는 import해주지 않았다. 이 문제를 한번, 해결해주기 위해 모든것들을 Improt 해주어야 했으나, 한번에 import하는 방법이 있어 아래 코드를 넣어주고 실행해보니 chart가 제대로 나오는 것을 확인할 수 있었다. import {Chart, registerables} from 'chart.js'; Chart.register(...registerables); 참고 자료 ..

- Tabsize 리액트는 탭사이즈가 4가 아닌 2이다. (노트북 바꾸면서 탭 사이즈 기본이 4로 되어있던것을 수정안함, 수정을 하기 싫으면 .prettier을 설정해준다) - img 이미지 경로파일을 컴포넌트 내부에 작성하였지만, 이런 경로로 하는것은 아님. public내에 있는 이미지로 해결 현재 이미지갯수가 작기때문에! - css App.js에서 모든 컴포넌트를 가져오기 때문에, 컴포넌트 각각에 css를 import하지 않고, app.js에서 한번만 import해주어도 된다.