[Angular] Angular 시작하기(local ver.) - (1)
프로젝트 설정
1. 새 프로젝트 생성
프로젝트 생성 명령어
ng new 프로젝트 이름- Would you like to add Angular routing? y
(찾아보니 Y를 누르면 Angular의 라우터가 자동으로 프로젝트에 라우팅을 해준다고 함)
- Which stylesheet format would you like to use? CSS
(잘 모르겠어서 그냥 가장 익숙한 CSS로)
설치 완료
~작업 영역 확인~
2. 프로젝트 구동
우선 명령어를 통해 프로젝트로 접근
cd 프로젝트명나의 경우 프로젝트 이름이 my-store이기 때문에 'cd my-store' 입력
디렉토리가 프로젝트로 변경되었다면 명령어로 프로젝트 구동
ng serve 프로젝트명
만약 구동과 동시에 화면을 보고 싶다면
ng serve my-store --open
✔️Compiled successfully.
후 창이 자동으로 열림
만약 --open을 쓰지 않아 창이 자동으로 열리지 않는다면
localhost:4200으로 접근 가능
여기서 src 폴더를 앵귤러에서 제공해주는 src로 변경하여 진행
src는 Stackblitz에서 받으면 되는데 혹시 몰라 첨부
제대로 잘 바꾸면
이렇게 바뀐다.
글 이렇게 두 개 썼는데 (1)은 StackBlitz와 동일하게 진행하면 됨
문제는 (2) 여기에서 조금 다르게 터미널과 명령어를 이용해보려 한다.
Angular
angular.io
영어 문서 참고
자식 컴포넌트로 데이터 전달하기
1. 새로운 컴포넌트를 만들기 위한 새 터미널 열기
VS CODE 터민널 우측 상단의 '+' 클릭
2. 터미널에서 명령어로 'product-alerts'라는 새 컴포넌트를 생성
ng generate component product-alerts※ 만약 'The generate command requires to be run in an Angular project, but a project definition could not be found.' 이런 에러가 발생한다면 디렉토리가 프로젝트로 되어 있는지 확인할 것
컴포넌트가 잘 생성되었다면
src > app 아래에 'product-alerts'라는 폴더가 생성되고 이 안에 총 4개의 파일이 생성
- product-alerts.component.css
- product-alerts.component.html
- product-alerts.component.spect.ts (이 파일은 뭔지 아직 잘 모르겠음)
- product-alerts.component.ts
2. product-alerts.components.ts에 코드 추가
상품 데이터를 받기 위해 Input 심볼 로드 ▼
부모 컴포넌트에서 해당 프로퍼티의 값을 받아오겠다는 @Input( ) 데코레이터 지정 ▼
(이 경우 부모 컴포넌트는 ProductListComponent)
~코드 중간 확인~
StackBlitz와 다르게 터미널 명령어를 통해 컴포넌트를 생성하면 app.module.ts에 자동으로 이런 코드가 생김
~화면 확인~
나머지 부분은 Stackblitz로 하는 것과 동일해서 뺐음
이 다음부턴 Stackblitz 말고 로컬에서 할 예정