PART5:Simply build App with Redux - Component(Smart/Dumb) Smart & Dumb Component CRUD? Create, Read, Update, Delete 더 자세한 설명이 필요없을것 같다. 구현에 앞서 생각해볼 문제가 있다. 필자는 CRUD 전반에 걸쳐 Form 을 재사용 하고 싶다. 재사용을 하려면 어떻게 해야 할까? 흐름도에 Smart Component와 Dumb Component 가 있었던것을 기억하자. 재사용을 위해서 컴포넌트를 분리해야 한다. 여기서 드는 의문이 있다. 단순히 재사용에 목적만 있을까? 지난 포스팅을 보면 connect 를 통해 redux store에 컴포넌트가 연결되어 있다고 했다. 모든 컴포넌트가 redux store에 연결되어 있을 필요가 있을까? state 를 사용하지 않는 컴포넌트가 store에 연결되어 있다면 store.. 더보기 PART4:Simply build App with Redux - Data Flow Data Flow 하나를 알면 열을 알수 있다. 하나의 액션에 대해서 흐름을 파악한다면 추가 구현은 일사천리로 진행될것 이라고 생각한다. 지난 포스팅들을 돌아보면서 결국 필자가 한것은 무엇인가 생각해본다. 더미 데이터를 만들어서 그걸 호출하고 호출한 결과를 테이블형식으로 화면에 뿌려줬다. 뭔가를 PART1~ PART3 까지 주저리 주저리 써놨는데 결과는 한줄로 요약된다. 결과에서 중요한 키워드는 무엇일까.? 더미 데이터를 만들다. 더미 데이터를 호출하다. 테이블 형식의 게시판을 만들다. 내가 생각하는 정답은 호출이다. 액션이 일어난것은 오직 한가지 더미 데이터를 호출한것이다. 이는 여러 boilerplate 에서 한개의 동작을 표현한것과 같은 맥락이다. 다만 게시판은 한국인으로서 주니어 개발자에게 매우 .. 더보기 PART3:Simply build App with Redux - Mock, webpack_loaders, Component MocApi 지난 포스팅에서의 내용들은 LOAD_BOARD_CLEAR action 을 통해서 데이터를 호출하기 위함 이였다. 오늘은 더미 데이터를 호출하고 테이블 형태로 게시글을 셋팅 하는 내용을 구현하고자 한다. 먼저 MockApi 를 만든다. api 폴더에 boardApi.js 를 생성 하고 Promise 를 이용해 클래스를 구현한다. 해당 Mock data는 최근 스터디 주제였던 자바스크립트 자료구조와 알고리즘 Data Structures & Algorithms with JavaScript 이책의 아마존 서평을 긁어와서 사용했다. boardApi.js const contents = [ { id: "1", title: "Careless Mistakes", content: "This is very di.. 더보기 이전 1 2 3 4 5 ··· 17 다음
