기본 타입 정의 문자열 let str: string = 'hello'; 숫자 let num: number = 10; Boolean let isLoggedIn: boolean: false; Array const arr: Array = [] const arr2: [] = [] // 숫자만 가지는 배열 const items: Array = [1, 2, 3]; const items2: number[] = [1, 2, 3] // 문자열만 가지는 배열 const heroes: Array = ['captain', 'thor', 'hulk']; const heroes2: string[] = ['captain', 'thor', 'hulk']; Tuple 배열과 비슷하지만 값을 변경할 수 없는 길이가 정해진 자료형 정의되..
atom, selector로 상태를 정의하고 useRecoilState 등으로 불러와서 사용 상태 정의 atom 기본적인 상태 단위 key: 상태를 구분할 특수한 값 default: 초기값 const fontSizeState = atom ({ key: 'fontSizeState', default: 초기값 }) ... const [fontSize, setFontSize] = useRecoilState(fontSizeState); effects: 부수 효과. localStorage 저장이 필요한 경우 사용 setSelf: 로컬 키를 불러와서 상태로 저장하는 함수 onSet: 상태 변경 시 실행될 함수 newValue: 새 상태 oldValue: 기존 상태 isReset: 초기화 여부(set함수로 defaul..
React-query API 호출을 통해 서버 데이터를 가져오고 캐싱 값 업데이트(자동) 에러 핸들링 read → useQuery create/update/delete → useMutation import { QueryClient, QueryClientProvider } from 'react-query' ... const queryClient = new QueryClient() return ( ) QueryClient : query, mutation 관리, 캐싱, 데이터를 효율적으로 가져오고 업데이트하는데 사용 ReactQueryDevTools : 개발할 때만 사용(=콘솔) useQuery 첫 번째 인자 문자열 혹은 배열, 두 번째 인자 api 호출 함수, 세 번째 인자 옵션 객체 useQuery('un..
제네릭 타입(Generic) : 클래스 외부에서 타입을 정하는 것 import { FC } from 'react' interface DogsProps { status: string; message: string[]; // 문자열이 담긴 배열 } function GetDogs: FC ({ status, message }) { ... } select event interface SelectProps { handleOnChange: (event: ChangeEvent) => void; ... } 함수 (매개변수 타입) => void(리턴이 없는 경우) (매개변수 타입) => 반환값의 타입(리턴이 있는 경우) 객체 interface ObjProps { objVal: {} // 이렇게 지정해도 오류 나지 않음 o..
컴파일러는 코드가 깔끔하든 지저분하든 잘 작동함 그 코드를 수정하는 것이 사람이기 때문에 정리할 필요성이 있음 프로그램이 새로운 기능을 추가하기에 편한 구조가 아니라면, 먼저 리팩터링한 후 기능을 추가한다 수백 줄짜리 코드를 수정할 때에 프로그램의 작동 방식을 쉽게 파악할 수 있도록 코드를 재구성하고, 프로그램 구조가 빈약하다면 구조를 잡은 뒤 수정하는 것이 작업하기 수월함 한 번 작성한 코드를 다시 볼 일이 없다면 상관 없지만 다른 사람이 읽고 이해해야 할 일이 생겼는데 로직을 파악하기 어렵다면 수정이 필요함 예시 코드 리팩터링 순서 테스트 코드 만들기 함수 전달인자와 결괏값 몇을 미리 작성하고 단축키로 테스트를 실행할 수 있도록 설정 성공/실패에 따라 색상을 부여하여 테스트 결과를 한눈에 알아볼 수 ..
리듀서 내부에서 같은 슬라이스의 다른 리듀서 사용하기 // 슬라이스명.caseReducers.리듀서명(인자) // state를 사용해야한다면 인자로 state를 전달해주어야 함 customSlice.caseReducers.updateInfo(custom, product, true); 리듀서 내부에서 콘솔 출력했는데 proxy로 나오는 경우, current로 감싸서 확인하기 import { current } from '@reduxjs/toolkit'; ... reducers: { updateInfo: (state, action) => { console.log(current('내용')) }, } * 참고 caseReducers current 2023.04.19
git config core.ignorecase false 2023.04.19
1. 빌드 난독화 2. 특정 경로 바로 접근 시 나타나는 404 → index.html로 대체하기 3. 페이지 주소 설정 4. react-router-dom basename 설정 5. 배포용 브랜치 생성 후 빌드 폴더만 푸시하기 # package.json "scripts": { "build": "GENERATE_SOURCEMAP=false react-scripts build", #1 "postbuild": "cp build/index.html build/404.html", #2 }, "homepage": "https://myusername.github.io/my-app", #3 // react-router-dom을 사용하는 경우 router에 basename 추가 #4 import { Route, cre..