Angular CLI로 프로젝트 시작하기 ng new부터 serve까지 완벽 가이드

안녕하세요, 코딩하는곰입니다! 오늘은 Angular 개발의 첫 걸음인 Angular CLI를 사용하여 프로젝트를 시작하는 방법을 상세히 알아보겠습니다. Angular CLI는 Angular 개발을 효율적으로 할 수 있도록 도와주는 강력한 도구로, 프로젝트 생성부터 빌드, 배포까지 모든 과정을 간편하게 처리할 수 있습니다. 이 글을 통해 Angular CLI의 기본 사용법을 마스터하고, 본인의 첫 Angular 프로젝트를 성공적으로 시작해 보세요.

Angular CLI란 무엇인가?

Angular CLI(Command Line Interface)는 Angular 애플리케이션을 개발, 빌드, 테스트, 배포하기 위한 공식 명령줄 도구입니다. CLI를 사용하면 반복적인 작업을 자동화하고, Angular의 최신 모범 사례를 따르는 프로젝트 구조를 쉽게 생성할 수 있습니다. 주요 기능으로는 프로젝트 생성(ng new), 개발 서버 실행(ng serve), 빌드(ng build), 테스트 실행(ng test) 등이 있으며, 이는 개발 생산성을 크게 향상시킵니다.

Angular CLI 설치하기

Angular CLI를 사용하려면 먼저 Node.js와 npm(Node Package Manager)이 시스템에 설치되어 있어야 합니다. Node.js 공식 웹사이트에서 LTS 버전을 다운로드하여 설치한 후, 터미널(또는 명령 프롬프트)에서 다음 명령어로 Angular CLI를 전역으로 설치합니다.

npm install -g @angular/cli

설치가 완료되면 ng version 명령어로 설치된 Angular CLI 버전을 확인할 수 있습니다. 이는 설치가 성공적으로 이루어졌는지 검증하는 좋은 방법입니다.

ng new로 프로젝트 생성하기

ng new 명령어는 새로운 Angular 프로젝트를 생성하는 데 사용됩니다. 기본 구문은 ng new <project-name>이며, 여기서 <project-name>은 원하는 프로젝트 이름으로 대체합니다. 예를 들어, my-angular-app이라는 이름의 프로젝트를 생성하려면 다음과 같이 입력합니다.

ng new my-angular-app

명령어를 실행하면 몇 가지 설정 옵션을 선택하라는 프롬프트가 나타납니다:

• Angular routing 추가 여부: 라우팅을 사용할지 선택합니다. 일반적으로 ‘Y’를 선택하여 라우팅 모듈을 포함시킵니다.
• 스타일시트 형식: CSS, SCSS, Sass 등을 선택할 수 있습니다. 프로젝트 요구사항에 맞게 선택하세요. 이 옵션들은 프로젝트의 기본 구성을 정의하며, 나중에 수정할 수도 있습니다. 생성 과정이 완료되면, 지정한 이름의 디렉토리가 생성되고 모든 필요한 파일과 종속성이 설치됩니다.

프로젝트 구조 이해하기

ng new로 생성된 프로젝트의 기본 구조는 다음과 같습니다:

• src/: 애플리케이션의 소스 코드가 위치합니다.
  • app/: 주요 애플리케이션 모듈과 컴포넌트가 포함됩니다.
  • assets/: 정적 파일(이미지, 폰트 등)을 저장합니다.
  • environments/: 환경별 설정 파일을 관리합니다.
• angular.json: Angular CLI 구성 파일로, 빌드 및 서빙 설정을 정의합니다.
• package.json: 프로젝트 종속성과 스크립트를 관리합니다. 이 구조는 Angular의 모듈성과 유지 보수성을 반영하며, 개발자가 코드를 체계적으로 조직할 수 있도록 돕습니다.

📊 데이터 분석과 프로그래밍에 관심이 있다면, (React 심화) 가상 DOM(Virtual DOM)의 모든 것 성능 최적화의 핵심 원리를 참고해보세요.

ng serve로 개발 서버 실행하기

프로젝트 생성 후, ng serve 명령어를 사용하여 개발 서버를 시작할 수 있습니다. 이 명령어는 애플리케이션을 빌드하고 로컬 개발 서버를 실행하여 실시간으로 변경 사항을 확인할 수 있게 해줍니다. 기본적으로 http://localhost:4200에서 애플리케이션에 접근할 수 있습니다.

cd my-angular-app
ng serve

ng serve를 실행하면 자동으로 애플리케이션이 컴파일되고, 브라우저에서 실시간 리로드가 활성화됩니다.这意味着 코드를 수정할 때마다 브라우저가 자동으로 새로고침되어 변경 사항을 즉시 확인할 수 있습니다. 이는 개발 과정을 매우 효율적으로 만듭니다.

ng serve의 주요 옵션

ng serve 명령어에는 여러 유용한 옵션이 있습니다:

