캐나다 개발자

npm i --save react-chartjs-2 chart.js https://www.npmjs.com/package/react-chartjs-2 Bar import React from "react"; import { Bar } from "react-chartjs-2"; function BarChart({ chartData }) { return ; } export default BarChart; App import React from "react"; import BarChart from "./Components/BarChart"; import RadarChart from "./Components/RadarChart"; import LineChart from "./Components/LineChart"..

npm install axios yarn add axios Axios란 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP비동기 통신 라이브러리이다. 기능 브라우저 환경 XMLHttpRequests 요청 생성 Node.js 환경 http 요청 생성 Promise API 지원 요청/응답 차단(Intercept) 요청/응답 데이터 변환 취소 요청 JSON 데이터 자동 변환 사이트 간 요청 위조(XSRF)보호를 위한 클라이언트 사이드 지원 기본 사용방법 // Async await을 통한 방법 import axios from 'axios'; async function getUser() { try { const response = await axios.get('/userinfo'); cons..

같은 local에서 테스트 할 경우에서만 해결가능하다. Webpack.config에서 proxy를 서버로 이어주면 된다. devServer: { historyApiFallback: true, port: 3090, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname) }, proxy: { '/api/': { target: 'http://localhost:3095', changeOrigin: true, }, }, },

비밀번호와 비밀번호를 체크하는 input이 있을경우 두개의 state값을 비교해서 값이 같고 다름을 비교했었다. const [password, setPassword] = useState(''); const [passwordCheck, setPasswordCheck] = useState(''); useEffect(()=>{ if(password !== passwordCheck){ //... logic } }) 강의보면서 알게된 새로운 방법 const [password, setPassword] = useState(''); const [passwordCheck, setPasswordCheck] = useState(''); // 비밀번호만 체크해 주는 State const [mismatchError, setMi..

https://www.youtube.com/watch?v=MArE6Hy371c 상태관리란? 주어진 시간에 시스템을 나타내는 것 Redux VS SWR VS React Query 셋 다 상태관리다 Redux - Saga 혹은 Thunk가 있어야지 비동기 처리 가능, 코드가 길다 SWR 하고 React Query는 위를 해결하고자 나왔다 1. SWR이 React Query보다 훨씬 가볍다 2. SWR은 가비지컬렉션이 없다. 3. SWR은 mutation hook을 지원하지 않는다. React Query 렌더링 퍼포먼스를 높이기 위해 데이터를 최적화한 점과 자동으로 가비지 컬렉션을 지원 server state가 가지는 많은 차이점들을 대응할 수 있도록, 잘 정리된 내장 함수들과 훌륭한 캐싱 기능을 제공 이들은..

Emotion의 장점 component로 만들어 재사용 중복되는 className 해결 (Global namespace) 자바스크립트에서 쓰이는 상수, props, 함수 공유하기 상속에 의한 영향이 없도록 격리 (Isolation) 미사용 코드 처리 (Dead Code Elimination) Styled Components 보다 조금 가볍다고 한다. npm install @emotion/styled @emotion/react 일단 전체적으로 Styled-Components 처럼사용 가능하다. import styled from '@emotion/styled'; export const Header = styled.header` text-align: center; font-family: Slack-Larsse..

Loadable Components는 코드 스플리팅을 편하게 하도록 도와주는 서드파티 라이브러리 이 라이브러리의 이점은 서버 사이드 렌더링을 지원한다(React.lazy와 Suspense는 아직 서버 사이드 렌더링을 지원안함). 또한, 렌더링하기 전에 필요할 때 스플리팅된 파일을 미리 불러올 수 있는 기능도 있다. 설치 // 일반 npm i @loadable/component yarn add @loadable/component // 타입 npm i --save-dev @types/loadable__component 사용방법 예시 import React from 'react'; import loadable from '@loadable/component'; import { Route, Routes, Navi..

// 프리티어 설치 yarn add -D prettier // 에스린트 설치 yarn add -D eslint-plugin-prettier eslint-config-prettier 코드에서 안쓰는 변수나 함수를 잡아주는 extension // .eslintrc // 프리티어의 추천을 따르겠다. { "extends": ["plugin:prettier/recommended", "react-app"] } prettier(코드를 정렬해주는도구) // .prettierrc // 프리티어 내부 코드 { "printWidth": 120, "tabWidth": 2, "singleQuote": true, "trailingComma": "all", "semi": true } ),

// Outlet - 렌더링하는 영역을 구현하는 Directive import { Outlet } from "react-router-dom"; import Signin from '../../Pages/Signin' const useAuth = () =>{ const token = localStorage.getItem("Authorization") return token; } const ProtectedRoutes = () =>{ const isAuth = useAuth(); return isAuth !== null ? : } export default ProtectedRoutes; // 아래처럼 감싸주면 된다.

출처: https://nyol.tistory.com/148#:~:text=%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%8A%94%20%EB%B7%B0%EC%97%90,%EC%95%8A%EC%9D%84%EA%B9%8C%EB%9E%80%20%EC%83%9D%EA%B0%81%EC%9D%B4%20%EB%93%A0%EB%8B%A4. REACT VUE UI 라이브러리 VS 프레임워크 UI 라이브러리 - 필요한 라이브러리를 매번 설치 프레임워크 - 기본적으로 많은 기능이 내장 코드 형태 JSX형태로 코드를 작성해야한다 (js만 사용가능) Template, script, css 는 무조건 태그로 감싼 후 코드를 적용 가능. 컴포넌트 분리와 재사용 컴포넌트의 생성 및 재사용 (props, components)..