음소거 하고 화면 켜주세요 😆
25분에 시작하겠습니다 ~.~
01
02
03
04
Multer
AWS S3
Architecture
참고 지식
01
Mul t er 📸
🏞🌇
MULTER
이미지 전달 ?
MULTER
MULTER
Multer
middleware
multipart/form-data 로 들어온 이미지를 처리하는 모듈
NOT Application/json
지정한 곳으로 이미지 저장 가능 ~
MULTER
REST API
Multer
middleware
multer.single(fieldname)
multer.array(fieldname[, maxCount])
fieldname : 이미지를 받을 키 값
fieldname : 이미지를 받을 키 값
maxCount : 받을 이미지의 최대 개수
f iel d nam e으로 받은 파일을 r eq . f i l e에 저장
f iel d nam e으로 받은 여러 개의 파일들을 r eq . f i l es에 저장
r eq . f i le. loc at i on : 파일의 위치
r eq . f i le[ i ] . l oc at ion : 파일의 위치
m axC ou nt 의 개수만큼 받아옴
REST API
Multer
module
프로젝트 내부에 이미지 저장하기!
install multer module
routes/user.js
controllers/user.js
models/user.js
Database 수정
install modules
routes/user.js
Multer 설 치
controllers/user.js
project$ npm install multer
models/user.js
Database
install modules
routes/user.js
controllers/user.js
models/user.js
Database
POST METHOD로 /profile path설정
install modules
routes/user.js
controllers/user.js
models/user.js
multer middleware 사용
“profile”을 field name으로 설정
Database
install modules
routes/user.js
controllers/user.js
field name
models/user.js
Database
install modules
routes/user.js
controllers/user.js
models/user.js
Database
controller 작성
install modules
routes/user.js
controllers/user.js
❓
models/user.js
Database
controller 작성
install modules
routes/user.js
req.file
controllers/user.js
console에 찍어보자 !
❓
models/user.js
Database
controller 작성
install modules
routes/user.js
controllers/user.js
models/user.js
req.file 의 데이터
Database
install modules
routes/user.js
controllers/user.js
models/user.js
Database
controller 작성
install modules
routes/user.js
controllers/user.js
models/user.js
Database
controller 작성
install modules
routes/user.js
controllers/user.js
models/user.js
Database
install modules
routes/user.js
controllers/user.js
models/user.js
Database
install modules
routes/user.js
controllers/user.js
models/user.js
Database
install modules
routes/user.js
controllers/user.js
models/user.js
Database
POSTMAN
POSTMAN TEST
POSTMAN
POSTMAN TEST
02
📌
🌃 AWS S3 🧰
✨
S3
S3
S3
module
프로젝트 내부에 이미지 저장하기!
install s3 module
modules/multer.js
config/s3.json
routes/user.js
install modules
Multer 설 치
modules/multer.js
project$ npm install --save multer-s3 aws-sdk
config/s3.js
routes/user.js
install modules
modules/multer.js
config/s3.js
routes/user.js
modules/multer.js
install modules
modules/multer.js
config/s3.js
routes/user.js
config/s3.js
install modules
modules/multer.js
config/s3.js
routes/user.js
upload 상수 변경
POSTMAN
POSTMAN TEST
S3
🏞 🌃 여러 이미지를 넣는 방법
multer.array(fieldname[, maxCount])
fieldname : 이미지를 받을 키 값
maxCount : 받을 이미지의 최대 개수
fieldname으로 받은 여러 개의 파일들을 req.files에 저장
req.file[i].location : 파일의 위치
maxCount의 개수만큼 받아옴
S3
routers/index.js
controllers/image.js
03
🏗
Architecture
🗿
ARCHITECTURE
Architecture
시스템 구성 / 작동 원리
시스템이 어떻게 작동하는지 설명하는 프레임워크,
구조 구성 요소 간의 관계 및 시스템 외부 환경과의 관계 묘사 다양한 아키텍처 패턴
ARCHITECTURE
MSA
Micro
Monolithic Architecture
Service
Architecture
“하나의 큰 애플리케이션을 서비스 단위로 작게 나누고,
서비스들끼리 서로 통신하는 형태의 아키텍처 패턴”
애플리케이션은 하나의 결과물로 합쳐져 배포
👉 각각의 서비스 별로 서버를 분리하고 따로 개발
👉 통으로 묶어서 배포되는 형태
각각의 서비스는 하나의 작은 애플리케이션처럼 배포가 가능 각 서비스는 서
하나의 애플리케이션 안에 모든 로직이 들어가 있음
로 API를 제공하고 이를 이용해서 서로 호출
하나를 수정하려면 전체 애플리케이션(서버)를 다시 빌드하고 배포해야함
(MSA에서는 URI/URL 설계가 중요)
개발과 배포가 단순
사용자 기기에서 REST API로 서비스를 호출 시 직접 서비스로 가는 것이 아
니라 중간에 API 게이트웨이를 거침
ARCHITECTURE
MSA
Monolithic Architecture
Micro
API
Gateway
Service
Architecture
프론트앤드 또는 다른 플랫폼이 들어오는 출입구
API Gateway로 들어온 요청을 지정된 곳으로 리다이렉트
ARCHITECTURE
👍 장점
MSA
통일된 개발 환경과 개발 방법
Micro
Monolithic Architecture
Service
Architecture
배포가 간편
“하나의 큰 애플리케이션을 서비스 단위로 작게 나누고,
서비스들끼리 서로 통신하는 형태의 아키텍처 패턴”
애플리케이션은 하나의 결과물로 합쳐져 배포
👉 통으로 묶어서 배포되는 형태
👉 각각의 서비스 별로 서버를 분리하고 따로 개발
👎 단점
하나의 애플리케이션 안에 모든 로직이 들어가 있음
각각의 서비스는 하나의 작은 애플리케이션처럼 배포가 가능 각 서비스는 서
규모가 커지면 여러 단점 발생
로 API를 제공하고 이를 이용해서 서로 호출
하나를 수정하려면 전체 애플리케이션(서버)를 다시 빌드하고 배포해야함
(MSA에서는 URI/URL 설계가 중요)
개발과 배포가 단순
확장하기 어려움
사용자 기기에서
REST
직접 서비스로
가는 것이 아
새로운
기술,API로
언어, 서비스를
프레임워크호출
등을 시
적용하기
어려움
(개발 팀, 추가 요구사항, 새로운 기능 등등)
니라 중간에 API 게이트웨이를 거침
하나의 프로세스에서 돌기 때문에 오류가 나면
모든 영향을 한꺼번에 받음
ARCHITECTURE
👍 장점
MSA
서비스 별로 집중해서 독립적으로 개발할 수 있음
Micro
Service
Architecture
👉 개발 언어/프레임워크에 구속 받지 않음
Monolithic Architecture
수정 및 유지보수가 쉬움
“하나의 큰 애플리케이션을 서비스 단위로 작게 나누고,
서비스들끼리 서로 통신하는 형태의 아키텍처 패턴”
부분적으로 새로운 기능이나 기술을 적용할 수도 있음
애플리케이션은 하나의 결과물로 합쳐져 배포
👉 각각의 서비스 별로 서버를 분리하고 따로 개발
👉 통으로
묶어서 배포되는
형태 정상 동작함
부분적으로 장애가
발생하더라도
다른 서비스는
각각의 서비스는 하나의 작은 애플리케이션처럼 배포가 가능 각 서비스는 서
하나의 애플리케이션 안에 모든 로직이 들어가 있음
로 API를 제공하고 이를 이용해서 서로 호출
하나를 수정하려면 전체 애플리케이션(서버)를
다시 빌드하고 배포해야함
👎 단점
(MSA에서는 URI/URL 설계가 중요)
개발과 배포가 단순
서비스를 나눠서 서비스 간 통신 방법이 필요함
설계가 중요하기 대문에 초기 프로젝트 설계에 많은 시간이 필요
단시간에 개발하는 프로젝트에는 적합하지 않음
서비스를 나눠서 배포하는 것이 복잡함
사용자 기기에서 REST API로 서비스를 호출 시 직접 서비스로 가는 것이 아
니라 중간에 API 게이트웨이를 거침
ARCHITECTURE
서버 아키텍처 예시
서버 아키텍처 1
서버 아키텍처 2
ARCHITECTURE
서버 아키텍처 다이어그램 툴
3D 아키텍처 다이어그램 지원 툴
https://app.cloudcraft.co/blueprint/default
ARCHITECTURE
서버 아키텍처 다이어그램 툴
AWS 아키텍처 다이어그램 지원 툴
https://online.visualparadigm.com/diagrams/features/awsarchitecture-diagram-tool/
ARCHITECTURE
서버 아키텍처 다이어그램 툴
더욱 더 많은 아키텍처 다이어그램 툴 소개
https://geekflare.com/create-application-architecture-diagram/
04
🛠
💼
‍
참고 지식
첫 번째,
두 번째,
세 번째,
네 번째,
MongoDB
Socket
Passport
Recommendation
Modules
자세히 다루지는 못하지만, 필요할 때 찾아보세요!
MODULE
알아두면 좋은 MODULES
nodemon & moment & request
NODEMON
파일 변경이 감지되면 자동으로 재시작
기존 개발방식
파일 수정 -> npm start -> ctrl+c 의 무한루프…
노드몬은 수정만 하면 알아서 탐색해서 재시작해줌
MODULE
NODEMON
설치
npm install –g nodemon
적용
package.json에서 scripts:start 수정
우측 그림 참고
<실행 예시>
MODULE
알아두면 좋은 MODULES
nodemon & moment & request
MOMENT
날짜 데이터를 굉장히 유연하게 다룰 수 있음
moment().format(‘포맷 형식’)
EX) .format('YYYY-MM-DD') : “2020-06-13”
정 – 말 다양한 형식들이 있음
다 알아놓기 보다는 필요할 때마다 찾아쓰자 ~
https://momentjs.com/
MODULE
MongoDB
NoSQL
“관계형 데이터베이스가 아니다”
정확한 데이터 구조가 없을 수 있음
Documentation-Oriented
NoSQL 데이터베이스 뛰어난 확장성과 성능을 자랑
MONGODB
RDB
RDB ❌
relational database
SQL이 excel 이라면, NoSQL은 Word
MONGODB
어떤 게 좋아요?
데이터 중복을 허용
모든 데이터를 한 곳에 모아두고 처리
JOIN 🙅 👉 RDB에 비해 굉장히 빠름
복잡하고 다양한 데이터를 담을 수 있음
RDB
relational database
RDB ❌
MONGODB
언제 사용해요 ?
조회 위주인 데이터인 경우
데이터의 변경이 거의 없는 경우 (수정/삭제)
데이터의 형식을 정확히 알기 어려울 때
RDB
relational database
RDB ❌
MONGODB
MongoDB 설치
👈 Linux - Ubuntu
👈 mac 유저 ~
👈 window 유저 ~
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/
👆
MongoDB 사용도 나타나있음
mongod (mongodb 데몬 프로세스) 실행 후 mongodb 실행
MONGODB
MongoDB 참고
✔ 내용 참고
https://gngsn.tistory.com/14
✔ mongodb 계정 생성
https://yuddomack.tistory.com/entry/%EC%B2%98%EC%9D%8C%EB%B6%80%ED%84%B0-%EC%8B%9C%EC%9E%91%
ED%95%98%EB%8A%94-EC2-mongodb-%EA%B3%84%EC%A0%95-%EC%83%9D%EC%84%B1-%EC%99%B8%EB%B6%8
0-%EC%A0%91%EC%86%8D
MONGODB
mongoDB
C o m p a s s
MongoDB용 GUI Client 도구
Mysql Workbench 와 비슷한 역할
https://www.mongodb.com/try/download/compass
MONGODB
본인에게 맞는 운영체제 선택
MONGODB
MONGODB
설정 안했다면 None
MONGODB
선택한 Database 내부의 Collection
sql의 table의 개념과 비슷
Connection에 생성되어 있는 Database
MONGODB
collection에 저장된 데이터 예시
_id는 mongodb에서 지원하는 기본 Index
createdAt, updateAt은 timestamps option
MONGODB
e x p r e s s
+
m o n g o D B
mongoose module
설치
npm install –save mongoose
연결
connect('mongodb://userName:userPwd@IP:port/DB이름’)
컬렉션 생성
new mongoose.Schema({key1 :val1, key2: val2, …}, {options});
MONGODB
e x p r e s s
+
m o n g o D B
mongoose module
모델 생성
model(‘name’, schema)
- ‘n a me’ 이름의 모델을 만들면 DB에는 ‘n a me ’ s 라는 컬렉션이 생김
-
자동으로 ‘n a me ’을 소문자화 + 복수형으로 만들어줌
모델 객체의 다양한 A PI : h ttps://mo n go o sejs.c om/do cs/a pi/mo de l.h tml
쿼리 사용
h ttps://v e lo pe r t.c o m/4 7 9
참고
SOCKET
SOCKET
HTTP 통신
Socket 통신
HTTP 통신과 달리
클라이언트가 요청을 보내는 경우에만
서버와 클라이언트가 연결을 유지하며
서버가 응답하는 단방향 통신
실시간 양방향 통신으로
데이터를 주고 받는 방식
SOCKET
Socket 통신을 통해 할 수 있는 것
SOCKET
Socket.io 공식 페이지
https://socket.io
tutorial
https://socket.io/get-started/chat/
PASSPORT
PASSPORT
여권?
웹사이트나 API 사용 시 여권의 역할을 하여 로그인을 쉽게 해줌
http://www.passportjs.org/
PASSPORT
PASSPORT
소셜로그인 시 사용
passport-local
passport-google-oauth
passport-facebook
passport-twitter
passport-kakao
passport-naver
등의 모듈이 존재
PASSPORT
지원하는 외부 인증 모듈
참고 https://gngsn.tistory.com/22
과제
ASSIGNMENT
🖍 과제 소개 🖍
LEVEL 1. 세미나 실습 자료 제출
multer & multer-s3
LEVEL2. 합동 세미나 Architecture 그리기
합동 세미나를 듣지 않았다면, 과제 서버 Architecture 그리기
LEVEL3. 사진을 여러 개 받는 서버 ( user/selfies ) 구축하기
데이터베이스 필수
- 화면 캡처 후 Repo에 올리기