본문 바로가기

개발/Angular10

[Angular] 앵귤러 build 에러 :: 마이자몽 git으로 angular 프로젝트를 clone했을때 간혹Could not find module "@angular-devkit/build-angular" 에러가 나타날때가 있다.이는 package.json파일의 패키지들이 설치되어있지 않아서 생기는 에러이다. ng new 명령어를 사용해서 새로운 angular 프로젝트를 만들었을때 기본적으로 node_modules라는 폴더가 있다.하지만, 없는 경우 위의 에러가 뜬다. 이문제를 해결해주기 위해 @angular/cli를 update해주면 된다.1ng update -g @angular/clics 해당 프로젝트 경로 안에서 위의 명령어를 실행해주고 다시 서버를 실행해보자.프로젝트에는 node_modules폴더와 모듈들이 생성되고 에러도 사라진다. 2018. 10. 14.
[Angular] 앵귤러 bootstrap css 사용하기 :: 마이자몽 angular 프로젝트를 진행하면서 bootstrap css를 사용할려고한다.먼저 해당 angular 프로젝트에서 npm을 사용해서 패키지를 받는다.1npm install bootstarp@4.0.0-beta.2cs angular.json파일architect - build - styles부분에 추가 bootstrap.min.css의 경로를 추가해준다.npm으로 설치한 모듈은 node_modules 폴더안에 있다.기본적으로 생성되는 angular.json파일에 styles는 두군데가 있다.test내부가 아니라 build내부에 있는 부분에 추가해줘야한다.1234"styles": [ "src/styles.css", "/Users/Jamong/Documents/angularProjects/ng-library-a.. 2018. 10. 11.
[Angular] 앵귤러 RouterModule 사용 및 실습 :: 마이자몽 Routing은 SPA인 Angular에서 중요한 기능중 하나이다.비동기식 방식으로 화면을 전환하기 위해 탭과 같은 네비게이터를 이용하여 뷰의 한 구역만 전환해서, 하나의 화면에서 모든것을 해결할 수 있게 해준다. 실습은 tab 컴포넌트와 Router를 이용한 내용 전환과 ActivatedRoute를 이요하여 데이터를 넘기는 것까지 할것이다.html컴포넌트는 material을 사용해준다. 1.RouterModule 기본 프로젝트 구조 category-home, category-list module을 만들어준다.이 두 모듈을 탭으로 구성하여 화면에 출력해줄것이다. app.module.ts123456789101112131415161718192021222324252627282930import { Browser.. 2018. 10. 7.
[Angular] 앵귤러 ngIf, ngSwitch, ngFor :: 마이자몽 이번 글에서는 angular view단에서 조건문이나 반복문을 사용하는 법을 실습할것이다.자바개발을 해본 사람들은 jstl과 비슷한 기능을 사용한다고 생각하면 될것이다.material을 사용해서 뷰단 컴포넌트들을 꾸며줄것이니 material 모듈 사용법은 http://myjamong.tistory.com/29 링크를 통해 확인한다. 필자는 test1이라는 컴포는트를 만들어서 진행했다.기본으로 존재하는 app.component.html에 test1 selector만 추가했다. app.module.ts1234567891011121314151617181920212223242526272829import { BrowserModule } from '@angular/platform-browser';import { N.. 2018. 10. 6.
[Angular] 앵귤러 데이터 바인딩(2) 양방향 & 단바향 :: 마이자몽 저번 글에 이어서 데이터 바인딩 2번째 글을 씁니다.양방향과 단방향 데이터 바인딩에 대해서 알아볼건데 저번 데이터 바인딩글에서 이미 단방향 데이터 바인딩을 했다. {{}}를 사용한 Interpolation, []를 사용한 Property Binding 그리고 ()를 사용한 이벤트 바인딩.이미 단방향 바인딩은 배운거다. 그러면 양방향과 단방향 바인딩의 차이점은 뭘까?실습을 통해서 한번 알아보자. 일단 단방향 바인딩을 통해 코드를 작성해보자.이전에 만들었던 컴포넌트들과 구별하기 위해 line3 컴포넌트를 하나 만들고 app.component.html에는 line3의 selector만 넣어준다. 1.단방향 바인딩 app.module.ts12345678910111213141516171819202122232425.. 2018. 10. 1.
[Angular] 앵귤러 Material Design 실습 :: 마이자몽 Angular에는 Material 이란 UI구성 요소 프레임워크가 있다.Material Design을 기반으로 재사용이 가능하고 에겟스 가능한 UI 구성 요소 세트를 제공한다.사용하기 앞서 setting이 필요하다. 아래 URL을 통래 material사이트로 들어간다.https://material.angular.io/ get started를 눌러 단계별로 따라하면 된다. 1.설치 npm을 이용해서 설치를 해준다.yarn을 사용할 경우 해당 사이트에서 명령어를 확인한다.1 Jamong@macui-MacBook-Pro  ~  npm install --save @angular/material @angular/cdk @angular/animationscs 2.모듈 import app.module.ts1234.. 2018. 9. 27.
[Angular] 앵귤러 데이터 바인딩(1) Property Binding & Event Binding :: 마이자몽 Angular는 데이터 바인딩이라는 기술이 사용된다.데이터 바인딩을 사용함으로써 기존의 DOM조작 방법보다 간편하게 View에 원하는 데이터를 출력할수 있다.데이터 바인딩은 단방향과 양방향 두가지 방법을 사용한다.이번글에서는 Property Binding 과 Event Bindig두가지를 배워볼거다.이전 글에서 생성만 Line1, Line2 Module을 사용해서 연습을 해본다. 1.Property BindingProperty Binding은 html태그의 Property의 값에 변화가 가능한 변수나 code로 대치하여 동적으로 View를 변화시킬수 있다.square Bracket []을 사용해서 태그안에 넣어준다. line2.component.html1234Line2 disabled buttoncs b.. 2018. 9. 26.
[Angular] 앵귤러 Component 실습 :: 마이자몽 Component는 View의 한 단위다.화면에 보여지는 하나의 구역이다. app.component.ts1234567891011import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { title = 'ng-jamong-app';} cs '@'문자는 Decorator이다. Java의 Annotation과 비슷한 역할을 해준다.Decorator가 붙으면 Angular가 인식을하게된다.위 코드는 Component Decorator으로 Angular가 .. 2018. 9. 25.
[Angular] 앵귤러 프로젝트 구조 & 흐름 :: 마이자몽 Angular 프로젝트를 처음 생성하면, 매우 복잡하다는 생각이 들것이다.하지만, 한 두번 보다보면 금방 이해될것이다. Angular의 흐름을 아는 것이 중요하다. 우선 가장 먼저 실행되는 것은 index.html이다. index.htmldoctype html> NgJamongApp 그다음 index.html 에서 제어가 main.ts으로 넘어가게되는데....index.html파일에서 main에대한 얘기는 전혀 없다.이는 현재 실행되는 index.html Element를 보면 확인이 가능하다. index.html에서 설정해주지 않은 script들이 추가되어있다.위 5가지는 실행될떄 Angular가 추가해주는 Script들인데 main.js가 main.ts로 연결해준다. main.tsimport { ena.. 2018. 9. 24.
[Angular] 앵귤러 맥OS 설치 및 개발환경 구축 :: 마이자몽 예전부터 Angular로 Front side를 개발해보고 싶다는 생각을 갖고있었다.이번 기회에 공부하면서 최종적으로 Angular를 사용해서 작은 프로젝트하나를 해볼려고한다. Angular를 설치하기에 앞서, Node.js, typescript에 대해서 좀 알아두면 좋겠지만, Angular를 하면서 익혀도 된다. Angular를 설치하기 위해 Node.js가 설치되어 있어야한다. 간단하게 Node.js가 무엇인지 알아보자. 1. Node.jsNode.js에 대한 정의를 검색해보면, 확장성 있는 네트워크 애플리케이션이다.... Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다..... 등등 어렵게 설명이 되어있는데...쉽게 그냥 설명하면 JavaScript를 B.. 2018. 9. 24.