Browse Tag: javascript

[ReactJS] setState에 대하여

튜토리얼을 보면,

이 부분이 잘 이해가 안가더라. Game 객체 내의 moves라는 React element에 onclick 이벤트로 등록된 것이 jumpTo 함수인데, jumpTo 함수가 실행되고 나면, 화면이 다시 그려지는데 그 re-rendering 시점을 못찾았었다. onRender 같은 이벤트가 존재하는것도 아니고 어떤 기준에서 다시 그려지는 건지 하고 검색 해봤더니

ReactJS는 상태가 변경(setState 함수 호출)시에 render 메소드를 다시 호출해서 re-rendering 을 진행한다.

결국 setState 는 사용자 이벤트에 따라 UI가 변경(show/hide 같은)되거나 Ajax 호출을 통해 데이터를 불러와서 다시 display 해줘야하는 등의 조건에서 사용해주면 좋을것 같다.

 

[ES6]변수 선언

ES6(부르는 용어가.. ECMAScript 6라고 부르기도하고, ECMAScript 2015 , ES6 , 뭐 여튼) 에 대해 천천히 공부해보자

일단 내가 알던 Javascript 와 다른 첫번째는 변수 선언에 관한 키워드 이다

기존의 Javascript 는 var로 모든 것이 해결 되었다. var의 경우 중복선언 / 함수 scope 등의 특징을 가진다.

반면, let과 const 는 중복 선언이 불가능하고 Block-scope를 가진다(bracket 범위). 이런 특징 때문에 다른 언어들과 비교해서 Javascript 가 가졋던 문제점(문제점인지 장점인지 알수 없으나.. Hoisting에 따른 중구 난방 변수 선언이나 중복 선언 등)을 해결 할 수 있게 된거 같다.

특히 변수의 범위가  블럭 scope이기 때문에 기존의 Javascript 에 익숙한 개발자들은 조심해야할거 같다.

