방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 앵귤러 튜토리얼37 앵귤러 튜토리얼(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. 앵귤러 튜토리얼(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. 이전 1 2 3 4 5 6 7 다음
