군붕이의 메모장

여러명이서 프로젝트를 진행하다보면 환경변수 관리가 불편해진다. 이 때 도입할수 있는 방식이 AWS에서 제공하는 Parameter Store 이다. Parameter Store를 사용하면 환경변수를 관리를 중앙화 할 수 있다. ● AWS Parameter Store 우선 AWS 공식문서에 따르면 아래와 같은 서비스로 소개하고있다. AWS Systems Manager의 기능인 Parameter Store는 구성 데이터 관리 및 암호 관리를 위한 안전한 계층적 스토리지를 제공합니다. 이러한 서비스를 통해서 중요한 데이터를 중앙화하여 관리가 가능하다. https://docs.aws.amazon.com/ko_kr/systems-manager/latest/userguide/systems-manager-paramet..

● Nest.js의 body-parser Nest.js의 경우 기본적으로 bodyparser 라이브러리를 사용해서 json 데이터를 변환한다. nest new [name]을 통해서 nestjs 프로젝트를 생성하면 아래 사진처럼 node_modules 내부에 bodyparser가 설치되어있다. 자바스크립트는 기본적으로 UTF 인코딩을 지원하기때문에 실제 bodyparser 내부를 들여다보면 UTF를 제외한 인코딩 방식은 에러로 처리하는것을 확인할 수 있다. body-parser/lib/types/json.js // assert charset per RFC 7159 sec 8.1 var charset = getCharset(req) || 'utf-8' if (charset.slice(0, 4) !== 'ut..

실제 배포된 프로덕션 환경에서는 일반 유저가 API 문서에 접근하면 보안적인 문제가 발생할수 있다. API 문서에 접근하는것을 차단하기위해서 로그인, 토큰인증 등 다양한 방법이 존재한다. 그 중에서도 아주 간단하게 express-basic-auth를 활용한 로그인된 유저에게만 API 문서에 접근권한 부여가 가능하다. 해당 라이브러리 이외에 요구사항에 따라 미들웨어를 제작해서 /api 요청에 대한 접근 컨트롤이 가능할것이다. ● express-basic-auth 설치 npm i express-basic-auth ● express-basic-auth 활성화 import * as expressBasicAuth from 'express-basic-auth'; async function bootstrap() { ..

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

● Nest.js 에서 로그인 구현하기 Nest.js의 경우 일반적으로 인증을 처리할 때 Passport 미들웨어를 사용하여 구현한다. ● Passport 란? Passport는 Local, Oauth, Jwt 등을 다양하게 지원해주는 Node.js용 인증 미들웨어 이다. 보통 로그인 전략(Strategy)과 가드(Guard)를 생성하여 처리한다. Passport : https://www.passportjs.org/ Passport.js Simple, unobtrusive authentication for Node.js www.passportjs.org ● 필요한 패키지 우선 필요한 패키지는 아래와 같다. @nestjs/passport : nest.js에서 passport를 사용하기 위한 패키지 pass..

● AWS IAM 유저 추가하기 우선 AWS 콘솔에서 iam을 검색해서 들어가준다 좌측 사용자를 누르고 사용자 추가를 눌러준다 사용자 이름을 적절하게 지정해준다 다음 권한설정에서 "직접 정책 연결" 을 눌러주고 "s3" 를 검색해서 "AmazonS3FullAccess" 를 선택한다 사용자 생성 이후에 해당 사용자를 눌러준다. 보안 자격 증명 탭에서 사용자에 대한 Access key를 생성해준다. 사용할 환경에 체크하면 되며 우선 나는 기타로 체크했다. 설명 태그를 적절하게 작성해준다 유저에 대한 액세스 키가 발급된다. 해당 키는 외부에 노출되지 않도록 주의하자 ● AWS S3 버킷 생성하기 IAM과 마찬가지로 AWS 콘솔에서 S3를 검색하여 들어간뒤 버킷 생성을 눌러주면 된다. 적당한 버킷이름과 AWS ..

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

토이프로젝트를 진행하면서 소셜로그인 구현을 처음 시도해봤다. 삽질한 경험을 블로그에 기록을 남겨 다음에도 구현할 일이 생긴다면 빠르게 구현할려고 한다. ● 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 프레임워크..

토이프로젝트를 진행하던 도중 뜬금없이 Cannot Freeze 에러가 발생했다. 분명 Object.freeze() 메소드를 쓴적이 없는데...해서 좀 더 자세히 살펴보기로 했다. ● Object.Freeze() 란? 객체의 불변성을 유지하기위해 변경을 차단하는것을 뜻한다. 내부 값을 삭제하거나 변경할 수 없어진다. MDN Docs : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze Object.freeze() - JavaScript | MDN Object.freeze() 메서드는 객체를 동결합니다. 동결된 객체는 더 이상 변경될 수 없습니다. 즉, 동결된 객체는 새로운 속성을 추가하거나 존..

리액트를 사용할때 styled-component 라이브러리를 통해서 전역 스타일 지정이 가능하다. 전역스타일은 모든 html 요소에 대해서 공통적인 스타일을 가지는것이다. 예시로는 아래와 같다 모든 li 태그에서 list-style 제거하기 a 태그에서 text-decoration 제거하기 button 태그에 cursor: pointer 지정하기 만약 전역스타일을 사용하지 않는다면 각 페이지 마다 일일히 list-style: none, text-decoration: none 등을 적용해야된다. 1. styled-component 설치 -- 자바스크립트 환경에서의 설치 yarn add styled-components -- 타입스크립트 환경에서의 설치(추가설치필요) yarn add styled-compone..