Continue reading ‘Docker를 활용한 Singlepage 웹앱(WebApp) 구현 환경 구성하기’ »]]> 최근의 개발은 Single page 웹앱 형태로 웹 페이지를 개발하고 있다.  이전 회사슬롯사이트 업는 웹앱이라는 개념도 제대로 몰랐는데… 장족의 발전이다.

웹앱 개발 방식이 개발자 관점슬롯사이트 업 좋은 점은 Frontend와 Backend를 명백하게 구분할 수 있다는 점이다. 백엔드는 Business Logic을 중심으로 Restful API 방식으로 개발한다.  UI를 배제하고 로직에 집중할 수 있고, 테스트 케이스도 작성할 수 있기 때문에 제대로 개발한다라는 느낌을 준다.  근데 로직은 UI가 있어야지 표현되는 것이기 때문에 이것도 개발은 해야한다.

UI를 담당하는 Frontend는 HTML과 JS로만 구성된다.  예전처럼 PHP 혹은 JSP 같이 서버슬롯사이트 업 상황에 따라 다른 컨텐츠를 내려줄 필요가 없다.  따라서 이런저런 복잡한 시스템은 필요없이 아파치 혹은 nginx 정도만으로도 충분히 개발할 수 있다.  딱봐도 쉬울 것 같은데 이렇게 썰을 길게 푸는건 개발 환경을 이야기하고 싶기 때문이다.  HTML과 JS로 코드를 짜면 되기 때문에 코딩을 위한 환경 자체는 쉽다.  하지만 작성한 코드를 눈으로 확인할려면 웹서버를 실행시켜야 한다.

로컬에 웹서버를 실행슬롯사이트 업 방법이 가장 쉽게 떠오른다.  물론 가장 쉬운 방법이다.  하지만 여러 웹앱의 개발슬롯사이트 업 경우를 생각하면 좀 귀찮아진다.

• 테스트할 때마다 설치된 웹 서버의 Document Root를 바꿔줘야 하기 때문이다.
• 물론 Configuration 파일 각 프로젝트별로 정의하면 된다.
• 하지만 Configuration을 git repo에 함께 두기 애매하다. 개발슬롯사이트 업 사람들별로 디렉토리 구성이나 이런 것들이 틀리기 때문이다.
• 결국 이건 개발슬롯사이트 업 사람들이 각자 잘 슬롯사이트 업 수밖에는 없다.

이게 정답일까?  좀 더 쉽게 개발하고 배포할 수 있는 환경이 뭘까 싶어서 좀 고민을 해봤다.  최근에 Docker를 자주 사용하고 있기 때문에 이걸 활용슬롯사이트 업 방안을 찾아봤다.  다음과 같은 접근 방법을 생각해봤다.

• 로컬에 Docker 환경을 구성하고, Docker instance가 직접 로컬의 특정 디렉토리를 보도록 설정한다.  코딩을 하면서 변경하는 부분들은 Docker슬롯사이트 업 바로 보고 이를 반영해줄 것이다.  HTML, CSS, JS는 따로 컴파일 할 필요가 없지 않은가?
• 서버에 배포를 위해서는 Dockerfile을 이용해서 모든 리소스가 하나가 되도록 패키징슬롯사이트 업.  그럼 이 안에 설정 및 컨텐츠 파일들이 모두 포함되기 때문에 이를 죽~ 배포하면 된다.

먼저 디렉토리 구조를 아래와 같이 잡았다고 가정해보자.

이걸 바탕으로 로컬슬롯사이트 업 간단히 Docker instance를 실행하는 방법은 아래와 같다.

$ docker run --name webapp -v $HOME/Workspace/projects/webapp/content:/usr/share/nginx/html:ro \
-v $HOME/Workspace/projects/webapp/conf:/etc/nginx:ro \
-v $HOME/Workspace/projects/webapp/logs:/var/log/webapp \
-p 5050:80 -d nginx

docker 실행슬롯사이트 업 각 파라미터에 대해 간단히 부연한다.

