As i wish

Angular로 간단한 게임 만들어보기 - 2 (Angular 시작하기) <Angular 폴더 구조> 본문

Angular JS

Angular로 간단한 게임 만들어보기 - 2 (Angular 시작하기) <Angular 폴더 구조>

어면태 2018. 1. 15. 12:30

안녕하세요 엄티입니다.

오늘은 Angular에 폴더 구조를 잡아보려고 합니다.

프로젝트를 진행함으로 있어 프로젝트 구조가 상당히 중요합니다.

사실 개발 보다는 유지보수가 훨씬 더 많은 시간을 잡아 먹기 때문에 구조를 잘 나누지 않으면 힘들어 지거든요.

 

사람마다 프로젝트마다 구조가 다르지만 전 현재 https://savannaboat.com  에서 사용하고 있는 방식으로 글을 한번 써 볼께요.

불러오는 중입니다...

 

아 참고로 저는 Sublime text를 사용하고 있고 여러 필요한 플러그인들을 사용하고 있는데요. 

초보자 분들은 Vim에 익숙해 지시면 편할것 같아요. 저도 처음엔 어려웠는데 손에 익숙해 지고 나니 훨씬 편하드라고요. 나중에 Vim에 대해서도 포스팅 해보도록 할께요.

 

일단 폴더구조를 크게 JavaScript 파일, html 파일, css 파일 그리고 여러 Library파일 이렇게 크게 잡겠습니다.

 

또한 지금은 index.html만 열리는데 그것이 아니라 main view를 만들어서 index에서 main을 열어주도록 해보겠습니다.

 

이렇게 main을 만들게 되면 나중에 필요한 화면들을 다 따로 구성해서 만들 수 있습니다.

main, login, register, setting, profile등등 이렇게 여러 화면을 따로 구성 할 수 있도록 구조를 잡는게 매우 중요합니다.

 

원래 이랬던 폴더 구조를 

 

 

 

이렇게 바꿔 주시면 되겠습니다.

 

폴더 구조가 바뀌었으니 당연히 내용도 바뀌어야 겠죠?

 

일단 index.html

<head>안에 stylesheets 정보가 추가 되었고요 참고로 css파일은 스타일을 내기 위한 파일입니다.

아직 안했으니 일단 패스

<body> 안에는 JavaScript경로가 표시 되었으나 폴더 안에 들어있기 때문에 폴더 루트까지 다 표시가 되어있죠.

그리고 일단 main에 관해서는 main.module.js와 main.controller.js 밖에 추가를 안했으니 index.html에서도 두 파일만 일단 추가해 둡니다.

 

2번째로 app.js

app.js에서는 main module을 사용한다고 표시만 해줍니다.

'eomttblog.main'이라는 이름은 밑에 main.module.js에서 정의해 둡니다.

 

앞서 말한것 처럼 main.module.js

eomttblog.main이라는 이름으로 정의를 해두고요.

main controller를 사용하기 때문에 eomttblog.main.controllers라고 또 이름을 정의해 둡니다.

이 이름은 실제 main 폴더 안에 있는 controller들이 사용하면 됩니다.

지금은 main.controller.js 하나 뿐이기 때문에 main.controller.js 에서만 사용하지만 나중에

controller들이 많아지게 되면 계속해서 'eomttblog.main.controllers'라는 이름을 사용하면 됩니다.

 

* 이름이기 때문에 편하게 아무렇게나 붙여도 되지만 이름을 잘 붙여야 디버깅이 편하겠지요?

 

마지막으로 main.controller.js

여기서는 실제 main.html이 돌아가는 코드를 입력해 주는 부분인데요 

일단 현재로는 console.log만 써놨습니다.

 

 

 

그 다음 폴더를 열어서 index.html을 더블 클릭 한 후 오른쪽 버튼을 눌러 log를 확인하면

app.js 'Start blog' 가 찍히고 'Main controller start'가 찍혀야 하지만 'Start blog'만 찍힙니다.

그 이유는 MainController 가 실행이 되지 않았기 때문이죠. ㅜㅜ

 

ng-route를 써야하는데 아무래도 포스팅이 길어지니 오늘은 여기 까지만입니다.

오늘은 일단 폴더 구조를 나누고 필요한 lib, js, stylesheets, templates로 나눠 보고

js안에 main이라는 폴더를 만들고 그안에 controllers, services등 다양한 파일을 나눴다고 생각하면 될것 같네요.

궁금한 점이나 제가 쓰면서 틀린점이 있거나 또는 더 발전 시켜야 할 점이 있으면 댓글을 달아주세요

 

언제나 환영입니다 댓글은

저작자표시

'Angular JS' 카테고리의 다른 글

Angular로 간단한 게임 만들어보기 - 4 (Angular 시작하기) <canvase, css>  (0) 2018.01.25
Angular로 간단한 게임 만들어보기 - 3 (Angular 시작하기) <ng-route>  (1) 2018.01.15
Angular로 게임 만들어보기 - 1 (Angular 시작하기)  (0) 2018.01.04
'Angular JS' Related Articles more
Comments