Angular 11 프로젝트 #01 - 시작하기

목적 : Angular 11 + Firebase Firestore 프로젝트

빠르게 변화하는 Angular 버전과 noSQL 파이어베이스 - 삽질하면서 작성해놓는 글

 

 

싫더라도... 어떤 이유에서라도... 어찌 되었든 무언가 일을 시작을 했으면 웃으면서 하자

 

 

환경 설정

1. Node.js 설치

https://nodejs.org/ko/

Node.js

2. 개발 툴

Intellij를 주로 사용하지만 Angular가 비주얼 스튜디오환경이 플러그인들이나 지원이 더 좋다기에 vscode 사용

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

한국어를 지원하므로 영어로 되어 항상 설정에서 애를 먹는다면 한글을 설치하는 것을 추천 (영어가 간지라고 객기부리다가 시간 날려본 경험 있어서 재빨리 설치), Angular Snippets 설치 추천, Material Icon Theme 을 설치하면 왼쪽과 같이 아이콘으로 빠르게 파일의 형식을 보여주고, 내부 파일 별로 색과 모양을 다르게 폴더를 표시해준다 (선택).

 

3. Angular은 app.js 형식이 아닌 app.module.ts와 같이 타입 스크립트를 사용하기 때문에 타입스크립트를 설치해준다.

→ typescript를 설치하고 angular cli를 설치함

treminal : npm install -g typescript

terminal : npm i @angular/cli -g 

 

 

 

 

angular cli를 설치했다면 ng new 프로젝트명 을 입력한다.

ex) ng new angular-firebase

→ ? Do you want to enforce stricter type checking and stricter bundle budgets in t
he workspace? : no

→ 라우팅 추가할건지 물어봄 : n 누르고 엔터(나중에 추가하면 됨. yes를 해도 무관)

→ CSS 선택 

→ angular-firebase 라는 이름의 앵귤러 프로젝트가 생성됨.

 

주로 개발을 할 개발 폴더 : src 

app의 구성 요소들을 추가하고 기능들을 import 하는 파일 : app.component.ts

 

 

이제 생성이 되었으니 terminal창 혹은 ⌘ + , 키로 비주얼 스튜디오 내에 터미널을 열고

ng serve -open 혹은 축약형으로 ng serve -o를 쳐본다

→ 로컬호스트 4200번 포트로 앵귤러 페이지가 열림

 

 

 

 

 

 

 

 

 

 

 

 

#알아두면 좋을 vscode 단축키

- 터미널 상에서 프로젝트 폴더로 이동 후 터미널에 code . 라고 치면 vscode 상에서 프로젝트가 열림.

- ⌘ + , : 설정으로 이동 

- ⌥ + ⇧ + F : 코드 자동 정렬

- ⌘ + ~ (키보드상 1의 왼쪽키) : vscode 내에서 하부에 terminal을 띄워줌. 한글 입력 상태면 입력 안됨. 당황하지 말고 한/영 전환키 누르고 이 명령어 다시 치면 잘 작동함

- ⌥ + 방향키 : 한 글자씩이 아닌, 단어 기준 이동.

- shift나 드래그로 일정 부분을 지정한 후

                  - ⌥ + 방향키 위/아래 : 지정한 블럭을 블럭 째로 라인 이동 

                  - ⌥ + ⇧ + 방향키 위/아래 : 지정한 블럭을 복사해서 위/아래에 같은 코드 복사 → 반복되는 코드 작성시에 매우 유용함