• --open 또는 -o: 서버 시작 후 자동으로 브라우저를 엽니다.
• --port: 기본 포트(4200) 대신 다른 포트를 지정합니다. 예: ng serve --port 4500
• --host: 특정 호스트를 바인딩합니다. 예: ng serve --host 0.0.0.0으로 로컬 네트워크에서 접근 가능하게 할 수 있습니다.
• --prod: 프로덕션 모드로 빌드하여 최적화된 버전을 실행합니다. 이 옵션들을 활용하면 개발 환경을 프로젝트 needs에 맞게 customization할 수 있습니다.

개발 중 문제 해결 팁

개발 서버 실행 중 일반적으로 발생할 수 있는 문제와 해결 방법:

• 포트 충돌: 이미 4200 포트가 사용 중이라면 --port 옵션으로 다른 포트를 지정하세요.
• 종속성 문제: npm install을 실행하여 모든 패키지가 제대로 설치되었는지 확인하세요.
• 컴파일 오류: TypeScript 오류가 발생하면 터미널 메시지를仔细히 확인하고 코드를 수정하세요. 이러한 문제를 신속히 해결하면 개발 workflow가 원활하게 유지됩니다.

기억력과 집중력을 향상시키고 싶다면, 다양한 모드로 구성된 스도쿠 저니를 활용해보세요.

Angular CLI의 추가 명령어와 활용법

Angular CLI는 프로젝트 관리에 유용한 다양한 명령어를 제공합니다. 이를 효과적으로 사용하면 개발 시간을 단축하고 코드 품질을 높일 수 있습니다.

ng generate로 구성 요소 생성하기

ng generate (또는 ng g) 명령어는 컴포넌트, 서비스, 모듈 등의 Angular 구성 요소를 자동으로 생성합니다. 예를 들어, 새로운 컴포넌트를 생성하려면:

ng generate component my-component

이 명령어는 my-component라는 이름의 컴포넌트를 생성하고, 필요한 파일(.ts, .html, .css, .spec.ts)을 자동으로 추가합니다. 다른 유형의 generate 명령어로는:

• ng g service my-service: 서비스 생성
• ng g module my-module: 모듈 생성
• ng g directive my-directive: 디렉티브 생성 이를 통해 반복적인 코드 작성을 피하고, Angular의 best practices를 따를 수 있습니다.

ng build로 프로젝트 빌드하기

ng build 명령어는 애플리케이션을 빌드하여 배포 가능한 파일을 생성합니다. 기본적으로 dist/ 디렉토리에 결과물이 저장됩니다.

ng build

프로덕션 배포를 위해 최적화된 빌드를 생성하려면 --prod 플래그를 사용하세요:

ng build --prod

이렇게 하면 코드 최소화, 나무 흔들기(tree shaking) 등 다양한 최적화가 적용되어 애플리케이션 성능이 향상됩니다.

ng test와 ng e2e로 테스트 실행하기

Angular CLI는 테스트 실행도 지원합니다:

• ng test: Karma를 사용하여 단위 테스트를 실행합니다.
• ng e2e: Protractor를 사용하여 end-to-end 테스트를 실행합니다. 테스트는 애플리케이션의 안정성을 보장하는 중요한 부분이므로, 개발 과정에 꼭 포함시키는 것이 좋습니다.

Angular CLI 사용 시 SEO 고려사항

Angular는 단일 페이지 애플리케이션(SPA) 프레임워크이므로, SEO(검색 엔진 최적화)에 특별한 주의가 필요합니다. Angular CLI로 생성된 프로젝트에서 SEO를 개선하는 방법:

• Angular Universal 사용: 서버 사이드 렌더링(SSR)을 구현하여 검색 엔진이 콘텐츠를 더 쉽게 크롤링할 수 있도록 합니다.
• 메타 태그 관리: Meta 서비스를 사용하여 동적으로 메타 태그를 업데이트합니다.
• 라우팅 최적화: 의미 있는 URL 구조를 사용하고, 라우트에 적절한 제목과 설명을 추가합니다. 이러한 practices를 적용하면 Angular 애플리케이션의 검색 엔진 순위를 높일 수 있습니다.

공부나 업무에 몰입할 때는 별도 설치 없이 바로 실행 가능한 온라인 스톱워치를 이용해보세요.

Angular CLI는 Angular 개발의 핵심 도구로, ng new로 프로젝트를 시작하고 ng serve로 개발 서버를 실행하는 기본 과정만 익혀도 본인의 아이디어를 빠르게 구현할 수 있습니다. 이 글에서 소개한 명령어와 팁을 활용하여 효율적인 개발 workflow를 구축해 보세요. Angular의 강력한 기능을 탐색하면서, 꾸준한 학습과 실천을 통해 실력을 키워나가시길 바랍니다. 질문이 있으시면 댓글로 남겨주세요! 다음 글에서 또 만나요, 코딩하는곰이었습니다.

📣 지금 화제가 되고 있는 문화행사는 바로, 사하예술제를 참고해보세요.