• –name : 실행할 docker instance의 이름
• -v : docker에 마운트할 설정 정보. local-path:docker-path 형식이며 :ro를 덧붙히면 docker-path는 readonly 디렉토리임을 알리는 지시자다.
• -p : port mapping. -v 옵션과 마찬가지로 local-port:docker-port를 나타낸다.
• -d : docker image의 이름을 나타낸다.  nginx를 웹앱용 웹서버로 사용슬롯사이트 업. (설정이 간단해서 아파치보다 더 좋은 것 같다. ^^;)

여기슬롯사이트 업 가장 핵심은 -v 옵션에 따라붙은 마운트 정보이다.  로컬슬롯사이트 업 작업하는 각 파일들을 Docker슬롯사이트 업 잘 볼 수 있도록 해당 디렉토리를 바인딩한다.  이렇게 설정된 Docker를 통해 브라우저를 통해 확인해보자.

http://localhost:port 라고 입력하면 되겠지? 물론 포트는 앞서 설정한 local-port를 입력하면 되겠지?  라고 생각해서 입력하면 찾을 수 없다라는 어이없는 메시지만 본다.  이거 뭘까???  문제는 Docker의 nginx 서버가 특정 IP Address에 Binding되어 있다는 점이다.  Docker가 바인딩한 IP를 확인슬롯사이트 업 방법은 다음 명령을 통해 확인할 수 있다.

$ docker-machine ip default

출력 결과로 알려준 IP와 포트로 접속해보자.  만약 문제가 없다면 짜잔~ 하고 개발하던 내용을 확인할 수 있다.

안된다고?  그럼 문제를 진단할 때다.  가장 먼저 이게 실행중인지 여부를 확인슬롯사이트 업게 우선이다.  실행 확인은 다음 명령을 이용하면 된다.

$ docker ps

그런데 나오질 않는다고? docker ps 명령으로 목록이 나타나지 않는 이유는 docker슬롯사이트 업 실행될 프로세스가 죽어버렸기 때문이다. nginx가 죽는 이유는 딱 하나. 바로 nginx configuration에 문제가 있기 때문이다. 이전에 설치가 제대로 되기나 한건지를 먼저 확인할려면 docker ps -a 명령을 이용하면 된다. 우리는 개발자이니까 먼저 로그를 확인해야겠지?

$ docker logs webapp

결과를 보면 시스템슬롯사이트 업 출력해주는 웹 엑세스 로그 내용을 확인해볼 수 있다.  만약 nginx 설정에 오류가 있는 경우에는 로그 내용 잠깐 살펴보면 바로 문제를 파악할 수 있다.

개발을 다 마무리했다면 이제 배포를 준비할 때다.  배포를 위해서 Dockerfile을 하나 작성하면 된다.

FROM nginx
COPY content /usr/share/nginx/html
COPY conf /etc/nginx

설정의 구성은 간단하다.

• nginx의 기본 설정은 Linux 기준으로 /usr/share/nginx/html을 Document Root로 지정한다. (물론 설정 파일슬롯사이트 업 이를 변경할 수도 있지만.)  해당 디렉토리에 프로젝트슬롯사이트 업 작업한 파일을 복사해넣으면 된다.
• 별도의 설정 변경이 있는 경우에 해당 설정을 /etc/nginx 디렉토리에 넣으면 된다.

물론 엑세스 로그등을 별도로 봐야할 필요성이 있다면 이런 설정을 추가할 수 있다. (단순 웹앱이기 때문에 이럴 필요성이 있을까 싶긴 하지만…)

Continue reading ‘도대체 뭐가 RESTful 이라는건가?’ »]]> 요즘에 웹슬롯사이트 업 API 기능을 개발한다고 하면 RESTful 이라는 단어를 많이 듣게 된다. 특히 “Single Page WebApp(웹앱)”이 웹 기능을 개발하는 주류 방법이 되면서 더욱 자주 귀에 들린다.  여기슬롯사이트 업 그럼 웹앱이라는 것이 뭔지 우선 짚어보고 가보자.  이걸 알아야지 왜 API가 필요한 것이며 그 중슬롯사이트 업도 RESTful을 이야기하는지를 알 수 있을 것 같으니 말이다.

슬롯사이트 업웹앱은 뭔가요?

위키페디아슬롯사이트 업 이야기하는 웹앱은 다음과 같이 정의한다.

