기본 콘텐츠로 건너뛰기

[Angular 02] 앵귤러 시작하기

[Angular 02] 앵귤러 시작하기

[Angular 02] 앵귤러 시작하기

1. 타입스크립트

타입스크립트는 Microsoft에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어이며, 자바스크립트를 확장한 언어입니다. 자바스크립트 ECMA(European Computer Manufactureres Association) Script 표준을 따르고 있습니다. 타입스크립트의 가장 큰 특징은 자바스크립트에 타입을 추가한 언어입니다.

<타입스크립트와 자바스크립트의 관계>

2. 타입스크립트 설치

MS는 타입스크리트를 오픈 소스로 공개하고 npm을 통해서 패키지로 손쉽게 설치할 수 있게 하였습니다.

npm install -g typescript

설치가 끝났다면 터미널에서 tsc 명령을 사용할 수 있습니다. tsc는 타입스크립트 소스를 자바 스크립트로 컴파일하기 위한 명령어 입니다. 'tsc --version'을 입력하여 버전이 출력되는지 확인해 보자.

tsc --version

3. 앵귤러 CLI

앵귤러 CLI는 프로젝트 생성부터 템플릿 코드 자동 생성, 개발 서버, 배포, 테스트 등 앵귤러 프로젝트를 진행하는 데 필요한 거의 모든 기능을 제공해 주는 만능 개발 도구이며, 표준 스타일 가이드를 제공합니다.

<앵귤러 CLI가 지원하는 기능들>

Angular 프로젝트 생성

Angular 컴포넌트, 디렉티브, 파이브, 클래스, 인터페이스 등의 구성 요소

Unit/E2E 테스트 환경지원

프로젝트 패키징 배포

앵귤러 CLI를 설치해 보자.

npm i @angular/cli -g

<앵귤러 CLI 설치 완료 화면>

설치가 완료되면 ng 명령어를 사용할 수 있습니다. 앵귤러 CLI는 터미널 환경에서 명령을 통하여 실행합니다. ng만 입력한 후 실행하면 터미널의 모든 명령어를 확인할 수 있습니다.

아래 명령어로 버전을 확인해보자.

ng --version

<앵귤러 CLI 설치 확인>

4. 프로젝트 생성

앵귤러 CLI의 프로젝트 생성 명령은 ng new 입니다. ng new 명령은 앵규럴 프로젝트에 필요한 기본 설정 파일뿐 아니라 바로 실행할 수 있는 수준의 기본 애플리케이션 코드까지 자동으로 생성해줍니다.

ng new hello-angular cd hello-angular

프로젝트 생성이 끝나고 나면 앵귤러 CLI로 생성된 프로젝트에는 자동으로 생성된 설정 파일 및 기본 코드가 있습니다. 이것은 Angular 스타일 가이드를 따른 구조, 네이밍 룰 등을 준수하여 생성된 것입니다.

5. 프로젝트 실행

프로젝트를 로컬에서 개발환경으로 실행하는 명령어는 ng serve 입니다. 명령을 실행하면 웹 서버를 실행하고 Webpack을 사용하여 소스를 번들링 합니다. 그럼 ng serve 명령을 실행해봅시다.

ng serve

명령이 실행이 끝나면 "Compiled successfully."가 출렵됩니다. 이제 애플리케이션을 실행할 수 있는 상태가 된 것입니다. localhost:4200으로 브라우저에서 접속해 보자. 프로젝트를 실행할 때 아래 옵션을 추가하면 자동으로 브라우저를 실행해줍니다.

ng serve --open

프로젝트 실행할 때 디폴트 호스트 및 포트 설정방법은 아래와 같습니다.

ng serve -host 0.0.0.0 -port 4300

참고 : 앵귤러 첫걸음

from http://lovelushi.tistory.com/2 by ccl(A) rewrite - 2020-03-07 08:21:19

댓글

댓글 쓰기

이 블로그의 인기 게시물

(주)레터플라이 채용 정보: 프로그래밍을 생각하면 가슴이 뛰는 개발자...

