HTML 삽입 미리보기할 수 없는 소스 Redux 구현의 흐름 redux를 사용하려면 어떻게 할까? 정형화된 순서가 있는 것도 아니고 사람마다 또 개발 환경마다 천지차이를 보이겠지만 나에게는 어느정도 가이드라인이 필요할 것 같아서 정리를 해보려고 한다. 컴포넌트를 설계하고 Redux를 활용한 상태관리까지 구현하고자 할 때 개발의 순서는 아래와 같을 수 있다. (단계별 구체적인 코드나 예제는 제외했다. Redux 사용의 큰 흐름만 잡는 것이 이 글의 목적이다.) 1. 부품화(컴포넌트화) 재사용과 가독성을 위해 구현하고자 하는 여러 기능들을 컴포넌트화 한다. 주로 기능별 jsx, js 파일을 분리하는 식으로 이뤄진다. 2. Reducer 정의 및 Store 생성하기 우리는 한 Application 내에서 흐..
HTML 삽입 미리보기할 수 없는 소스 Redux ? : 애플리케이션의 복잡성을 낮추고, 코드가 가져올 결과들을 예측 가능하게 만들어주는 도구 : 리액트와는 독립적인 도구임! 핵심 기능 store state 직접 접속할 수 없는 데이터 reducer state 가공함수의 집합 dispatch로부터 전달받은 action에 대응하여 특정 행위 수행 state를 입력값으로 하고 action을 참조하여 새로운 state 값을 만들어 리턴 dispatch reducer 호출 후 state 값 변경 reducer에게 현재 state와 action 객체 전달 subscribe state 값이 바뀔 떄마다 자동 렌더링 제공 getState 직접적인 데이터 공급 수행 action 웹 app 에서의 요청사항을 담은 객체 ..
HTML 삽입 미리보기할 수 없는 소스 Immutability ; 불변 데이터의 원본이 훼손되는 것을 막음 CRUD 정보시스템에서 생성과 읽기 기능은 아주 중요함 수정과 삭제는 매운 쉬운 일이자 흔한 일 불변함의 적용 대상? 변수의 이름 값 자체 지금부터 자바스크립트의 불변과 관련된 다양한 개념을 알아보자 0. 변수의 유효범위 자바스크립트는 변수를 불러올 때 Scope - Script와 Scope - Global에서 찾아옴 Scope은 Local, Glocal, Script로 구분함 Global 변수명 앞에 var이나 아무것도 붙이지 않는다면 해당 변수는 Scope - Global에 저장 어디서 실행하든 global에는 접근이 가능 window 객체 단, 함수 내에 var 키워드를 붙여 선언한 변수는 S..
페이지 구성 방식과 페이지 렌더링 | MPA, SPA, CSR, SSR, SSG
HTML 삽입 미리보기할 수 없는 소스 리액트 라우터를 사용하기에 앞서 페이지 구성 방식(MPA, SPA)와 렌더링 방식(CSR, SSR, SSG)에 대해 알아보자 1. MPA와 SPA MPA(Multiple Page Application) MPA는 여러 개의 페이지를 준비한 후 요청에 따라 적절한 페이지를 반환하는 어플리케이션을 말한다. 특징 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(html, css, js)를 다운로드한다. 페이지를 이동하거나 새로고침하면 전체 페이지를 리렌더링한다. 장점 페이지마다 키워드가 노출되어 있어서 검색이 쉽다. 단점 페이지를 이동할 때마다 전체 페이지가 리렌더링되기 때문에 느리다. 클라이언트와 서버 모두 렌더링 프레임워크를 사용해야 한다. SPA(Sing..