FrontEnd 썸네일형 리스트형 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.. 더보기 Html5 & Css3 Basic Acknowledgment 웹 입문을 자바로 시작해서 관심사가 오라클로 갔다. 입사한곳에 뷰페이지를 담당하는 퍼블리셔가 있었다. 뷰페이지에 대해서 소흘할수 밖에 없었다. 장기적으로 참여하고 있는 오프 스터디 모임 구성원들이 전부 프론트 앤드 쪽이다 보니 내 방향성도 프론트 앤드로 가고 있는듯 하다. 그래서 한번은 개론적인 부분에 대해 정리할 필요성을 느꼈다. 어제 윤인성님 책을 시립도서관에서 빌려서 오늘 하루동안 문서화 하고 정리했다. 윤인성님께 감사 드린다. Font Tag 폰트는 브라우저 마다 다르기때문에 강제 해야 한다. 제목 : h1 ~ h6 숫자가 높을수록 글씨크기가 작아진다. 내용 : p 단락 br 개행 hr 수평줄 앵커 태그(a) : 웹표준에 따르면 href 값이 있어야 하기때문에 빈값은 #.. 더보기 ngDraggable -앵글러 모듈을 활용한 드래그앤 드랍 순서 정렬 그간 밀려드는 프로젝트를 처리하느라 포스팅에 소흘했습니다... :ㅇ오랫만에 포스팅을 해봅니다.!오늘 소개해 드릴 모듈은 Angular 에서 Draggable 한 Ordering 을 구현하는 모듈 입니다.설치 방법과 사용방법은 무척이나 간단합니다.bower install ngDraggable설치후 실행될 컨트롤러가 있는 index.html(기본) 안에 ngDraggable.js 스크립트 파일을 추가시켜줘야 합니다.이때 Angular.js 가 먼저 로드 되어야 하기때문에Angular.js 보다 아래 라인에 스크립트 파일을 추가합니다. 그리고 , 의존성을 추가 해줘야 합니다.var app = angular.module('eventApp', [ 'ngRoute', 'angularFileUpload', 'ui.b.. 더보기 이전 1 2 다음
