전체 글 100

004 Redux 공부 : Redux Middleware

🤔 Redux 미들웨어란? 👉 Redux 애플리케이션에서 액션과 리듀서 사이에서 동작하는 중간 소프트웨어이다. 👉 Redux 미들웨어는 Redux의 동작을 확장하고 액션 디스패치 과정을 가로채서 추가적인 작업을 수행할 수 있다. 🤔 Redux 미들웨어를 사용해서 수행할 수 있는 작업?? 👉 Redux Thunk 나 Redux Saga와 같은 미들웨어를 사용해서 비동기 작업을 관리할 수 있다. 👉 액션과 상태 변경을 로깅하고 디버깅 정보를 수집할 수 있다. 👉 액션을 가로채서 수정하거나 다른 액션으로 대체할 수 있다. 👉 특정 조건이 충족되었을 때만 액션을 디스패치 할 수 있다. 👉 리액트 라우터와 통합하여 라우팅 관련 작업을 처리할 수 있다. 👊 Redux 미들웨어 사용해보기 1. 리덕스 미들웨어를 만들..

React 2023.09.15

003 Redux 공부 : To-do List

일단 할 일 목록을 만들기 전에 count랑 같은 레포에 넣을 것이기 때문에, counter를 누르면 counter가 나오고 todolist를 누르면 ToDoList가 나오도록 UI를 바꿔줬다. 👊 Todo-List 만들기 1. 액션 타입, 액션 생성자 함수, 리듀서 설정 src/modules/todo.js 2. 루트 리듀서 만들기 한 프로젝트에 여러 개의 리듀서가 있을 때 한 리듀서로 합쳐서 사용한다. 이를 루트 리듀서라고 부른다. 나는 counter와 todos 두 개의 리듀서가 있다. 고로 합쳐야 한다. 리듀서를 합치는 것은 리덕스 내장 함수인 combineReducers를 사용한다. 👉🏻 'modules' 폴더에 index.js 파일을 생성한다. src/modules/index.js 👉🏻 'src..

React 2023.09.12

002 Redux 공부 : Counter

Redux는 Context API가 개선되기 전에 프로젝트에서 글로벌 상태 관리 용도로 많이 사용되어 왔지만, 요즘에는 글로벌 상태 관리 용도로 사용할 것이라면 Context API와 useReducer Hook으로 충분히 가능하다고 한다. 리덕스는 프로젝트가 크고, 성능을 최적화하거나 개발자의 경험과 선호도에 따라서 사용한다고 하는데... 일단 상태관리 도구에 대해서 배우고, Redux, Recoil, Context API에서 더 정감이 가는 걸 더 공부해 보려 한다. 🤙 리덕스 규칙 단일 스토어 (Single Store) : Redux 애플리케이션은 하나의 중앙 스토어만 사용해야 한다. 이 스토어에 애플리케이션의 모든 상태가 중앙 집중식으로 저장된다. 읽기 전용 상태 (Read-Only State) ..

React 2023.09.11

TypeScript란?