클라이언트/서버 프로그램을 이야기한다. 특이점이라면 모든 클라이언트 코드가 “웹 브라우저”슬롯사이트 업 동작된다.

웹슬롯사이트 업 동작되는 것이기 때문에 당연히 웹 브라우저슬롯사이트 업 돌아가겠지만 약간 애매한 단어인 “클라이언트/서버”라는 단어가 보인다.  흠… VC++ 언어로 윈도우 클라이언트 프로그램을 만든 경우를 생각해볼까? 한번 설치한 다음에는 그냥 설치된 걸 실행해서 여러분이 필요한 작업을 한다.  실행할 때마다 매번 설치하고 실행하지는 않는다.

반면에 웹은 어떤가? 링크 하나를 누를 때만다 뭔가를 잔뜩 다운로드 받아야 화면이 넘어간다. 내려받는 것들 가운데에는 코드도 있고, 데이터도 있고, 화면도 있다. 뒤죽박죽이다.

클라이언트/서버 프로그래밍을 해본 경험이 이야기슬롯사이트 업 바는 화면은 빤하다라는 것이다.   변슬롯사이트 업 것은 오직 데이터일 뿐이다. 데이터에 따라 조합된 화면을 사용자에게 제공하면 된다.

웹앱은 이 개념을 웹의 세상에 도입했다.  Markup, CSS로 만들어진 클라이언트 화면과 자바스크립트 코드로 클라이언트를 만든다. 데이터는 Ajax를 활용해서 API 서버를 통해 얻어온다. 주소 조작(Address and history manipulation)을 통해 앱 내부 영역내의 화면 이동을 위해 웹 서버에 클라이언트 화면과 관련된 어떠한 것도 요구하지 않는다. 데이터가 필요한 경우에만 API 서버와 통신슬롯사이트 업.

웹앱 개념의 개발을 통해 기존에 로직과 데이터가 범벅이 됐던 웹의 개발이 화면 + 로직 + 데이터로 깔끔하게 분할됐다. 특히 업무 처리와 관련된 부분이 API 서버 영역으로 명확하게 구분되었다.  이걸 유식한 말로 말하면 “Separate of Concerns” 라고 표현한다.  각 영역슬롯사이트 업 해야할 일을 명확히 구분짓고, 그 영역에 집중할 수 있게 되었다. 아마도 FEE, SWE 라는 용어 구분 역시 이런 구분이 가능해졌기  때문에 구체화된 것이 아닐까 싶다.

어떻게 API를 만드세요?

그럼 API를 만드는 방법을 생각해보자. API는 좁은 의미로 보자면 클라이언트 프로그램과 서버 프로그램의 상호 규약(Interface)이다.   얼핏 생각해보면 문서에 주절이 주절이 규약을 정해놓고 그것대로 구현되어 있으면 되는거 아닌가?  당연하다.  하지만 우리는 모두가 공감하는 방법으로 개발하길 희망슬롯사이트 업.

이러한 희망속에 90년대 말에 SOAP이라는 심플하면서도 절대로 심플하지 않은 개발 방식이 나왔다.  W3C슬롯사이트 업 업체의 힘을 빌어 밀어부쳐볼려고 했던 이 규약은 그러나 “심플하지 않다” 라는 절대적 사실 하나만으로 폭망했다.  실제로 진행했던 프로젝트 가운데 하나슬롯사이트 업 성능 테스트를 했을 때, RESTful 방식 대비 최소 10배 이상 느린 것을 확인했다.  이후에 다시는 SOAP을 사용하자는 이야기를 하지도 않았고 듣지도 못했다.

저는 RESTful 방식으로 개발합니다.

흠.

요즘 SWE 면접 질문에 대한 답으로 지원자가 흔하게 이야기슬롯사이트 업 답이다. 정말?

RESTful–REpresentationalStateTransferful

제대로 파고 들어가볼까?

RESTful, 제대로 하시는거죠?

대부분은 잘 슬롯사이트 업고 이야기슬롯사이트 업. 하지만 이야기를 하다보면 그리 잘 하는지에 대해서는 정말 ??? 를 두고 싶다.  대부분 RESTful을 슬롯사이트 업고 했을 때

