angular-seed - GitLite

KO | EN

gitlite — search

#react #ai #llm #golang #rust #deep-learning #linux #java #windows #pytorch #ios #mcp #openai #open-source

angular-seed

(★ 13,081)

Angular 앱을 위한 시드 프로젝트입니다.

파일 탐색기

최종 버전 다운로드 (.zip)

- - view1.html
  - view1.js
  - view1.spec.js
- - view2.html
  - view2.js
  - view2.spec.js
- app.css
- app.js
- index-async.html
- index.html
- protractor.conf.js
- scenarios.js
.gitignore
.jshintrc
.travis.yml
karma.conf.js
LICENSE
package-lock.json
package.json
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/angular/angular-seed

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd angular-seed

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

package-lock.json --> Npm specific metadata, including versions of installed development tools dependencies

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm test

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm run test-single-run

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# `angular-seed` — AngularJS 앱을 위한 시드 프로젝트
이 프로젝트는 전형적인 [AngularJS][angularjs] 웹 앱을 위한 애플리케이션 뼈대입니다. 이를 사용하여 AngularJS 웹 앱 프로젝트와 개발 환경을 빠르게 부트스트랩할 수 있습니다.
이 시드 프로젝트는 샘플 AngularJS 애플리케이션을 포함하고 있으며, 웹 개발을 즉시 시작할 수 있도록 AngularJS 프레임워크와 여러 개발 및 테스트 도구가 사전에 설정되어 있습니다.
이 시드 앱은 많은 기능을 하지는 않으며, 단순히 두 개의 컨트롤러와 뷰를 서로 연결하는 방법을 보여줍니다.
## 시작하기
시작하려면 간단히 `angular-seed` 저장소를 복제(clone)하고 의존성을 설치하면 됩니다:
### 사전 요구 사항
`angular-seed` 저장소를 복제하려면 git이 필요합니다. git은 [여기][git]에서 받을 수 있습니다.
또한 `angular-seed`를 초기화하고 테스트하기 위해 여러 Node.js 도구를 사용합니다. Node.js와 패키지 매니저(npm)가 설치되어 있어야 합니다. [여기][node]에서 다운로드할 수 있습니다.
### `angular-seed` 복제하기
git을 사용하여 `angular-seed` 저장소를 복제합니다:
```
git clone https://github.com/angular/angular-seed.git
cd angular-seed
```
`angular-seed`의 커밋 히스토리 없이 새 프로젝트를 시작하고 싶다면 다음 명령을 실행할 수 있습니다:
```
git clone --depth=1 https://github.com/angular/angular-seed.git 
```
`depth=1`은 git에게 단 하나의 커밋에 해당하는 히스토리 데이터만 가져오도록 지시합니다.
### 의존성 설치하기
이 프로젝트에는 도구와 AngularJS framework 코드라는 두 가지 종류의 의존성이 있습니다. 도구들은 애플리케이션을 관리하고 테스트하는 데 도움을 줍니다.
\* 의존하는 도구들과 AngularJS 코드는 [Node 패키지 매니저][npm]인 `npm`을 통해 가져옵니다.
\* 엔드투엔드(end-to-end) 테스트를 실행하려면 시스템에 [Java Development Kit (JDK)][jdk]도 설치되어 있어야 합니다. 자세한 내용은 [엔드투엔드 테스트](#e2e-testing) 섹션을 확인하세요.
다운로드한 AngularJS 파일이 `app/lib`에 자동으로 복사되도록 `npm`을 미리 설정해 두었으므로, 간단히 다음을 실행하면 됩니다:
```
npm install
```
내부적으로 이 명령어는 `npm run copy-libs`도 호출하며, 이는 AngularJS 파일과 기타 프론트엔드 의존성을 복사합니다. 그 후 프로젝트에 두 개의 새로운 디렉터리가 생성된 것을 확인할 수 있습니다.
\* `node\_modules` - 필요한 도구들의 npm 패키지 포함
\* `app/lib` - AngularJS 프레임워크 파일 및 기타 프론트엔드 의존성 포함
\*참고: `node\_modules`에서 `app/lib`으로 AngularJS 파일을 복사하면 웹 서버를 통해 파일을 더 쉽게 제공할 수 있습니다.\*
### 애플리케이션 실행하기
간단한 개발용 웹 서버를 프로젝트에 미리 설정해 두었습니다. 이 서버를 시작하는 가장 간단한 방법은 다음과 같습니다:
```
npm start
```
이제 [`localhost:8000/index.html`][local-app-url]에서 앱을 확인할 수 있습니다.
## 디렉터리 구조
```
app/ --> 애플리케이션의 모든 소스 파일
app.css --> 기본 스타일시트
core/ --> 모든 앱 특정 모듈
version/ --> 버전 관련 컴포넌트
version.js --> 버전 모듈 선언 및 기본 "version" 값 서비스
version\_test.js --> "version" 값 서비스 테스트
version-directive.js --> 현재 앱 버전을 반환하는 커스텀 디렉터티브
version-directive\_test.js --> 버전 디렉터티브 테스트
interpolate-filter.js --> 커스텀 보간 필터
interpolate-filter\_test.js --> 보간 필터 테스트
view1/ --> view1 뷰 템플릿 및 로직
view1.html --> 부분 템플릿
view1.js --> 컨트롤러 로직
view1\_test.js --> 컨트롤러 테스트
view2/ --> view2 뷰 템플릿 및 로직
view2.html --> 부분 템플릿
view2.js --> 컨트롤러 로직
view2\_test.js --> 컨트롤러 테스트
app.js --> 메인 애플리케이션 모듈
index.html --> 앱 레이아웃 파일 (앱의 메인 html 템플릿 파일)
index-async.html --> index.html과 같지만 js 파일을 비동기식으로 로드함
e2e-tests/ --> 엔드투엔드 테스트
protractor-conf.js --> Protractor 설정 파일
scenarios.js --> Protractor가 실행할 엔드투엔드 시나리오
karma.conf.js --> Karma로 유닛 테스트를 실행하기 위한 설정 파일
package.json --> 개발 도구 의존성을 포함한 Node.js 관련 메타데이터
package-lock
```

.json --> 설치된 개발 도구 의존성의 버전을 포함한 Npm 고유 메타데이터
```
## 테스트
`angular-seed` 애플리케이션에는 단위 테스트와 엔드투엔드 테스트 두 가지 종류의 테스트가 있습니다.
### 단위 테스트 실행하기
`angular-seed` 앱은 단위 테스트가 사전에 설정되어 제공됩니다. 이 테스트들은 [Jasmine][jasmine]으로 작성되었으며, [Karma][karma] 테스트 러너를 통해 실행됩니다. 테스트 실행을 위해 Karma 설정 파일이 제공됩니다.
\* 설정 파일은 `karma.conf.js`에 있습니다.
\* 단위 테스트는 테스트 대상 코드 바로 옆에 위치하며 `.spec.js` 확장자를 가집니다 (예: `view1.spec.js`).
단위 테스트를 실행하는 가장 쉬운 방법은 제공되는 npm 스크립트를 사용하는 것입니다:
```
npm test
```
이 스크립트는 Karma 테스트 러너를 시작하여 단위 테스트를 실행합니다. 또한 Karma는 소스 파일과 테스트 파일의 변경 사항을 감시하다가 파일이 변경될 때마다 테스트를 다시 실행합니다.
이 방식이 권장되는 전략입니다. 파일을 저장할 때마다 단위 테스트가 실행되면 코드의 예상 기능을 깨뜨리는 변경 사항에 대해 즉각적인 피드백을 받을 수 있기 때문입니다.
또한 Karma에 테스트를 단 한 번만 실행하고 종료하도록 요청할 수도 있습니다. 이는 특정 버전의 코드가 예상대로 작동하는지 확인하고 싶을 때 유용합니다. 프로젝트에는 이를 수행하기 위한 사전 정의된 스크립트가 포함되어 있습니다:
```
npm run test-single-run
```
### 엔드투엔드 테스트 실행하기
`angular-seed` 앱에는 마찬가지로 [Jasmine][jasmine]으로 작성된 엔드투엔드 테스트가 포함되어 있습니다. 이 테스트들은 [Protractor][protractor] 엔드투엔드 테스트 러너로 실행됩니다. 네이티브 이벤트를 사용하며 AngularJS 애플리케이션을 위한 특별한 기능들을 가지고 있습니다.
\* 설정은 `e2e-tests/protractor-conf.js`에 있습니다.
\* 엔드투엔드 테스트는 `e2e-tests/scenarios.js`에 있습니다.
Protractor는 웹 앱과의 상호작용을 시뮬레이션하고 애플리케이션이 올바르게 응답하는지 검증합니다. 따라서 Protractor가 상호작용할 수 있도록 웹 서버가 애플리케이션을 호스팅하고 있어야 합니다.
\*\*Protractor를 시작하기 전에 별도의 터미널 창을 열고 다음을 실행하세요:\*\*
```
npm start
```
또한 Protractor는 WebDriver를 기반으로 구축되었기 때문에, WebDriver가 설치되어 있고 최신 상태인지 확인해야 합니다. `angular-seed` 프로젝트는 엔드투엔드 테스트 실행 전에 이를 자동으로 수행하도록 설정되어 있으므로 걱정할 필요가 없습니다. 수동으로 WebDriver를 업데이트하려면 다음을 실행하면 됩니다:
```
npm run update-webdriver
```
애플리케이션을 호스팅하는 개발 웹 서버가 실행 중인지 확인했다면, 제공되는 npm 스크립트를 사용하여 엔드투엔드 테스트를 실행할 수 있습니다:
```
npm run protractor
```
이 스크립트는 개발 서버에서 호스팅되고 있는 애플리케이션을 상대로 엔드투엔드 테스트를 실행합니다.
\*\*참고:\*\*
내부적으로 Protractor는 [Selenium Standalone Server][selenium]를 사용하며, 이는 다시 로컬 시스템에 [Java Development Kit (JDK)][jdk]가 설치되어 있어야 합니다. 명령 라인에서 `java -version`을 실행하여 이를 확인하세요.
JDK가 아직 설치되어 있지 않다면, [여기서][jdk-download] 다운로드할 수 있습니다.
## AngularJS 및 기타 의존성 업데이트하기
AngularJS 프레임워크 라이브러리 코드와 도구들은 패키지 매니저(예: npm)를 통해 가져오므로, 이 도구들을 사용하여 의존성을 쉽게 업데이트할 수 있습니다. 미리 설정된 스크립트를 실행하기만 하면 됩니다:
```
npm run update-deps
```
이렇게 하면 `npm update`와 `npm run copy-libs`가 호출되며, 이는 차례대로 `package.json` 파일에 지정된 버전 범위와 일치하는 최신 버전을 찾아 설치합니다.
지정된 범위가 허용하는 것보다 최신 버전으로 의존성을 업데이트하고 싶다면, `package.json`에서 버전 범위를 변경한 후 평소처럼 `npm run update-deps`를 실행하면 됩니다.
## AngularJS 비동기 로딩
`angular-seed` 프로젝트는 프레임워크와 애플리케이션 스크립트의 비동기 로딩을 지원합니다.
특수 파일인 `index-async.html`은 이러한 로딩 방식을 지원하도록 설계되었습니다. 이것이 작동하려면 HTML 페이지에 AngularJS 자바스크립트 조각을 주입해야 합니다. 프로젝트에는 이를 돕기 위한 미리 정의된 스크립트가 있습니다:
```
npm

run update-index-async
```
이렇게 하면 `angular-loader.js` 라이브러리 파일의 내용이 `index-async.html` 페이지로 복사됩니다. 사용하는 AngularJS 버전을 업데이트할 때마다 이 작업을 실행할 수 있습니다.
## 애플리케이션 파일 서빙하기
AngularJS는 클라이언트 측 전용 기술이므로 백엔드 서버가 전혀 필요 없는 AngularJS 웹 앱을 만드는 것도 가능하지만, 브라우저의 보안 제한(샌드박스) 관련 문제를 방지하기 위해 개발 중에는 로컬 웹 서버를 사용하여 프로젝트 파일을 서빙하는 것을 권장합니다. 샌드박스 구현 방식은 브라우저마다 다르지만, `http://` 체계 대신 `file://` 체계를 통해 HTML 페이지를 열 때 쿠키나 XHR 등이 제대로 작동하지 못하도록 차단하는 경우가 종종 있습니다.
### 개발 중에 앱 실행하기
`angular-seed` 프로젝트에는 로컬 개발용 웹 서버가 미리 설정되어 있습니다. 이는 [http-server][http-server]라는 이름의 Node.js 도구입니다. `npm start`로 이 웹 서버를 시작할 수 있지만, 도구를 전역(global)으로 설치할 수도 있습니다.
```
sudo npm install -g http-server
```
그런 다음 아래 명령을 실행하여 모든 폴더에서 정적 파일을 서빙하는 자체 개발 웹 서버를 시작할 수 있습니다.
```
http-server -a localhost -p 8000
```
또는 Apache나 Nginx 같은 자체 웹 서버를 직접 구성할 수도 있습니다. 단순히 서버가 `app/` 디렉터리 아래의 파일들을 서빙하도록 설정하기만 하면 됩니다.
### 프로덕션 환경에서 앱 실행하기
이는 앱의 복잡성이나 시스템의 전체 인프라에 따라 다르지만, 프로덕션 환경에서 필요한 것은 기본적으로 `app/` 디렉터리 아래의 파일들뿐이라는 것이 일반적인 규칙입니다.
나머지는 모두 생략해도 됩니다.
AngularJS 앱은 브라우저에서 접근할 수 있는 곳에 호스팅해야 하는 정적 HTML, CSS, JavaScript 파일들의 모음일 뿐입니다.
만약 AngularJS 앱이 XHR이나 기타 방식을 통해 백엔드 서버와 통신하는 경우, 해당되는 경우 동일 출처 정책(same origin policy)을 준수할 수 있도록 정적 파일을 호스팅하는 가장 좋은 방법을 찾아야 합니다. 보통 이는 백엔드 서버에서 파일을 호스팅하거나 백엔드 서버와 웹 서버를 리버스 프록시(reverse-proxying)하는 방식으로 이루어집니다.
## 지속적 통합 (Continuous Integration)
### Travis CI
[Travis CI][travis]는 GitHub 저장소의 새로운 커밋을 모니터링하고 앱 빌드나 테스트 실행 같은 스크립트를 실행할 수 있는 지속적 통합 서비스입니다. `angular-seed` 프로젝트에는 GitHub에 코드를 푸시할 때 Travis가 테스트를 실행하도록 지시하는 Travis 설정 파일인 `.travis.yml`이 포함되어 있습니다.
Travis와 GitHub 간의 연동을 활성화해야 합니다. 방법은 [Travis 웹사이트][travis-docs]를 참조하세요.
## 연락처
AngularJS에 대한 자세한 내용은 [angularjs.org][angularjs]를 확인하세요.
[angularjs]: https://angularjs.org/
[git]: https://git-scm.com/
[http-server]: https://github.com/indexzero/http-server
[jasmine]: https://jasmine.github.io/
[jdk]: https://wikipedia.org/wiki/Java\_Development\_Kit
[jdk-download]: http://www.oracle.com/technetwork/java/javase/downloads
[karma]: https://karma-runner.github.io/
[local-app-url]: http://localhost:8000/index.html
[node]: https://nodejs.org/
[npm]: https://www.npmjs.org/
[protractor]: http://www.protractortest.org/
[selenium]: http://docs.seleniumhq.org/
[travis]: https://travis-ci.org/
[travis-docs]: https://docs.travis-ci.com/user/getting-started