ROOT

안녕하세요. 스타트업에서 프론트엔드 개발을 맡고 있는 inseong입니다 😁이번 글에서는 GitHub Actions 활용해 Next.js를 NHN Cloud에 자동 배포하는 방법을 정리해보려고 합니다.이전에는 AWS 환경에서 S3와 CloudFront를 활용한 배포 자동화를 구성했었는데요. 이번에는 NHN Cloud + Nginx + Next.js Static Export 환경에서 CI/CD를 구성하면서 AWS와는 어떤 점이 달랐는지도 함께 정리해보겠습니다. 배포 환경 구성도 Dev / Prod 브랜치 구성▫️ 회사마다 브랜치 전략은 다를 수 있지만, 이 글에서는 개발 작업을 진행할 Dev 브랜치와 실제 배포를 위한 Prod 브랜치를 생성해 사용합니다.▫️ Dev 브랜치에서 개발 및 테스트를 진행하..

안녕하세요. 스타트업에서 프론트엔드 개발을 맡고 있는 inseong입니다 😁이번 글에서는 가비아에서 직접 구매한 도메인을 AWS 서비스를 활용해 프로젝트에 연결하고 배포하는 방법을 소개해 보겠습니다. 가비아 도메인 구매▫️ 원하는 도메인을 구매한 뒤 가비아 > 서비스 관리 페이지에 접속하면 아래와 같이 구매한 도메인이 표시됩니다.AWS Route 53 설정호스팅 영역 생성▫️도메인 이름 : 가비아에서 구매한 도메인 ( https:// 없이 )▫️설명 : (선택) 도메인 설명▫️유형 : 퍼블릭 호스팅 영역가비아 네임 서버 등록▫️ 전체 도메인 > 도메인 상세 > 네임 서버로 이동한 뒤, 네임서버 목록에 Route 53에서 생성된 4개의 NS 레코드를 등록합니다. (뒤에 온점은 삭제)ACM SSL 인증서..

안녕하세요. 스타트업에서 프론트엔드 개발을 하고 있는 inseong입니다. 😁요즘 제 취미는 앱 개발이에요. 여러분들은 머릿속으로만 생각했던 상상을 실제 앱으로 만들어보신 적 있으신가요?지금의 생각과 고민들을 나중에도 생생하게 기억하고 싶어서, 제가 만들고 있는 마이폿이라는 앱의 개발 과정을 하나씩 포스팅해보려고 합니다. 마이폿 앱 개발의 첫 시작사실 마이폿이 제가 처음 만든 앱은 아니에요.제 첫 앱은 당당이라는 앱이었습니다.당뇨가 있는 분들이 혈당을 기록하고, 당화혈색소 수치가 정상인지 높은지 한눈에 확인할 수 있도록 만든 앱이었어요.부모님을 위해 시작한 앱이었는데, 감사하게도 이 앱이 계기가 되어 지금 다니고 있는 회사에 취업하는 데에도 많은 도움이 됐습니다.그런데 취업하고 나니 자연스럽게 업데이..

안녕하세요. 스타트업에서 프론트엔드 개발을 하고 있는 inseong입니다. 😁서비스를 운영하다 보면 고객의 1:1 문의, 오류 제보, 결제 실패와 같은 이벤트를 최대한 빠르게 확인하는 것이 중요합니다.이번글에서는 디스코드 웹훅으로 고객으로 부터 오는 1:1문의 알림을 받는 방법에 대해서 소개해 보겠습니다. 1:1 문의 알림 흐름도1️⃣ 사용자가 앱에서 제목, 내용, 사진을 입력해 1:1 문의를 작성합니다.2️⃣ 사용자가 문의하기 버튼을 누르면 문의 제출 함수가 실행됩니다.3️⃣ 문의에 사진이 포함되어 있다면 사진을 먼저 S3에 업로드합니다. 사진이 없다면 업로드 과정 없이 다음 단계로 넘어갑니다4️⃣ 사진 업로드가 완료되면 제목, 내용, 사진 정보 등을 Firestore에 저장합니다. Firesto..

안녕하세요. 스타트업에서 프론트엔드 개발을 하고 있는 inseong입니다. 😁AWS의 S3와 CloudFront, Github OIDC를 활용해 React 프로젝트의 CI / CD 환경을 구성한 경험을 정리했습니다. AWS에 GitHub OIDC 공급자 등록▫️ GitHub Actions가 발급한 OIDC 토큰을 AWS에서 신뢰할 수 있도록 GitHub를 ID 제공업체로 등록합니다.▫️ IAM → 액세스 관리 → ID 제공업체 ▫️ 공급자 유형 : OpenID Connect ▫️ 공급자 URL : https://token.actions.githubusercontent.com▫️ 대상 : sts.amazonaws.comGitHub Actions용 IAM 역할 생성▫️ GitHub Actions가 AWS..

안녕하세요. 스타트업에서 프론트엔드 개발을 맡고 있는 Inseong입니다 😁이번 글에서는 두 번의 시험 끝에 합격하면서 느낀 점과 실제 공부 방법을 공유해보려고 합니다. 시험 결과 AWS 시험을 처음 보러 가면 바로 시험을 시작하는 건 아니에요.시험장에 도착하면 사진 촬영 → 신분증 확인 → 응시자 이름과 동일한 카드 확인 등의 절차를 거쳐 본인 인증을 진행하게 됩니다.저도 처음에는 절차가 많아서 시간이 꽤 걸리는 거 아닌가 싶었는데, 생각보다 금방 끝났어요.시험 시작 20분 정도 전에 도착했는데도 충분히 여유롭게 확인을 마치고 시험을 볼 수 있었습니다. 그리고 결과는...734점으로 합격했습니다. 😭SAA-C03의 합격 기준이 720점이기 때문에 진짜 말 그대로 턱걸이였습니다. 시험을 보는 동안에..