온라인 환경에서 Angular를 빠르게 시작하거나, 터미널로 로컬 환경을 구성해 보세요.
온라인으로 작업하기
프로젝트 세팅 없이 브라우저에서 바로 Angular를 사용해 보려면, 온라인 샌드박스에 접속하면 됩니다:
로컬 환경에 프로젝트 환경 설정하기
프로젝트를 새로 만든다면 Git과 같은 도구를 함께 사용하기 위해 로컬 환경에 프로젝트 환경을 설정하는 것을 대부분 선호합니다.
환경설정 조건
- Node.js - v20.11.1 이거나 이후 버전
- 텍스트 에디터 - Visual Studio Code를 추천합니다.
- 터미널 - Angular CLI 명령을 실행하기 위해 필요합니다.
- 개발 툴 - 개발 워크플로를 향상시키기 위해 Angular Language Service 사용을 권장합니다.
설정방법
로컬 환경에 Angular 프로젝트를 설정하려면 이런 과정을 거치면 됩니다.
Angular CLI 설치하기
터미널을 열고 다음 명령을 실행합니다. Visual Studio Code를 사용한다면 integrated terminal를 열어서 작업하면 됩니다.
npm
npm install -g @angular/cli
pnpm
pnpm install -g @angular/cli
yarn
yarn global add @angular/cli
bun
bun install -g @angular/cli
Windows나 Unix에서 명령을 실행하다가 에러가 발생하면 CLI docs를 참고하세요.
프로젝트 생성하기
터미널에서 Angular CLI ng new 명령을 실행하면서 프로젝트 이름을 지정하세요.
이 문서에서는 my-first-angular-app라는 프로젝트 이름을 사용하겠습니다.
ng new <프로젝트-이름>
프로젝트를 생성하면서 몇가지 옵션을 선택하게 됩니다. 화살표 키와 엔터 키를 사용해서 원하는 옵션을 고르면 됩니다.
특별히 선호하는 옵션이 없다면 모든 질문에 엔터 키를 누르고 기본 설정으로 시작해도 됩니다.
모든 옵션을 다 골랐으면 Angular CLI가 환경설정을 시작하고 이런 메시지를 출력합니다:
✔ Packages installed successfully. Successfully initialized git.
이제 로컬 환경에 프로젝트를 실행할 준비가 끝났습니다!
로컬 프로젝트 실행하기
터미널에서 Angular 프로젝트 위치로 이동합니다.
cd my-first-angular-app
이 시점에는 앱 실행에 필요한 의존성 패키지들이 모두 설치되었기 때문에(프로젝트 폴더에 node_modules 폴더가 있는지 확인해 보세요), 아래 명령을 실행하면 프로젝트를 실행할 수 있습니다:
npm start
프로젝트가 문제없이 실행되면 터미널에서 아래와 비슷한 메시지를 확인할 수 있습니다:
Watch mode enabled. Watching for file changes...NOTE: Raw file sizes do not reflect development server per-request transformations. ➜ Local: http://localhost:4200/ ➜ press h + enter to show help
위 메시지에서 Local에 해당하는 http://localhost:4200 에 접속하면 애플리케이션이 실행되는 것을 확인할 수 있습니다.
코딩 즐겁게 해봅시다! 🎉
다음 단계
Angular 프로젝트를 생성했다면 이제 핵심 가이드로 이동하거나 원하는 주제를 골라서 학습해 보세요!