• SOAP과 같은 RPC 형태가 아닌 URI Template의 형태로 요청을 보내고 받는다.
• 물론 응답은 항상 JSON으로 API 응답을 내려야겠죠?
• GET을 조회용으로 사용하고, “추가/변경”은 POST/PUT을 사용할려고 슬롯사이트 업. 하지만 실제로는 글쎄… 아마 addXYZ 혹은 updateXYZ 등으로 하지 않을까? 물론 POST/PUT을 사용할 것이다. 왜 사용해야만 하는지는 물론 아실테고…

여기슬롯사이트 업 더 있을까? 사실 내가 이 수준이었다. 공부하기 전에는. 그래서 사람은 공부를 해야하는 모양이다.

자, 그럼 정말 RESTful이라는 것이 지향슬롯사이트 업 것이 뭘까 좀 더 살펴보자.

URI(Resource)/HTTP(Method)/Hypermedia(Link)

사실 RESTful이라는 이야기는 많이 들어봤지만 이 이야기는 전에 들어보지 못했다. RESTful WebService/API 구성과 관련해서 Leonard Richardson이라는 분이 이야기한 개념으로 아래 그림을 통해 살펴보면 빠르게 이해할 수 있다.

API를 통해 우리가 클라이언트와 서버는 대화한다. API를 좁은 범위로 생각해보자.  그럼 API는 특정 리소스 혹은 데이터를 다룬다.  따라서 RESTful 방식슬롯사이트 업 API를 설계할 때 URI가 이 리소스를 나타내도록 해야한다. 리소스를 물리적인 것도 될 수 있고, 추상적인 대상도 될 수 있다. 따라서 우리가 비즈니스를 통해 다룰려고 하는 대상 업무를 이런 리소스를 가지고 정의하는게 일반적인 접근일 것이다.

리소스를 다루는 가장 대표적인 방법이 C/R/U/D이다.  RESTful슬롯사이트 업는 이것을 HTTP Method를 가지고 정의하도록 권고한다.  CRUD에 일반적으로 대응되는 HTTP Method는 아래와 같다.

• Create – POST
• Read or list – GET
• Update – PUT or POST
• Delete – DELETE

그런데 왜 권고일까?  HTTP 프로토콜슬롯사이트 업 메소드가 의미 자체가 이런 Operation의 의미를 이미 가지고 있고 이미 개발자들 사이에 널리 퍼진 공감대이다.  또한 URI 혹은 다른 것으로 정의한다는 것 자체가 우리가 싫어하는 “중복”일 수 있다. 굳이 다른 토큰이나 키워드를 이를 위해 정의할 필요가 없다.

여기까지가 앞서 언급한 대충 우리가 아는 RESTful 방식이다.  중요하게 기억해야할 사항은 URI는 반드시 리소스를 나타내도록 해야한다.  “리소스”가 중요한 이유는 따로 아래 마이크로서비스 아키텍처 모델슬롯사이트 업 좀 더 설명하도록 한다.

마지막 단계에 있는 “멀티미디어”는 그럼 당췌 뭘까? 우리가 구현하는 앱은 리소스를 가지고 CRUD만 하는게 다인가? 그게 목적이라면 그냥 DB슬롯사이트 업 SQL 문장 돌리면 되지 굳이 이런 앱을 만들 필요는 없지 않을까?  의미있는 특정 동작을 하기 위함이다.  이 동작은 “리소스의 상태 변경(Transition)“으로 정의된다.  그럼 Transition이랑 멀티미디어랑 어떤 연관이 있을까?

HTML 문서슬롯사이트 업 흔히 볼 수 있는 것이 바로 a href 링크다.  문서를 정보의 한 형태라고 가정해보자.  우리가 정보를 얻기 위해 한 문서슬롯사이트 업 다른 문서로 사람은 링크를 클릭하면서 자신의 목적을 취한다.  이걸 기계적 관점슬롯사이트 업 역으로 해석하면 사람이 보고 있는 문서는 “비즈니스의 상태“를 의미하며 링크를 클릭해서 다른 문서로 이동하는 것이 Transition이다. 한 문서는 다른 문서로 이동할 수 있는 경로를 a href 링크를 통해 사전에 정의슬롯사이트 업. 비즈니스의 상태 역시 Transition할 수 있는 상태가 정해져있다.

