2017년 2월 22일 수요일

ES6 : let 과 const 의 차이

let 구문
블록 유효 범위를 갖는 지역 변수를 선언하며, 임의로 값을 초기화할 수 있음.

let은 선언된 블록 유효 범위에 상관없이 전역 또는 함수 유효 범위를 갖는 var 키워드와는 달리, 변수가
사용되는 블록, 구문 또는 표현식 유효 범위를 갖는 변수를 선언한다.

   


const 구문
값에 읽기 전용 참조를 생성합니다. 담긴 값이 불변임을 뜻하는 게 아닙니다, 단지 그 변수 식별자는
재할당될 수 없습니다.

 - 선언된 함수에 전역 또는 지역일 수 있는 상수를 만듭니다.
 - 상수 초기자(initializer)가 필요합니다. 즉 선언되는 같은 문에 그 값을 지정해야 합니다.
   (이는 나중에 변경될 수 없는 점을 감안하면 말이 됩니다).
 - 상수는 let 문을 사용하여 정의된 변수와 마찬가지로 블록 범위(block-scope)입니다.
 - 상수의 값은 재할당을 통해 바뀔 수 없고 재선언될 수 없습니다.
 - let에 적용한 "일시적 사각 지대"에 관한 모든 고려는, const에도 적용합니다.
 - 상수는 같은 범위의 상수 또는 변수와 그 이름을 공유할 수 없습니다.


참조 :
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const

2017년 2월 21일 화요일

React 개발하기 전에 알아야 할 기술 : React/JSX 작성 가이드

React/JSX 작성시 가이드

몇가지 사항만 정리하자면...

