Homile

📗 오늘 한 일

면접준비

노션에 적은 TIL 블로깅

React-hook-form / yup을 사용한 회원가입 유효성검사

• 이전에 프로젝트에서 멘토님이 사용해봤으면 좋겠다고 하고 로그인/회원가입을 담당한 팀원분이 사용했었고, 나도 학습을 했었지만 다시 복습을 하고 싶다는 생각이 들어서 작성했다.
• 작업내용 Github
  • https://github.com/homile/React-study/tree/main/react-hook-form-test

yup / react-hook-form을 사용하는 이유

• 불필요한 렌더링을 최소화하고, 마운팅이 빠르며, 타입스크립트와 잘 맞는 장점을 가지고 있다.
• 정규표현식, if 문 등을 이용하여 코드를 작성할 수 있으나 코드의 길이가 길어지게 되는 것을 방지하며 실시간 유효성 검사를 할 수 있다.

✍ Diary

📗 오늘 한 일

프로그래머스 LEVEL.0 4문제 풀이 (100문제 끝)

면접준비

Udemy React-query 강의

• 18일부터 25일까지 블랙프라이데이 할인을 진행하고 있어서 구매해서 처음들었다.
• 블로그나 공식 사이트를 통해서 이론적으로 학습은 진행했지만 부족했던 것 같아서 조금 더 내용을 자세히 알기위해 결제해서 듣기 시작했다.

✍ Diary

📗 오늘 한 일

프로그래머스 LEVEL.0 4문제 풀이

면접준비

Github 꾸미기

• 레포지토리 생성
• 꾸미기 전에 계획을 세워야겠다.

나만의 포트폴리오 구현 재시작

• 이전에 바닐라JS로 구현했던 것을 그대로 React / Typescript를 사용해서 구현하려 했었지만 디자인을 나만의 것으로 해야겠다 라는 생각이 들어서 디자인을 다시 시작했다.
• 자기소개 → 사용가능 스택 → 프로젝트 → Contact 순으로 화면에 나오게 할 것이며 다크모드를 구현할 생각이다.
• 디자인을 포함해서 구현작업까지 예상기간은 5일정도로 잡고 있다.

✍ Diary

Redux

• 상태를 업데이트 할 때는 항상 원본 state는 수정하지 않고 새로운 state를 반환해야한다.
• 프로젝트가 더 복잡해질수록 리덕스를 올바르게 사용하기도 더 복잡해진다.
• 리덕스에서 관리해야 할 상태가 더 많아질 때 생길 수 있는 현상
  • 액션 타입에서 문제가 생길 수 있다.
    • 식별자는 오타가 나서는 안되지만 오타가 날 경우 리듀서가 처리하지 못하게 된다.
      • 해결: 상수를 지정하여 오타를 막을 수 있다.
  • 작은 프로젝트에서는 문제가 되지않지만 큰 프로젝트에 많은 개발자가 들어가는 프로젝트에서는 문제가 될 수 있다.
    • 서로 다른 액션이 많을 때 식별자의 충돌이 발생할 수 있다.
  • 관리하는 데이터의 양이 많을 수록 상태 객체도 점점 커지며 많은 상태를 복사해야한다. 모든 상태를 유지하려면 계속 복사해야하고 리듀서의 길이가 길어지고 유지할 수 없을 만큼 리덕스의 파일이 커진다. 이것은 Context의 단점과도 같고, 리덕스에서도 나타날 수 있지만 해결책이 있다.
    • 해결: 리듀서의 파일을 나누어서 관리한다.
  • 상태의 변경 불가성에도 영향을 줄 수 있다.

Redux-toolkit

• Redux를 더 편리하고 쉽게 사용할 수 있도록 만들어준다.
• 위와 같은 리덕스의 단점을 해결하는 방안을 조금 더 쉽게 할 수 있고, 해결하지 못하는 단점도 보완할 수 있도록 해준다.

설치

1. 아래의 코드를 작성하여 라이브러리를 설치한다.
2. npm install @reduxjs/toolkit react-redux
3. 기존에 설치한 Redux 라이브러리가 존재한다면 package.json에서 삭제해준다.
   • 이미 Redux toolkit에 포함되어 있기 때문이다.

사용

reducer 설정

• slice는 항상 이름이 존재해야 한다.

// store -> index.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = { counter: 0, showCounter: true };

const counterSlice = createSlice({
	// 식별자
	name: 'counter',
	initialState,
	reducers:{
		// 자동으로 최신 state를 받는다.
		increment(state) {
			// 기존의 상태를 변경하는 것 같지만 변경되지 않는다.
			// 내부적으로 immer라는 다른 패키지를 사용한다.
			// 이런 코드를 감지하고 자동으로 원래 있느 상태를 복제하고 기존 상태를 변경하지 않도록해준다.
			// 불변성을 신경쓰지 않아도 된다.
			state.counter++;
		},
		decrement(state) {
			state.counter--;
		},
		// action에 붙어있는 데이터가 필요할 때 사용하는 방법.
		increase(state, action) {
			state.counter = state.counter + action.amount;	
		},
		toggleCounter(state) {
			state.showCounter = !state.ShowCounter;
		}
	}
});

// counterSlice.reducer에 접근 가능하다.
// 프로젝트 규모가 커졌을 경우 문제가 생길 수 있다.
// ㄴ 일반적인 redux에서는 combineReducers를 사용한다.
//    ㄴ redux-toolkit에서는 configureStore를 사용한다.
// configureStore는 createStore처럼 store를 생성한다.
// 여러 개의 리듀서를 하나의 리듀서로 쉽게 합칠 수 있다.
// redux
const store = createStore(counterSlice.reducer);

// redux-toolkit
const store = configureStore({
	// reducer가 하나 일 경우
	reducer: counterSlice.reducer
	// reducer가 여러개 일 경우
	reducer: { counter: counterSlice.reducer }
});

Reducer 사용, state 가져오기

export const counterActions = counterSlice.actions;

// reudcer 사용하기
// payload가 없는 경우
dispatch(counterActions.increment());

// payload가 있는 경우
dispatch(counterActions.increase(10));

📗 오늘 한 일

프로그래머스 LEVEL.0 4문제 풀이

면접준비

Redux-toolkit 복습

StudyHaza(팀 프로젝트)

• 타입스크립트 버전 빌드파일 배포
• redux-toolkit으로 변경함으로 경로 재지정
• assets 이미지 임포트 모음

✍ Diary

📗 오늘 한 일

프로그래머스 LEVEL.0 4문제 풀이

면접준비

Redux-toolkit 복습

StudyHaza(팀 프로젝트)

• Redux → Redux-toolkit으로 변경
  • redux-toolkit 세팅
  • redux-toolkit 변환으로 인한 actions 폴더 삭제

✍ Diary