본문 바로가기
Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

Category

 (236)
[Redux] Async Logic, Middleware Async Logic과 Middleware에 대해서 알아보자!     1. Async 로직   동기(sync) 방식에서는 리듀서에서 액션에 대한 처리가 모두 끝나고,Redux store에 들어있는 State가 업데이트 된 이후에 프로그램의 흐름이 이어진다.반면, 비동기(Async) 방식에서는 Reducer에서 액션에 대한 처리가 모두 끝나기 전에,프로그램의 흐름은 계속 이어지고, Reducer에서 액션에 대한 처리가 끝난 이후에 프로그램에 알려주는 형태이다.Redux에서는 기본적으로 비동기 로직을 허용하지 않는다.왜냐하면 Reduce의 규칙에서 "비동기 로직이나 Side effects(Side effects란, Reducer 외부에서 보여질 수 있는 상태나 동작을 말한다. ex. 콘솔에 로그 출력, 파일..
[Redux] redux-actions redux-actions에 대해서 알아보자!    1. FSA (Flux Standard Action)  - Flux 아키텍처의 Action 객체를 위한 하나의 표준이다.- Action 객체에 표준화된 규칙을 적용해서 체계적으로 관리하기 위한 목적으로 만들어졌다.  (1) FSA가 적용된 Action 객체  { type: 'ADD_TODO', payload: { text: 'Do something.' }}   (2) 규칙  - Action은 반드시 일반적인 자바스크립트 객체 형태여야 한다.- type 프로퍼티를 가진다. (필수)- error, payload, meta 프로퍼티를 가질 수 있다. (옵션)이것들 외의 프로퍼티는 가질 수 없다. type: 액션의 성질을 나타냄. 해당 액션으로 상태가 어떻게 ..
[Redux] Ducks Pattern Ducks Pattern에 대해서 알아보자!    1. Duck file  액션 타입(Actions), 액션 생성 함수(Action Creators), 리듀서(Reducer), 그리고 Side Effects까지 모아놓은 파일을 의미한다.Duck file들로 리덕스에 필요한 요소들을 관리하는 것을 덕스(Ducks) 패턴이라고 한다. Actions : action의 type을 나타내는 이름Reducer : 각각의 Action을 처리하는 역할을 하는 함수Action Creators : Action 객체를 생성하는 함수Side effects : Reducer가 아닌 외부와 연관된 동작들을 의미    2. Pattern 소프트 웨어를 설계하는 정형화된 방법을 말한다.    3. Ducks Pattern 액션 타입..
[Redux] Redux로 프로젝트 시작하는 법 (간단한 Todo 프로젝트 만들어보기) Redux랑 React 연동해서 간단한 프로젝트를 만들어볼 것이다.   * 필자는 Vite를 사용하여 React 개발 환경을 설정하였다. (참고 ) https://dev-ini.tistory.com/58)* Toolkit은 사용하지 않은 버전이다. 추후 학습 시 Toolkit을 사용한 버전을 업로드 예정!   1.  명령어로 Redux와 React 패키지를 설치해준다. npm install --save redux react-redux   2. 설치하고 나면, package.json에 아래와 같이 react-redux가 의존성 목록(dependencies)에 추가된 것을 볼 수 있다.     3. Redux에 필요한 폴더와 파일을 만든다.   (1) src 폴더 안에 redux 폴더 만들기    (2) r..
[Redux] Redux와 React를 연동하기 목차 1. Container2. react-redux3. provider4. mapStateToProps()5. mapDispatchToProps()6. connect()7. 가장 많이 하는 실수8. Redux와 React 연동 과정  React와 Redux를 연동하기 위한 개념들을 알아보자!      1. Container  Container는 Redux를 리액트에 연동했을 때 사용하는 개념이다.(Redux에는 Container라는 개념이 없음)여기서 Container는 Container Component의 줄임말이며, 컴포넌트는 리액트 컴포넌트를 의미한다.결국, Container는 Redux의 일부 state와 dispatch를 포함하는 리액트 컴포넌트이다.Container의 정의를 그림으로 나타내면..
[Redux] Reducer 목차 1. Reducer란?2. Reducer의 규칙3. Immutable Update4. 복잡한 state 객체를 업데이트 하는 경우5. CombinedReducers()   Reducer에 대해서 알아보자!       1. Reducer란?  - Action이 발생하면, Action을 실제로 처리하는 역할을 하는 함수- Action은 State에 변화를 주기 위한 행동이다. 따라서, Reducer는 State에 변화를 주는 역할을 한다.- Reducer는 현재 state를 기반으로 새로운 state를 만들어서 리턴한다.// Reducer는 현재 State와 Action을 파라미터로 받아서 새로운 State를 만들어 리턴한다.(state, action) => newState 예) 배열에 아이템을 넣고 ..
[Redux] Action 목차 1. Action이란?2. Action과 Reducer의 관계3. Action 생성자 (Action Creator)4. Action의 Dispatch 과정     Redux의 action에 대해서 알아보자!       1. Action이란?   1) Action의 정의  - Redux State(store에 저장돼있는 데이터)에 변화를 주기 위한 행동  - Action은 상태를 변경하기 위해 반드시 사용되는 순수 객체(Pure Object)이다.- 무엇을 해야 하는지(명령)를 나타내며, 상태 변경의 유일한 출발점이다.   2) Action의 구성요소  - type: 액션의 종류를 나타내는 문자열 (필수)- payload: 상태를 변경하는 데 필요한 데이터 (선택) { type: 'ADD_TODO'..
[Redux] Dispatch Redux의 dispatch에 대해서 알아보자!      Redux Dispatch의 개념과 역할  Dispatch : 발송하다, 파견하다.Dispatcher : 발송하는 역할을 하는 것Dispatch는 Action을 발송하는 역할을 한다!발송한 Action의 수신자는 바로 Redux이다!즉, Action이 발생했다는 것을 Redux에게 알리는 역할을 하는 것이다.   Flux Architecture의 전체 구성도를 보면, 오른쪽 위에 Dispatcher가 위치하고 있다.Action이 생성되면 해당 Action이 Dispatcher로 전달되고, Dispatcher는 Action을 Redux로 보내서 처리하도록 만든다.그리고 Redux가 Action을 받아서 상태를 변경하게 된다.     Dispatch ..

티스토리툴바