본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


앵귤러 튜토리얼37

앵귤러 튜토리얼(Angular tutorial) - 28 : 모듈과 라우터 심화1 저번시간까지 앵귤러와 파이어베이스를 활용한 방법에 대해서 살펴 보았습니다. 이번시간에는 여태껏 사용해 왔던 모듈과 라우팅에 대해서 다시한번 살펴보려고 합니다. 간만에 새로운 프로젝트를 만들겠습니다. 프로젝트 이름은 fourStudy로 하겠습니다. 매번 N을 눌렀던 부분을 이번에는 Y를 눌러서 진행하여 봅니다. 자시히는 몰라도 라우팅을 할건지에 대해 Y로 대답하였으니 라우팅하는 기능이 자동으로 들어갈 것 같습니다. 프로젝트를 구성하는 데 시간이 좀 걸립니다. 프로젝트가 구성이 되고 나면 src - app 폴더까지 이동하여 봅니다. 모듈이 2개가 되어있습니다? 일반적으로 사용하였던 app모듈말고 AppRoutingModule이라는 모듈이 생긴것을 볼 수 있습니다. 이해를 위해서 컴포넌트를 제작하여 봅니다. .. 2020. 9. 11.
앵귤러 튜토리얼(Angular tutorial) - 27, with FireBase : 권한, 파일 이번시간에도 이어서 파일업로드와 관련한 내용을 살펴보겠습니다. 그 전에 먼저 권한과 관련된 내용을 언급하고 넘어가겠습니다. 파이어베이스에서 권한과 관련된 설정을 우리는 "모두허용" 상태로 사용하였습니다. "모두허용" 상태이기 때문에 사실 인증과 관련된 내용은 넘어갔었습니다. 파이어베이스에서는 어느정도 까지는 해당 상태를 허용해 주지만 나중에 시간이 지나고 나면 보안수준이 낮기 때문에 모든 요청을 막아버릴수도 있습니다. 그러므로 "읽기"는 모두 허용 하지만 "변경"과 관련된 행위는 권한을 갖도록 해 주어야 합니다. 일반적으로 보안수준은 Rules라는 탭을 선택하여 설정 할 수 있습니다. 파이어베이스 웹 콘솔로 이동하여 아래 사진처럼 Rules를 선택하여 변경하도록 합니다. * 파이어스토어, 저장소 2개 다.. 2020. 9. 10.
앵귤러 튜토리얼(Angular tutorial) - 26, with FireBase : 파일 저번시간에는 데이터베이스 관리기능에 대해서 살펴보았습니다. 읽기, 쓰기, 수정 및 삭제까지 전반적인 기능에 대해서 설명 하였습니다. 이번시간에는 파이어베이스에 파일을 업로드 하는 방법에 대해서 살펴 보았습니다. 파일을 업로드 하기 위해서는 저장소가 필요합니다. 우리가 여태껏 사용한 곳은 "데이터베이스"의 개념인 파이어스토어 입니다. 파이어베이스에서 저장소는 Storage라는 곳에서 생성을 할 수 있습니다. 저장소 생성을 위해서 웹 파이어베이스 콘솔에 접속 합니다. 그리고 아래 사진처럼 Storage를 눌러줍니다. "다음" 버튼을 눌러서 기본으로 진행하여 줍니다. 그리고 나서 다음으로 저장소에 대해서 권한수준을 잠시 낮추겠습니다. 위 내용처럼 규칙을 수정하여줍니다. 규칙을 수정하지 않을경우에는 인증과 관련.. 2020. 9. 9.
앵귤러 튜토리얼(Angular tutorial) - 25, with FireBase : alter 정리 저번시간까지 우리는 수정기능에 대해서 살펴보았습니다. 이어서 수정기능과, 삭제기능에 대해서 살펴보겠습니다. 사실 앵귤러와 파이어스토어에서 수정기능은 아주 간단하게 구현 할 수 있습니다. ask 서비스에 아주 간단하게 수정기능을 만들어 보겠습니다. * 대상 : ask.service.ts //..생략 updateData2(db_name: string, parameter : any, target_id : any){ this.collectionArray[db_name].doc(target_id).update(parameter); } //..생략 자세히 보면 doc로 시작하여 update를 호출하는 함수는 updateData함수에서 이미 사용하였던 함수입니다! 사실 updateData함수처럼 복잡하게 만들 필요는.. 2020. 9. 4.
앵귤러 튜토리얼(Angular tutorial) - 24, with FireBase : alter 심화 저번시간에는 pipe라는 함수를 통해서 take와 map에 대해서 알아보았습니다. pipe는 "통로"의 의미로 구독하는 내용에 대해서 다양한 기능을 연결할 때 사용됩니다. 이번시간에 살펴볼 내용은 이제 pipe를 활용하여 데이터를 수정하는 방법입니다. 데이터 수정은 마찬가지로 collection함수를 통해 생성된 객체에 대해서 이루어지도록 되어 있습니다. collectionArray라는 변수에 우리는 AngularFirestoreCollection객체를 key값은 데이터베이스 명칭으로 넣어주고 있습니다. 위 내용을 바탕으로 간단하게 함수를 서비스에 추가하여 줍니다. * 대상 : ask.service.ts //생략.. updateData(db_name: string){ this.collectionArray.. 2020. 8. 31.
앵귤러 튜토리얼(Angular tutorial) - 23, with FireBase : alter 저번시간에는 파이어 스토어에 등록하는 방법에 대해서 살펴 보았습니다. 이번시간에는 수정하는 방법을 알아보기 위한 첫번째 시간 입니다. 이를 위해서 우리는 먼저 pipe와 map, 그리고 take라는 함수를 살펴볼 것 입니다. pipe라는 함수는 말 그대로 관, 통로의 의미입니다. * Javascript에서 우리는 배열같은 데이터를 filter나 map등으로 가공할 수 있습니다. * 마찬가지로 Java에서도 stream객체를 활용해서 컬렉션 데이터를 가공 할 수 있습니다. 앵귤러에서의 pipe는 데이터의 결과가 만들어지기 전 옵션같은 개녑 입니다. 결과를 만들 때 pipe를 통해서 선언된 행동을 하고난 뒤에 최종 결과를 만들어 냅니다. 역시나 말이 어렵습니다.. 이해를 위해 테스트 함수 1개를 ask서비스.. 2020. 8. 28.