[Firebase&Web연동 2] node.js를 이용해서 개발용 로컬 웹서버 실행하기

[Firebase&Web연동] node.js를 이용해서 개발용 로컬 웹서버 실행하기

● Node.js 설치

웹을 개발할때 로컬(자신의 컴퓨터)에서 서버를 실행하고 싶다면 node.js를 통해서 firebase CLI를 설치해야 합니다. node.js가 설치 안되어 있으면 node.js  홈페이지로 가셔서 운영체제에 맞는 node.js를 다운받아 줍니다.

node.js란?

Node.js는  서버 사이드개발에 사용되는 플랫폼입니다. 자바스크립트 기반으로 작동되며, 자체적으로 http 서버 라이브러리를 포함하고 있어서 아파치 등 다른 서버 프로그램이 없어도 서버 사이드 웹을 쉽게 구축할 수 있게 한다. 이클립스로 jsp나 spring 프로젝트 해보신 분들은 , tomcat 다운받고, 설정해주고, 연동해주는게 얼마나 불편한지 아실겁니다. 조금 과장하면 node.js로 3분만에 서버를 만들 수 있습니다!

▲ node.js 홈페이지 가셔서 왼쪽에 있는 LTS 버젼을 다운로드 해서 설치해 줍니다. 

홈페이지에서 친절하게도 운영체제에 맞는 버젼을 보여주니깐 확인하시고 바로 다운받으시면 됩니다.

● Firebase CLI 설치 

이제 Firebase CLI설치를 위한 node.js 설치가 끝났습니다. 이제 Node.js 패키지 관리자인 npm을 이용해서 Firebase CLI를 설치하도록 하겠습니다. 참고로  Firebase CLI는 Firebase프로젝트 관리와 조회, 배포를 위한 여러가지 도구를 제공합니다. 터미널을 여시고 아래 그림처럼 명령어를 입력해주세요.

▲ 터미널 창을 열어 npm install -g firebase-tools 를 입력해줍니다.

npm install -g firebase-tools

npm install -g firebase-tools

npm install -g firebase-tools

npm install -g firebase-tools

▲ 터미널 창을 열어 firebase login 을 입력해줍니다.

▲ 자신의 Firebase Id가 뜨면서 로그인 완료된 것을 확인할 수 있습니다.

● Firebase 프로젝트 초기화 및 서버 실행

이제 firebase 프로젝트를 초기화해주고 서버를 실행하는 작업을 해보도록 하겠습니다.

▲ 바탕화면에 프로젝트 폴더를 만들어 줍니다. 저는 위와 같이 만들어 주었습니다.

▲ 프로젝트폴더 안에서 firebase init 명령어를 입력해주어야 합니다! 중요! 

한번 더 설치될 경로를 확인하시고 Database를 선택해줍니다.

▲ 이전 포스트에서 만들었던 프로젝트가 보입니다. 선택해줍니다.(엔터)

이전 포스터 보기(파이어베이스 프로젝트 셋팅하기)

▲ 파이어베이스 DB 모듈이 설치가 완료 되었습니다.

▲ 위와 같이 프로젝트 폴더안에는 json 파일을 포함한 2개의 파일이 생성이 됩니다.

▲ 이번에는 호스팅을 하기 위한 초기화 작업을 해주도록 하겠습니다.

 다시 한번 더 init 명령어를 입력하신 다음에 설치 경로를 확인해주시고, 이번에는 Hosting을 선택해 줍니다.

▲ 소스 파일이 들어갈 메인 폴더를 어떤 걸로 해주겠냐는 뜻인데 

엔터를 치면 디폴트 값으로 public이라는 폴더가 만들어 집니다. 엔터를 쳐 주겠습니다.

▲ 마지막은 싱글페이지를 만들거냐는 뜻입니다.

 우리는 여러페이지를 만들거기 때문에 N을 입력하고 엔터를 쳐주겠습니다.

▲ 파이어 베이스 hosting 초기화 작업이 완료되었습니다.

▲ 프로젝트 파일에 들어가시면 위와 같이 2개의 파일과 1개의 폴더를 확인 할 수 있습니다.

▲ public 폴더 안에 들어가시면 index.html 파일을 확인 하실 수 있습니다. 더블클릭으로 열어 보겠습니다.

▲ 위와 같은 창이 뜨면 성공입니다. 

클릭해서 firebase 문서가 어떻게 생겼나 읽어보시는 것도 firebase 학습에 많은 도움이 될 것 같습니다.

● 마무리

이번 시간에는 node.js를 설치해서 npm을 통해서  firebase cli를 설치했습니다. 그리고 프로젝트 폴더를 만들어주었고, 그곳에 초기화 작업을 해주었습니다. 다음 시간에는 index.html 페이지(메인 페이지)를 한번 만들어 보면서 간단하게 bootstrap에 대해서 알아보도록 하겠습니다.

보다 자세한 설명은 유튜브에 영상으로 정리해 놓았으니 공부하시다가 참고하셔도 좋을것 같습니다