본문 바로가기
반응형

Programming161

맥북 BigSur 업데이트 후 Karabiner 한영 전환 단축키 설정 현재 맥북의 Big Sur 업데이트 이후 Karabiner의 한영 전환 키가 안먹힌다는 말이 많다. 다른 몇몇 블로그나 사이트 들에서 무슨 터미널 창을 켜서 명령어를 넣고 하는데ㅋㅋㅋㅋㅋ 그게 뭐하는 짓이야ㅋㅋㅋㅋ 그냥 하는 방법이 있음. 아주 쉬움. 항상 서론이 긴 걸 싫어하지 바로 해결책으로. 1. Karabiner에서 한/영 전환 단축키 설정. (나는 오른쪽 ⌘) 'karabiner 실행' ➡️ 'add item 으로 단축키 추가' : f18이 한영 전환 기능임 2. 입력 모니터링 설정 '시스템 환경설정' ➡ '보안 및 개인정보 보호' ➡ 왼쪽에 스크롤 내려서 '입력 모니터링' 이러면 설정을 하기 위한 페이지로 들어 온 것이고 일단 결과적으로 이러한 설정이 이루어 져야 한다. 둘 중 하나라도 안되어.. 2020. 12. 13.
Angular 11 + firebase(firestore) 프로젝트 #03 - 데이터 CRUD -2 기능별 관리하기 + 확인까지 이전편에서 일단 app.component.ts에서 모든 작업을 했었는데, 이러한 모든 기능들이 다 app.component에 몰려있으면 안되겟지 당연히. 모든 기능적인 함수가 main() 문에 다 때려박혀있는 지저분한 코드나 마찬가지이므로 일단은 분리를 해보자. 나는 기능별로 component로 나눠서 관리를 할 거야. 솔직한 마음으로는 이 1,2 편 작성하면서 이거 찾으려고 여기저기 다들 돌아다녔을게 뻔함...(경험) 이후 진행하다가 손쓸 수 없게 터지면 여기로 돌아오자. 초기 세팅한 코드들이라고 생각하면 됨 그럼 일단 component를 생성해야지. 이제 약자에 많이 익숙해짐ㅇㅇ cd src -> cd app 그냥 app폴더 밑에 만들으라는거고 비주얼스튜디오 내에서 내장 터미널 여는거 했었지 ⌃ + .. 2020. 12. 11.
Angular 11 + firebase(firestore) 프로젝트 #02 - 데이터 CRUD(Read) -1 이전 자신이 만들어놓았던 Firestore 에 맞게 데이터 이름을 불러와야 한다. 지금 내가 하는거는 저 데이터를 바탕으로 할 것이다. 음 일단 난 저 user 이라는 콜렉선의 값을 가져오고싶어. 근데 그냥 가져오는건 이제 재미 없지. 좀 정렬을 넣어볼까? app.component.ts import { ArrayType } from '@angular/compiler'; import { Component } from '@angular/core'; import { AngularFirestore, AngularFirestoreCollection, CollectionReference } from '@angular/fire/firestore'; import { AngularFireStorage } from '@a.. 2020. 12. 11.
Angular 11 + firebase(firestore) 프로젝트 #01 - firestore 연결 앞서 진행했던 내용들이 있는데 이거랑 상관 없으니까 쫄지 말고. 이 게시물만 봐도 Angular 최신 버전이랑 firebase 연동함. 처음 내용은 개념 다시 복습하고 넘어가는거임 일단 짚고 넘어가자 모듈 : 컴포넌트 관리. : 각종 정보(서비스, 일반 객체 등)를 제공. : 다른 사용자가 만든 모듈을 등록(import)하여 사용하기 위해서는 내가 만든 모듈에 등록. -> 기억 나지? imports: [] 안에 쓰면 자동으로 맨 위에 import {} from 추가 되던거 컴포넌트 (ng g c 컴포넌트이름) : 화면구성. : 화면에 대한 모든 기능을 담당. : 컴포넌트간의 데이터 - 컴포넌트에서 속성이나 Input 또는 Output같은 데코레이터 사용. : 컴포넌트간의 데이터 공유는 서비스를 통해 구독.. 2020. 12. 10.
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.
현타와서 일단 코드만 app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { LoginComponent } from './login/login.component'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { DashboardComponent } from './dashboard/dashboard.component'; import { INFORMATION } from './MyType'; .. 2020. 12. 9.
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) 프로젝트 #07 반응형 폼 모듈 반응형 폼 모듈 써보자 app.module.ts ReactiveFormsModule import 해주시고 로그인에서 id, pwd를 FormControl로 바꿔보자 login.component.ts로 가서 login.component.ts import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { FormControl } from '@angular/forms'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginCompo.. 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.
반응형

티스토리툴바