🧐 TypeScript란 무엇인가? 👉 자바스크립트의 슈퍼셋, 자바스크립트의 확장된 버전이다. 정적 타입 언어로서 코드를 작성할 때 변수, 함수, 객체등의 데이터 타입을 명시하고 컴파일 타임에 타입 검사를 수행한다. 이를 통해 코드의 안정성을 향상시키고 버그를 사전에 방지할 수 있으며, 대규모 애플리케이션의 개발과 유지보수를 더 쉽게 만들어준다. 슈퍼셋(Superset) : 어떤 언어나 기술이 다른 언어나 기술의 확장 또는 상위 집한인 경우를 가리킨다. 원래 언어나 기술의 모든 기능을 포함하면서 추가적인 기능이나 확장을 제공한다는 것을 의미한다. 🧐 TypeScript를 사용하는 이유? 👉 타입 안정성 : 컴파일 타임에 타입 오류를 발견할 수 있으므로 런타임 오류를 사전에 방지할 수 있다. 👉 IDE(통..

001 Redux의 개념

😳 Redux란? 👉 Redux는 "action(액션)"이라는 이벤트를 사용하여 애플리케이션 상태를 관리하고 업데이트하는 패턴과 라이브러리이다. 👉 전체 애플리케이션 내에서 사용해야 하는 상태에 대한 중앙 저장소 역할을 하며, 상태 업데이트를 예측 가능한 방식으로 제어한다. 😳 왜 Redux를 사용하는 것일까? 👉 중앙화된 상태 관리 : 리덕스는 애플리케이션의 상태를 중앙에서 효율적으로 관리할 수 있는 중앙 저장소를 제공하기 때문에 상태를 한 곳에서 관리하고 업데이트하는 것이 쉬워진다. 👉 예측 가능한 상태 업데이트 : 리덕스는 순수 함수인 리듀서를 사용하여 상태를 업데이트하므로 상태 변경이 예측 가능하며, 어떻게 변화하는지 이해하기 쉽다. 👉 디버깅 : time-travel 디버깅 기능을 활용하면 이전..

React 2023.09.01

Programmers 문제 풀이 41

문제 설명 : 다항식 더하기 한 개 이상의 항의 합으로 이루어진 식을 다항식이라고 합니다. 다항식을 계산할 때는 동류항끼리 계산해 정리합니다. 덧셈으로 이루어진 다항식 polynomial이 매개변수로 주어질 때, 동류항끼리 더한 결괏값을 문자열로 return 하도록 하는 solution 함수??? 같은 식이라면 가장 짧은 수식을 return 합니다. 제한 사항 0 < polynomial에 있는 수 < 100 polynomial에 변수는 'x'만 존재합니다. polynomial은 양의 정수, 공백, 'x', '+'로 이루어져 있습니다. 항과 연산기호 사이에는 항상 공백이 존재합니다. 공백은 연속되지 않으며 시작이나 끝에는 공백이 없습니다. 하나의 항에서 변수가 숫자 앞에 오는 경우는 없습니다. " + 3x..

Programmers 2023.08.30

Programmers 문제 풀이 40

문제 설명 : 직사각형의 넓이 구하기 2차원 좌표 평면에 변이 축과 평해한 직사각형이 있습니다. 직사각형 네 꼭짓점의 좌표 [[x1, y1], [x2, y2], [x3, y3], [x4, y4]]가 담겨 있는 배열 dots가 매개변수로 주어질 때, 직사각형의 넓이를 return 하도록 하는 solution 함수??? 제한 사항 dots의 길이 = 4 dots의 원소의 길이 = 2 -256 < dots[i]의 원소 < 256 잘못된 입력은 주어지지 않습니다. 입출력 예 dots result [[1,1],[2,1],[2,2],[1,2]] 1 [[-1,-1],[1,1],[1,-1],[-1,1]] 4 문제 풀이 x, y 배열을 만든 후 for문을 돌면의 dots원소의 x는 x에 y는 y에 넣어줬다. 그 후에 x..

Programmers 2023.08.25

Programmers 문제 풀이 39

문제 설명 : 외계어 사전 PROGRAMMERS-962 행성에 불시착한 우주비행사 머쓱이는 외계행성의 언어를 공부하려고 합니다. 알파벳이 담긴 배열 spell과 외계어 사전 dic이 매개변수로 주어집니다. spell에 담긴 알파벳을 한번씩 만 모두 사용한 단어가 dic에 존재한다면 1, 존재하지 않는다면 2를 return하도록 하는 solution 함수??? 제한 사항 spell과 dic의 원소는 알파벳 소문자로만 이루어져 있습니다. 2 ≤ spell의 크기 ≤ 10 spell의 원소의 길이는 1입니다. 1 ≤ dic의 크기 ≤ 10 1 ≤ dic의 원소의 길이 ≤ 10 spell의 원소를 모두 사용해 단어를 만들어야 합니다. spell의 원소를 모두 사용해 만들 수 있는 단어는 dic에 두 개 이상 존..

Programmers 2023.08.24
728x90