angular-seed

KO | EN

gitlite — search

#javascript #python #react #ai #llm #machine-learning #rust #macos #awesome #cli #vue #pytorch #ios #mcp

(★ 13,082)

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

angular-seed 최신버젼 다운로드

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

// 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

angular-seed

angular-seed 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

angular-seed

angular-seed 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README