JavaScript
-
[Redux] 공식문서 파먹기(5) - Async Logic and Data FetchingJavaScript 2023. 6. 5. 21:47
해당 포스팅은 리덕스 공식문서를 번역하여 정리한 글입니다. 이전에 살펴본 리듀서 작성에서의 주의점은 사이드 이펙트를 발생시키면 안된다는 주의점이 있었습니다. 그러면 비동기 처리로 데이터를 패칭해오는 동작을 리듀서 내부에서는 처리할 수 없다는 말인데 어떻게 처리해야할까요? 이전에 살펴본 middleware는 디스패치를 중심으로 파이프라인을 형성하는 인핸서였습니다. 이번 포스팅에서는 미들웨어를 이용해 리덕스에서 비동기 및 데이터 패칭을 처리하는 방법을 알아보겠습니다. 리덕스의 스토어는 비동기처리를 알지못합니다. 무슨 얘기냐 하면 단지 액션이 디스패치되고 리듀서가 호출되며 새로운 상태를 업데이트하는 로직을 수행할 뿐, 내부에 비동기 처리가 일어나도 이 동작이 비동기 처리인지 아닌지 구분할 수 없다는겁니다. 그..
-
[Redux] 공식문서 파먹기(4) - UI and ReactJavaScript 2023. 6. 2. 22:10
해당 포스팅은 리덕스 공식문서를 번역하여 정리한 글입니다. 리덕스는 리액트전용 라이브러리가 아니라 JS라이브러리입니다. 어떤 UI프레임워크나 라이브러리 없이도 사용이 가능합니다. 하지만 리덕스는 리액트와 특히 잘 작동하도록 설계돼있습니다. 리덕스와 UI 통합하기 리덕스를 UI라이브러리와 사용하기위해 몇 가지 동작이 필요합니다. 스토어생성 업데이트 구독(subscribe()) 구독의 콜백함수 내부에서 현재 스토어의 상태가져오기, 현재 UI에 필요한 데이터 추출, 추출한 데이터로 UI업데이트 필요에따라 초기 상태로 UI를 렌더링 액션을 디스패치하여 UI에 응답 그래서 위의 몇가지 동작사항을 유의해 작성한 바닐라 JS에서 카운터 예제를 이용한 코드를 보면 // 1) createStore를 이용해 스토어 생성 ..
-
[Redux] 공식문서 파먹기(3) - StoreJavaScript 2023. 5. 24. 15:14
이전 포스팅에서 리듀서를 작성하는 방법과 슬라이스 리듀서를 작성하고 combineReducers 를 이용해 루트 리듀서에 조각낸 리듀서들을 합치는 방법을 알아봤습니다. 이제 이 리듀서들을 스토어에 합쳐 스토어를 만들어보겠습니다. Store 스토어는 여러 메서드들을 가지고있습니다. getState() - 현재 상태를 반환합니다 dispatch(action) - 액션을 받아 새로운 상태를 반환합니다 subscribe(listener) - 구독하는 이벤트 리스너를 등록해 디스패치를 호출합니다 스토어는 앱에서 단 하나의 스토어만 존재해야합니다 createStore import { createStore } from 'redux' import rootReducer from './reducer' const store..
-
[Redux] 공식문서 파먹기(2) - Todo List로 리덕스 이해하기JavaScript 2023. 5. 20. 22:41
해당 포스팅은 리덕스 공식문서를 번역하여 정리한 글입니다. 이전 포스팅에서는 리덕스의 기본과 컨셉을 정리했습니다. 이번 포스팅에서는 리덕스 공식문서의 예제를 기반으로 리덕스를 이해해 보겠습니다. TodoList를 만드는 예제를 통해 리덕스를 이해해 보겠습니다 요구사항 요구사항을 구체화하여 상태와 리듀서를 작성해야 합니다. 먼저는 앱의 요구사항을 이해하고 어떤 상태와 리듀서를 작성할지 구상해 보겠습니다. UI는 세 가지 주요 섹션으로 구성됩니다 사용자가 새 할 일 항목의 텍스트를 입력할 수 있는 input box 기존의 모든 할 일 목록 완료하지 않은 할 일의 수를 표기하고 필터링 옵션을 보여주는 바닥글 섹션 할 일 목록의 각 항목에 완료 상태를 전환하는 체크박스가 있어야 하며 미리 정의된 색상 목록에 대..
-
[Redux] 공식문서 파먹기(1) - Essentials - Redux Overview and ConceptsJavaScript 2023. 5. 18. 22:39
본 포스팅은 리덕스 공식문서를 번역하여 정리했습니다. 리덕스 개요 및 개념 리덕스란? 리덕스는 action 으로 앱의 상태를 관리하는 패턴이자 라이브러리 입니다. 앱에서 사용하는 상태를 하나의 저장소에 저장하고 예측가능한 방식으로만 상태를 업데이트하는 패턴을 사용합니다. 리덕스를 사용해야하는 이유 리덕스에서 제공하는 기능을 이용하면 앱의 전체 상태를 관리하고 상태가 언제, 어떻게, 왜 업데이트 되는지 이로인해서 앱의 로직이 어떻게 작동하는지 이해할 수 있습니다. 예측가능한 코드를 작성해서 예상대로 앱이 동작하도록 확신 할 수 있습니다. 리덕스를 언제 사용해야하나? 앱의 전체에서 전역적으로 사용하는 상태가 있는경우 앱의 상태가 시간의 따라 자주 업데이트 되는 경우 해당 상태를 변경하는 로직이 복잡한 경우 ..
-
[Javascript]변수와 메모리JavaScript 2023. 3. 21. 23:59
지난 포스팅에서 변수에 관해 살펴봤습니다. 이번 포스팅에서는 변수가 메모리에 어떤 방식으로 저장이되며, 식별자는 어떻게 변수를 참조하는지 알아보겠습니다. let a = 1; 위 코드 처럼 a 라는 변수를 선언했습니다. 이 변수는 메모리에 어떤 형태로 저장이 될까요? 1001 1002 1003 1004 1 실제 메모리는 접근이 불가능하여 가상의 메모리가 이런 형태로 있다고 생각하고 봐주시면 됩니다. 위에 1001 이라는 메모리 셀에 1 이라는 값이 들어가있습니다. 식별자는 이 1001 이라는 위치를 'a' 라는 식별자로 기억합니다. 그래서 식별자(변수명) a 를 참조하면 이 식별자가 가리키고있는 위치 메모리 1001에 접근합니다. 그런데 저번 포스팅에서는 자바스크립트에는 하나의 값만 저장하는 데이터 타..
-
[Javascript]변수JavaScript 2023. 3. 21. 23:25
변수(Variable) 변수란 변할 수 있는 무언가를 의미합니다. 어떤 애플리케이션이던, 데이터를 입력(input)받아 처리하고 결과 값을 출력(output)하는게 전부입니다. 변수란, 애플리케이션을 만드는 프로그래밍의 핵심입니다. 개발에서의 변수라면 보편적으로는 데이터를 의미하겠죠? 변수는 어떤 값을 저장하기 위한 메커니즘입니다. 그리고 그 저장한 값의 공간 그 자체 혹은 그 공간의 위치를 식별하는 이름이라고도 할 수 있습니다. 위에서 말한 어떤 값 이란, 데이터를 의미하고 자바스크립트에는 대표적인 7가지 데이터 타입이 있습니다. Number String Boolean Null Undefined Symbol Object 하나의 변수를 담을 수 있는 데이터타입부터, 여러개의 변수를 담을 수 있는 객체(O..