beomy

React.JS의 Redux 관련 글을 포스팅하면서 그리고 MVC, MVP, MVVM 패턴에 관한 포스팅을 하면서 다른 디자인패턴에 관심을 가지게 되었습니다. Vuex는 Flux 패턴에 영감을 받아 만들어졌다고도 하고, Flux는 React.JS의 Redux의 디자인패턴이기도 합니다. Flux와 MVC를 비교하기 전에 [디자인패턴] MVC, MVP, MVVM 비교를 참고하시면 좀 더 이해하는데 도움이 될 것 같습니다. Flux는 MVC 모델의 단점을 보안하기 위해 페이스북에서 발표한 아키텍쳐입니다. 1. MVC 문제점 페이스북에서 이야기 하는 MVC의 가장 큰 단점은 양방향 데이터 흐름이었습니다. MVC 패턴에서 Controller는 Model의 데이터를 조회하거나 업데이트하는 역할을 합니다. Model..

웹 개발자로 일을 하면서 가장 먼저 접한 디자인패턴이 바로 MVC 패턴이었습니다. 그만큼 유명하고 많이 쓰이는 디자인패턴인 MVC 패턴과 MVC 패턴에서 파생되어져 나온 MVP 패턴과 MVVM 패턴을 이야기해 보도록 하겠습니다. 이렇게 역할을 분리하는 이유는... 각각의 역할을 나눠 코드 관리를 하자! 역할을 나누어 관리가 된다면, 유지보수와 개발효율이 좋아지겠죠..? 1. MVC MVC 패턴은 Model + View + Controller를 합친 용어입니다. MVC 패턴의 구조, 동작, 특징, 장점, 단점을 이야기하겠습니다. 1) 구조 Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분입니다. View : 사용자에서 보여지는 UI 부분입니다. Controller : 사용자의 입력..

webpack v4와 ES6 이상의 자바스크립트를 사용하기 위한 babel loader, css를 모듈화 하기 위한 css loader와 style loader를 사용하는 방법을 이야기 하려고 합니다. (webpack의 기본 개념을 이해하면 이번 포스트를 이해하는데 도움이 될 것 같습니다. 이곳에서 webpack의 기본 개념을 읽어주세요.) 1. Package 설치하기 webpack + babel + css 를 사용하기 위해서, webpack과 loader 등의 package들을 설치해야 합니다. npm init -ypackage.json의 뼈대를 생성합니다. npm init -y로 package.json을 생성합니다. 1) webpack 설치하기 webpack을 설치합니다. npm install web..

Vue.JS와 Electron.JS, React.JS 등.. 자바스크립트 프론트엔드 어플리케이션을 CLI를 사용하여 프로젝트를 생성하면 자연스럽게 따라 설치되는 모듈 번들러(module bundler)였습니다. (모듈 번들러를 선택 할 수 있다면 webpack를 선택해서 사용했습니다.) 이번 포스트에서는 자연스럽게 사용했던 webpack이라는 모듈 번들러에 대해 이야기하려고 합니다. 1. 모듈 번들러가 무엇인가요? 모듈 번들러를 간단히 이야기 하면, 여러개의 파일을 하나의 파일로 묶어주는 라이브러리를 이야기 합니다. 위의 그림은 webpack의 공식문서의 첫 페이지에 등장하는 그림입니다. 위의 그림을 보면 모듈 번들러가 무엇인지가 대략 파악이 가능합니다. 모듈 번들러는 파일의 종속성을 스스로 파악하여, ..

vue-cli를 통해 Vue 프로젝트를 생성하고, 생성된 프로젝트의 디렉토리 구조와 npm start의 실행 순서를 살펴보도록 하겠습니다. 1. vue-cli를 이용하여 Vue 프로젝트 생성 자세한 Vue 프로젝트 생성 관련 내용은 [Vue.JS] Vue.JS 설치방법을 참고하시기 바랍니다. vue init webpack my-project위의 명령어로, webpack을 사용하는 Vue 프로젝트를 생성하도록 하겠습니다. 위의 그림과 같이 vue-cli를 통해 프로젝트를 설정하고 프로젝트를 생성합니다. 터미널을 켜고 생성된 프로젝트의 디렉토리로 이동하여, npm start shell 명령어를 실행하면 (저의 경우는 VS Code의 터미널을 이용합니다.), 위의 그림과 같이 Vue 어플리케이션이 실행됩니다...

