(1) 이미지 관리 서비스 풀스텍 구축 후기

서비스 소개

이미지 리사이징, 

 

 

 

사용 기술 Stack (Node js, Express, React, MongoDB, Lambda, S3, CloudFront)

1. Local 환경

(1) Node js, Express

(2) React

(3) 

 

2. 아마존 클라우드 환경

(1) AWS Lambda

(2) S3

(3) CloudFront

 

 

 

 

 

리액트 특징

Q. 리액트 왜 쓸까?

web app을 쉽게 만들 수 있음

React가 가장 많이 쓰이며 Angular, Vue도 많이 쓰임

(But React는 문법이 어려움, Vue는 쉬)

 

Q. Web app의 장점은?

1. 모바일앱으로 발행이 쉬움

2. 앱처럼 뛰어난 UXS

3. 그냥 웹사이트보다 비즈니스적 강점 (그래서 React로 웹개발을 많이 함)

 

 

1. Server

환경 설정

(1) npm init -y

(2) npm i express

(3) npm i -D nodemon

 

이미지는 https://github.com/hoffnung8493/sample_images.git 에서 git clone하여 다운로드

 

이미지 업로드는 Multer라는 npm을 사용할 예정

 

추가 환경 설정

npm i uuid

npm i uuid mime-types

 

 

 

기능

(1) 이미지 업로드 post api 설계 : req를 받아서 웹서버의 uploads 폴더에 저장, multer 라이브러리 사용

(2) 이미지의 이름이 겹치지 않게 uuid 로 이미지 고유 ID를  이미지 이름으로 설정

(3) uploads 폴더 url로 접근 할 수 있게 설정

(4) 이미지만 업로드 받을 수 있게 필터 추가

 

2. client (프런트엔드 with 리액트)

2-1. 환경설정 

(1) 리액트 설치 (영구 설치가 아닌 현재 프로젝트 이후에는 배포 될때 제거되는 설치법)

npx create-react-app 폴더명

(2) 리액트 폴더에서 안쓰는 파일 삭제 (선택한 것들 삭제)

(3) index.js에서 import 안하는 코드 삭제

import './index.css';

import reportWebVitals from './reportWebVitals';

 

설명 : public 폴더에 있는 index.html 이 렌더링 되어 보여짐, 리액트는 SPA여서 한 페이지에 내용을 이루는 JS가 바뀌면서 client 쪽에서 렌더링 됨.

index.html에는 내용이 없음 아래 그림의 div 태그의 root는 index.js 파일의 document.getElementById에 의해서 심어짐

심어지는 내용은 App.js의 코드

 

2-2. form component 만들기

사진을 업로드할 form을 component로 만들려고함

 

빨간색이 추가 된 것

 

2-3. useState로 이미지 파일 데이터 관리하기

함수형 컴포넌트에서는 상태 관리를 (라이프 사이클 관리) hooks로 함

 

2-4. axios 이용해서 백엔드로 이미지 전송하기

(1) 환경설정 추가 : axios 모듈, npm i axios

제출 버튼을 누르면 default로 페이지를 새로고침함, 그렇게되면 SPA를 사용하는 의미가 없어지므로 form 태그에 onSubmit의 기본 설정을 변경함

 

cors 설정 : client의 package.json 쪽에서 프록시 설정함

axios를 이용해서 

 

 

2-5. 드래그로 이미지 올리기

이부분에서는 최소한의 스타일링만 진행

 

 

 

아래 과정은 생략함

2-6. react-toastify 이용해서 알림창 만들기

2-7. 업로드 현황 보여주는 Progress Bar 만들기

2-8. 이미지 업로드 전 미리보기 기능 만들기

 

 

 

 

3. MongoDB - DB 연동해서 이미지 관리하기

몽고DB는 설치하지 않고 아틀라스 버전을 사용 (몽고db 제작 회사에서 제공하는 db, 서버리스)

(1) 몽고db 생성 및 연결

node js에서 제공하는 몽고db 전용 드라이버가 있지만

몽구스라는 ODM을 사용하겠음

- 환경 설정 : npm i mongoose

 

(2) dotenv를 이용한 몽고 db 환경 변수 관리 

그리고 몽고db 연결 정보는 dotenv를 사용해서 따로 관리!

- 환경 설정 : npm i dotenv 

 

.env와 .gitignore 파일을 만들어서 몽고db 연결 uri를 외부에 노출시키지 않게 보안을 지키며 관리

 

(3) 몽고db에 사진 저장하기

   (3-1) server 폴더 하위에 models 폴더 생성

   (3-2) image.js 생성 : 몽고db에 사진 저장 로직 

 

(4) db에서 사진 불러오기

 

 

 

4. React - 간단한 사진첩 서비스 만들기

(1) useEffect로 이미지 데이터 불러오기

 

 

 

(2) List의 element 마다 key를 추가해줘야 하는 이유

 

 

 

(3) 새로 업로드한 이미지를 화면에 바로 보여지도록 하기

 

 

 

(4) Context API 활용해서 중앙 데이터 관리하기