Const 같은 경우에 좀 특별한데.. 일단 keyword가 생긴걸로만 봐서는 상수(immutable)이다. 실제로 ES6스팩 document(http://es6-features.org/#Constants)에도 immutable라고 표현되어 있는데, 이게 원시형 데이터를 할당하면 변경 불가능인데 참조형 데이터는 또 변경이 가능하다.(이러면 안되는거 아닌가) 또 이게 크롬의 경우 Strict Mode 일 경우 값을 변경하면 에러 난다고 한다. (일괄성에 대한 문제를 해결하려고 하는거 아니였나?)

var와 또 다른 let의 차이점은 loop index에서 찾을 수 있다.

var는 index의 경우 할당된 변수 하나에 값을 변경 시켜 나가지만 let 을 loop index로 사용할 경우 각기다른 변수가 생긴다. (loop가 메우 큰경우 메모리 문제가 발생할 수 있는 부분 아닌가?)

결국 var보다는 let과 const의 특징을 이해하고 바르게 사용하는 것이 중요할텐데 실제 코드에서는 let보다는 const가 많이 사용된다고 한다.

참고 : http://blog.javarouka.me/2016/03/es2015-var-const-let.html ,

http://blog.nekoromancer.kr/2016/01/26/es6-var-let-%EA%B7%B8%EB%A6%AC%EA%B3%A0-const/

 

[ReactJS] ReactJS 튜토리얼 따라하기

이 글은 https://facebook.github.io/react/tutorial/tutorial.html 의 튜토리얼을 따라해본 것이다.

환경 설정을 마쳤다면(환경 설정이 안되어 있다면 이글을 확인), https://codepen.io/ericnakagawa/pen/vXpjwZ?editors=0010 에서 starter code를 받아보자.

  1. components 밑에 app.jsx 파일을 만들어 Square , Board , Game class를 생성하여 export 한뒤 entry.jsx 에서 해당 모듈들을 구현한다.
  2. src/css 폴더 밑에 style.css를 만들어 starter code에 있는 css를 그냥 복붙하자.
  3. index.html 에 html  코드들도 복붙해서 튜토리얼을 따라할 기본적인 코드를 구성한다.
  4. webpack 으로 빌드해서 브라우져에서 확인해보자

환경 설정과 starter code가 브라우져에서 실행 되었다면 튜토리얼을 따라가는데 큰 문제가 없을 것이다.

튜토리얼에 나오는 몇가지 중요한 점만 확인해보자

  • Immutability
    그 중간에 객체의 값을 변경하는데 slice() 를 사용하여 복제한다음 값을 변경하고 다시 state에 할당하는 작업이 있다. 이 부분에 대해 튜토리얼에서 꽤나 중요하게 언급(bold 처리된 텍스트)하는데,왜 복사해서 값을 변경하고 다시 할당 하는 작업(Immutability 라고 부른다)가 중요하냐면, ReactJS는 변경된 데이터에 대해 re-rendering 작업을 하는데 값을 변경하는 작업을 immutability하게 진행 되었다면 변경여부를 판단하는게 간단하고 쉽지만(주소값만 체크) mutated 객체의 경우 변경 여부 확인을 위해 내부 모든 값을 확인해야하고 값 변경 작업이 복잡했을 경우 re-rendering 을 위한 값 변경 여부 체크 프로세스가 기하급수적으로 복잡해지기 때문이다. 따라서 ReactJS에서는 특히 Immutability가 중요하다.
  • Functional Components
    이 함수는 stateless functional components 라고 불리는데  render() 함수만 가지는 컴포넌트이다 Functional Components 의 경우작성하기가 쉽고 향후에 ReactJS가 해당 컴포넌트에 대해 최적화를 진행하기 때문에 목적에 따라 해당 컴포넌트를 정의하는것이 중요할 것 같다.
  • Key
    ReactJS에서 리스트 컴포넌트를 렌더링 할 때 중요한 포인트가 Key 이다. 리스트 아이템이 업데이트(추가,삭제,수정)가 될 때 React는 그 중 어떤 객체가 변경 되어서 re-rendering 해야하는지 파악해야한다. 그때 사용되는것이 Key 이다. 리스트 객체에 Key를 할당하는것은 strongly recommended 하다. (Global unique 일 필요는 없고 그 리스트 내에서만 unique 해도 문제 없다.)

AngularJS의 문제점으로 느린 속도가 많이 지적되었던 것으로 아는데 이런 몇가지 요소들을 지켜 준다면 속도 이슈 없이 View를 구성 할 수 있을것으로 생각된다.

튜토리얼 자체는 어렵지 않지만 ReactJS를 처음 시작하기 위해서는 ReactJS와 함께 작동하는 에코시스템들(파이프라인)에 대해 이해하고 사용할 줄 알아야 한다는 점이 꽤나 피곤한것 같다.(러닝커브가 ReactJS에서만 발생하는 것이 아니라 webpack이나 Babel , 사실상 webpack에서 발생).

튜토리얼 자체는 step by step 으로 꽤나 친절하게 그리고 추가 문제까지 제공해주는데 따라가기 쉽다. Square에서만 이벤트가 시작되는 초기 단계에서 Square에서 발생된 이벤트가 Game 객체의 state를 변경시키는 것까지로 마무리 된다. 소스코드를 다시 보고 추가 문제를 풀어봐야겠다.

ReactJS에서 또다른 특징이 Server-side Rendering 으로 알고 있는데, 튜토리얼 후에 그 부분과 Ajax처리.. Fetch 인지 Request인지 그 부분도 공부해야할 필요가 있을것 같다.

튜토리얼을 따라가며 만들었던 소스는 github에 올려두자

https://github.com/sok891111/reactJStutorial

[ReactJS] ReactJS 튜토리얼 따라하기 – 개발 환경 구성

이번 글은 https://facebook.github.io/react/tutorial/tutorial.html 의 튜토리얼을 따라해본 것이다.

Javascript 로 Jquery를 주로 사용했던 개인 경험에 비춰보면 이건 신세계다.

마치 backend에서 빌드 파이프라인을 구축하듯이 front-end 또한 파이프라인을 구축한다. (튜토리얼에 따르면 파이프라인 없이도 ReactJS를 사용 가능하다.)

“A modern build pipeline” 은 3가지로 구성되어 있다.

  1. package manager : npm , yam 같은 페키지 매니저 들인데, 이들은 에코시스템의 third-party 패키지들을 쉽게 설치/업데이트 가능하도록 도와준다.
  2. bundler : webpack, browserify 등이 있는데 Javascript의 모듈화를 도와주는 도구들이다. 모듈들을 작성하여 webpack으로 컴파일 하면 bundle.js 를 생성할 수 있는데 이를 통해 브라우져에서 실행 할수 있게 되는 구조이다. 자세한 내용은 http://d2.naver.com/helloworld/0239818
  3. compiler:  Babel 등이 있는데 ES6 같은 모던 javascript 문법들로 작성된 javascript 파일을 브라우져가 인식 할 수 있는 파일로 만들어 주는 도구들이다.

http://www.looah.com/article/view/2054 (사랑해요 javascript)

위의 3가지를 갖춘 후 ReactJS를 설치하고 사용해보자

npm 설치 후 webpack은 여기서 , Babel은 여기서. npm만 설치 된다면 다른 도구들 설치는 어렵지 않음(npm은 세계에서 가장 많은 모듈을 가진 저장소)

webpack을 베이스로 babel 모듈을 설치해서 개발 환경을 구성하였다.

webpack 에서 babel을 이용해서 빌드 할 경우 아래 두가지는 npm으로 설치

npm install –save-dev babel-preset-es2015
npm install –save-dev babel-preset-react

프로젝트 파일 구조는 일단 이렇게 가보자 ( 참고 : https://velopert.com/814 )

 

.

├── package.json        
├── dist            # 서버 운영 파일
│   └── index.html    # 메인 페이지
├── src               # React.js 프로젝트 루트
│   ├── components    # 컴포넌트 폴더
│   │   └── App.js    # App 컴포넌트
│   └── entry.js      # Webpack Entry point
└── webpack.config.js # Webpack 설정파일
이렇게 환경이 구성되면이제 드디어 ReactJS 튜토리얼을 따라해볼 수 있다.
개발 환경 구성이 길어지면서 튜토리얼 내용은 다음 글에서 정리하겠다.
p.s ReactJS는의 클래스는 첫글자가 대문자인 캐멀 네이밍 룰을 따른다는것을 기억하자
실제 튜토리얼은 여기서

[javascript]실행문맥과 closure

자바스크립트를 공부중이다.

자바스크립트는 scope 에 대해 다른 언어들과 다른 특징을 가지는데

먼저 유효범위에 있어서

  1. 블럭 범위가 아닌 함수 범위이다.
  2. 중복된 변수명의 경우 현재 실행문맥의 활성화 객체에서 먼저 찾는다.
  3. 유효범위가 실행환경이 아니라 함수 정의환경이다

자바스크립트는 실행 될때 실행문맥을 생성해서 자바스크립트의 콜스택에 쌓는다.

그럼 실행문맥은 무엇일까?

실행 문맥은 자바스크립트 함수가 실행될때 필요한 정보들을 담고 있는 객체라고 생각하면 된다. 실행 문맥속에는 활성화 객체(변수,함수 등의 정보), 유효범위(chain scope),this 객체를 가진다.

위의 코드가 실행 될때 자바스크립트는 전역컨택스트를 생성하여 콜스택에 쌓는다.

전역 객체에는 o, F1 이 존재하고

다음으로 F1() 이 실행 될때 F1 실행 컨택스트를 콜스택에 쌓는데

이때 실행 문맥에는

  1. 활성화객체 – a :10 , F2
  2. scope chain – 0(0번은 전역)
  3. 이 시점의 실행문맥을 this 에 바인딩 – this.a , this.F2()

그리고 F1이 실행되면서 F2가 실행 되는데 다시 콜스택에 F2의 실행 문맥이 쌓이고

F2의 실행문맥은

  1.  활성화 객체
  2. scope  chain – 0(전역) , 1(F1)
  3. this

로 구성된다.

이런 자바스크립트의 scope가 중요한 이유는 closure라는 개념 때문인데

기본적으로 자바스크립트는 garbage collector를 사용하는 언어이다.

따라서 더이상 사용(참조)되지 않는 변수는 가비지 컬렉션 대상이 되어 메모리에서 해제된다.

하지만 closure를 사용한다면

function 1(){

function 2(){
}

}

1번 함수 가 종료 된 후에 2번 함수가 실행 될때, 1번 함수의 변수를 참고하고 있다면(scope chain 에 의해 해당 변수를 사용 가능) 1번 함수는 가비지 컬렉션 대상이 되지 않는다. 결국 2번 함수의 의해서 1번함수는 닫힐수 있게 되는데 이때 2번함수는 closure가 된다.

이런 상황에서는 다음과 같은 몇가지 장점을 가질 수 있게 되는데

  1. 1번함수의 변수들은 외부에서 접글 할수 있다.(캡슐화)
  2. 각 변수는 해당 scope에서만 참조 되므로 전역변수의 남용을 막을 수 있다.
  3. 변수의 충돌을 막아 자바스크립트 모듈 패턴을 사용할수 있다.(라이브러리화)

하지만 closure는 단점도 존재한다. 1번함수가 가비지 컬렉션에 의해 메모리에서 해제 되어야 하나 계속 해제 되지 못하고 있을 경우 성능 저하의 문제가 된다. 또한 소스 를 파악하기 어렵다.

[javascript]유용한 Array 내장 함수

자바스크립트 Array 내장 함수중 유용한것 몇가지를 적어놓는다.

위의 코드는 해당 배열에서 “a” 값이 존재하는지를 확인하는 코드이다. (지금까지 이렇게 코딩함)

하지만…

Array 의 some 함수를 이용한다면

이렇게 간단해 진다.

 

Array.some() 의 경우 어느 하나라도 true일 경우 true 를 return  하고

Array.every() 의 경우 모든 요소가 true 일 경우 true를 return 한다.

 

위의 두 함수를 사용하면 코드양을 엄청 줄일 수 있을것 같다.

[javascript]IE8에서 getElementsByClassName()사용하기

IE8에서  getElementsByClassName가 안된다. 이게 안될줄 전혀 생각하지 못했네

위의 코드를 넣어서 사용하자

참고 url : http://zinee-world.tistory.com/140

[javascript]배열의 최대값, 최소값 구하기

@ 이 글은 http://programmingsummaries.tistory.com/108 를 참고하였습니다.

배열의 최대값 최소값 을 구하기 위해서 javascript 내장 함수인 Math.max를 사용한다

위의 블로그에서 다양한 방법을 소개하고 있지만

나는 이게 젤 편하더라

[Javascript]IE8에서 map function 사용하기

 

위의 코드를 추가하면 Array 의 prototype 에 map 이라는 function 을 추가하게 된다.

IE8 이하에서 Map function 사용을 위해 추가하도록 하자!