전체 글 썸네일형 리스트형 [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를 시작할 수 있는 페이지가 나온다. 시작하기를 누른 후 프로젝트를 만들어 보자. 애널리틱스는 내 사이트에 사용자가 얼마나 접속했는지 통계를 내주는 건데 지금은 연습 단계 이기 때문에 쓸 필요가 없다. 애널리틱스를 쓰고 싶다면 사용해도 상관은 없다. 위 단계까지 끝났으면 기본적인 계정 인증, 데이터베.. 더보기 [node.js] parcel-bundler 개발 및 빌드 프론트 개발을 위한 parcel-bundler 로 개발 서버를 실행 하기 위해서는 프로젝트 경로에서 npm을 이용해 parcel-bundler를 설치 하여 준다 npm install parcel-bundler -D -D, --save-dev : 개발용으로 설치하라는 명령 설치가 되었으면 간단한 html 파일을 만들어 준뒤 package.json 파일에서 scripts 부분을 수정해 준다 "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" }, dev는 개발용 서버를 실행하기 위한 명령어 build는 배포를 위한 명령어 npm run dev 개발 서버가 실행 되는 걸 확인 할 수 있다 빌드 시에는 아래와 같은 명령어를 입력.. 더보기 [javascript] 기명 함수와 익명 함수의 차이점 (feat. 호이스팅) // 기명(이름이 있는) 함수 // 함수 선언! function hello() { console.log("hello"); } // 익명(이름이 없는) 함수 // 함수 표현! const world = function() { console.log("world"); }; // 익명(이름이 없는) 함수 // 바로 실행이 필요할 때 사용 (function () { console.log("hello world"); })(); // 함수 호출! hello(); world(); 위 코드를 보듯이 익명 함수란 말 그대로 이름이 없는 함수를 뜻한다 여기서 알아야 할 것은 기명 함수는 함수의 선언이라 표현하고 익명 함수는 함수의 표현이라 표현한다 그렇다면 기명 함수와 익명 함수의 차이점은 바로 호이스팅에 있다 호이스팅이란 .. 더보기 [node.js] ESLint + Prettier + Airbnb 설정 하기 자바스크립트 개발을 하다 보면 문법 오류나 코드 정리로 인해 시간을 많이 소비한다. ESLint와 Prettier는 이러한 상황을 해결해 주는 도구들이다 Airbnb 란 ESLint의 순수 기능으로도 충분하나 다른 개발자가 미리 설정해놓은 config를 불러와서 적용할 수도 있다. 그중 가장 유명한 config 중 하나인 Airbnb 스타일 가이드를 적용해보려고 한다 이번 포스팅에서는 두 가지 도구를 간단히 살펴보고 Airbnb를 적용하는 방법을 알아보겠다. 에디터는 vscode를 기준으로 하겠다 우선 vscode 확장 프로그램에서 아래 두 가지를 설치해 준다 설치가 되었다면 우선 Prettier 먼저 적용해 보겠다 해당 프로젝트에서 커맨드 창을 이용해 아래 명령어를 통해 패키지를 설치한다 npm ins.. 더보기 이전 1 2 3 4 5 다음
