반응형 Angular/Angular9 Angular 11 + firebase(firestore) 프로젝트 #09 Guard 이제 guard 라는 걸 할건데 진짜 말 그대로 생각하면 됨. 클럽 가드처럼 생각하자. 오우 빻! 빠꾸! 와 같은 느낌으로 라우팅이나 컴포넌트 작업을 하기 전에 확인을 하는거지. 뭐 예를 들어서 어떤거에 접근을 하려고 해 그런데 나는 모두에게 public 하게 공개하고싶지 않은 컨텐츠야. 그러면 우리는 메인페이지에서 어떤 컨텐츠 눌렀을 때에 회원이나 어떤 등급 이상만 접근 권한이 있습니다 이딴 소리 많이 들어봤을 거야. 그런 역할을 해주는거야. 어떤 작업을 하기 전에 조건을 확인을 하고 동작을 하도록 하는 거지. 말로만 백날 해봐야 이해가 되나, 바로 들어가자 ng g g auth 라는 걸 만들자. 에이~ 약자를 또 설명해야되려나?ㅇㅇ 내가 까먹을거같음 ng generate guard auth. 의 약자.. 2020. 12. 10. Angular 11 + firebase(firestore) 프로젝트 #08 routing 1.새로운 프로젝트 만든다. (아 엔터 친다 - no no css) ng new thirdStudy 2. 만들고 해당 프로젝트의 src 밑의 app까지 들어온다 cd src/app 3. login, board 컴포넌트 만든다 ng g c login ng g c board 만들어지면 라우팅을 위해 router 이라는 경로를 위한 변수를 하나 만들어준다. 이 작업을 하면 우리가 이때까지 일반적으로 웹페이지를 만들던 형태, 즉 localhost:4200/login 나 localhost:4200/board 와 같이 url에 입력시 해당 파일로 들어가는 것이다. 그러면 이러한 형태를 위해 app.module.ts를 수정해보자 app.module.ts import { BrowserModule } from '@ang.. 2020. 12. 10. Angular 11 + firebase(firestore) 프로젝트 #08 데이터 바인딩(dashboard) 이제 애기같은 로그인 부분은 고만하고 dashboard해봅시다 dashboard.component.ts import { Component, OnInit } from '@angular/core'; declare type MyType = { text : any; number : any; }; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.css'] }) export class DashboardComponent implements OnInit { DataArray : Array = [ ]; //데이터를 담는 변수 constructor() { } n.. 2020. 12. 9. Angular 11 + firebase(firestore) 프로젝트 #06 저번에 이어서.. 이번에는 상황에 따라 다른 메세지를 띄우는 걸 만들어볼 예정임 login.component.ts import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { @Input() logedIn : boolean; // 보내는걸 받을거야 여기서 // app.component.html 파일에서 [logedIn] = 'loginV.. 2020. 12. 9. Angular 11 + firebase(firestore) 프로젝트 #05 여러 component 가져오기 앵귤러의 쉬운 예제를 봤으니 데이터베이스를 연결하여 진행하는 프로젝트를 해봐야 겠다. Angular 프로젝트를 새로 만든다. terminal 상에서 mkdir angular-fire 명령으로 폴더를 만들고 cd angular-fire 명령으로 폴더로 이동 후 안에 ng new angularfire 명령어로 angularfire 이라는 앵귤러 프로젝트를 생성한다 이제 앵귤러 프로젝트가 생성이 되었으니, angular-fire이라는 폴더에 와 있는 터미널 상에서 code . 명령어로 vscode 를 실행한다. model view controller 의 개념을 조금 확실하게 적용해볼까 한다. vscode 상에서 ⌘ + ` (잘 안되면 ⌃ + ⇧ + `) 명령어로 vscode 상에서의 터미널을 하단에 띄운다. .. 2020. 12. 9. Angular 11 프로젝트 #04 - 로그인, 초기 오류 문제 * 혼자 찾아보며 구글링하며 배운 내용이기에 정답이 아닐 수 있음 * 하다가 오류가 나는 건 나도 실행을 하면서 바로 캡쳐하는 것이기 때문에, 숨겨진 코드나 잘못된 코드가 있는건 아님. * 그렇다면 오류가 생길때에는 이렇게 대처하자 ⓵ 앵귤러 버전문제 : 앵귤러는 진짜 뭔 버전이... 너무 빨리 바뀐다 정말. 버전마다 문법이 살짝 바뀌는 것들을 많이 보았다. → 막혔다고에이 버전이 다르네 이건 못하겠다 못 따라하겠다 하고 인강이나 유튭 강의를 보다 마신 경험 많죠? 그러지 마시고 구글에 검색해서 그 부분만 맞춰 바꿔놓으면 되는 문제에요. 명심하세요. 최고의 교수님 강사님 선생님은 구글입니다. ㅋㅋㅋㅋㅋㅋ ⓶ Node 버전 문제 : 최신이라고 무조건 좋은게 아니다! 안정적인 버전으로 바꿔보자 ⓷ vscod.. 2020. 12. 8. Angular 11 프로젝트 #03 - 배열 내용 뽑기 이제는 앵귤러에서 컴포넌트를 만들거야. 그리고 그 컴포넌트를 ㄴ딛ㅊㅅ를 사용해서 가져와볼거야 terminal : ng generate component 컴포넌트명 or ng g c 컴포넌트명 ex) ng g c greeting 이렇게 컴포넌트가 생성이 되고, 자동 생성이 된 파일 4개중 html 파일을 보면 자동으로 '컴포넌트이름' works! 라는 문구가 있다. 자 이제 이걸 웹사이트 상의 화면에 표현을 해보자 ng g c greeting 이라고 greeting component를 만들면 app.module.ts에 보면 자동적으로 들여와있다. app.module에 등록이 된 것은 알겠고, 그렇다면 이 놈을 사용하려면 어떻게 해야될까? 바로 들어간다 greeting 폴더에 freeting.componen.. 2020. 12. 8. Angular 11 프로젝트 #02 - 버튼 만들어보기 저번 포스트에 이어집니다. 처음 보면, Angular은 기본적으로 html을 기깔나게 꾸며놓는다. 아주 조금만 코드를 변경하고 다시 돌려볼거다. import { Component } from '@angular/core'; @Component({ // 화면과 관련된 내용은 Component!!! selector: 'app-root',// 나중에 불러올때 부를 이름. templateUrl: './app.component.html', // 이 문구가 있으니까 템플릿 나오는 html이 app.component.html 이라고 styleUrls: ['./app.component.css'] // 꾸미는건 css파일에서 하는데 난 디자이너가 아니기에 개발에 집중함 }) export class AppComponent .. 2020. 12. 8. Angular 11 프로젝트 #01 - 시작하기 목적 : Angular 11 + Firebase Firestore 프로젝트 빠르게 변화하는 Angular 버전과 noSQL 파이어베이스 - 삽질하면서 작성해놓는 글 싫더라도... 어떤 이유에서라도... 어찌 되었든 무언가 일을 시작을 했으면 웃으면서 하자 환경 설정 1. Node.js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 개발 툴 Intellij를 주로 사용하지만 Angular가 비주얼 스튜디오환경이 플러그인들이나 지원이 더 좋다기에 vscode 사용 https://code.visualstudio.com/ Visual Studi.. 2020. 12. 8. 이전 1 다음 반응형
