NodeJs 와 MongoDB로 SNS 만들어보기 - 개발 환경

☆새로오신 백엔드☆ 분과 금요일에 짧게 인수인계하면서 느꼈는데

지금까지 제가 NodeJs랑 MongoDB로 작업해온 코드들을

말로 설명드리는게 한계가 있는 것 같아서(...)

간략하게 이미지와 같이 글로도 설명을 남겨보려합니다 ㅎㅎ;;;

 

 

근데 사실... 저도 Unity로 게임만 만들어보다 8월 중순에 NodeJS랑 mongoDB 처음 접한거라...

이렇게 하면 된다 보다는 이렇게 하고 있다 라는 느낌으로 봐주시면 좋을 것 같아요 ㅎㅎㅠ

 

 

 

 

 

일단은 NodeJs와 MongoDB로 SNS 기능들을 구현하고 있는데,

코드 편집은 VScode를 활용하고 있고 mongoDB 상의 데이터들은

mongoDB Compass라는 GUI 툴을 활용해 확인하고 있습니다.

 

VScode (소스 코드 편집기), mongoDB Compass(GUI MongoDB)

 

 

 

 

 

NodeJs와 MongoDB 라는 키워드로 추천 프로그램들을 많이 찾아봤었는데

VScode 추천하시는 분들이 많아서 VScode를 활용하고 있습니다.

사용하다보니 Extension에 편리한 기능들이 많아서 좋은 것 같아요!

현재 사용중인 Vscode 확장 플러그인

저는 총 8가지 플러그인들을 사용하고 있는데, 인터넷에 찾아보면

플러그인 추천하는 포스팅 많아서 취향에 따라 선택해서 사용하시면 될 것 같습니다.

 

제가 사용하는 플러그인을 간략하게만 설명을 붙이자면 다음과 같습니다.

- Atom One Dark Theme : VScode 테마 꾸미는 용

- Beautify : 코드 형식을 자동으로 정리 (Prettier도 많이 사용하는 것 같아요!)

- HTML Preview : HTML 미리보기 지원

- HTML Snippets : HTML 코드 자동 완성 기능 지원

- Korean Language Pack for Visual Studio Code : 한국어 설정을 위해 필요한 플러그인

- Materia Icon Theme : 아이콘 꾸미는 용

- npm Intellisense : npm 모듈 자동 완성 기능 지원

- Path Intellisense : 파일명(경로) 자동 완성 기능 지원

 

 

 

 

 

MongoDB Compass는 아래와 같이 시각적으로 편리하게

데이터들을 확인하고 관리할 수 있어서 선택했습니다.

 

MongoDB Compass 화면

근데 시각적으로 볼 수 있는 건 좋은데 때때로 화면 띄우는 속도가 느린게 단점이긴 해요ㅠㅠ

 

 

 

 

 

그리고 GitHub랑 ngrok 프로그램도 사용하고 있는데,

ngrok는 외부에서도 로컬 서버에 접속할 수 있게 도와주는 프로그램입니다.

 

Github (코드 공유), ngrok (외부에서 로컬 서버 접속할 수 있게 해줌)

 

NodeJS로 Rest API 서버를 만들어 열면

프론트엔드 쪽(Flutter)에서 해당 서버에 GET, POST 요청하는 구조라서

 

테스트를 위해 백엔드 쪽에서 로컬로 서버를 열어

프론트엔드쪽과 연동해볼 시

ngrok를 활용하고 있습니다.

 

 

 

 

 

ngork 사용 화면을 보여드리면 다음과 같습니다.

 

 

ngrok 프로그램을 다운받아 (https://ngrok.com/)

쉘에서 "ngork http 3000" 이라는 명령어를 실행시키면

 

 

 

http://localhost:3000 링크를 해당 ngrok Forwrding 도메인과 연결시켜 줍니다.

ngrok Forwrding 도메인은 ngrok를 실행시킬 때마다 달라집니다.

해당 도메인을 특정 값으로 고정시킬 수도 있는데 유료 기능입니다 ㅎㅎ;;;

 

저희는 그냥 테스트용으로만 사용하고 있어서 유료 기능까지는 사용하지 않고

백엔드 쪽에서 ngrok 실행시킬 때마다 ngrok 도메인을

프론트엔드한테 알리는 방식(ex: 카톡)으로 테스트를 진행하고 있습니다.

 

local 포트를 ngrok 도메인과 연결해주는거라 node js 서버 열고 닫는 거랑은 상관없습니다.

따라서 ngork를 재실행할 일이 많지 않아서 그렇게 번거롭진 않습니다.

(경우에 따라 8시간의 시간제한이 있어서 가끔 재실행하는 정도에요!)

 

 

해당 도메인으로 접속해서 GET, POST를 하게 되면 위와 같이 화면에 표시됩니다.

 

 

 

localhost:4040 에 접속해서 디테일하게 GET, POST 상황을 확인할 수도 있습니다.

프론트엔드쪽과 테스트 할 때, 프론트 쪽에서 어떻게 요청을 보냈고

서버에서는 해당 요청에 대해 어떠한 답을 줬는지 확인할 때 유용합니다.

 

 

 

사용중인 프로그램은 이렇게 총 4가지 (Vscode, Mogodb Compass, Github, ngrok) 입니다.

Vscode, Mogodb Compass는 대체할 수 있는 프로그램들이 있으니

한번 찾아보시구 마음에 드는 걸로 사용하셔도 좋을 것 같아요!