Front web 개발 스터디

Front web 개발(angular, react, nodejs etc...) 분석

github 등에 front web 개발 관련해서 자료가 엄청 방대함.
2016년 frontweb 쪽에서 react 가 검색 상승 순위 1등 먹음. 하지만 react 여전히 angular 가 검색되는 빈도를 못따라옴. 최근에 vue js 라는게 상승세에 있다. 현재 앵귤러 2가 나오고 이쪽으로 밀어주고있다. 2에서는 프레임워크가 아닌 컴포넌트 되었다고 하고 있다.

• 앵귤러1 공식 사이트-> http://www.angularjs.org
• 앵귤러2 공식 사이트-> http://www.angular.org

참고하기 좋은 사이트

velopert - 유튜브랑 블로그를 잘 만들어 놓았다. 주말 새벽에 실시간으로 유튜브 코딩 방송을 한다. react 관련 해서 강의가 잘되어있고 최근데 vue.js 글이 올라오고 있다.

github 에서 angular를 사용하는 개인적으로 찾은 좋은 프로젝트가 있는데 jhipster 라는게 있었음. 이를 활용하여 학습을 진행하였음.

잘 만들어진 프론트웹 프로젝트에서 공통적으로 프로젝트 관리 목적으로 npm 을 사용하는것을 볼수 있음. 프로젝트 폴더 바로 아래에 package.json 파일이 있으면 nodejs 프로젝트 인걸 알수 있음.

대부분의 인지도 있는 github 프로젝트 (angular, react etc 등을 사용하는 frontweb 개발 프로젝트) 들이 nodejs 를 사용해서 프로젝트를 관리하고 있다. webserver 등을 올리는 일을 nodejs 에서 제공하는 웹서버 모듈을 사용하여 올리기도 한다. 각각이 사용하는 모듈들은 다양한다. 모든 모듈을 알 필요없고 모듈들을 관리해주는 또는 빌드해주는 주요 모듈들만 알면 된다. 프로젝트의 기본 틀을 만들기 위해서 주로 사용하는 module 들 10개 안팎이다.

(bower, gulp, grunt, yarn, yo 등이 있는데 git 프로젝트 마다 사용하는 모듈들이 다르지만, 대부분 README.md 에 installation document 를 가지고 있으니 걱정 안해도 된다. 없으면.. 알아서 설치를...)

결론 - npm을 사용하면 프로젝트에 사용된 모듈 관리를 편히 할수 있고, 개발도 수월하게 할 수 있고, 뛰어난 개발자들과 개발 방법론...등도 공유할수 있다.

npm(node package manager) 은 다른사람이 만들어 놓은 package module을 받아서 사용하는 것을 관리해준다. http://www.npmjs.com 라는 사이트가 있는데 가장 최근에 만들어졌으면서도 급속도로 성장하여 현재는 제일 방대한 오픈소스를 보유하고 있다고한다.

npm 을 통해서 모듈을 설치하는 방법은 2가지 방식이 있는데 해당 프로젝트에만 설치하는 방법.

npm install bower  

해당 디렉토리에만 node_module이 설치 된다. 해당 디렉토리를 열만 폴더가 생성되어있다.

npm install bower -g

글로벌(전역)으로 설치가 된다. 어느 프로젝트에서든 사용이 가능하다.

기타 - React js 맛보기

react 는 view 만을 관리하는 자바스크립트 라이브러리이다. 비동기 호출하는등 data 를 다루는 등의 행위는 하지 않는다. DOM 객체에 대해서만 행위를 한다. html DOM 에 대해서만 (그리는 부분을 담당한다.) 관리한다. 특징적인 면은 jsx 라고 js 내에서 html 태그를 사용한다는 점이다. html 코드는 가독성을 높혀 주기 때문이다. 하지만 이를 다시 js 로 convert 하는 과정을 거쳐주어야한다.

node.js 설치

설치 프로그램에 npm 이 포함되어있다. 32bit 용, 64bit 용이 있고 모든 os 호환되고 binary 파일을 압축한 형태로도 있다. binary 는 따로 환경변수를 잡아주어야한다.

Angular 1.x 대략적인 분석 - 개발자 관점

앵귤러 1.x 는 MVVM (model, view, view model) 형태로 되어 있다. 인터넷 검색해서 나오는 그림을 참고한다.

앵귤러를 다룰때 주로 나오는 키워드(api 에 conceptual 이라고 찾으면 잘나와있다.)

• module,
• directive,
• controller,
• config,
• service,
• scope (data binding 관련 일을 함 ★)
• state