Vue.JS는 ECMAScript5 기능을 사용하기 때문에 IE8 이하 버전을 지원하지 않습니다. 전 주로 크롬 브라우저에서 개발을 합니다. 크롬 브라우저에서 Vue.JS를 개발 할 때, 크롬 확장 프로그램인 Vue.js devtools를 사용하면, 더 편리하게 Vue.JS를 디버깅 할 수 있습니다. Vue.JS를 사용하는 3가지 방법에 대해 이야기 하도록 하겠습니다, 1. CDN으로 Vue.JS 사용하기 위의 코드와 같이 작성하면 Vue.JS를 사용할 수 있습니다. CodePen으로도 Vue.JS를 CDN으로 javascript 설정에 추가해 주기만 하면, Vue.JS를 사용할 수 있습니다. CodePen 에서 Create -> New Pen 을 클릭하여(혹은 CodePen 링크에서..) 새로운 소스코..

많은 관심을 받고 있는 Vue의 성장과 Vue에 대한 간단한 소개를 하려고 합니다. Vue.js를 적용하여 신규 프로젝트를 진행 할 기회가 있어(이미 하나는 개발이 완료 됬고, 진행 중인 프로젝트 하나와, 앞으로 개발 할 프로젝트...) 내친김에 Vue.js에 대해 정리하고자 합니다. 1. Vue.JS의 성장 Vue가 한창 띄고 있다는 이야기를 많이 듣고 있습니다. Vue의 현재 위상이 어느정도 인지.. GitHub와 Google 트렌드, npm, Stack Overflow로 알아보겠습니다. GitHub vue와 react, angular를 GitHub에서 비교해 보도록 하겠습니다. Vue는 Star를 79299개로 React와 큰 차이 없이 많은 사람들이 관심을 가지고 있는 것을 볼 수 있습니다. Go..

https://www.highcharts.com/demo/column-drilldown 이 예제를 React에서 만들어 보겠습니다. 1. highcharts 설치하기 create-react-app hello-react-hightcharts cd hello-react-hightcharts npm install --save react-highcharts highcharts-drilldowncreate-react-app으로 React 프로잭트를 설치하고, react-highcharts와 highcharts-drilldown 두개의 모듈을 설치합니다. react-highcharts를 설치하면, react-highcharts와 highchart 두개가 설치됩니다. react-highcharts는 React에서 h..

1. AJAX 비동기 작업 처리 React에서 ajax로 서버에 요청하는 방법을 이야기 할 것입니다. ajax를 요청하는 방법은 axios, jquery 등 여러가지 방법이 있지만, axios 모듈을 이용하여 서버 요청을 해 보겠습니다. 서버와 통신하여 아래와 같은 간단한 예를 만들어 보겠습니다. 1) axios 설치하기 create-react-app을 사용하여 react 프로젝트를 생성합니다. ([React.JS] CodePen, create-react-app으로 React.JS 개발하기 참고) create-react-app hello-axios cd hello-axios npm install --save axios2) axios 사용하기 axios의 제세한 내용은 https://github.com/m..

아래 그림과 같이 입력한 숫자를 더하는 counter을 redux를 사용하지 않고, redux를 사용하여, redux + react-redux를 사용하여 구현 한 3가지 코드를 비교하여 설명하겠습니다. create-react-app로 생성된 프로젝트로 진행 합니다. ([React.JS] CodePen, create-react-app으로 React.JS 개발하기 참고) 1. redux를 사용하지 않은 예제 Redux나 그 외의 모듈을 사용하지 않고, 순수 React만 사용하여 구현한 예제입니다. 컴포넌트 구조 컴포넌트 구조와, state 흐름은 아래 그림과 같습니다. Counter 컴포넌트는 계산된 값을 화면에 나타내는 컴포넌트 입니다. Option 컴포넌트는 계산할 값을 입력받는 컴포넌트 입니다. But..