* 제가 다시 작성한 최신 튜토리얼 수정본 입니다. 아래 주소를 통해서 진행하시는 것을 권장 드립니다. ^^
앵귤러 튜토리얼(Angular tutorial) - 1
안녕하세요. 앵귤러에 대해서 알아보기위해 이곳을 찾아주신 분 들께 감사의 말씀 드립니다.^^ 천천히, 초심자도 조금 더 쉽게 접근할 수 있도록 내용을 구성하여 보겠습니다. 어��
lts0606.tistory.com
* 파이어베이스 등록방법
이번시간에는 파이어베이스를 활용하는 방법에 대해 알아보겠다.
파이어베이스는 구글에서 제공하는 비관계형 데이터베이스로 Key : Value 형식으로 데이터를 저장해 주는 클라우드 형태의 서버이다. 즉, 어느 곳에서나 접속 할 수 있는 데이터베이스 개념이라 볼 수 있다.
또한 일정 수준까지는 무료로 사용이 가능하다.
먼저 파이어베이스를 검색한다.
클릭해서 들어간다.
시작하기 버튼을 누른다. 그러면 구글계정으로 로그인 하라고 나온다.
로그인이 되면 "프로젝트 만들기" 버튼을 클릭한다.
프로젝트 이름을 입력하고 약관 동의를 전부 누른다.
그런데 프로젝트 이름에 test가 있으면 안만들어 진다. 그러므로 사진처럼 testporject라는 이름의 형식은 피하도록 한다.
여기서는 helloworld라고 이름을 입력했다.
프로젝트 생성은 1분정도 걸리는 듯 한다.
생성이 완료되면 아래처럼 화면을 볼 수 있다.
여기서 맨 우측에 톱니바퀴 모양을 누르면 프로젝트 설정, 사용자 및 권한이 나오는데 프로젝트 설정을 누른다.
아래쪽을 보면 "프로젝트에 앱이 없습니다" 라는 문구와 함께 </> 모양을 볼 수 있다.
</>는 웹 프로젝트를 만드는 내용이며, 해당 모양을 클릭한다.
맨 처음 나오는 화면은 만든 프로젝트에 웹과 관련하여 앱을 추가하는 모습이며 닉네임은 원하는데로 입력하면 된다.
조금 기다리면 어떠한 json 파일 모습이 나오게된다.
여기까지 하였다면 1차 성공이라 볼 수 있다.
해당 내용은 톱니모양 바퀴를 누르고 "프로젝트 설정"을 누르면 항상 확인 할 수 있다. json 형식의 내용은 앵귤러에서 앞으로 사용하게 될 설정값이라 볼 수 있다.
지금까지의 구성은 파이어베이스의 프로젝트 세팅의 개념이라 볼 수 있다. 프로젝트의 세팅은 끝났지만 데이터베이스를 설치하지는 않는 상태이다.
프로젝트의 기본구성이 끝났으므로 이제 데이터베이스를 추가하여보자.
아래 사진처럼 Database탭을 누른다. 그리고 가운데 보이는 흰색버튼 "데이터베이스 만들기"를 클릭한다.
아래 사진처럼 2개의 선택이 나오는데...테스트 모드로 시작을 눌러서 등록,수정,삭제,읽기 등의 행위가 가능하도록 세팅한다.
아래 내용은 저장되는 위치를 설정하는 모습인데..뭐..어디에 저장되는지는 아직 중요한지는 모르겠다.
그냥 완료를 눌러도 된다. 신경쓰지말자~
아래화면이 나오면 데이터베이스 만들기에 성공 한 것이다.
여기까지의 작업이 완료 되었다면 2차세팅은 끝이난 것이다.
기본데이터를 넣기에 앞서서 파이어베이스는 비관계형 데이터베이스를 지원하는데 key : value 형식으로 데이터를 저장한다.
Collection(일반데이터베이스의 테이블 개념) = key : value, key : value, key : value... (키 : 값)
파이어베이스 데이터베이스를 조회한다 하면은,
1. 컬렉션을 선택
2. 컬렉션에서의 데이터 조회(결과는 리스트 형식의 json)
위 2가지 절차라고 볼 수 있다.
테스트용 데이터를 넣어보자. board라고 컬렉션을 생성한다.
이후에 text와 number라는 이름으로 데이터를 넣어준다.
이때 문서ID가 있는데...해당 ID는 고유의 키 값이다. 일단 지금은 자동으로 등록한다.
저장버튼을 누르면 아래사진처럼 결과를 볼 수 있다.
파이어베이스는 데이터를 컬렉션이라는 큰 틀에서 key, value형태로 문서를 저장한다.
Map형태의 모양을 보이며, 몽고DB와 비슷한 개념이다.
이번시간까지 파이어베이스 프로젝트 구성에 대해 살펴 보았다.
다음시간에는 board 컬렉션에서 값을 앵귤러를 통해 가져와 보도록 하자.
* 여기서 파이어 베이스 설정 관련된 내용은 테스트 모드입니다.
* 상용화 및 보안이 목적이라면 테스트 모드가 아닌 잠금모드로 하여야 하며, 이에 대한 추가 세팅이 필요합니다.
* 원활한 진행을 위해서는 테스트모드로 하여주세요. ^^
'앵귤러, 리엑트, 뷰 > Angular Tutorial(old)' 카테고리의 다른 글
| 앵귤러 튜토리얼 (Angular tutorial) -19 with 파이어 베이스 (0) | 2019.07.12 |
|---|---|
| 앵귤러 튜토리얼 (Angular tutorial) -18 with 파이어 베이스 (6) | 2019.07.09 |
| 앵귤러 튜토리얼 (Angular tutorial) -16 (0) | 2019.06.28 |
| 앵귤러 튜토리얼 (Angular tutorial) -15 (0) | 2019.06.25 |
| 앵귤러 튜토리얼 (Angular tutorial) -14 (0) | 2019.06.20 |
댓글