안녕하세요 슬릭데브입니다.
오늘부터 Angular.js 를 배워보려고 합니다.
저도 아직 써보질 않아서 생소하지만 구글링을 통해 배워보겠습니다.
저는 주로 Tutorialspoint 웹사이트에서 이론적인 부분을 많이 배웁니다.
Angular.js 는 웹앱 개발할때 많이 쓰이는 프레임워크입니다.
주로 Single Page Application(SPA) 만들때 쓰이는데
저처럼 구글링을 하신분들은 Directive, data-binding, controller, service 이런게 뭔지 궁금해 하신분들이 많습니다.
그래서 오늘은 Angular.js 개념들을 살펴보겠습니다.
특징:
- Angular.js 는 자바스크립트 기반으로 만들어졌고 RICH Internet Application (RIA) 를 만들수 있도록 개발이된 framework 입니다.
- Angular.js를 이용하는 개발자들은 Model-View-Control (MVC) 방법으로 클라이언트 앱을 개발할 수 있습니다.
- Angular.js로 만들어진 앱은 어느 브라우저에서나 작동될수 있도록 되어있습니다.
개발환경 설정하기:
Angularjs:
1. https://angularjs.org 여기에서 소스코드를 다운받아서 시작할 수 있습니다.
2. 제가 추천하는 방법은 CDN을 이용하는 방법입니다. (CDN = Content Delivery Network)
에디터:
저는 주로 Sublime text 에디터를 씁니다. 오래된 컴퓨터를 쓰고 있었을땐 리눅스의 Vim 을 썼었습니다. Vimrc 파일 설정하면서 쓰다보니 편해지더라구요. 현재는 윈도우 환경에서 Sublime Text 를 다운받아서 씁니다.
Sublime Text:
솔직히 웹 개발하면 브라우저로 바로바로 볼 수 있긴한데 매번 클릭 하기가 귀찮아서 build system을 설정하고 크롬에 띄웁니다.
단축키는 Ctrl+B입니다.
여기서 빨간 박스를 클릭합니다. 저는 영어버전으로 쓰고있지만 메뉴 버튼들의 위치들은 다 같습니다.
그리고 아래와 같이 Chrome.exe 경로를 설정합니다.
여기서 중요한것은 저장할때 파일 이름에 .sublime-build 가 들어가야합니다.
이렇게 하시면 빌드 할때마다 크롬에서 보여집니다.
한번 테스트해볼까요?
Sublime Text에서 아래 사진과 같이 따라서 해보세요.
이렇게 작성하신 후 Ctrl+B 혹은 저장된 파일을 더블클릭하시면 브라우저에서 열립니다.
빈칸에다가 아무 글씨나 써 넣으면 밑에 줄에서 보입니다.
<div ng-app = ""> 이줄은 여기서부터 Angular 가 시작됩니다 라고 뜻합니다.
input type = "text" 이부분은 글씨를 쓸 수 있는 빈칸을 만듭니다.
ng-model = "name" 이부분은 빈칸에 씌여진 글씨를 name 이라는 변수에 저장합니다. (name = 빈칸에 씌여진 글씨)
ng-bind = "name" 이부분은 Model 의 name 변수를 가져와서 여기다가 보여주세요 라고 합니다.
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> 이부분은 Angularjs 프레임워크를 가져옵니다.
아직 한글로 쓰는게 서투르지만 여기까지 봐주셔서 감사합니다.
질문이나, 조언 있으시면 언제든지 글 남겨주세요.
오늘은 여기까지 하니까 배가 고프네요 ^^;
