첫 Angular 앱 만들기

이 튜토리얼은 Angular로 코드를 작성할 때 알아야 할 개념을 소개하는 여러 실습으로 구성됩니다.

원하는 실습을 골라 원하는 순서로 진행해도 됩니다.

시작하기 전에

튜토리얼을 원활하게 진행할 수 있도록 필요한 준비 사항을 확인하세요.

사전 지식

이 튜토리얼은 다음과 같은 경험이 있다고 가정합니다:

1. HTML을 직접 편집해 웹 페이지를 만든 경험
2. JavaScript로 웹사이트 기능을 구현한 경험
3. CSS(Cascading Style Sheet) 코드를 읽고 셀렉터 사용 방법을 이해한 경험
4. 명령줄을 사용해 컴퓨터에서 작업한 경험

개발 환경

Angular 개발 도구를 로컬에 설치하거나 이 사이트에 내장된 에디터로 실습할 수 있습니다. 로컬 Angular 개발은 Windows, macOS, Linux에서 모두 가능합니다.

첫 Angular 앱 미리보기

이 튜토리얼에서는 임대 주택 목록과 각 주택의 상세 정보를 표시하는 Angular 앱을 만듭니다. 이 앱은 여러 Angular 앱에서 공통으로 사용하는 기능을 활용합니다.

로컬 개발 환경

튜토리얼을 진행할 컴퓨터의 명령줄 도구에서 다음 단계를 수행하세요.

1. Angular에 필요한 node.js 버전 확인하기

   Angular에는 활성 LTS 또는 유지보수 LTS 버전의 Node가 필요합니다. 설치된 node.js 버전을 확인해 보겠습니다. 구체적인 버전 요구 사항은 package.json 파일의 engines 프로퍼티를 참고하세요.

   터미널 창에서 다음 작업을 수행하세요:

   1. node --version 명령어를 실행하세요.
   2. 표시된 버전이 요구 사항을 충족하는지 확인하세요.

2. Angular에 맞는 node.js 버전 설치하기

   node.js가 설치되어 있지 않다면 nodejs.org의 설치 안내를 따르세요.

3. 최신 Angular 설치하기

   node.js와 npm을 설치했다면 효율적인 Angular 개발을 위한 도구인 Angular CLI를 설치합니다.

   터미널 창에서 npm install -g @angular/cli 명령어를 실행하세요.

4. 통합 개발 환경(IDE) 설치하기

   Angular 앱을 개발할 때는 원하는 도구를 자유롭게 사용해도 됩니다. 다음 도구를 권장합니다:

   1. Visual Studio Code
   2. 필수는 아니지만 Angular 언어 지원 서비스를 설치하면 개발 환경을 더 편리하게 사용할 수 있습니다.
   3. WebStorm

5. 선택 사항: AI 지원 IDE 설정하기

   AI 지원 IDE에서 이 튜토리얼을 진행한다면 Angular 프롬프트 규칙과 권장 사항을 확인하세요.

이 실습에서 다룬 내용을 더 알아보려면 다음 문서를 참고하세요: