Redux 썸네일형 리스트형 PART7:Simply build App with Redux - Read, Update / Redux Third Action Read,Update,Delete Here's the Plan 지난 포스팅에 Create 를 구현 했다. Create 포스팅이 길었던 이유는 PART4 이후로 두번째로 구현한 Redux action 이기 때문에 조금더 상세히 설명하고자 했기 때문인것 같다. 이번 포스팅에서는 Read와 Update 를 구현 하고자 한다. 구현 흐름은 앞선 포스팅인 Create 와 비슷하기 때문에 설명이 다소 불친절 하다면 조금 친절한 Create 부분과 비교해서 보면 도움이 될것 같다. 구현에 앞서 CURD 중 남은 RUD 구현계획에 대해서 정리 해보자. 내가 포스팅 하고 있는 Redux App 에는 회원이란 개념이 존재 하지 않기 때문에 특정인이 특정글에 대한 권한을 갖지 않는다. 그렇기 때문에 내 계획은 이렇다. Re.. 더보기 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.. 더보기 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.. 더보기 PART2:Simply build App with Redux - Router, Redux Structure How to Make it ? 앞서 무엇을 만들지 설명을 하지 않았다. 대부분에 boilerplate는 찾아보면 카운터를 예로 들고 있다. 뭘만들지 고민해보다가 About 페이지에 게시판을 만들기로 결정 했다. DB가 없기 때문에 JSON 방식으로 더미 데이터를 저장해 놓고 Promise 를 활용해서 Api 처럼 활용 가능 하도록 MockApi 를 구현할 계획 이다. Router components 폴더에 컴포넌트 별로 폴더를 만들고 About, Header, Main 파일을 생성한다. 앞서 만들었던 Hello 컴포넌트를 삭제한다. Header 컴포넌트에 라우트 Main 과 About 2개를 정의할것 이다. 앞서 지난 포스팅에 react-router 설치를 빼먹었다. npm i -S react-route.. 더보기 PART1:Simply build App with Redux - Component , Initialization Begin 해당 포스팅은 Redux 에 포커스가 맞춰져 있다 따라서 React 나 JSX 웹팩 익스프레스등에 대해서 설명하지 않을 것이다. React는 어느정도 이해하고 있지만 Redux 에 대해서 감이 잡히지 않는 사람들에게 도움이 될것 같다. 모든 컴포넌트는 ES2015 에 class 기반 방식으로 구현 할것이다 구글링에서 나오는 거의 모든 국내 블로거들은 이방식을 쓰고 있고 몇안되는 React 책도 class 방식으로 설명한다. Java 를 경험해본 사람이라면 클래스방식이 매우 친숙할 것이다. 후에 소개할 데코레이터 패턴도 역시 매우 친숙한 개념인데 이해가 끝나고 성능에 관심이 생기면 stateless 나 데코레이터 패턴을 사용해보는것도 좋을것 같다. Many Kinds of Component Im.. 더보기 이전 1 다음