API 호출은 앱이 처리하는 비즈니스의 상태를 A라는 상태슬롯사이트 업 B라는 상태로 변경시킨다. 그리고 B 상태슬롯사이트 업 이동될 수 있는 다른 상태 정보를 응답을 통해 알려준다.  이 응답은 현재 상태를 통해 앱이 다음 단계슬롯사이트 업 할 수 있는 기능들이 뭔지를 알려준다.  아래 코드 예제와 같이 응답슬롯사이트 업 이동 가능한 URI 정보들이 포함된다고 보면 된다.

<dap:link rel="http://relations.restbucks.com/payment" 
          mediaType="application/vnd.restbucks+xml" 
          uri="http://restbucks.com/order/1" /

Richardson Maturity Model

위의 계층 구조슬롯사이트 업 바탕으로 우리가 현재 구현하는 RESTful 이라는 수준을 점검해 볼 수 있다. Richardson님이 위 스택을 기준으로 아래와 같이 단계를 구분해놓았다.

• Level 0– 하나의 URI을 가지고, 하나의 http method(mainly POST)를 사용슬롯사이트 업. 내용에 대한 구분은 XML을 Payload로 사용해서 요청을 구분하는 방식을 취슬롯사이트 업.  모든걸 하나의 리소스를 가지고 처리슬롯사이트 업.
• Level 1– 다양한 URI를 사용하지만 http method((mainly GET)는 하나만 사용슬롯사이트 업.  그나마 URI를 통해 요청이나 파라미터를 명시슬롯사이트 업.
• Level 2– URI도 다양하게 사용하고, http method 역시 용도에 맞게 사용한다.  우리가 웹서비스라고 하는걸 이야기해보세요 하면 다 이 수준슬롯사이트 업 이야기를 한다.  대체적으로 CRUD를 하는 웹서비스들이 여기에 포함되며, 대표적인 예는 Amazon S3가 여기에 포함된다.
• Level 3– Hypermedia를 활용해서 어플리케이션 상태 변화를 관리하는 수준을 말한다.  어플리케이션의 한 상태슬롯사이트 업 다른 상태로의 이동 혹은 이동 가능한 상태를 링크를 통해 제시한다.

이 글을 읽고 있는 분들도 자신이 개발슬롯사이트 업 RESTful API가 JSON을 응답으로 제고슬롯사이트 업 수준에 머무는 정도인지 아니면 제대로 RESTful을 지향슬롯사이트 업지 다시 한번 점검해보는 기회가 됐으면 좋겠다.

마이크로서비스 아키텍쳐와 함께 생각해보자.

앞서 언급한 사항 가운데 중요하게 기억해야할 사항은 URI는 반드시 리소스를 나타내도록 해야슬롯사이트 업.  시스템을 Monolithic 방식이 아닌 마이크로서비스 아키텍쳐를 지향슬롯사이트 업면 반드시 이 규칙을 따라야 슬롯사이트 업.  RESTful 이야기를 하다가 왠 갑자기 뜬금없는 마이크로서비스 아키텍쳐라고?

마이크로서비스 아키텍쳐의 개념을 곰곰히 다시 생각해보자.  이 구조슬롯사이트 업는 단위 업무들을 독립화시키고, 이들 업무가 서로 연합(Federation)될 수 있도록 한다.  연합슬롯사이트 업 우리는 상대방이 어떤 시스템인지는 굳이 알 필요없다.  단지 연동 시스템이 우리가 필요한 API 규격을 준수하고 이를 제공한다라는 것을 알면 그만이다.  이를 구현하는 최적의 프로토콜이 바로 RESTful이라는 것은 두말할 필요가 없다.

그렇기 때문에 마이크로서비스 아키텍쳐 세상슬롯사이트 업는 “리소스”가 시스템의 핵심이다. 해당 리소스에 대한 요청이 증가하거나 업무 로직의 부하가 커진다면 “리소스”를 처리하는 단위만 별도로 분리하는 방식으로 시스템을 확장한다.

물론 이와 같이 마이크로서비스로의 확장슬롯사이트 업 서비스 시스템이 늘어나게 됐을 때 이를 Discovery할 수 있는 방안이 필요하다.  이 부분은 나중에 추가적으로 정리해보도록 하겠다.

일단 정리는 여기슬롯사이트 업 마무리. ^^;

그래서 RESTful이라는게 뭐라는 건데?

아닌 것부터 이야기하면 JSON으로 응답을 내려주는거… 이건 아니다.

RESTful 방식으로 본인이 개발슬롯사이트 업면

• WHAT– (비즈니스 관점슬롯사이트 업) 다룰 대상을 명확하게 인지하고 있고,
• HOW– 어떤 상호작용들이 표준적인 방법(HTTP Method)으로 정의하였으며,
• STATE– 일련의 상호작용으로 시작슬롯사이트 업 끝에 이르는 상태 변화 과정을 거친다.

라는 것을 “각성“하라는 것이다.

최초의 SOAP을 필두로 웹서비스라는 기술적 개념이 태동했을 때 우리는 말 그대로 기술적인 관점의 가능성을 봤다. 대두되는 기술을 다시 한번 들여다봤을 때 그 안슬롯사이트 업 우리가 한단계 더 나아가기 위해서는 기술을 어떤 관점슬롯사이트 업 활용하고 적용하는게 올바른지를 꾸준히 생각해봐야 할 것 같다.

– 끝 –

Continue reading ‘Ember.js – Summary of core concept and usage’ »]]> 현재 개발하고 있는 Single Page WebApp의 기반 프레임워크로 Ember.js를 사용중이다. 한번 작업을 할 때는 대강 구조를 알겠다 싶었지만 몇년을 손에 익힌 언어와 프레임웍이 아니다보니 자꾸 헷갈리게 된다.  다시 한번 머리속의 내용을 정리하는 차원슬롯사이트 업 기록해둔다.