1. 기본규칙
 - 파일당 하나의 컴포넌트 파일만 포함한다.
   (다수의 Stateless, or Pure, Components 들은 파일에 존재해도 된다.
 - 항상 JSX 구문을 사용한다.
   (만약 JSX를 이용해 앱을 개발 중이라면 React.createElement 구문을 사용하지 않는다.)

2. Class vs React.createClass vs stateless
 - 만약 소스 안에 state나 refs가 있으면, React.createClass 보다는 class extends React.Component 를
   선호하라. 믹스인을 사용해야 하는 특별히 좋은 이유가 있으면 그렇지 않아도 된다.

3. 명명규칙
 - 확장자: 리엑트 컴포넌트 파일에는 .jsx 확장자를 사용한다.
 - 파일 이름: 파스칼 형식의 이름을 사용한다.
 - 참조 값 이름: 인스턴스는 카멜 형식으로, 리엑트 컴포넌트는 파스칼 형식의 이름을 사용한다.
 - 컴포넌트 이름: 파일 이름과 동일하게 사용한다.
   단, 폴더 내 루트 컴포넌트의 경우에는, 파일 이름을 index.jsx 로 작성하고, 폴더의 이름을 컴포넌트의
   이름으로 작성한다.
 - 상위 컴포넌트 이름: 상위 컴포넌트의 displayName 속성 값과 하위 컴포넌트의 displayName 속성 값
   에 활용하여 새롬게 만들어진 컴포넌트의 이름을 만든다.

4. 선언
 - 컴포넌트의 이름을 지을 때 displayName 속성을 사용하지 않는다. 대신에 참조 값으로 컴포넌트의
   이름을 짓는다.

이외에도 많은 내용이 있으니 반드시 숙지 할 것 !


참조 :
https://github.com/apple77y/javascript/tree/master/react

2017년 2월 19일 일요일

단위테스트 이해

단위테스트 (Unit Test) 란?
컴퓨터 프로그래밍에서 소스 코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 절차 
즉, 모든 함수와 메소드에 대한 테스트 케이스(Test case)를 작성하는 절차를 말함.
 - 크드변경으로 문제가 발생할 경우 단시간내 파악하고 수정
 - 각 테스트 케이스는 서로 분리되도록 가짜객체를 생성

1. TDD (Test - Driven Development)
테스트가 코드작성을 주도하는 개발 방식. 즉 테스터 먼저 개발!!
정확한 프로그래밍 목적과 테스트할 기능들을 디자인 단계에서 반드시 미리 정의해야만 함.

2. BDD (Behavior - Driven Development)
TDD 근간으로 파생된 프로그래밍 개발 프로세스. 행위를 위한 테스트에 집중

3. DDD (Domain - Driven Development)
도메인 그자체와 도메인 로직에 초점. 일반적인 데이터 중심의 접근법을 탈피하여 순수한 도메인 
모델과 로직에 집중하는 것

개념만으론 이해가 안된다. 일단 리액트 중점으로 적용해봐야겠다.

자바스크립트 Mocha + Karma 로 단위테스트
http://frontend.diffthink.kr/2016/07/mocha-karma.html
http://programmingsummaries.tistory.com/383

참조 :
http://asfirstalways.tistory.com/296

2017년 2월 13일 월요일

React _ 08 : 'create-react-app' 활용한 프로젝트 생성과 Express 연동

명령어 하나로 작업환경을 쉽게 구성해주는 "create-react-app"를 활용하여 React 프로젝트 
생성해 보자.

1. 글로벌 패키지설치하기
 - 명령어 npm install -g create-react-app 
 - Node 버전 4.x 이상 (Node 업그레이드)

2. 프로젝트 생성 및 작업환경 구성
 - 명령어 :  create-react-app hello-world 
 - React 프로젝트 initialize (초기화)
 - node_modules/react-scripts 디렉토리에 Dependency package 설치 (webpack, babel, eslint 등)
 - Package.json 구성
  (dependency package 들은 node_modules/react-scripts 에 설치되어있기에 여기서 보이지 않음)
   

3. 빌드
 - npm run bulid 명령어를 통하여 production 을 위한 빌드
 - 빌드함으로써 코드가 최소화되고, assets에 content hashes 를 통하여 캐싱이 적용
 - 쉽게 말하면 프로젝트에 작성된 코드를 build라는 폴더에 코드를 최소화한 파일을 생성해줌

4. 도구 Eject 활용하여 node_modules/react-scripts의 dependency package 가져오기
 - npm run eject 명령어를 통하여 사용
 - react-scripts 에서 사용하던 스크립트들을 프로젝트에 생성
 - 작업이 끝나면 디렉토리 구조와 pakage.json이 변경

Eject 도구 사용 시 정리되지 않은 부분
 - create-react-app으로 프로젝트 생성
 - 프로젝트 루트 디렉토리에 webpack.config.js 파일 생성 및 설정
 - webpack 명령어 실행 
 - 번들파일 생성 

이 과정으로 webpack 번들파일 생성하는데는 이슈가 발생하지 않았으나 

- create-react-app으로 프로젝트 생성 
- npm run eject로 프로젝트에 react-scripts 가져오기 (추가!!) 
- 프로젝트 루트 디렉토리에 webpack.config.js 파일 생성 및 설정 
- webpack 명령어 실행 
- 번들파일 생성 시 에러발생 

Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` 
environment variables 

Eject 과정에서 package.json에 babel-preset-react-app 부분이 추가된 걸 확인할 수 있음.
여기서 에러문구처럼 `babel-preset-react-app` 를 사용하려면 NODE 또는 BABEL 환경변수 값이 
설정되어있어야만 다음단계로 넘어갈 수 있기 때문에 임의로 환경변수를 설정해주면 해결됨

명령어 : NODE_ENV=production webpack  (참고 페이지)


추가로 환경변수에서 설정시 콘솔에는 Webpack_ENV=production 설정 가능하나 js파일에서는 
process.env.NODE_ENV = 'development' 설정

5. 개발서버 (webpack-dev-server)실행
 - npm start 명령어를 통하여 webpack-dev-server 를 시작
 - hot-reload 가 적용되어있기 때문에, 이 개발 서버를 키고, 코드를 수정하면 자동으로 적용

6.Express 작업환경 설정
 - 글로벌 패키지 설치
   npm install -g babel-cli
   ES6 문법으로 작성된 코드를 transpile 하고, 개발환경에선 babel-node 를 통하여 바로 코드를
   실행하기 위하여 babel-cli 를 설치

 - 로컬 패키지 설치
   npm install --save express body-parser path
   npm install --save-dev nodemon

   path는 의존경로를 절대경로로 변환해주는 모듈
   nodemon은 코드에 변화가 있을 때 서버를 재시작 해주는 모듈

 - 디렉토리 구조 (React 프로젝트 루트디렉토리에 생성)
   

 - 서버 메인파일 (src/main.js )
   

   express.static의 경로는 React 프로젝트 public 폴더 경로로 설정

 - 예제 라우트 (src/routes/post.js)
   

 - 인덱스 라우트 (src/routes/index.js)
   
   Node 에서 import 할때 폴더로 지정하면 자동으로 index.js를 바라봄.

- 서버 개발환경 전용 스크립트
   
   nodemon은 뒤에 지정한 폴더( ./src )에서 변경된 코드만 인식하여 서버 재시작함. 

- pakage.json 스크립트 작성
   

"build"는 서버사이드 코드를 ES5로 변환하여 build폴더에 서버 파일 생성. 
(NODE_ENV 환경변수 설정 - babel-preset-react-app 에러발생 해결)

7. 서버구동
 - 개발단계에는 "development" 스크립트를 실행하여 서버사이드 코드 작성시 자동으로 서버 재시작
 - 배포단계에는 "build" 스크립트로 최적화된 파일 생성 후 "start" 스크립트로 생성된 서버파일 실행

8. Webpack 개발서버에서 Express  API 연동

작업하기 앞서 Webpack 개발서버를 왜 사용해야 하는지 어떤점이 좋은지를 알아보자.

"create-react-app"으로 설치하게 되면 (eject 명령어 실행 후)자동으로 webpack-dev-serve 
개발서버와 개발서버 전용 Webpack 파일이 생성 됨 (config /webpack.dev.config.js)
기본적으로 개발서버에선 개발서버전용파일이 사용되게 설정되어있음.

왜 다른 config를 사용하는가?
기존 config 는 output인 bundle.js 를 public 디렉토리에 저장하도록 설정되어 있어
webpack-dev-server 에서도 동일한 설정을 적용한다면, public 에 있는 파일이 덮어씌어짐.

webpack-dev-serve 에선 bundle.js 를 메모리에 저장한후, 나중에 브라우저에서 bundle.js 를 요청
할 시 public 디렉토리에 이미 있는 bundle.js 보다 우선권을 가져서 메모리에 있는걸 리턴하게 됨.

 - config / webpack.config.dev.js 수정
   
   localhost:3000 에서 0.0.0.0:4500 로 변경 (사용하고 싶은 포트로 설정)
  0.0.0.0 으로 해야 외부에서도 개발서버에 접속이 가능

 - scripts / start.js 수정
   
   WebPackDevServer 의 설정에 proxy 를 추가 (개발서버 포트 입력)
   listen 할 때 host를 localhost 가 아닌 0.0.0.0 으로 설정 (webpack.config.dev에 설정한 포트와 동일)

 - API 테스트
   터미널에서 npm start 명령어로 개발서버 webpack-dev-serve 구동
   express 개발서버 구동 (npm run development)
   브라우저에 http://localhost:4500/hello 입력

9. react-hot-loader 적용

react-hot-loader 를 왜 적용해야하는지 알아보자.
현재 상태에서 컴포넌트의 렌더링되는 부분을 수정할 경우 자동으로 브라우저에서는 '새로고침'으로
변경된 부분을 바로 반영함. 또한 state로 설정된 값은 유지되지 않고 사라짐.
 이런 문제를 해결해주는게 react-hot-loader!!
컴포넌트의 렌더링 부분을 수정해도 브라우저에서 '새로고침'을 하지않고 바로 적용하며 state 값도 유지

 - react-hot-loader 설치
    npm install --save-dev react-hot-loader

 - config / webpack.config.dev.js 수정
   
   로더가 두개이므로 query를 할 수 없습니다. 그 대신에 babel? 를 통하여 babel 설정을 
   JSON.stringify 하여 전달

 - react-hot-loader 테스트
   
   App.js 다음과 같이 수정 후 브라우저로 페이지 열기
   <h1> 태그 내용을 수정하여 브라우저 새로고침으로 반영되는지 확인 (새로고침없이 반영되어야 함)
   버튼을 눌러 state값 입력 후 다시 <h1> 태그 내용을 수정을 수정하여 state값이 유지되는지 확인


참조 :
https://velopert.com/2037

2017년 2월 10일 금요일

CSS를 위한 LESS와 SASS

개발하며 많이 들어본 LESS, SASS 직접 사용해보진 않았지만 수많은 라인을 넘기며 작성한 
CSS를 보다 편리하게 해주는 언어라니 한번 알아보자.

1. LESS & SASS 특징
 - 코드 재사용
 - 조건분기, 반복처리 등의 프로그래밍적 처리
 - 셀렉터 간략화
 - File Merge 와 CSS 압축으로 파일사이즈를 최소화

2. LESS 특징
 - 접두어 @ 사용
 - 중첩 문법 지원
 - 믹스인 기능 지원
 - 이스케이프 기능 제공

3. SASS 특징
 - 접두어 $ 사용
 - 중첩 문법 지원하며 CSS속성 이름도 중첩 가능
 - 믹스인 기능 지원을 지원하여 속성이름에도 변수를 사용 가능
 - 프로그래밍적 처리 지원 (제어문) 기능 제공

CSS에 비해 LESS와 SASS가 어떤점이 좋고 각각의 특징은 무엇인지 간략히 정리함.
루비를 선호하는 개발자라면 SASS를, 자바스크립트를 선호하는 개발자라면 LESS를 추천!

참조 :
https://taegon.kim/archives/3667
http://asfirstalways.tistory.com/141
https://opentutorials.org/course/277/1748

2017년 2월 9일 목요일

React _ 07 : 직접 React 프로젝트 생성하여 구조 및 모듈 이해하기

도구 하나로 손쉽게 React 작업환경을 구성하고 프로젝트를 만들 수 있지만 
React 프로젝트를 직접 생성하고 구성함으로써 React와 사용되는 모듈을 이해해보자.

Webpack 이란?
모듈 번들러로서, Browserify 처럼 브라우저 위에서 import (require) 을 할 수 있게 해주고 자바스크립트
파일들을 하나로 합쳐 줌

Babel 이란?
아직 ECMAScript6 를 지원하지 않는 환경에서 ES6 문법으로 작성된 코드를 ES5 형태로 변환하여
사용 할 수 있게 해주며 JSX를 이용하기 위한 필수 조건

webpack-dev-server 이란?
wepback에서 지원하는 간단한 개발서버로서 별도의 서버를 구축하지 않고도 웹서버를 열 수 있으며
hot-loader를 통하여 코드가 수정될때마다 자동으로 리로드 되게 할 수 있음.

Hot-Module Replacement 이란?
Webpack-dev-server의 Hot-Module Replacement 기능은 수정된 파일만 리로딩 처리.
단, React 프로젝트의 로컬 State를 유지하지 못하므로 이문제를 해결하기 위해 react-hot-loader
webpack 에 적용함으로써 해결할 수 있음.

1. 작업환경을 위한 Global Package (Babel, Webpack) 설치
 - 명령어 :  
   $ npm install -g babel webpack 

2. 프로젝트 생성
 - 프로젝트 폴더 생성 후 npm init 명령어로 package.json 생성 (참고 페이지 이동)
 - 명령어 :
   $ mkdir react-project && cd react-project 
   $ npm init

3. React  설치
 - '-save' 옵션을 통하여 package.json에 패키지 추가
 - 명령어 :
 $ npm install --save react react-dom

4. 개발 의존 모듈 설치 (개발 과정에서 사용될 패키지)
 - 해당 모듈들은 개발환경에서만 사용되므로 '–save-dev' 옵션을 설정 (' -save ' 로 해도 무관)
 $ npm install --save-dev babel-core babel-loader babel-preset-react
                          babel-preset-es2015
 $ npm install --save-dev react-hot-loader webpack webpack-dev-server

여기서 react-hot-loader은 개발서버가 실행중에 특정 React 컴포넌트가 변경될 시 해당 컴포넌트만 
업데이트 해주며 설치하지 않을시 새로고침만 기능.
(기본적으로 개발서버가 React를 호환하지 않으므로 로더 설정이 필요) 

webpack 과 webpack-dev-server 가 글로벌로 이미 설치가 되어있는데, 로컬 모듈로 설치하는 이유는
여기있는 로더들이 의존하고 있으므로 설치해야 함.

5. 디렉토리 구조 및 파일 생성


6. Webpack 설정 (컴파일러, 서버 및 로더 설정)


7. HTML, JS 작성
 - HTML 생성 (public/index.html)

 - 컴포넌트 생성 (src/components/App.js)

 - 컴포넌트 불러와 root element에 렌더링 (src/index.js)

 
8. Package.json script 추가
npm start 명령어를 콘솔에서 입력 했을 때, webpack-dev-server 가 실행되도록 package.json 의
“scripts” 수정


만약에 localhost 가 아닌 외부 서버에서 dev-server 실행 시, –host 옵션을 추가하지 않으면 접근이
안됨. (localhost 인경우에는 생략)

package.json에 script를 추가하여 명령어를 호출하는 이유는 디렉토리 위치에 상관없이 해당 명령어를
실행할 수 있음. 

9. Webpack 번들파일 생성
 - 명령어(React 프로젝트 루트디렉토리에서) :
    $webpack 

10. 개발서버 구동 및 테스트
 - 개발서버(webpack-dev-server) 구동 명령어:
    $npm start 
 - 페이지 테스트 : http://localhost:4000

webpack-dev-server 를 사용하신다면, webpack 으로 먼저 빌드할 필요가 없음.
(webpack-dev-server 가 실행될때 자동으로 빌드되서 메모리에 저장되고, 개발 서버에서 
 /bundle.js 에 요청을 주었을때 public 안에 있는 파일이 아닌 메모리에 있는 파일을 반환)
만약에 express 같은 다른 웹서버를 사용하신다면, webpack으로 먼저 빌드할 것.

! 파일 및 컴포넌트의 첫 문자를 대문자로 하는건 React의 naming convention 임.

참조 :
https://velopert.com/814

2017년 2월 4일 토요일

Node.JS : WebStorm “require”사용시 Unresolved function or method 에러 해결

JavaScript 코드 작성 중 node 모듈을 불러올때 사용되는 "require" 구문이 
"Unresolved function or method" 로 사용할 수 없을 때 

[preference]에서  검색에 'Node.js and NPM'을 입력한뒤 해당 설정 화면에서 Enable 버튼을
누르면 문제가 해결된다.
   


참조 :
http://stackoverflow.com/questions/20136714/how-can-i-fix-webstorm-warning-unresolved-function-or-method-for-require-fi

2017년 2월 3일 금요일

React _ 06 : 컴포넌트 매핑

본격적인 개발에 앞서 비슷한 코드를 (데이터 배열)  반복하여 렌더링하는 방법을 알아보자.

1. JavaScript의 Array 객체 내장 함수인 map 함수 활용
 - map() 메소드는 배열 내의 모든 요소 각각에 대하여 제공된 함수(callback)를 호출하고, 그 결과를
   모아서, 새로운 배열을 반환
 - 문법과 파라미터 설명 : 페이지 이동

2. map 함수 사용예제
   
 -  ES6 경우 새로 도입된 Arrow Function 활용하여 코드 작성함

3. 컴포넌트 mapping 
 - mapping을 활용하지 않고 그대로 작성한 컴포넌트
   
   
 
 - 컴포넌트를 추가하여  props 작성 후 State에 데이터 mapping 처리 및 DataComponent  렌더링
   부분 수정
   
   
 - 마지막에 사용된 key는 컴포넌트에 독자성 부여('유니크 아이디'라고 생각하면 될듯)를 위함이고
   i 는 배열의 인덱스 값을 가르킴
  (JSX 올바른 문법을 참조하면 key 값에 배열 index 값을 넣지 않는 것이 올바름)

API 데이터들을 처리할때 자주 사용할 듯 (그림으로 보면 복잡하게느껴지지만 한번 해보면 쉬움)


참조 :
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://velopert.com/957

React _ 05 : Component LifeCycle API

 Component LifeCycle API


constructor 
생성자 메소드로서 컴포넌트가 처음 만들어 질 때 실행됩니다.
이 메소드에서 기본 state 를 정할 수 있습니다.

componentWillMount 
컴포넌트가 DOM 위에 만들어지기 전에 실행됩니다.

render 
컴포넌트 렌더링을 담당합니다.

componentDidMount 
컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드입니다. 이 안에서 다른 JavaScript
프레임워크를 연동하거나, setTimeout, setInterval 및 AJAX 처리 등을 넣습니다.

componentWillReceiveProps
컴포넌트가 prop 을 새로 받았을 때 실행됩니다. prop 에 따라 state 를 업데이트 해야 할 때 사용하면
유용합니다. 이 안에서 this.setState() 를 해도 추가적으로 렌더링하지 않습니다.

shouldComponentUpdate
prop 혹은 state 가 변경 되었을 때, 리렌더링을 할지 말지 정하는 메소드입니다.

componentWillUpdate
컴포넌트가 업데이트 되기 전에 실행됩니다. 이 메소드 안에서는 this.setState() 를 사용X (무한루프)

componentDidUpdate 
컴포넌트가 리렌더링을 마친 후 실행됩니다.

componentWillUnmount 
컴포넌트가 DOM 에서 사라진 후 실행되는 메소드입니다.


참조 :
https://velopert.com/1130
https://cinos81.bitbucket.io/blog/_site/react/2016/02/03/reactLifeCycle.html?
https://facebook.github.io/react/docs/react-component.html

2017년 2월 1일 수요일

React _ 04 : State (render 이해)

State
State는 유동적인(변경되는) 데이터를 다룰때 사용함. 데이터가 변경되면 React는 UI 재구축하는데
"setState ()" 메서드 호출 이후 UI 업데이트는 변경사항을 효율적으로 일괄처리하는 대기열 메커니즘
으로 처리되며 "this.state" 를 직접 업데이트 할 경우 에러 발생 할 수 있으므로 읽기전용으로 취급
하는 것이 좋음.

render 
render 함수는 component를 생성하면 기본적으로 존재해야 하는 함수이고, 기본적으로 HTML DOM을
렌더링 해 사용자 들에게 보여주는 역할을 한다.

이 render 함수는 life cycle method 에서 다시한번 설명하겠지만, component가 Mount될 때, 그리고
this.setState에 의해 state 변화가 일어나서 DOM의 re-rendering이 필요할 때 호출된다

1. ES 5 & ES 6 State 사용
 

 

  - State 사용시 초기값 설정 필수!!
  - ES5는 getInitialState () 메소드, ES6 에서는 constructor 생성자 메소드에서 state 값을
    초기화 하는걸 볼 수 있음
  - ES6에서 render() 부분에서 this.handleChange 뒤에 괄호를 넣지 않고 작성해야 함.
    (괄호를 넣을 경우 무한 루프 발생)

2. ES6 컴포넌트 이벤트 연결 (바인딩)
Javascript 컴포넌트에서 메소드를 실행시 해당 메소드의 this 가 무엇을 가리키는지 모르므로
따로 바인딩처리를 해줘야 함. 

ES6 class에선 auto binding이 되지 않으므로 setState 메소드를 사용하게 될 메소드를 bind
해야 React Component가 가지고 있는 멤버 함수 및 객체에 접근 할 수 있음.
   


참조 :
https://daveceddia.com/react-es5-createclass-vs-es6-classes/
https://velopert.com/921
http://yumere.tistory.com/79