방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 앵귤러, 리엑트, 뷰/Angular Tutorial(new)36 앵귤러 튜토리얼(Angular tutorial) - 11 : 디렉티브 저번시간에는 컴포넌트에서의 셀렉터의 의미, 컴포넌트간 데이터를 주고받는 방법에 대해서 살펴보았습니다. 이번시간 부터는 secondStudy 프로젝트의 컴포넌트에 여러 기능을 붙여 보면서 다양한 문법을 경험하여 보겠습니다. 먼저 꾸며볼 파일은 login컴포넌트 입니다. login컴포넌트의 html파일에서 우리는 아이디와 비밀번호를 입력하여 성공하면 dashboard 컴포넌트가 보여지게 하였습니다. 여기에 비밀번호의 길이에 대해서 최소길이에 대한 알림을 주고 성공/실패여부를 알려주는 기능을 붙여보겠습니다. 먼저 비밀번호 길이가 최소 6자리 이상임을 알려주는 기능입니다. 해당기능은 우리가 사용하던 ngIf 디렉티브를 통해 쉽게 해결 할 수 있습니다. 비밀번호의 값은 ngModel 디렉티브가 pwd라는 변수로 .. 2020. 6. 30. 앵귤러 튜토리얼(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) - 8 : 컴포넌트, 모듈 컴포넌트와 모듈과의 개념에 대해서 어느정도 이해가 되셨는지요? 이번시간에는 컴포넌트의 개념을 좀 더 알아보기위해서 간단한 기능을 만들어보려고 합니다. 바로 로그인을 하면 특정 페이지로 이동하는 기능입니다! 물론 데이터베이스와의 연동부분은 아직 없지만, 기본적인 틀과 개념에 대해서 살펴보려 합니다. 이전시간에 새로 만든 컴포넌트는 hello컴포넌트, world 컴포넌트 2개가 존재 하였습니다. 물론 app컴포넌트(app.component.ts 입니다.)도 있었습니다. app모듈의 내용에 아래 내용으로 수정합니다. (app.module.ts입니다.) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@ang.. 2020. 6. 8. 앵귤러 튜토리얼(Angular tutorial) - 7 : 컴포넌트, 모듈 저번시간에는 컴포넌트와 모듈과의 관계에 대해서 살펴보았습니다. 이번시간에도 컴포넌트와 모듈에 대해서 살펴보겠습니다. 모듈은 화면을 관리하는 여러개의 컴포넌트를 가질 수 있었습니다. 앞시간에서 app.component.ts와 hello.component.ts를 통해서 살펴보았습니다. 프로젝트에서 main.ts라는 파일을 찾은뒤에 더블클릭 해 봅니다. 내용을 전부 이해할 수 없지만 bootstrapModule 이라는 함수에 AppModule이라는 클래스가 사용되는 것을 볼 수 있습니다. 자세히보면 AppModule의 클래스 이름은 app.module.ts 파일에 사용된 클래스 이름 입니다! 우리가 여태껏 살펴본 모듈이 main.ts 라는 곳에 사용되었습니다. main.ts파일은 앵귤러 프로젝트가 실행 될 때.. 2020. 6. 2. 앵귤러 튜토리얼(Angular tutorial) - 6 : 컴포넌트, 모듈 * 어려운 6장, 7장 저번시간에는 컴포넌트와 모듈에 대해서 알아보았습다. 이번시간에도 마찬가지로 컴포넌트와 모듈에 대해 살펴보겠습니다. 컴포넌트는 화면을 구성하면서 각종 데이터를 처리해주는 기능임을 알아보았습니다. 모듈은 자세히는 모르겠지만, 먼저 설명한 내용으로는 다양한 데이터관리와 컴포넌트를 관리한다고 하였습니다. 컴포넌트가 어떻게 모듈에서 다루어지는지 알아보려면 컴포넌트를 1개 더 만들어 볼 필요가 있습니다. 앵귤러에서 컴포넌트를 만드려면 컴포넌트 데코레이터(@Component)가 붙은 클래스 파일을 만들어 주어야 합니다. 이것을 일일이 만들기 보다는 아래 명령어를 통해서 아주 쉽게 생성 할 수 있습니다. ng g component 이름 ng라는 명령어에 g라는 옵션과 component라는 옵션을.. 2020. 5. 25. 이전 1 2 3 4 5 6 다음
