전체 글 검색 결과
275 개의 검색 결과가 있습니다.
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

Angular Component Communication (부모-자식 컴포넌트 간 바인딩)

# 부모 컴포넌트의 내부 Data를 자식 컴포넌트로 전달하는 방법 부모 컴포넌트 템플릿 상에서, 자식 컴포넌트의 속성에 변경을 가하고자 하는 경우 부모컴포넌트.html 상에서 내부 Data를 자식 컴포넌트 속성에 덮어씌워서, 표시하려는 경우 주로 데이터를 보여주고, 표시하려는 용도로 사용된다. 3가지 정도의 방법이 존재한다. 1. 자식컴포넌트.ts 상에서, 속성 앞에 @Input() decorator를 선언 자식 컴포넌트 상에서 관련 속성의 @Input() 데코레이션을 붙여줌으로써, 자식 컴포넌트의 속성값 변경을 허용해준다. 기존 HTML 태그처럼 자식 컴포넌트 Tag에도 해당 속성을 만들어주는 것을 의미한다. //todo.component.ts 中 @Input() todo:Todo; @Input() n..

2020. 7. 8. 23:44
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

Angular Template (컴포넌트.html <> 컴포넌트.ts 간 바인딩 )

# Angular Template이란? HTML 코드로서 템플릿을 표현한 것으로써, 기본적인 HTML 언어 이외의, Template 표현식(Expression)과 Template 문장(Statement)로 구성되어 있음 해당 Component Template(.html) 내부에, 해당 Component Class의 속성과 Method가 다양한 형태로 바인딩된다. (컴포넌트명).component.html이 실질적인 Dom 상의 View를 담당하며, HTML과 템플릿 표현식, 템플릿 문장으로 구성된다. Q. HTML 기존에 널리 알려진 다양한 Tag 들을 정적으로 렌더링하는데, 사용할 수 있다. Q. 템플릿 표현식 이중괄호 안에 컴포넌트 내 속성명을 넣어줌으로, View에 속성값을 보여주는 것이 가능하다. ..

2020. 7. 8. 23:34
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

Angular Component

# Component의 정의 - 하나의 레고 블럭을 Component라고 생각하면 된다. - 컴포넌트 안에 컴포넌트가 들어갈 수 있다. - 컴포넌트는 View와 Logic으로 구성되어 있다. - 컴포넌트는 Class와 @Component..(TypeScript) 로 시작되는 Decoration으로 구성되어 있다. - Class는 Logic을 담당하고, @Component 내 meta정보들을 통해 참조하는 파일들(.html,.css)이 View를 담당한다. # Component 내 Class - Class가 하나의 컴포넌트라고 봐도 무방하다. - Class 내 속성과 메소드를 통해 View와 데이터를 주고 받는다. # Component 내 @Component Decoration - @Component란 T..

2020. 7. 8. 18:03
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

Angular 기초

# Angular CLI(Command Line Interface) Q. Angular CLI란? Angular CLI는 Angular 프로젝트를 지원하는 명령어 툴이라고 생각하면 된다. 해당 툴을 사용하여 기본 Angular Project를 생성한다. 단, node.js 프로젝트이기 때문에, 6.9 이상의 node.js를 먼저 설치해야 정상작동 가능하다. Q. How to Install? 1. npm install -g @angular/cli -> -g 키워드를 붙여서, angular cli를 어디서든 사용가능하도록 설치 2. ng --version -> 설치 후, 제대로 설치되었는지, version을 확인한다. Q. Angular 기본 프로젝트를 생성하는 방법 1. ng new first-app ->..

2020. 7. 8. 16:46
[DEV] Developer 회고

Web 개발의 흐름

개요 해당 페이지에서는 Web 개발의 History에 대한 지식을 정리합니다. Web 개발의 역사는 얼마나 되었을까? 최근 2년 동안 Front-end 사이드에서는 Angular, React, Vue 등 Single Page Application 프레임워크가 대세를 이루고 있다. Back-end 사이드에서도 관련 언어와 프레임워크가 우후죽순으로 늘어나고 있다. 새로운 언어와 기술은 왜이리 많이 나오는지... 어떤 과정을 걸쳐 변화해 왔는지 Web 개발 방법론에 대한 Research를 진행해 보았다. 지금까지 진행된 Web 개발 방법의 변천사와 JavaScript의 위상이 어쩌다가 이렇게까지 올라가게 되었는지를 알아보자. 추후에도, 빠른 이해를 위해 한장의 이미지로 다시 정리하였다. # Web 개발 초기 ..

2020. 7. 8. 13:55