목록웹 개발/기타 지식 (3)

군붕이의 메모장

toast-ui-editor v3 이미지 업로드 최적화(커스터마이징)하기

● 문제상황 마크다운 에디터에서 이미지 삽입시 인코딩되어 본문의 길이가 길어지는 상황 약 4kb의 이미지 삽입시 약 5100자의 문자열이 삽입된다. 본문의 길이가 늘어날수록 DB에서 차지하는 공간이 커지게되며, 삽입/삭제 등 데이터의 크기가 늘어날수록 더 많은양의 네트워크 트래픽을 요구하게된다. ● 해결방안 이미지 삽입 차단 : 커뮤니티를 주제로 잡은 프로젝트이므로 이미지 삽입 차단은 말이 안되는 해결책이였다. 이미지 개별 저장 : Firebase Storage, AWS S3 등 저장공간에 저장 위 처럼 2가지의 해결방안이 생각났다. 아무래도 가장 최선의 방법은 2번째 방법인 이미지를 개별의 저장공간에 보관하는 것이였다. ● 이미지 개별 저장 구현방식 우선 프로세스에 대해서 생각을 했을때 아래처럼 떠올랐..
웹 개발/기타 지식 2023. 3. 27. 19:09
Nodemailer + Gmail OAuth2.0으로 이메일 발송기능 구현하기

회원가입시 이메일 인증을 위해 Nodemailer 라이브러리를 통해 제작하려고 했다. 하지만 어째서인지 공식문서에 있는 로그인방식대로 하면 에러가 발생해서 관련해서 정리해둘려고 한다. 우선 2022.05.30부터 기존 존재하던 구글 이메일, 비밀번호 기반 인증으로는 더이상 이메일 발송이 불가능해졌다. nodemailer에서 Gmail을 통해 이메일발송을 구현하기 위해선 OAuth2.0 인증이 필요하게 되었다. ● 절차 구글 개발자 콘솔에서 프로젝트 생성 후 Gmail API 사용하기 OAuth 사용 동의하기 OAuth2.0 클라이언트 아이디 생성하기 리프레쉬 토큰과 엑세스 토큰 발급받기 발급받은 코드로 Nodemailer를 사용해서 이메일 발송하기 ● 구글 개발자 콘솔에서 프로젝트 생성 후 Gmail A..
웹 개발/기타 지식 2023. 2. 18. 21:00
[OAuth] 카카오 로그인 API를 사용하여 소셜로그인 구현하기

토이프로젝트를 진행하면서 소셜로그인 구현을 처음 시도해봤다. 삽질한 경험을 블로그에 기록을 남겨 다음에도 구현할 일이 생긴다면 빠르게 구현할려고 한다. ● OAuth 란? 우하한테크코스 블로그에 잘 정리되어있는 글이 있어 해당 글을 보고 개념 및 동작방식을 공부했다 https://tecoble.techcourse.co.kr/post/2021-07-10-understanding-oauth/ OAuth 개념 및 동작 방식 이해하기 1. OAuth란? image 웹 서핑을 하다 보면 Google과 Facebook 및 Twitter… tecoble.techcourse.co.kr ● 구현 환경 우선 언어의 경우 Typescript를 사용했으며 프론트는 React, 백엔드는 Node.js의 Express 프레임워크..
웹 개발/기타 지식 2022. 12. 17. 16:29
이전 Prev 1 Next 다음