군붕이의 메모장

이전글 : https://iamiet.tistory.com/entry/AWS%EC%97%90-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-2-Route53-%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%97%B0%EA%B2%B0-%EB%B0%8F-SSL-%EC%9D%B8%EC%A6%9D%EC%84%9C-%EB%B0%9C%EA%B8%89 AWS에 React 배포하기 - 2, Route53 도메인 연결 및 SSL 인증서 발급 이전글 : https://iamiet.tistory.com/entry/AWS%EC%97%90-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-1-S3-%EC%9B%B9%ED%98%B8%EC%8A%A4%ED%8C%85..

이전글 : https://iamiet.tistory.com/entry/AWS%EC%97%90-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-1-S3-%EC%9B%B9%ED%98%B8%EC%8A%A4%ED%8C%85-%EC%84%A4%EC%A0%95 AWS에 React 배포하기 - 1, S3 웹호스팅 설정 리액트 클라이언트를 배포하는 방법은 다양하게 있다. AWS EC2에 직접 배포하거나 다른 PaaS 플랫폼을 활용하여 배포할수도 있다. 많은 방법중에서 AWS S3 정적 웹 호스팅을 활용하여 배포한 이유는 iamiet.tistory.com CloudFront로 S3에서 호스팅한 웹사이트를 배포하기전에 우선 구매한 사설도메인을 Route53에 연결해줘야 한다. 사설 도메인을 연..

리액트 클라이언트를 배포하는 방법은 다양하게 있다. AWS EC2에 직접 배포하거나 다른 PaaS 플랫폼을 활용하여 배포할수도 있다. 많은 방법중에서 AWS S3 정적 웹 호스팅을 활용하여 배포한 이유는 아래와 같다. 간편하다 : 설정이 매우 단순하고 간편해서 쉽게 배포가 가능하다 확장성이 좋다 : CDN을 통해서 다른 국가에서도 빠른 속도로 접근이 가능하다 비용 : S3 자체의 비용이 매우 저렴한편이고 웹호스팅을 위한 S3 비용이 매우 저렴했다 ● AWS IAM 사용자 권한부여 우선 IAM 사용자에게 S3 서비스에 대한 사용권한(AmazonS3FullAccess)을 부여해준다. 해당 방법은 이전에 S3 이미지업로드 구현하는 글에서 적어뒀으니 링크로 대체한다. https://iamiet.tistory.c..

● 문제상황 마크다운 에디터에서 이미지 삽입시 인코딩되어 본문의 길이가 길어지는 상황 약 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..

데이터베이스의 테이블을 설계하다보면 특정 테이블에 항상 기본값이 필요한 경우가 존재한다. 이 때 실제 프로덕션의 경우에는 DB가 초기화될 일이 없지만, 개발단계에서는 테이블의 구조가 바뀔수도 있기때문에 이 경우 DB의 데이터가 초기화되는 경우도 존재한다. 매번 데이터를 초기화되고 수동으로 넣어주는건 매우 비효율적이라 기본 데이터를 넣을수 있게 구현해봤다. 고민한 방법은 다음과 같다 typeorm-seeding을 사용해서 초기값 구성 typeorm-seeding은 typeorm@0.2.X 버전에 호환되므로 불가능한 케이스이다. typeorm@0.2.X → 0.3.X 버전으로 업그레이드 되면서 보안적인 이슈가 많이 해결됬다. typeorm-migration을 통해 초기값 구성 시도를 해보았으나 버전 이슈로 ..

기본적으로 TypeORM에서 Entity간 관계를 지정하게되면 테이블명+컬럼ID로 생성된다. board.entity.ts @Entity('Board') export class BoardEntity { @PrimaryGeneratedColumn('uuid', { name: 'board_id' }) boardId: string; @Column({ type: 'varchar', length: 50, nullable: false }) title: string; // ... @ManyToOne(() => UserEntity, (user) => user.userId) user: UserEntity; } user.entity.ts @Entity('User') export class UserEntity { @Prima..

● 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 프레임워크..