(주)레터플라이 채용 정보: 프로그래밍을 생각하면 가슴이 뛰는 개발자... Angular.js, Python, MySQL 중 한 가지 언어에 뛰어나신 분도 좋고 개발 업무 전반적으로 센스가 있으신 분도 환영합니다. 맡은 업무를 성실하게 수행해 나갈 수 있는 책임감과 태도를 갖고계신 분, 그리고 항상 새로운 방법론에 도전하고 포기를 모르는 분일수록 저희와 더욱 잘 맞을 것 같습니다. Angular.js, Python, MySQL 중 한 가지 언어에 뛰어나신 분도 좋고 개발 업무 전반적으로 센스가 있으신 분도 환영합니다. 팀 내 뛰어난 풀스택 개발자분들이 Angular.js, Python, MySQL 모두 작업 가능하시니 오셔서 함께 배우며 즐겁게 작업하시면 됩니다. 맡은 업무를 성실하게 수행해 나갈 수 있는 책임감과 태도를 갖고계신 분, 그리고 항상 새로운 방법론에 도전하고 포기를 모르는 분일수록 저희와 더욱 잘 맞을 것 같습니다. 개발 업무: 레터플라이의 핵심 기능인 편지, 사진을 제작하는 레터에디터, 포토에디터 개발. 이 기능들은 "모바일 웹을 통한 출력제품 생산 자동화 기술"(특허 출원 준비중)로서 레터플라이에서 자체개발했습니다. 근무 지역: 광화문역 5번출구 바로 앞 근무 환경: 책임과 존중을 중요시하는 수평적인 분위기, 도전적이며 서로에게 배우는 문화 근무 시간: 10-19시, 출근시간 자유 지정. 급여: 연봉/스톡옵션 협의 지원 방법: 팀 지원하기 더 많은 내용은 더 많은 내용은 더팀스 에서 확인하세요! from http://theteams.tistory.com/721 by ccl(A) rewrite - 2020-03-20 09:20:18
댓글 쓰기
자세한 내용 보기

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증...

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증... django 는 기능이 참 너무 많다 ^^; 지금은 서버는 django로, 프론트는 angular를 붙여서 간단한 웹을 만들어 보려고 한다. 웹 만들때 항상 회원가입/로그인 기능은 맨 앞에 구현한다. 어떻게 구현하면 좋을까... 찾아보다가 이 기능을 구현할 수 있는 방법이 너무 많아서 정보를 찾기 더 어려웠다. 일단 나는 django에서 django rest framework라는 것을 사용해서 API를 만드려고 한다. 순수 django 튜토리얼에는 바로 template 랑 연결해서 설명하는 부분이 많았다. 나는 그냥 API 만 만들고 싶다고!! 그래서 찾은 것이 django REST framework. https://www.django-rest-framework.org/api-guide/authentication django REST framework 설치 using pip pip install djangorestframework settings.py INSTALLED APPS 에 추가해야함 INSTALLED_APPS = [ ... 'rest_framework', ] django REST framework 에서도 인증 관련해서 제공하는 것이 1개가 아닌 여러 개다. 나는 그중에 TokenAuthentication을 이용해서 로그인을 구현해 보려고 한다. TokenAuthentication Token authentication is appropriate for client-server setups, such as native desktop and mobile clients. 이렇게 나와있어서 내가 하려는 것과 일치해서 이걸로 결정 ~ 솔직히 처음 로그인을 구현하려고 하면 도대체 그 과정이 어떻게 되는지 모를 수 도 있다. 나는 쉽게 정리하면 아래와 같은 과정이라고 생각한다. 로그인 로그아웃...
댓글 쓰기
자세한 내용 보기

[020] 파동함수를 쓰기

[020] 파동함수를 쓰기 [020] 파동함수를 쓰기 [020] 파동함수를 알면 우리가 원하는 뭔가를 알 수 있다고 했는데, 정작 파동을 함수로 쓰는 것은 아직 다루지 않았고, 양자역학 내용을 좀 더 진행하려면 왜 파동이 삼각함수로 써 지는지를 한번은 정리를 해야겠다. 수학이 많이 나올 예정이다. 앞에서 파동함수를 아래 형태로 쓸 수 있다고 했었는데, 왜 이런 형태가 되는지 알아보자. [020-01] 파동함수 사인파의 일반형은 코사인 (cos) 을 이용해 쓰지만, 사인 (sin) 과 코사인은 위상차이만 있는 함수들이고, 우리는 앞으로 사인을 이용해 문제를 풀 예정이라 사인을 이용하기로 한다. 파동함수는 양자역학에서 갑자기 나온 말이 아니고, 원래 파동을 함수의 형태로 쓴 것을 파동함수라고 부른다. 파동-입자 이중성을 가지니까 기존에 파동을 함수의 형태로 쓰던 그 모양을 가져다 쓴 것. 주교재의 16장에 있는 내용이다. [020-02] 펄스 - Pulse 아래와 같이 하나의 진동이 왼쪽에서 오른쪽으로 진행하는 상황을 생각해보자. 시간 t 일 때, 위치 x 의 밧줄의 높이를 y 라 하고, 셋의 관계를 기호로 쓰면, 그러면 아래의 관계가 성립한다. 이게 무슨말이냐면, 시간 t 일 때 위치 x 의 밧줄의 높이 와 시간 0 일 때 위치 x-vt 의 밧줄의 높이가 같다 는 말인데, 그림으로 보면, 왼쪽은 시간 0, 오른쪽은 시간 t 이고, t 일 때 P 의 높이와 0 일 때 높이가 같다는 것. [020-03] 파동을 식으로 써보자. 아래의 파동을 보자. 지금 내용부터는 사인이든 코사인이든 상관없는데, 위 그림이 사인이니까 아래의 식 으로 쓸 수 있다. A는 진폭이고, 주기, 진동수, 파장 같은 값을 아직 모르니까 a 는 아직 정해지지 않은 값 이다. 일반적으로 알고있는 삼각함수는 가로축이 각도 이지만, 우리는 공간을 진행하고 있는 파동을 다루니까 위의 형태로 써진다고 생각하자. x=0 에서 진폭이 ...
댓글 쓰기
자세한 내용 보기