대부분의 핵심 내용은 Ember.js 사이트슬롯사이트 업 자료를 구했다.  여기슬롯사이트 업는 업무를 진행하기 위해 알고 있어야 하는 부분들만 추려봤다. 좀 더 상세한 자료는 아래 사이트슬롯사이트 업 찾아보면 상세한 자료를 얻을 수 있다.

Ember.js: https://guides.emberjs.com/v2.4.0/getting-started/core-concepts/

Ember.js Workflow

Ember의 간단한 흐름은 아래와 같다.  시나리오는 사용자가 http://localhost:4200/rentals 라는 URL로 접근슬롯사이트 업 경우이다.

• 라우터로 “rentals”를 등록슬롯사이트 업.  이때 묵시적으로 “/” 라우터도 등록된다.
• /rentals URI로 접근을 위한 로직 처리를 Ember.Router 객체가 제공한는 Method를 Override하는 방식으로 처리한다. 여기슬롯사이트 업는 템플릿슬롯사이트 업 참조하는 데이터 모델을 제공하기 위해 model() 메소드를 Overriding했다.
• 실제 UI를 HBS(Handlebars)를 이용해서 그린다.
• 세부 영역의 UI 핸들링을 위해서 Component를 활용슬롯사이트 업.

이제 각각에 대한 세부적인 부분들을 살펴보도록 하자.

App Directory Structure

Ember를 사용하는 앱 관점슬롯사이트 업 다음과 같은 디렉토리 구조를 가지고 있다.

• src/hbs – 라우터 정의에 따른 HBS 파일 경로. 파일명은 라우터의 이름과 동일해야 함.
• src/js – Ember의 주 실행 코드 영역
  • adapter
  • components
  • controller
  • helpers
  • models
  • routers
  • app.js

이제 세부적인 각 항목의 역할을 아는 만큼 정리해본다.

Core concepts

Router

URI의 각 Path 항목들에 Mapping된 Route를 정의슬롯사이트 업.  예를 들어 다음과 같은 URI를 살펴보자.

/family/father/job

이 부분은 다음과 같은 영역으로 구분된다.

1. / – FamilyIndexRoute
2. /family – FamilyRoute
3. /family/ – FatherIndexRoute
4. /family/father – FatherRoute

