Today?

Node 4기 챌린지반 - Slack (Part.2)

들어가며

Q. 슬랙 기능 중 CRUD와 직접 관련 없는 기능들?

• 허들, 음성메세지 전송, 동영상 클립, 멘션

허들 톺아보기

• 슬랙에서 제공하는 오디오/비디오 컨퍼런스 기능

어떤 기술이 필요할까?

• VoIP (Voice over Internet Protocol)
  • 인터넷을 통해 음성 정보 전송
  • 암호화 x , 호환성 안 좋음
• WebRTC (Web Real-Time Communication)
  • 실시간 오디오/비디오 커뮤니케이션 (P2P : Peer to Peer)
  • 튜터님 : 너무 많이 봤다... 웬만하면 최종 프로젝트에서 안했으면 좋겠다.
  • 품질도 꽤 좋음.
  • 구현하려면 STUN/TURN 서버 구축 혹은 이미 있는 서버에 기생 필요
    • STUN/TURN은 P2P 연결(NAT 뒤에 있는 Peer간 통신)을 위한 프로토콜
    • 쓰려면 소프트웨어를 깔고 서버 세팅을 해야함
    • STUN 서버가 NAT 뒤 클라이언트의 퍼블릭 아이피와 포트 스캔 -> 실패하면 TURN 서버가 백업을 하는 메커니즘
  • 문제점?
    • 소매업자 여러 명 끼워서 거래 vs 직거래하기
    • 당연히 후자가 빠르고 효율적... 그래서 p2p로 하다보니까 많은 사람들이 연결되는 그룹회의는 모든 참가자에게 별도로 연결을 유지해야 하기 때문에 네트워크 대역폭/컴퓨팅 리소스에 큰 부담
    • 그래서 SFU / MCU 서버를 두기도 한당..

음성 메시지 전송

어떤 기술이 필요할까?

• Web Audio API
• 파일 업로드 및 저장 기술
  • multer
• 음성 메시지 서빙 기술
  • S3에 접근 가능한 url...을 통해 오디오 파일을 다운로드하고 재생

동영상 클립 전송

어떤 기술이 필요할까?

• 녹화에 필요한 기술
  • MediaRecoder
• 파일 업로드 및 저장 기술
  • 음성 데이터는 원본 그대로, 영상 데이터는 트랜스코딩된 결과물을 버킷에 저장
    • 파일의 크기를 줄여야 함

팀 프로젝트

• 프로젝트 명 : UDONG
  오늘은 서버 연결하고... S3에 이미지 업로드하는 거 구현하고...

S3

미들웨어 형식으로 구현했다.

const s3Client = new S3Client({
	region: 'ap-northeast-2',
	credentials: {
		accessKeyId: AWS_ACCESS_KEY,
		secretAccessKey: AWS_SECRET_KEY,
	},
});

const allowedExtensions = ['.png', '.jpg', '.jpeg', '.bmp'];

export async function deleteExistingFile(bucket, key) {
	const deleteParams = {
		Bucket: bucket,
		Key: key,
	};
	try {
		console.log('키 : ' + key);
		await s3Client.send(new DeleteObjectCommand(deleteParams));
		console.log('기존 프로필 사진 삭제');
	} catch (err) {
		console.log('기존 프로필 사진 삭제 에러 :', err);
	}
}

const imageUploader = multer({
	storage: multerS3({
		s3: s3Client,
		bucket: 'udongimages',
		key: (req, file, callback) => {
			const imageType = req.body.imageType;
			const uploadDirectory =
				imageType === 'profile' ? 'profileImages' : 'communityImages';
			const extension = path.extname(file.originalname);
			if (!allowedExtensions.includes(extension)) {
				return callback(new Error('잘못된 extension'));
			}

			const newFileName = `udong_${Date.now()}${extension}`;
			callback(null, `${uploadDirectory}/${newFileName}`);
		},
		acl: 'public-read-write',
	}),
});

기존에 프로필 사진이 있으면 자동 삭제된다. key값을 어떻게 받아오는지 궁금했는데 S3 파일 주소(req.file.location)의 뒷부분이 key가 되는 것 같았다.

오늘 배운 것

회고