📗 오늘 한 일

면접준비

노션에 적은 TIL 블로깅

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

 

GitHub - homile/React-study: React 학습 코드

React 학습 코드. Contribute to homile/React-study development by creating an account on GitHub.

github.com

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

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

✍ Diary

오늘은 일요일인 만큼 밀렸던 블로깅을 작업했다. 저번에 카카오 사태가 난 뒤로 T스토리에 올린 내용이 무한적으로 남아있을 것이 아닐 수 있다는 것을 다시금 상기하여 노션에도 백업본을 만들고 있었는데 블로그에 올리는 것을 잊고 있던 것을 옮겨 적었다. 내용을 적다보니 꽤나 많이 밀렸었다....
밀리게 된 것은 노션에 올리기전에 손필기로 노트에 적는 습관이 있어서 작업을 3번해야 하는 것 때문인 듯하지만 이제는 다시 밀리지 않고 작성해 보려한다.

StudyHaza를 같이 진행했던 팀원들과 새로운 라이브러리를 학습하기 위해서 주말간 yup과 react-hook-form을 사용해서 로그인 또는 회원가입 유효성 검사를 해보자고 해서 작업을 다시하게 되었다.

해당 내용은 내일 조금 더 상세히 작성해서 블로그에 따로 내용을 올릴 것이다.

면접준비는 항상하고 있지만 기술면접이 가장 힘든 것같다... 꼬리질문까지 생각해야하니 너무 많지만 나름 재미있다!!

'Daily > Today I Learned' 카테고리의 다른 글

22.11.22_TIL  (0) 2022.11.23
22.11.21_TIL  (0) 2022.11.22
22.11.19_TIL  (0) 2022.11.21
22.11.18_TIL  (0) 2022.11.21
22.11.17_TIL  (0) 2022.11.21

📗 오늘 한 일

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

면접준비

Udemy React-query 강의

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

✍ Diary

10월25일부터 하루 4문제씩 0단계 문제로 아침을 시작해서 상쾌하게 머리를 더 쓸 수 있도록 했던 활력소였는데 이제는 백준이나 리트코드에서 문제를 찾아야겠다. 백준은 많이 풀었어서 리트코드가 안풀었던 문제가 더 많아서 리트코드를 선택할 것 같긴하다.

Udemy에서 블랙프라이데이로 할인을 하고 있어서 이전에 듣고 싶었던 강의 2개를 샀었는데 React-query랑 next.js에 대한 강의다. 
우선 React-qeury를 먼저 학습을 시작했다. 총 학습 시간은 8시간으로 나와있는데 내가 이해하고 사용할 수 있을 때 까지 한다면 조금 더 시간을 써야할 것 같다.

'Daily > Today I Learned' 카테고리의 다른 글

22.11.21_TIL  (0) 2022.11.22
22.11.20_TIL  (2) 2022.11.21
22.11.18_TIL  (0) 2022.11.21
22.11.17_TIL  (0) 2022.11.21
22.11.16_TIL  (0) 2022.11.21

📗 오늘 한 일

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

면접준비

Github 꾸미기

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

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

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

✍ Diary

내가 사용할 수 있는 스택은 이력서에 적혀있지만 이력서를 보는 담당자님이 Github에 들어갔을 때 Github에서 나오게 한다면 조금 더 어필할 수 있다곡 생각이 들어서 꾸미지 않았던 것을 하려한다. 

나만의 포트폴리오 사이트는 드림코딩의 포트폴리오 강의를 들어서 바닐라 JS로 구현했었지만 나만의 디자인을 가지고 React와 Typescript로 만들어보고 싶다는 생각이 있었는데 과제와 테스트, 면접을 보느라 조금씩 하고 있던 것을 다시 기간을 잡고 해보려한다.

'Daily > Today I Learned' 카테고리의 다른 글

22.11.20_TIL  (2) 2022.11.21
22.11.19_TIL  (0) 2022.11.21
22.11.17_TIL  (0) 2022.11.21
22.11.16_TIL  (0) 2022.11.21
22.11.15_TIL  (0) 2022.11.21

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));

'Coding > React & React-native' 카테고리의 다른 글

[RN] React Native란?  (0) 2023.12.22
[React] React Hook Form과 yup을 사용한 유효성 검사  (0) 2022.11.21
[React] Vite를 사용해보자  (0) 2022.10.25
[Redux]React-redux 사용하기  (0) 2022.10.25
[React] Portals  (0) 2022.07.16

📗 오늘 한 일

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

면접준비

Redux-toolkit 복습

StudyHaza(팀 프로젝트)

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

✍ Diary

어제 리덕스 툴킷으로 변경하고 적용이 되지 않는 곳을 발견해서 경로를 재지정했다.
배포를 하기전에 발견을 해서 다행이지만 다음에는 작업하는 순간에 찾을 수 있도록 해야겠다.

assets폴더에 이미지파일들이 있어서 이것을 어떻게 코드를 줄일 수 있을까 생각해본 결과 index.ts파일을 하나 생성하여 이미지 파일들을 미리 import해주고 사용해야 하는 컴포넌트에서 구조분해할당으로 export된 이미지를 받아와서 매번 컴포넌트에서 import해야 하는 것을 줄일 수 있었다.

'Daily > Today I Learned' 카테고리의 다른 글

22.11.19_TIL  (0) 2022.11.21
22.11.18_TIL  (0) 2022.11.21
22.11.16_TIL  (0) 2022.11.21
22.11.15_TIL  (0) 2022.11.21
22.11.14_TIL  (2) 2022.11.21

📗 오늘 한 일

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

면접준비

Redux-toolkit 복습

StudyHaza(팀 프로젝트)

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

✍ Diary

리덕스 툴킷을 학습해뒀지만 프로젝트에는 사용하지 못했어서 리팩토링을 툴킷으로 해보면 좋겠다 라는 생각이 들어서 툴킷을 다시 복습하고 변경해보았다.

매우 좋은 결과가 나왔다. 이전에는 액션까지 신경쓰면서 작업을 해야했지만 그것이 어렵진 않았지만 신경써야할 것이 하나 줄고 코드가 줄었다. 
또한, windows.location.reload()를 사용해서 Navbar의 유저 정보를 출력해야 했는데 해당 코드를 지워도 바로 적용이 되는 것을 볼 수 있었다.

다음에는 recoil을 학습하여 사용할 수 있도록 해야겠다.

'Daily > Today I Learned' 카테고리의 다른 글

22.11.18_TIL  (0) 2022.11.21
22.11.17_TIL  (0) 2022.11.21
22.11.15_TIL  (0) 2022.11.21
22.11.14_TIL  (2) 2022.11.21
22.11.13_TIL  (2) 2022.11.21

+ Recent posts