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

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

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


앵귤러, 리엑트, 뷰110

앵귤러 튜토리얼(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.
앵귤러 튜토리얼(Angular tutorial) - 22, with FireBase : 서비스 분리 저번시간까지 우리는 파이어베이스 파이어스토어의 데이터를 가져와 보여주는 기능에 대해서 살펴보았습니다. 이번시간에는 데이터를 등록하는 방법에 대해서 살펴보겠습니다. 해당기능을 구현하기에 앞서 우리가 여태껏 작성한 내용은 app컴포넌트에 존재합니다. app컴포넌트에 기능이 존재하면 조회기능을 다시 만드는 경우, 같은 내용의 코드를 다른곳에서도 작성해야 되므로 불편합니다. 기존에 잘 만들어 두었던 ask서비스에 기능을 옮겨보도록 하겠습니다. 가장 먼저 해야되는 것은 ask서비스에서 생성자를 통하여 AngularFirestore객체를 공급받아야 되는 것 입니다. 그리고나서 잘 만들어둔 getItem함수를 옮겨주면 되겠습니다. * 대상 : ask.service.ts import { Injectable } from.. 2020. 8. 28.
앵귤러 튜토리얼(Angular tutorial) - 21, with FireBase : select 심화 이번시간에는 저번시간에 이어서 조회하는 함수에 대해서 좀 더 알아보겠습니다. 조회하는 getItem이라는 함수는 모든 항목을 가져오는 마치 "select * from board" 와 같은 기능 입니다. 조회하는 함수에서 우리가 만약 조건을 주어 조회를 하는 경우는 어떻게 할까요? 조회하는 함수에서 ref라는 객체의 형태는 CollectionReference라는 타입으로 되어 있습니다. 해당 객체를 콘솔에 출력해보면 다양한 정보가 나옵니다. 그중 프로토타입으로 설정된 함수를 살펴보면 우리가 이제 무슨작업을 해야되는지 알 수 있습니다. limit..order등등 관계형 데이터베이스 쿼리에서 사용된 명령어가 익숙하게 나온 것으로 보아하니 해당 ref 객체를 활용하면 될 것 같습니다. 그러면 한번 조건을 붙여보.. 2020. 8. 26.
앵귤러 튜토리얼(Angular tutorial) - 20, with FireBase : select 저번시간에는 파이어베이스의 데이터베이스와 앵귤러가 연동하는 부분까지 해 보았습니다. 파이어베이스는 구글에서 제공하는 클라우드 형태의 서버로, 다양한 기능을 제공합니다. 우리가 사용하는 데이터베이스는 "파이어스토어" 라는 데이터 베이스이며 json형식으로 데이터를 관리하여 줍니다. 파이어베이스를 사용하면 따로 데이터베이스에 연결되는 웹 서버가 필요가 없습니다. 이번시간에는 저번에 작성한 내용을 천천히 살펴 보려고 합니다. 가장 먼저 입력하였던 명령어 입니다. npm install firebase @angular/fire --save 위 명령어는 Node.js에서 제공하는 기능으로, Node.js의 라이브러리 인스톨러를 활용하여 앵귤러에서 사용하는 파이어베이스 라이브러리를 추가하는 명령어 입니다. 단순히 라.. 2020. 8. 18.