분류 전체보기 썸네일형 리스트형 PART8:Simply build App with Redux - Delete / END Delete CRUD 중에 이제 Delete 만 남았다. 여기 까지 왔다면 사실 내 포스팅을 보지 않아도 Delete 를 구현 하는데 아무런 문제가 없을것 이라고 생각한다. 그렇다고 여기서 포스팅을 끝내면 유종에 미를 거둘수 없으니 구현을 마저 진행해보겠다. 앞선 포스팅 앞단에서 RUD 에 대한 구현 계획을 이야기 했었다. Delete 는 게시글의 오른쪽에 삭제 버튼을 넣어주기로 한것을 기억 할것이다. smart Component 인 About.js 부터 보자. class 내부에 callDelete 함수를 정의 해주고 BoardList 를 render 할때 deleteContent 를 props 로 내려준다. About.js callDelete(targetId) { ... } render() { let .. 더보기 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.. 더보기 PART6:Simply build App with Redux - Create / Redux Second Action Create Implementation 지난 포스팅에서 폼을 대상으로 smart / dumb 컴포넌트를 분리 했었다. 오늘은 게시글 추가(Create) 기능을 구현 할것인데 컴포넌트의 흐름과 게시글 리스트 호출외에 다른 action 에 따른 redux 의 흐름을 경험 해볼수 있을것 같다. 게시글을 새로 생성 하려면 먼저 무엇을 해야할까.? 우선 사용자가 입력한 폼에 있는 값을 가져와야 한다. smart component 인 ManageBoard.js 파일 부터 수정하자. 계획은 이렇다. intput[type="text"] 가 onChange 될때 마다 새로운 state 값을 set 할것이다. 클래스 내부에서 호출할 props.contents 에 초기 객체를 설정해준다. function mapStateTo.. 더보기 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.. 더보기 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.. 더보기 DSA end 알고리즘 스터디가 끝난지 2주가 지났다. 드디어 책에 있는 내용은 모두 정리가 끝났다. 내가 이해 하지 못한건 내것이 아니라고 생각한다. 구글에 검색하면 거의 모든것을 찾을수 있다. 구글에 나오지 않는다면 커뮤니티에 질문을 올린다. 답을 얻을수 있지만 그것을 이해 하지 못하면 내가 누군가에게 그 문제에 대해서 설명할수 없고 그것이 항상 최선인가 라는 질문을 할수가 없다. 이게 최선인가를 스스로에게 질문하는건 매우 중요하다고 생각한다. 현재 우리 나라 같이 기술에 대한 가치가 현저히 낮다면 자존감이라도 있어야 내가 좋아하는 이 일을 계속 이어나갈수 있으니까 개발자로서 자존감을 높이는것 중요하다고 생각한다. 하지만 모든 상황에 대해서 자신이 내린 해답이 무조건적으로 옳다 라는것 그것은 자존감을 새우는것이 아.. 더보기 Search Algorithm About Search Algorithm 정렬 알고리즘에서 정렬은 결국 검색을 하기 위한 것이다 라는 이야기를 했었다. 리스트에서는 순차 검색(sequential search) 와 이진 검색(binary search)으로 데이터를 검색할수 있다. sequential search 순차 검색은 다른말로 선형 검색(linear search) 라고도 한다. 순차 검색은 무작위적인 검색 기법으로 상황에 따라 자료구조의 모든 요소를 검색해야 하는 상황이 발생할 수 있다. function seqSearch(arr, data) { return arr.indexOf(data) === -1? false : arr.indexOf(data); } function dispArr(search) { let nums = new Ar.. 더보기 이전 1 2 3 4 5 다음
