토이 프로젝트_ 포토앨범 기능 구현 (express, multer, mongodb, nodejs)
1.토이 프로젝트_ 포토앨범 (완성작)
사전스터디 팀과 함께 반려동물 여행시 유용한 웹사이트를 만들었고 그중 여행의 추억을 기록할수 있는 포토앨범 기능은 구현했다.파일 업로드 기능은 사전스터디 기간에 배운 내용이 아니지만, 뉴욕 버켓리스트 프로젝트 할때 만들어 보고 싶었던 기능이여서 구글링과 수많은 유트브
2.토이 프로젝트_ 포토앨범 (1단계 서버 세팅, DB 연결)
우선 VS code에 프로젝트 구조를 아래와 같이 설계했다. 그리고 필요한 프로그램들을 express, multer, mongodb, mongoose, ejs, env, nodemon 등을 설치했다. env 파일에 DB 정보 입력하기 (env 파일은 비공개 파일로 주로
3.토이프로젝트_포토앨범(2단계 mongoose로 document의 schema 생성하기)
업로드한 이미지와 텍스트를 mongodb에 저장하게 될텐데 mongodb는 schema가 없는 noSQL document 데이터베이스이기 때문에 mongoose를 사용해서 document의 structure을 잡아준다. (database > collection > do
4.토이프로젝트_ 포토앨범 (3단계 router 세팅, GET POST api 생성, multer storage 세팅)
routes 디렉토리, routes.js 파일에 multer로 업로드된 파일과 텍스트의 데이터를 POST와 GET 형식으로 서버와 클라이언트가 주고 받을 수 있도록 세팅해준다. ulpoads 라는 디렉토리도 미리 생성해준다 (앞으로 multer를 통해 업로드된 이미지가
5.토이프로젝트_(4단계 프론트 만들기)
백엔드단의 준비 (서버세팅, db 연결, api)가 끝났으니 이제 클라이언트 사이드 화면을 만들어 준다. ejs는 nodes에서 html에 데이터를 입력시킬수 있게 도움을 주는 템플릿 엔진이다. 앞서 main.js 파일에 ejs template engine 세팅을 했다