캐나다 개발자

비밀번호와 비밀번호를 체크하는 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..

# Day 02 목표 전체적인 구조 # Study - Emotion vs Styled-component - SWR vs Toolkit vs React Query 이해 - CORS 와 PROXY - SWR 맛보기 - 프로젝트 전체세팅, 로그인, 회원가입 기능 완료(SWR or Toolkit) # Project - Prettier, Eslint 사용한 초기세팅 - 폴더구조 및 라우터 - .env 환경변수 정리 계획 - 오전 - Emotion vs Styled-component - SWR vs Toolkit vs React Query 이해 - CORS 와 PROXY - SWR 맛보기 - 오후 - Prettier, Eslint 사용한 초기세팅 - 폴더구조 및 라우터 - .env 환경변수 정리 - 프로젝트 전체세..

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 } ),

# Day 01 목표 # Study - Prettier, Eslint에 대한 이해 100% - Yarn vs npm에 대한 이해 100% # Project - 기획 및 노션 작성 - 와이어 프레임 - 폴더 구조 정리 # 주요 사항 - 디자이너분과 첫 만남 - 팀방향과 주요기능에 대한 토론

* 과제 과제.. 그리고 배포 8pm 과제 발표 wil 추가 가장 신경쓴기술: 없는거같다. 그냥 crud

// 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; // 아래처럼 감싸주면 된다.