사용자 정의 directive 는 html 에서는 underscore 표기법을 사용하고 js 넘어 와서는 Camel 표기법을 사용한다. ex) active-menu -> activeMenu html 에서 대소문자를 구분하지 않기 때문인 것으로 생각된다.

앵귤러는 spa 싱글 페이지 어플리케이션을 만들기 위한 자바스크립트 프레임워크이다. 웹 게임이나, 디테일한 웹 조작이 필요할때는 앵귤러는 효율성이 떨어지고, jQuery 등을 사용하는것이 좋다고 한다. single page 라고하지만 html 은 여러개로 프로젝트를 구성하여 화면 변경시에 이 페이지들을 앵귤러가 비동기 호출하여 부분적으로 호출한다. index.html 이 main 이며, 이 화면은 새로고침되지 않는다. 비동기 호출을 통해 화면을 변경한다.

비동기 호출이란? (for 퍼블리셔)

퍼블리셔가 앵귤러로 접근하는데 필요한 learning curve 가 상당할 것으로 예상한다. 비동기 데이터 호출이라는 어찌보면 가시적이지 않고 추상적인 내용이다. 화면 변경없이 서버에 데이터를 주고 받을때 사용하게 된다. 예를들면 다음이나 네이버 카페의 댓글 추가 하는 경우에 사용된다. DB 에 단순히 댓글 입력 추가하는데 페이지 전체를 새로고침하는거는 비효율적이고 이를 일반적인 DB에 글을 작성하는 게시판을 만들게 되면 글의 내용을 전달하려면 페이지 전환이 되게 되는데 이 비동기 호출은 이를 막아준다.

주요 directive (사람마다 주로 쓰는게 다름)

• ng-click(click event 부여할때 사용)
• ng-model(양방향 데이터 binding 을 할때 사용되는듯 하다?)
• ng-show
• ng-hide
• ng-submit(서버에 데이터를 전달한때 주로 사용한다)
• ng-repeat(서버에서 목록을 불러와서 회기문을 사용할때 주로 사용한다.ex.for문)
• ng-class
• ng-options
• ng-disabled
• ng-change

data binding

• {{expession}} 을 통해서 데이터를 양방향 묶어준다.(bind)

http method (네트워크 기초)

우리가 브라우저에서 웹 페이지를 불러올때 url address 만 사용하지만 내부에는 기본적으로 http header 정보를 포함하여 page 를 request(요청) 하게 된다. 그 header 정보에는 여러 정보가 포함되어 있다. 우리가 URL 을 쳐서 들어가는 거는 GET 메서드를 사용한다. 아래는 http request header 정보에 POST 를 명시한 예시이다. http 프로토콜은 일반적으로 요청(request)과 응답(reponse) 으로 이루어진다.

http request header example

POST http://localhost:8080/user/login HTTP/1.1
Accept-Encoding: gzip,deflate
Content-Type: application/json;charset=UTF-8
Content-Length: 41
Host: localhost:8080
Connection: Keep-Alive
User-Agent: Apache-HttpClient/4.1.1 (java 1.5)

http reponse header example

HTTP/1.1 202
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS, DELETE
Access-Control-Max-Age: 3600
Access-Control-Allow-Headers: x-auth-token, content-type
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
x-auth-token: 47e92231-ee38-478d-88e2-355d0ae5276c
Content-Type: application/json;charset=UTF-8
Transfer-Encoding: chunked
Date: Fri, 10 Mar 2017 07:36:05 GMT

{"username":"keehyun2","name":"keehyun Park","authorities":[{"authority":"USER"}],"token":"47e92231-ee38-478d-88e2-355d0ae5276c"}

RESTFUL 서버와 연계하여 angular 를 많이 개발하는데 이 http method 와 해당 기능을 알아야한다. 개발자들은 CRUD(create,read,update,delete) 라는 용어를 많이 접하였을 것이다. DB SQL 명령어 * (insert,select,update,delete)* 와 대등하다 볼수 있다.

다음 http method 도 통상적으로 아래 목록과 같이 대당하게 사용된다. 개발자가 정의함에 따라 달라질 수 있다.

• get -> read
• post -> create
• put -> update
• delete -> delete

angular 의 $resource service 가 위 method 들을 사용한다. 다음과 같은 object 를 리턴한다.

{ 'get':    {method:'GET'},
  'save':   {method:'POST'},
  'query':  {method:'GET', isArray:true},
  'remove': {method:'DELETE'},
  'delete': {method:'DELETE'} };


  src/main/webapp/app/**/*.js,src/main/webapp/app/**/*.html