Firebase 썸네일형 리스트형 [firebase] functions 서버 기능 만들어 보기 지금 까지는 firebase 에서 지원해주는 기능들을 이용해 서버를 따로 만들지 않고 여러 동작을 수행 할 수 있었지만 규모가 커질수록 서버기능은 필수 적으로 들어가야 하기 때문에 firebase에서 지원하는 functions 를 이용하면 자체적으로 서버 기능을 만들 수 있다. 하지만 functions 는 blaze 요금제로 업그레이드를 시켜줘야 할 수 있기 때문에 요금제 업그레이드를 시켜준다. 이용자수가 엄청나게 많은 사이트를 만드는게 아니라면 요금이 부과될 일이 거의 없기 때문에 요금문제는 걱정하지 말고 카드 등록만 해주면 된다. 그럼 이제 프로젝트 폴더 명령창으로 돌아와서 functions를 설치를 해줘야 하는데 처음 프로젝트를 만들 때 functions 를 선택해서 만들었다면 이 작업을 하지 않아.. 더보기 [firebase] Hosting 으로 배포 하기 지금까지 firebase 를 이용해 만든 프로젝트를 firebase hosting을 이용해 배포를 진행해 보겠다. 프로젝트 폴더 경로에 명령어 창에서 현재 firebase 로 실행중인 프로젝트가 있다면 종료 해 준다. 그 다음 명령어 창에 firebase projects:list 라고 입력하게 되면 firebase로 진행중인 프로젝트 목록이 출력 된다. 현재 1개의 프로젝트 밖에 없기 때문에 1개가 출력된 모습이다. 만약 여러 프로젝트가 있다면 아래의 명령어로 해당 프로젝트를 선택해 주면 된다. firebase use 프로젝트 ID 그럼 프로젝트를 선택 했다면 아래 명령어로 배포를 해준다. firebase deploy --only hosting 그럼 이렇게 배포가 완료 되고 어디서든 접속 할 수 있는 u.. 더보기 [firebase] Authentication 회원가입, 로그인, 로그아웃 firebase 인증 서비스를 이용해 회원가입, 로그인, 로그아웃을 진행 해 보자. 정말 간단하게 몇 줄 안되는 코드로 진행이 가능하다. firebase 시작하기 부터 진행하고 있는 분들이라면 처음에 Authentication 설정을 이메일/비밀번호로 설정 되어 있을 것이다. 그럼 이제 그 설정을 그대로 진행해보도록 하자. 입력된 값들을 넣어 주면 되는데 실제 회원가입에서 필요한 코드는 firebase.auth().createUserWithEmailAndPassword(email, password).then(result => { }); 위와 같이 매우 간단하다. 회원 가입이 완료 되면 위 코드 안에서 동작을 수행하면 되는데 여기서 보면 우리가 입력한 이름이 저장되는 곳이 없다. 이름을 저장하기 위해서는 .. 더보기 [firebase] storage 파일 업로드 firebase storage에 파일을 업로드하는 방법을 알아보자. 무료로 5기가 정도의 공간을 사용 할 수 있고 추가로 사용하려면 blaze 요금제로 전환해서 사용해야 한다. 생각보다 요금이 비싸지는 않은 것 같다. storage도 마찬가지로 읽기, 쓰기에 대한 규칙을 정해줘야 한다. 위와 같이 true로 해주면 모든 사용자가 업로드 및 다운로드가 가능 하다. 그럼 이제 프로젝트로 돌아와 파일을 어떻게 올리는지 알아보겠다. 먼저 firebase.storage()를 선언해 준다. file을 올릴 때는 중복되지 않게 hash값을 주던 해야 하지만 지금은 연습이기 때문에 그냥 단순 파일명으로 올리기로 하고 file을 가져와 순서대로 진행한다. child('/image')는 image라는 폴더를 만들고 그 안.. 더보기 [firebase] firestore DB 데이터 수정, 삭제 이전 글에서 데이터 읽고 쓰기를 해보았고 이번에는 수정과 삭제를 할 건데 매우 간단하게 할 수 있다. 우선 수정부터 알아 보자. id가 send라는 버튼을 누르면 수정이 동작하게 만들어 놨다. 삭제하려는 문서의 ID를 URL에 포함하여 보냈는데 대략 localhost/edit? id=문서 ID 이런 식으로 URL을 보냈다. 뒤에 id로 보낸 값을 가져오기 위해 맨 위에 new URLSearchParams를 이용해 값을 가져와 처리해 주면 된다. 전에 알아봤던 문서 쓰기 방법과 비슷한데 update로 바꿀 필드만 값을 변경해 주면 된다. 아 그리고 전에 규칙 설명할 때 create, update, delete로 각 권한을 나눠서 부여할 수 있다고 말했었는데 아래와 같이 각각 권한을 부여해 줄 수 있다. 그.. 더보기 [firebase] firestore DB 데이터 읽기, 쓰기 저번 글 까지는 firebase 생성 및 실행을 해 보았다. 이제 firebase에 기능들을 하나하나 씩 알아보자. 우선 개발에 빠질 수 없는 DB에 대해서부터 시작하자. firebase에서는 firestore라는 DB를 제공해 주는데 흔히 쓰는 RDBMS가 아닌 No-SQL을 지원해 준다. No-SQL은 RDBMS보다는 제한이 적고 뭔가 좀 더 자유로운 느낌이다. No-SQL에는 대표적으로 MongoDB가 있는데 MongoDB를 사용했던 분들이라면 전혀 어색하지 않게 사용할 수 있을 것 같다. 그럼 우선 데이터를 가져오는 것 부터 해 보자. firebase console 에서 Firestore Database를 선택하면 위와 같은 화면이 나온다. 저기서 컬렉션 시작을 눌러 원하는 컬렉션을 만들어 주면 .. 더보기 [firebase] firebase 시작하기(2) 저번 글에 이어 이번 글에서는 프로젝트 생성 및 실행에 대해 진행하려 한다. 로그인이 끝나면 프로젝트를 생성해 줘야 하는데 해당 프로젝트 폴더에서 명령 창에 firebase init이라는 명령어를 실행한다. 그럼 질문이 나오는데 하나씩 같이 진행해 보자 첫 번째 질문을 선택하면 다음 질문으로 firebase에서 사용할 기능들을 선택하는데 각자 본인들이 사용할 기능을 선택하고 다음으로 넘어간다 우리는 이미 저번 글에서 프로젝트를 생성해 놓았기 때문에 맨 첫번째 Use an existing project를 선택해 우리가 만든 프로젝트를 만들 것이다. 여기까지는 그냥 엔터로 넘겨 주자. 이 질문은 싱글 페이지 앱으로 할 거냐는 질문인데 우리는 frontend 프레임워크를 사용하지 않고 단순 html로 작업할 .. 더보기 [firebase] firebase 시작하기(1) firebase란 서버 없이도 간단하게 웹/앱 서비스를 만들 수 있게 도와주는 서비스이다. 시작하기에 앞서 크롬 브라우저, nodejs, vscode 가 설치되어 있는 가정하에 설치 과정은 생략하고 진행할 것이다. 해당 과정은 react, vue, angular 같은 frontend 프레임워크는 사용하지 않고 순수 html과 js로 진행했다. 구글에 firebase console이라고 검색하면 firebase를 시작할 수 있는 페이지가 나온다. 시작하기를 누른 후 프로젝트를 만들어 보자. 애널리틱스는 내 사이트에 사용자가 얼마나 접속했는지 통계를 내주는 건데 지금은 연습 단계 이기 때문에 쓸 필요가 없다. 애널리틱스를 쓰고 싶다면 사용해도 상관은 없다. 위 단계까지 끝났으면 기본적인 계정 인증, 데이터베.. 더보기 이전 1 다음
