본문 바로가기

vanilla js2

[JavaScript] Vanilla JS로 React 만들기 시작하기 전에... Vanilla JS로 Virtual DOM을 랜더링 하는 간단한 유사 React를 만들어보려고 한다. 우아한 테크러닝 3기 (TypeScript & React)에서 김민태님의 강좌를 참고하였습니다. 글을 보기 전에 Virtual DOM, JSX에 대한 개념을 익히고 읽기를 권장 합니다. 기본 React App 만들기 우측의 결과를 가져오는 React Example App을 작성하였습니다. (github commit 바로가기) JS로 우측 앱을 React의 Virtual DOM을 구현하면서 출력하는 프로그램을 작성해 보겠습니다. React Virtual DOM 분석 위 사진은 React Component를 console.log로 출력한 결과 입니다. 해당 결과를 기반으로 virtualD.. 2020. 9. 9.
[JavaScript] Vanilla JS로 상태 관리 모듈(redux) 만들기 개요 Vanilla JS로 hot한 상태 관리 모듈 redux를 만들어보려고 한다. 우아한 테크러닝 3기 (TypeScript & React)에서 김민태님의 강좌를 참고하였습니다. 해당 문서에는 redux의 기본 패턴인 Flux 패턴에 대한 기본적인 개념이 있어야 합니다. 본문 기본 Store 생성 함수 만들기 상태를 관리하는 객체 store를 만들어 줍니다. redux.js에서 기본 store 생성 함수 정의 Reducer 만들기 & Reducer를 통한 상태 업데이트 reducer는 상태를 업데이트 해주는 주최 입니다. dispatch는 store의 상태를 업데이트 하는 주최 입니다. 상태 값의 구독자 등록 함수 & 출판 함수 만들기 subscribe 함수는 상태 값이 업데이트되면 수신할 객체를 등록.. 2020. 9. 4.