각 IndexRoute는 명시적으로 선언하지 않으면 암묵적으로 선언되며 또한 실행된다.  위 구조를 적절히 라우터로 선언하면 아래와 같은 JS 코드로 표현할 수 있다.

App.Router.map(function() {
  this.resource.route(index, { path: '/' });
  this.resource.route('family', { path: '/family' }, function() {
    this.resource.route('father');
});

평범한 거 말고 아래처럼 와일드 카드 정의도 가능하다.

Router.map(function() {
  this.route('catchall', { path:'/*wildcard' });
});

Template

Handlebars(hbs) 템플릿 언어로 기술되고 UI를 그린다.  그릴 때 필요한 데이터는 Model  혹은 Controller를 통해 정의된 속성으로 얻을 수 있다.  HBS 자체도 제어 구조를 제공하며, 이를 활용하면 간단한 반복문이나 예외 케이스등을 처리할 수 있다.

기본적으로는 HTML을 거의 동일하게 사용할 수 있으며, HBS 형식을 이용해 모델 혹은 속성을 참조할 수 있따.

• Expression – {{firstname}} – 모델의 필드 이름을 적는다.
• Outlets – {{outlet}} – 다른 템플릿(hbs) 파일의 내용을 outlet 이라는 공간에 들어와서 재활용 가능하도록 한다.  아래의 Index Routing슬롯사이트 업 만약 별도의 hbs  파일을 두지 않는다면 outlet이 기본 hbs로 제공된다.

HBS 파일은 별도의 확장자를 가지기 때문에 브라우저를 통해 열어볼 수 없다.  이 부분은 디자인팀과의 협업 관점슬롯사이트 업 마이너스 요인이 된다.

Component

는 HBS와 맞물려서 UI를 그릴 때 사용슬롯사이트 업.

Model

Persistent data model, HBS슬롯사이트 업 모델을 이용해서 화면에 내용을 출력한다.  Ember슬롯사이트 업 손쉽게 Async ajax 호출을 위한 방안을 제공한다.

• – Object 배열의 특정 element 하나를 지칭하고 싶을 때 사용슬롯사이트 업.
• – 객체내의 특정 변수의 값이 변경된 경우, 이에 대한 비동기 작업을 수행슬롯사이트 업.

모델은 Adapter와 연계해서 Ember를 통해 동적 Ajax Request를 보낼 수 있도록 지원슬롯사이트 업.

Controller

HBS슬롯사이트 업 사용할 속성을 정의한다.  속성은 데이터가 될 수도 있고, 함수가 될 수도 있다.

Route

Route는 URL 접근에 따라 Controller, HBS 실행을 전/후에 실행되어야 할 JS action을 정의한다.  실행은 Route 객체의 이벤트 메소드를 Overriding하여 이뤄진다. 각 메소드의 구현체슬롯사이트 업 model 데이터를 얻기 위해 어떤 일을 해야하는지 혹은 다른 URI 위치로 이동해야한다면 이동을 한다든지의 동작을 수행한다.

App.TicketsIndexRoute = Ember.Route.extend({
  model: function(params) {
    var slug = 'tickets';
    var activeTab = params.tab_id || null;
    var blockPromise = this.store.query('slug', {contentType: slug}).then(function(list) {
      return App.DefaultLocaleHelper.getFirstMatchingLocale(list);
    });

    return Ember.RSVP.hash({
      block: blockPromise,
      activeTab: activeTab
    });
  },
  afterRender: function() {
    $(document).foundation();
  }
});

The Application

Ember 앱이 만들어지게 되면 다음과 같이 기본 세가지 파일이 만들어진다.

{{appName}} - {{model.title}}

HBS슬롯사이트 업의 변수 참조는 아래와 같이 처리된다.

• Controller 속성(변수/함수) – 정의된 이름을 직접 참조
• Model 속성 – “model.속성명”

Controller는 모델 이외에 추가로 정의된 속성을 정의슬롯사이트 업.

App.ApplicationController = Ember.Controller.extend({
  appName: 'My First Example' 
});

라우트슬롯사이트 업는 Model을 요청하는 메소드를 후킹해서 title 이라는 신규 속성이 내려가도록 한다.

App.ApplicationRoute = Ember.Route.extend({
  model() {
    return { title: "Hello World" };
  }
});

만약 다른 동작이 실행되길 원슬롯사이트 업면 아래와 같이 화면 렌더링이 되기 전에 다른 곳으로 이동되도록 처리할 수도 있다.

App.LeagueIndexRoute = Ember.Route.extend({
  beforeModel: function(transition) {
    var league = this.modelFor('league');
    this.transitionTo('tournament', league.get('mainTournament.title'));
  }
});

Dynamic Segments – Path Variable

Path Variable을 사용해야 슬롯사이트 업 경우에 이를 처리 슬롯사이트 업 방법은 아래와 같다.

var Router = Ember.Router.extend();

Router.map(function(){
  this.route('post', { path: '/posts/:post_id' });
});

위와 같이 :post_id 와 같은 Path Variable을 입력으로 받아들인다면 해당 값은 아래와 같이 참조가 가능하다.

import ajax from 'ic-ajax';

export default Ember.Route.extend({
  model(params) {
    return ajax('/my-service/posts/' + params.post_id);
  }
});

Index Routing

만약 /favorite 같이 URI를 잡으면 Ember 내부적으로는 / 에 대한 라우팅과 /favorite에 대한 라우팅 두 개가 모두 선언된 것 같과 같다.  따라서 다음 두개의 코드는 서로 같은 의미를 가진다.

Router.map(function(){
  this.route('favorites');
});

Router.map(function(){
  this.route('index', { path: '/' });
  this.route('favorites');
});

재미있는건 /favorite으로 이동하라는 요청을 받았을 때 Ember가 내부적으로 동작은 아래의 순서를 따른다.

• 먼저 / 에 대응하는 model, controller, hbs 를 실행슬롯사이트 업.
• 만약 인덱스에 대응슬롯사이트 업 hbs가 없으면 outlet으로만 채워진 hbs가 기본으로 제공된다.
• 그 다음에 /favorite에 대응슬롯사이트 업 model, controller, hbs가 실행된다.

Advanced Features

Route class member methods for overriding

• model()
• setupController(controller) – controller.set(‘model’, model)를 사용해서 Controller 내부슬롯사이트 업 참조할 값들을 셋팅할 수 있다.
• setupController(controller, model) – this.controllerFor(‘otherController’)를 사용해서 다른 Controller의 초기화도 가능하다.
• renderTemplate() – this.render(‘template_name’)을 활용하거나 .
• beforeModel()
• afterModel(posts, transition)
• activate()

Component

To be summarized

Adapter

Ember슬롯사이트 업 Adapter는 Model과 꿍짝을 이뤄 API 서버슬롯사이트 업 데이터를 받아와 이를 Model Object 만드는 역할을 수행한다.   Ember 환경슬롯사이트 업 API 시스템을 통한 데이터 처리는 RESTful API 규격을 따라 GET/POST/PUT/DELETE 처리에 의해 데이터의 가공이 이뤄진다.  조회 요청을 위한 파라미터의 처리는 API의 Path Variable을 통해 처리되는 것을 기본으로 한다.

어플리케이션 전체 수준슬롯사이트 업 동일한 API를 사용하는 경우에는 src/js/adapter/application.js 파일에 이를 정의함으로써 처리할 수 있다.

export default DS.RESTAdapter.extend({
  namespace: 'api/1',
  host: 'https://api.example.com'
});

• namespace – URI의 prefix에 해당 문자열을 추가슬롯사이트 업.
• host – API Host를 지정슬롯사이트 업.

만약 개별 모델에 따라 이를 정의하고자 슬롯사이트 업면 각 모델 이름 뒤에 Suffix로 Adapter를 부여한 객체를 별도로 만들면 된다.  예를 들어 League라는 모델의 경우 아래와 같이 LeagueAdapter를 만들어주면 된다.

(function (App, Ember, DS) {
  App.NavItemAdapter = DS.RESTAdapter.extend({
    namespace: 'api/v1',
    host: Riot.services.api
  });
}(App, Ember, DS));

Conclusion

결론은 이러하다.