console.log("연록")

formGroup expects a FormGroup instance. Please pass one in. 에러 대문짝만하게 발생 원인) component.ts 파일에 formbuilder 설정을 하지 않음 해결) 1. constructor에 formbuilder 넣어주기 2. 선언한 form에 formbuilder(나는 fb로 써서 fb).group으로 대입 나는 함수에 담아 대입해줬다

https://angular.kr/start/start-forms Angular 가이드 Angular 가이드 angular.kr 주문 폼 모델 정의하기 1. cart.component.ts 파일 코드 수정 ① @angular/forms 패키지로 제공되는 FormBuilder 서비스 불러오기(폼 컨트롤 간단히 생성 가능) ② FormBuilder 서비스를 CartComponent constructor( )에 의존성으로 주입 2. 사용자의 이름과 주소를 입력받기 위해 FormBuilder group( ) 메서드로 name과 address 필드가 있는 폼 모델을 생성 후 checkoutForm 프로퍼티에 할당 3. 폼을 처리하는 onSubmit( ) 메서드 정의 onSubmit( ) 메서드는 사용자가 입력한 ..

https://angular.kr/start/start-data Angular 가이드 Angular 가이드 angular.kr 장바구니 서비스 정의하기 1. 장바구니 서비스 생성(Angular Generator → Service) app 폴더 아래에 'cart'라는 이름의 service를 추가하기 위한 명령어 사용 ng generate service cart 이렇게 두 개의 파일 생성 ~cart.service.ts 확인~ 2. CartService 클래스 안에 items 프로퍼티(장바구니에 담긴 상품을 저장하는 배열) 정의 3. 장바구니에 상품을 추가하는 메서드와 장바구니에 담긴 상품 목록을 반환하는 메서드, 장바구니를 비우는 메서드 정의 장바구니 서비스 활용하기 1. product-details.com..

https://angular.kr/start/start-routing Angular 가이드 Angular 가이드 angular.kr 브라우저 주소 표시줄에 URL을 입력하면 해당 제품 화면으로 이동 싱글 페이지 애플리케이션에서 링크를 클릭하면 화면을 전환 브라우저의 "뒤로 가기", "앞으로 가기" 버튼을 누르면 브라우저 히스토리를 기반으로 이동 URL 경로와 컴포넌트 연결 이 애플리케이션에는 이미 Angular Router를 사용해 ProductListComponent로 화면을 전환하는 기능이 있음 지금은 상품의 상세정보 화면이동하는 라우팅 규칙을 추가 1. 상품의 상세정보를 표시하는 컴포넌트를 명령어로 생성 ng generate component product-details 잘 진행됐다면 이렇게 폴더와..

프로젝트 설정 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 se..

https://angular.kr/start#%EC%9E%90%EC%8B%9D-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EB%8B%AC%ED%95%98%EA%B8%B0 Angular 가이드 Angular 가이드 angular.kr 자식 컴포넌트로 데이터 전달하기 ProductListComponent에 있는 상품 데이터를 활용해 알림 구현 → 상품의 가격이 $700 이상이면 Notify Me 버튼을 표시해 해당 상품이 세일 진행시 사용자에게 알림 부모 컴포넌트 ProductListComponent에서 데이터를 받는 자식 컴포넌트 ProductAlertsComponent를 만들기 1. app 폴더 우..

https://angular.kr/start Angular 가이드 Angular 가이드 angular.kr StackBliz에서 진행 (StackBlitz는 브라우저 기반의 개발 환경이기 때문에 웹 브라우저에서 바로 애플리케이션을 생성하고 저장할 수 있으며, 자유롭게 공유 가능) 사용할 컴포넌트 : 다른 컴포넌트를 띄울 수 있도록 제일 먼저 로딩되는 컴포넌트 : 온라인 샵의 이름과 주문 버튼을 표시 : 상품 목록을 표시 : 알림을 표시 예제 프로젝트 생성하기 StackBlitz에 이미 만들어져 있는 프로젝트에 접속 StackBlitz에 로그인 프로젝트를 포크 주기적으로 저장 이 튜토리얼을 진행하며 작업할 파일은 src 폴더 안에 있음 상품 목록 생성하기 products.ts 안의 상품 데이터 produc..

Angular 가이드 Angular 가이드 angular.kr Angular 로컬 환경에 설치 전 준비하기 Node.js npm 패키지 매니저 나는 이미 설치되어 있음 (확인 방법 : cmd 창에 node -v, npm -v 치기 -> 설치되어 있으면 버전이 나옴) Angular CLI 설치하기 cmd에 아래 명령 실행 npm install -g @angular/cli 여기까지 진행사항 워크스페이스, 기본 애플리케이션 생성 애플리케이션은 Angular 워크스페이스 영역에서 개발 1. Angular CLI ng new 명령 실행 - Angular CLI는 cmd창에서 ng 명령으로 실행 가능 - my-app을 이름으로 지정 ng new my-app 2. 기타 설정(내 마음대로 지정) - Would you ..

Angular *CLI Angular 애플리케이션을 가장 빠르고, 쉽고, 모범사례로 개발하는 방법 수많은 작업들을 간단히 처리 가능 ng build Angular 앱 컴파일 ng serve 애플리케이션을 빌드하고 개발서버로 서비스. 파일이 변경되면 바로 반영 ng generate 스키매틱에 정해진대로 Angular 구성요소를 생성, 수정 ng test 유닛 테스트 ng e2e 애플리케이션을 빌드하고 개발서버로 띄운 후에 엔드-투-앤드 테스트 실행 Angular CLI 설치법 npm 패키지 매니저로 명령 실행 ▼ npm install -g @angular/cli 👉🏻 Angular CLI 더 알아보기 *CLI(Command Line Interface) 명령 줄 인터페이스(CLI, Command line i..

앵귤러를 어떻게 공부하면 좋을까요? 라는 물음에 선임님은 앵귤러 공식 사이트를 추천해주셨다. 워낙 공식 사이트가 잘 되어있고, 또 한국어로 번역까지 되어있으므로 공식 사이트를 통한 학습이 다른 것들보단 낫다고 하셨다. 그러므로 나의 앵귤러 학습은 우선 공식 사이트를 바탕으로 진행된다. https://angular.kr/guide/what-is-angular Angular 가이드 Angular 가이드 angular.kr Angular는 TypeScript를 기반으로 개발됨. 플랫폼이면서 동시에 확장가능한 *컴포넌트 구조로 웹 애플리케이션을 만드는 프레임 워크 라우팅, 폼 관리, 클라이언트-서버 통신 등 웹 개발에 필요한 라이브러리를 조화롭게 통합한 모음집 애플리케이션 개발, 빌드, 테스트, 수정에 필요한 ..