방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 앵귤러, 리엑트, 뷰110 앵귤러 튜토리얼(Angular tutorial) - 19, with FireBase : 구성 저번시간까지 우리는 서비스와 가드, 그리고 Observable과 관련된 내용을 살펴보았습니다. 모듈, 컴포넌트, 서비스, 라우터 그리고 가드를 사용하면 왠만한 형태의 앱을 만들수가 있습니다. 파이어베이스와의 연동을 살펴보기 전 내용을 먼저 다시한번 살펴보겠습니다. 모듈의 주 목적은 컴포넌트를 관리하는 것 입니다. 모듈은 또한 각종 정보(서비스, 일반 객체 등)를 제공하기도 합니다. 다른 사용자가 만든 모듈을 등록(import)하여 사용하기 위해서는 내가 만든 모듈에 등록 해 주어야 합니다. 컴포넌트는 화면구성을 담당합니다. 사용자가 바라보는 화면에 대한 모든 기능을 담당합니다. 컴포넌트간의 데이터를 주고받는 방법은, 컴포넌트에서 속성이나 Input 또는 Output같은 데코레이터를 통해서 가능 합니다. .. 2020. 8. 14. 앵귤러 튜토리얼(Angular tutorial) - 18 : Observable 심화 저번시간에는 가드(guard)를 통하여 사용자의 요청에 따라 컴포넌트가 동작하기 전 행동을 하는, 인터셉터와 같은 역할의 기능에 대해서 살펴 보았습니다. 이번시간에는 가드(guard)를 완성하기 위해 자주 보였던 Observable이라는 내용을 살펴보려 합니다. 우리는 ask서비스에서 2가지 형태의 구독이 가능한 객체를 만들었습니다. Observable과 BehaviorSubject라는 클래스 입니다. 두 클래스는 rxjs에서 제공되는 Reactive Extension으로 비동기 데이터 호출, 콜백 및 이벤트 기반 프로그램을 처리하는 반응 형 프로그래밍 작업을 지원합니다. 음....말이 조금 어렵네요.. ask서비스의 내용을 통해 확인하여 보겠습니다. * 대상 : ask.service.ts //생략.. .. 2020. 8. 13. 앵귤러 튜토리얼(Angular tutorial) - 17 : 가드(인터셉터) 이번시간에는 사용자의 로그인 여부를 확인하여주는 기능에 대해서 살펴보려 합니다. 일반적으로 "인터셉터" 라는 역할로 많이 알려져 있으며, 앵귤러에서는 해당 기능을 가드(Guard) 라고 합니다. 이름만 들어도 왠지 무언가로부터 보호(?)를 해줄 것 같은 기능처럼 보입니다. 앵귤러에서의 가드는 컴포넌트에게 요청을 전달하기 전 먼저(pre) 동작을 하는 클래스 입니다. 가드를 만들기 위해서는 아래 명령어를 입력하면 쉽게 만들 수 있습니다. ng g guard auth 여기서 "auth"는 사용자가 입력하는 가드의 이름 입니다. (그러므로 마음데로 부여해도 상관 없습니다.) 원하는 이름으로 바꾸셔도 됩니다. ^^ 명령어를 입력하면 뭔가 선택을 해야되는데 여기서는 첫번째 내용을 선택한 뒤 엔터를 눌러줍니다. 그.. 2020. 8. 5. 앵귤러 튜토리얼(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. 이전 1 ··· 6 7 8 9 10 11 12 ··· 19 다음
