캐나다 개발자

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..

1. Format on Save 확인 > vscode 설정에서 format on save를 입력하고 나오는 설정에 체크되어 있는 지 확인한다. 2. Default Formatter 확인 > 간혹 에디터의 default로 설정되어 있는 formatter가 null 이거나 설정이 잘못되어 있는 경우가 있다. 설정이 esbenp.prettier-vscode 로 설정되어 있는 지 확인해야 한다. 18

// 프리티어 설치 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)..

메소드 - patch, put, delete, post, get 1. get, delete는 body부분을 비워줘도 된다 2. patch, puth, post는 바디부분에 빈 값이라도 있어야 한다. 3. method(api주소, {바디}, {헤더}) 순서 // 헤더 - 인증이 필요할때 아래처럼 사용 가능(MyToken 은 쿠키에서 가져옴) const msg = await api.delete(`api/articles/${payload}`,{ headers: { 'Authorization': `Bearer ${myToken}`, } }); // patch의 경우 body 부분을 최소 빈 객체로라도 묶어서 보내준다. const data = await api.patch(`/api/articles/${id}/do..

1. 리액트의 핵심 모듈 두가지 // 리액트 컴포넌트를 HTML Element에 연결 import ReactDOM from 'react-dom' //리액트 컴포넌트 만들기 import React from 'react' 2. a 태그와 Link Router의 차이 a태그는 이동되면 이동되면서 서버로부터 파일들을 새로 다시 가져온다. Link는 페이지가 이동되면서 서버로부터 파일을 안가져오고, 있는 파일중에 필요한 파일만 골라서 렌더링을 해준다. 3. NavLink - 태그가 눌리면 active라는 클래스가 붙는다. 그래서 그 클래스에 스타일을 주면 내가 어떤 링크를 클릭했는지 알수 있다. // App.jsx import {NavLink} from 'react-router-dom' import './App...

useParam을 사용하면 현재 경로를 가져올수 있다. 가져온 경로는 객체안의 배열로 감싸져 있다. 주로 필요한건 value값이라 value를 아래처럼 꺼내줄 수 있다. const navigation = useParams(); const emptyValue = Object.values(navigation); console.log(emptyValue[0]);

라우팅을 하다보면 연결된 주소안에서 또 라우팅을 해야할 경우가 있다 최상단 경로에 와일드 카드로 주소를 주고(아래) 그 다음경로부터는 아래처럼 준다. 만약 어딘가에서 Link나 Navigate 할일이 있으면, 아래처럼 평소같이 들어가면 된다, ID: 0{id} {category} {title} {content} {time}

에러를 줘야하는 타이밍에 아래처럼 throw new Error("에러메세지") 하면 된다. export const loadUsers = createAsyncThunk(LOAD_USER, async()=>{ const datas = await getDocs(collection(db, "newUser")); throw new Error("error"); const data_list = []; datas.forEach((doc)=>{ data_list.push({id: doc.id, ...doc.data()}); }); return data_list; })