방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Angular tutorial39 앵귤러 튜토리얼(Angular tutorial) - 10 : 컴포넌트, 셀렉터 이전시간 내용이 쉽지 않았습니다. 만들어 준 secondStudy 프로젝트 기반으로 컴포넌트에 대해서 다시 살펴보겠습니다. 우리가 여태껏 보아온 컴포넌트의 파일은 ts형식의 파일과 html파일입니다. 이러한 컴포넌트에서 셀렉터(selector)를 눈여겨 볼 필요가 있습니다. 저번시간에 우리는 app컴포넌트 html파일에 login컴포넌트의 셀렉터를 html테그처럼 붙여놓았고, dashboard컴포넌트의 셀렉터 또한 html 테그처럼 붙여놓았었습니다. 그렇게 붙여놓은 셀렉터 위치에 해당 컴포넌트에서 만든 html의 내용이 나타났었습니다. 또한 컴포넌트ts에 존재하였던 함수도 동작하였었지요. 그리고 ngIf 디렉티브를 통해서 보이기 가리기를 하였었습니다. 물론! app컴포넌트의 셀렉터도 사용되고있습니다. 바.. 2020. 6. 24. 앵귤러 튜토리얼(Angular tutorial) - 9 : 컴포넌트, 모듈 컴포넌트에 디렉티브를 통하여 앞시간에 우리는 로그인이 성공하면 특정 컴포넌트가 보여지도록 하는 기능을 만들어 보았습니다. 이전시간에 했던 내용이 어렵거나 이해가 되지 않는다면 반드시 다시 확인 해 보아야 합니다! 이번시간에는 새롭게 프로젝트를 한개 더 만들어 보도록 하겠습니다. 아래 명령어를 입력하여줍니다! 디렉토리 위치를 잘 보아야합니다! firstStudy 디렉토리에서 아래 명령어를 실행하는 것이 아닙니다! ^^ ng new secondStudy 프로젝트가 완성되었습니다. 우리는 가장 먼저 생겨난 app컴포넌트를 관리(control) 역할을 하는 컴포넌트로 사용 할 예정입니다. 다시말해, 여러개의 컴포넌트를 만들어서 화면을 꾸밀 예정이지만 app컴포넌트에서는 관리(control)역할만 하도록 바꿀 예.. 2020. 6. 17. 앵귤러 튜토리얼(Angular tutorial) - 6 : 컴포넌트, 모듈 * 어려운 6장, 7장 저번시간에는 컴포넌트와 모듈에 대해서 알아보았습다. 이번시간에도 마찬가지로 컴포넌트와 모듈에 대해 살펴보겠습니다. 컴포넌트는 화면을 구성하면서 각종 데이터를 처리해주는 기능임을 알아보았습니다. 모듈은 자세히는 모르겠지만, 먼저 설명한 내용으로는 다양한 데이터관리와 컴포넌트를 관리한다고 하였습니다. 컴포넌트가 어떻게 모듈에서 다루어지는지 알아보려면 컴포넌트를 1개 더 만들어 볼 필요가 있습니다. 앵귤러에서 컴포넌트를 만드려면 컴포넌트 데코레이터(@Component)가 붙은 클래스 파일을 만들어 주어야 합니다. 이것을 일일이 만들기 보다는 아래 명령어를 통해서 아주 쉽게 생성 할 수 있습니다. ng g component 이름 ng라는 명령어에 g라는 옵션과 component라는 옵션을.. 2020. 5. 25. 앵귤러 튜토리얼(Angular tutorial) - 5 : 컴포넌트 저번시간에는 앵귤러의 컴포넌트에 대해서 살펴 보았습니다. 이번시간에도 마찬가지로 컴포넌트에 대해서 알아보겠습니다! 앵귤러의 컴포넌트는 화면구성을 담당합니다. 컴포넌트 파일(*.ts)에 쓰여진 데이터를 html 파일에 표출하기도 하고, 데이터를 서버에 CRUD하는 역할을 하기도 합니다. 이러한 컴포넌트는 기본적으로 class 형태로 구성되어 있습니다. 앵귤러에서 컴포넌트 파일을 만든다는 것은 class로 이루어진 파일에 컴포넌트 데코레이터(@Component)를 붙여주는 것 입니다. 형태를 다시한번 보겠습니다. import { Component } from '@angular/core'; @Component({ //key, value 형식의 내용 }) export class MyCustomComponent .. 2020. 5. 18. 앵귤러 튜토리얼(Angular tutorial) - 4 : 컴포넌트 저번시간까지는 앵귤러에서의 컴포넌트의 역할에 대해서 간단하게 살펴 보았습니다. 컴포넌트는 앵귤러에서 화면구성, 이벤트에 대한 행위를 담당 합니다. 우리가 html파일에서 여러 tag로 만든 화면, 테그 안에 선언한 다양한 이벤트, 변수 등에 대한 행위 이러한 사용자 ui와 직접적으로 동작하는 것이 바로 컴포넌트입니다. 그러면 컴포넌트에 대해 몇가지 예제를 통해서 좀 더 알아보겠습니다. firstStudy 프로젝트로 이동한 뒤에 src - app으로 이동합니다. 그리고 app.component.ts 파일을 더블클릭합니다. 배열과 함수를 추가하여보았습니다. 아래 내용으로 수정하여주세요. import { Component } from '@angular/core'; const array : Array = ['d.. 2020. 5. 15. 앵귤러 튜토리얼(Angular tutorial) - 3 : 기본 구조 저번시간까지는 앵귤러 개발에 대한 환경구성, 그리고 사용하는 목적과 이유등에 대해서 살펴보았습니다. 이번시간에는 처음 설치한 firstStudy 프로젝트를 기반으로 앵귤러의 기본 구조에 대해 단계적으로 살펴보려 합니다. 앵귤러는 타입스크립트 기반으로 구성되어있습니다. 타입스크립트는 자바스크립트와 거의 동일하며, 큰 특징으로는 데이터의 형태(type)가 존재하여 조금 더 엄격한 코드관리가 이루어 질 수 있게 합니다. 타입스크립트에 대한 내용을 살펴보시려면 아래 사이트에서 연습을 해보시는 것도 좋습니다. https://lts0606.tistory.com/17 TypeScript 시작 Javascript 문법이 강력해지고 규모가 커지면서 코드의 관리가 중요해졌다. 자바스크립트는 객체지향 언어의 개념보다는 동적.. 2020. 5. 11. 이전 1 2 3 4 5 6 7 다음
