앵귤러 튜토리얼 (Angular tutorial) -28 빌드, 배포, 협업

 

* 제가 다시 작성한 최신 튜토리얼 수정본 입니다. 아래 주소를 통해서 진행하시는 것을 권장 드립니다. ^^

lts0606.tistory.com/328

앵귤러 튜토리얼(Angular tutorial) - 1 : 소개

 

이번시간에는 앵귤러를 통해서 협업과 작업된 파일을 build 하는 법에대해서 간단히 살펴보려 한다.

 

앵귤러를 작업할 때 사용되는 서버는 최초 설치한 앵귤러 cli 프로그램이 동작시켜주는 개발목적의 웹 서버이다.

ng serve로 명령어를 입력하면 4200번 포트 번호로 접속했던 그 서버가 개발용 서버 인 것 이다.

해당 서버를 실제로 서비스하는 경우는 없으며, 대부분 개발하기 위해서만 사용이 된다.

 

그래서 통상 작업을 하게 되면 서버는 2가지 형태로 나뉘게 된다.

1. 데이터베이스에 접속하는 웹 서버    ->  다른개발자가 개발하거나 또는 본인이 하거나

2. 프론트 개발용 앵귤러 서버    ->  앞선 시간에서 계속 만났던 4200번 포트 서버

 

앵귤러 프로젝트에서 실제 데이터베이스와의 연동은 ajax 처럼 데이터를 가져오거나 등록, 수정, 삭제 요청을 하는 방식으로 구현된다.

아래 사진을 잠깐 보도록 하자.

작업중인 프로젝트의 앵귤러 코드 모습

 

위 사진을 살펴보면 하단에 Http라는 내용의 문구가보이게되는데, request라고 보이는 함수가 ajax 개념의 함수라고 생각하면 된다.

해당 request 함수를 사용해서 데이터베이스에 접속하는 웹 서버에게 요청을 하여 실제 연동을 하게 되는 것 이다.

 

그리하여 실제로 개발을 하다보면 만나는 문제가 "크로스도메인" 문제이다.

왜냐하면 서버가 다르기 때문에 요청이 막히게 되기 때문이다.

통상적으로 데이터베이스에 접속하는 웹 서버에서 개발하는 동안은 크로스도메인을 허용하여 앵귤러에서의 데이터베이스와의 연동이 원활하게 되도록 하여 준다.

 

 

그렇게 개발을 하고난 뒤에 그러면 앵귤러 파일은 어떻게 하는가?

개발이 끝나면 빌드하여 실제 적용할 웹 서버로 옮기면 끝나게 된다.

지금 개발중인 파일을 자세히보면 ts로 끝나는 타입스크립트 파일이다. 해당 파일은 웹에서 동작하지 않는다.

 

그래서 웹에서 사용 가능한 파일(html, js, css 등)로 앵귤러 프로젝트를 변환하여야 하는데..방법은 매우 간단하다.

명령어는 ng build 를 입력하여 주면 된다.

명령어 입력은 프로젝트 폴더에가서 입력하면된다.

ng build

빌드하면 1개의 html 파일과 여러개의 js파일, js파일의 메타내용을 담고 있는 map 파일등등이 만들어 진다.

해당 명령어를 사용하면 웹펙이라는 녀석이 작업을 하고 있었던 ts로 끝나는 파일과 html, css파일등을 전부 모아모아서

웹에서 사용 가능한 파일로 변환을 해 주며, 엄청난(?) 압축작업을 통해서 방대하던 ts파일들을 몇줄 안되는 js 파일로 바꾸어 준다.

이렇게 만들어진 파일을 실제 적용할 서버에 붙여넣으면 작업은 끝이난다고 볼 수 있다.

 

 

사진을 통해서 조금 더 확실하게 정리하여 보자!

이렇게 고객이 파이썬 언어를 통해서 게시판을 개발을 해 달라고 요청을 하였다고 하자.

그리고 프론트 프레임워크로는 앵귤러를 사용해달라고 요청했다고 하자.

개발자는 우울하지만(?) 혼자서 한다고 하여보자.

 

 

그러면 이제 역할을 나누어본다.

데이터베이스에 읽기, 등록, 수정, 삭제 하는 기능을 먼저 만든다고 하여보자.

모든 기능은 화면은 없으면서 오직 요청에 따라서 동작을 수행하는 기능으로 구성이 될 것이다.

즉, 요청을 하면 데이터를 저장하고, 삭제하고, 수정하는 기능 또는 단순 문자열 형태로 데이터를 전달해 주는 기능만 존재 할 것 이다.

이렇게 파이썬 언어를 통해서 데이터베이스와 연동역할을 하는 웹 서버가 탄생하였다.

 

 

이제 앵귤러 프로젝트를 만든다.

 

맨 처음 만든 서버는 앵귤러 프로젝트와의 연동준비를 위해서 크로스 도메인을 모두 허용상태로 바꾸어 주자.

작업용 앵귤러 서버는 데이터와 관련된 모든 요청을 ajax형태처럼 파이썬으로 만든 웹 서버에 요청을 하게 된다.

 

 

앵귤러 프로젝트의 기능이 완성이 되면 이제 앵귤러 프로젝트를 빌드(build) 한다.

 

 

최종빌드가 완성이되면 해당 파일을 전부 파이썬 웹 프로젝트에 옮겨준다.

또한 크로스도메인과 관련된 내용을 제거하여주면 끝이나게 된다.

 

앵귤러 프로젝트는 index.html이므로 파일명칭을 그대로 웹 주소로 사용한다면 아래처럼 접속하면 될 것이다.

https://파이썬으로만든웹서버주소:포트번호/index.html

 

라우터 기능이 존재하는 웹 프로젝트면 아래와 같은 모습도 종종 볼 수 있다.

https://파이썬으로만든웹서버주소:포트번호/index.html/앵귤러에서정의한라우터주소

 

이러한 파일명칭과 주소 매핑은 해당 웹서버에서 처리해주면 깔끔하게 만들 수 있다.

 

여기까지 실제 앵귤러를 빌드해서 배포하는 방법, 작업 방법에 대해서 알아보았다.

물론 build하는 방법에서 여러 옵션을 통해서 빌드 장소를 지정 할 수 있고 ftp처럼 전달하는 기능도 존재한다.

해당 부분은 직접 찾아보도록 하자.

 

미처 소개하지 못한 css, 각종 이벤트 및 다양한 디렉티브 사용, 파이프 등 여러 내용은 어느정도 기초가 생겼으므로 쉽게 찾아서 이해 할 수있을 것이다.

이것으로 앵귤러 튜토리얼을 마치도록 하겠다.

 

 

* 문제있는 부분 또는 이해되지않는 부분에 대해서는 언제든 문의주세요. 감사합니다. ^^