방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Angular tutorial39 앵귤러 튜토리얼(Angular tutorial) - 16 : 라우팅 저번시간에 우리는 서비스를 통해 특정 데이터를 공유하는 방법에 대해 살펴보았습니다. 이번시간에는 라우팅에 대해서 살펴보도록 하겠습니다. 라우팅이란 사용자의 요청에 대해서 다양한 페이지로 이동하는 방법을 의미합니다. 이전까지 우리는 컴포넌트에서 조건을 통해서 화면이동을 할 수 있었습니다. 그러나 "새로고침" 등의 행위가 발생하면 여지없이 처음 화면으로 돌아가 버렸습니다. 라우팅 방법은 이러한 문제를 해결하면서 동시에 각종 경로(Path)를 사용할 수 있습니다. 먼저 프로젝트를 1개 만들어 보겠습니다. 간만에 보는 ng new 명령어 입니다. 여기서 마찬가지로 처음 선택은 N, 다음 선택은 css를 선택하여주세요. 가장 처음 만들어진 app컴포넌트는 이전처럼 "컨트롤"의 역할을 하게 될 것 입니다. 그러면,.. 2020. 7. 28. 앵귤러 튜토리얼(Angular tutorial) - 15 : Observable 저번시간에는 특정 데이터를 모듈에서 제공(provider)하여 컴포넌트에서 받는(inject) 내용에 대해서 살펴 보았습니다. 모듈에서의 데이터를 이렇게 전달하고 공유하는 방법은 사용하는 각각의 컴포넌트에게 일괄된 내용을 전달하기 위해서 자주 사용됩니다. 또한 사용하는 다른 모듈에게 데이터를 전달하는 방법으로도 사용됩니다. 오직 단순한 데이터를 전달하기 위해서만 모듈의 제공(provider) 기능이 있는 것은 아닙니다. 이를 위해 app컴포넌트 html 파일을 한번 살펴보겠습니다. 사진처럼 우리는 상위 컴포넌트에서 하위 컴포넌트에게 데이터를 전달하고 받기 위해서 여러 작업을 하였습니다. 상위 컴포넌트에서는 데이터를 전달하고, 하위컴포넌트에서는 Input, Output 데코레이터를 통해서 데이터를 받고 보.. 2020. 7. 21. 앵귤러 튜토리얼(Angular tutorial) - 14 : 데이터 공유(Share, Inject) 저번시간까는 우리는 앵귤러의 기본구성형태, 컴포넌트 사용방법에 대해서 살펴보았습니다. 컴포넌트의 FormsModule 또는 ReactiveFormsModule사용법은 사실 쉽지가 않습니다. 여러번 연습하고 자주 사용해야 익숙해지는 부분들 입니다. 자 여기까지 내용을 잠깐 정리 해 보겠습니다. 앵귤러의 기본 구성형태는 모듈 + 컴포넌트의 형태로 이루어져 있습니다. 컴포넌트는 화면을 구성하는 기능을 담당하였습니다. 데이터를 "바인딩" 하는 방법을 컴포넌트에서 우리는 단순하게 데이터를 붙여주거나, FormsModule 또는 ReactiveFormsModule을 사용 해 보았습니다. 이러한 "바인딩" 방법으로 Dom 객체에 접근하지 않고 데이터를 화면에 표출하거나 가져올 수 있었습니다. 모듈에서 우리는 이러한 .. 2020. 7. 14. 앵귤러 튜토리얼(Angular tutorial) - 13 : 데이터 바인딩 심화 * 어려운 13장, 복잡해 보이는 ReactiveFormsModule 벌써 앵귤러에 대해서 살펴보는 13번째 시간입니다. 이번시간에도 마찬가지로 컴포넌트에 대해서 조금 더 살펴보겠습니다. dashboard컴포넌트에 대해서 작업을 해 보겠습니다. 그런데.. 작업하려다보니까 조금 문제가 있네요. dashboard컴포넌트가 적용되었는지 확인하려면 무조건 로그인을 해야 됩니다. 다시말해 login컴포넌트를 통한 뒤에야 비로소 dashboard컴포넌트에 접근할 수 있습니다. 그런데 로그인을 한뒤 dashboard컴포넌트로 이동 하였더라도 우리가 작업을 하고나서 저장을 하게 되면 새로고침이 일어나면 안타깝게도 처음 로그인 모습으로 돌아가게 됩니다.. 불편한 점이 너무 많으므로 첫 화면을 바꾸도록 합니다. 이를 위해.. 2020. 7. 8. 앵귤러 튜토리얼(Angular tutorial) - 12 : 데이터 바인딩, 반응형 모듈 저번시간에는 앵귤러의 컴포넌트에서 여러 디렉티브와 속성을 사용하는 방법에 대해서 살펴 보았습니다. 이번시간에도 이이서 컴포넌트를 다양한 방법으로 꾸며보겠습니다. 우리는 FormsModule이라는 모듈을 app모듈에 등록한 뒤에 컴포넌트에서 [(ngModel)] 이라는 디렉티브를 통해서 데이터를 받아왔었습니다. 그 예로는 id와 pwd값을 ngModel로 바인딩하여 데이터를 가져왔었습니다. 이번에 바꾸어 볼 대상이 바로 id와 pwd 값을 다른 방법으로 바인딩 해 보는 것 입니다. ReactiveFormsModule이라는 모듈을 한번 적용하여 보겠습니다. app모듈 파일에 ReactiveFormsModule을 사용할 수 있도록 추가하여 줍니다. * 대상 : app.module.ts import { Brow.. 2020. 7. 8. 앵귤러 튜토리얼(Angular tutorial) - 11 : 디렉티브 저번시간에는 컴포넌트에서의 셀렉터의 의미, 컴포넌트간 데이터를 주고받는 방법에 대해서 살펴보았습니다. 이번시간 부터는 secondStudy 프로젝트의 컴포넌트에 여러 기능을 붙여 보면서 다양한 문법을 경험하여 보겠습니다. 먼저 꾸며볼 파일은 login컴포넌트 입니다. login컴포넌트의 html파일에서 우리는 아이디와 비밀번호를 입력하여 성공하면 dashboard 컴포넌트가 보여지게 하였습니다. 여기에 비밀번호의 길이에 대해서 최소길이에 대한 알림을 주고 성공/실패여부를 알려주는 기능을 붙여보겠습니다. 먼저 비밀번호 길이가 최소 6자리 이상임을 알려주는 기능입니다. 해당기능은 우리가 사용하던 ngIf 디렉티브를 통해 쉽게 해결 할 수 있습니다. 비밀번호의 값은 ngModel 디렉티브가 pwd라는 변수로 .. 2020. 6. 30. 이전 1 2 3 4 5 6 7 다음
