[Node.js] Intellij, Vscode에서 Firebase Functions 개발을 위한 Node.js 프로젝트 세팅

출처: unsplash.com

 

부트캠프 최종 프로젝트 기록 8

 

 

서론

현재 kakao 로그인 기능을 구현하려 하고 있다.

kakao login을 그냥 구현하는 게 아닌 firebase authentication과 연동해서 사용하려 한다.

그러기 위해서는 firebase functions라는 기능을 사용해야 하는데, firebase functions를 만들기 위해 node.js 세팅을 해주어야 한다.

vscode로 하는 방법이 가장 대중적이지만, 나는 intellij idea에서 진행해보려 한다.

vscode로도 똑같이 따라서 하면 된다.

 

 

Node.js 프로젝트 세팅

node.js 설치는 아래의 사이트에서 진행해 주면 된다.

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

설치를 하고 나서 마지막으로 환경 변수에 설치 경로를 Path에 정의해 주어야 한다.

user에 대한 사용자 변수의 Path를 편집 화면으로 들어가서 자신의 node.js 설치 경로를 정의해 준다.

내 경우에는 아래 경로로 정의해 주었다.

환경 변수 적용 후 컴퓨터를 재부팅해주면 적용이 완료된다.

 

Intellij에서 Node.js 프로젝트 생성하기

Intellij에서 Node.js 프로젝트를 생성할 때, Node.js 탭이 있으면 그걸로 생성해 준다.

내 경우에는 왜인지는 모르겠지만, 없었다(왜지?).

 

이때에는 Empty Project로 빈 프로젝트를 생성해서 node js를 적용해 준다.

Empty Project를 생성 직후의 패키지 구조

이 프로젝트를 Node js 프로젝트로 만들어 보겠다.

우선은 Terminal을 실행해서 npm 명령이 들어가는지 확인한다.

명령이 들어왔을 때, 위와 같이 버전이 나오면 된다.

위 명령이 실행되고 나면 아래와 같은 명령어를 입력한다.

npm install firebase-tools

위 플러그인은 firebase 명령어를 사용함과 동시에 firebase cli를 쓸 수 있게 해 준다.

명령이 정상적으로 수행되면 패키지에 node_modules가 추가된다.

firebase-tools 설치 후의 패키지 구조

이제 firebase 명령어를 terminal에서 사용할 수 있다.

firebase cli를 하기 위해서는 firebase login부터 진행해야 한다.

firebase login

위 명령을 수행하고, terminal에서 시키는 대로 진행하면서 구글 로그인을 해준다.

로그인할 계정은 자신이 쓰고자 하는 firebase 프로젝트가 있는 계정으로 진행해 주어야 한다.

 

로그인 후 이제 init을 진행해야 한다.

firebase init

위 명령을 진행하면 자신이 어떤 기능을 init 할 건지 설정할 수 있다.

하지만 우리는 firebase functinos를 쓰기 위해 이 프로젝트를 생성했으므로 다음과 같이 명령어를 입력한다.

firebase init functions

 

이 명령어를 입력하고 y를 입력해 진행하면 첫 질문이 뜬다.

어떤 firebase 프로젝트를 사용해서 진행할 건지 묻는 질문이다.

기존의 firebase project를 사용할 거면 Use an existing project로 커서를 옮겨서 enter를 눌러 주고, 새로운 프로젝트를 만들어서 진행할 거면 Create a new project로 커서를 옮겨 주고 enter를 클릭한다.

대체로 Use an existing project를 선택하는 편이다.

 

선택 후 자신의 프로젝트에 맞는 id를 선택해서 진행하고 다음 질문으로는 functions를 구현할 언어를 지정해 준다.

Javascript, Typescript, Python이 있다.

자신의 취향에 맞게 선택한다. 내 경우는 Javascript를 선택.

 

그 상태로 쭉쭉 y를 눌러서 진행한다.

위의 결과를 완료하면 이제 intellij에서의 세팅이 끝난다.

 

 

Vscode에서 Node.js 프로젝트 생성하기

Vscode로 Node.js 세팅을 진행할 때는 세팅을 진행할 folder를 하나 만들어서 그 안에서 vscode로 작업을 진행한다.

Terminal -> New Terminal로 터미널을 열어 준다.

 

아까와 마찬가지로 version 먼저 확인해 준다.

 

버전이 정상적으로 나오면 명령어를 순서대로 입력한다.

npm install firebase-tools

firebase login

firebase init functions

위 명령을 한 번에 입력하지 말고, 순서대로 입력해서 진행한다.

 

npm install firebase-tools 진행 후 패키지 구조

 

만약 firebase 명령어를 사용할 때 아래와 같은 오류를 마주칠 수도 있다.

오류

 

위 사진같이 오류가 나면 powershell의 + 버튼 옆에 화살표를 클릭해서 Comand Prompt를 실행한다.

터미널로 새로운 cmd를 실행해 주는 것이다.

 

cmd로 열어서 실행하면 오류가 안나는 모습을 볼 수 있다.

해결 완료

오류를 해결했으니 쭉 진행해서 프로젝트 세팅을 완료한다.

 

firebase init functions 진행 후 최종 패키지 구조

 

이제 firebase functions 개발을 진행해 볼까?

 

구현 중 발생한 문제 상황

기존에는 intellij에 Node.js 프로젝트가 뜨지 않아서 Empty project로 생성해서 진행했다.

하지만 intellij와 vscode의 terminal에서 npm이 실행되지 않는 문제가 있었는데, 시스템 환경 변수에 nodejs 설치 경로를 정의해주지 않아서 생긴 문제였다.

 

 

정리

intellij와 visual studio code에서 firebase cloud functions 개발을 위한 node js 환경 세팅 방법에 대해 알아보았다.

나중에 다시 node js 환경을 세팅해야 할 때, 까먹기 않게 하기 위해 이 포스팅을 남겼다.