WEEK 16 나만무 MVP TIL(6월28일 토요일)

Devkty·2025년 6월 30일
MVPweek 16나만무크래프톤 정글 연대기

크래프톤 정글(나만의 무기 만들기 WEEK 14 ~ 20)

목록 보기
23/57

[목표]
API와 DB를 재설계합니다.
벡엔드를 구축하고 프론트엔드와 PostgreSQL과 연결합니다.
백앤드와 프론트엔드에 주석을 추가하면서 이해합니다.
DB ERD모형의 DB를 가져와서 연결합니다.
CI/CD룰 구축합니다.
백앤드에 DTO를 도입합니다.
프로젝트 상세 페이지 구상합니다.

10:30 ~ 12:20

벨로그를 작성하고 있다.

어제 벡엔드, 프론트 연동 수정

어제 날짜가 시간까지 나와서 수정하고 있다. 벡엔드에서 date-fns를 통해 Controller가 가져오는 값을 수정했다.

추가로 확인 해보니 새 프로젝트 버튼 모달을 통해 POST 요청도된다. 새 프로젝트를 만들면 정상적으로 DB에 올라간다.

12:20 ~ 13:20

식사를 하고 왔습니다.

13:20 ~ 15:00

IAM EC2 문제가 있어서 엑세스를 확인해서 추가했다. (연결)
진혁이 형하고 DB를 확인하며 추가될 것들과 수정되야할 것들, 궁금한 것들에 대해 이야기했다.
이제 DB ERD 모형을 보고 수정을 하고 잘 작동하는지 확인해보겠다.

15:00 ~ 17:00

DB ERD에 따라 벡엔드와 프론트엔드를 다시 작성해보겠다.

DB ERD 모형에 따라 코드 재작성

DB테이블명 Projects → project

  • project_name: string → title
  • project_summary: string → descrition
  • project_status: string → status
  • project_people: number → project_member테이블에서 같은 project_id를 가진 수
  • project_deadline: Date → due_date
  • project_leader: string → project 테이블의 leader_id에 해당되는 users 테이블의 display_name

일단 커서와 함께 프롬포팅을 통해 벡엔드 연결은 모두 했다. 정상적으로 5000번 포트에서 잘 작동한다.

이후에 프론트 엔드에서는 바뀐 컬럼값만 이번 새로운 값으로 바꿔주었다.

날짜 포맷 형식도 벡엔드에서 년, 월, 일로 표시하게끔 설정했다.

그러니 정상적으로 카드가 출력되었다.

Postgre SQL

NestJS 백엔드

React, NextJS 프론트 엔드

모들을 통한 POST로 생성 가능

2시간만에 새로운 우리의 새로 설계된 DB로 업데이트 완료했다.

17:00 ~ 18:00

지금까지의 프로젝트 노션정리

어느정도 벡엔드도 유저가 완성되기 전까진 더 나아갈 수 없어서 나중에 편집하기 용이하게 주석을 추가했다.

해당 작업이 완료되는대로 AWS와 Github를 통해 CI/CD 환경을 구성해보겠다.

그런데 일단 프로젝트를 노션에 정리해보았다. 팀 노션도 정리해야하는데… 어케해야할지…

18:00 ~ 19:00

식사를 하고 쉬었습니다.

19:00 ~ 21:30

주제 정하고 이것저것 한다고 혼잡한 책상을 치웠습니다.

코드의 이해를 돕기 위한 주석 추가

아까 하려다 못했던 코드에 주석을 추가 했습니다. 먼저 백엔드부터 시작하겠습니다.

명석이형 말대로 database를 체계적으로 관리하기위해 기존의 app.modules.ts에서 src 하위에 폴더를 하나더 만들어서 database.module.ts로 DB 연결 관련된 코드를 옮겼습니다.

최종으로 백엔드의 코드 주석과 최적화를 포함하여 커밋했다.

https://github.com/Krafton-Jungle-Weight/Codeplanner_Backend/commit/ca519cec4fc2b361996d769cee201d790010133e

이제 프론트엔드를 정리해 봐야한다.

중간에 갑자기 프론트엔드가 먹통되서 놀랐지만 금방 복구했다. 각 코드에 대한 주석을 추가 했다. 필요없는 데이터가 없을때 가상 데이터를 추가하는 불필요한 코드를 삭제하고 최적화했다.

최적화하려고 Nextjs폴더 구조 app를 삭제하고 React 구조 폴더로 바꾸려다가 꼬일것 같아서 보류했다. 나중에 때가 되면 하나로 단일화 해야겠다.

https://github.com/Krafton-Jungle-Weight/Codeplanner_Frontend/commit/0dbd6a31365077e3a5b1c60f8b36c1a6f3d0a60d

21:30 ~ 23:30

벡엔드 프로젝트 부분 API 노션 정리(URL, DTO 수정)

API를 효율적으로 사용하기 위해서 API를 노션에 정리하고 있다.

근데 정리하다 보니 프로젝트 생성부분의 URL이 /projects로만 받고 있어서 /projects/create 로 바꿔야됨을 깨달알았다. 그리고 형식자 선언을 위해 DTO도 도입해야된다고 생각됐다.

트러블슈팅
갑자기 새 프로젝트 create가 안되서 트러블슈팅을 하게 되었다. 알고보니 백앤드에서 Post보내는 부분에 담당자 아이디를 넣는 부분이 있는데, 내가 이걸 기본값을 삭제했었다. 그러니 프론트엔드에서 담당자 아이디가 오지 않아 생성이 되지 않았다. 이부분은 그대로 두고, 명석이형 회원 연동이 완료되면 그때 해봐야겠다.

leader_id: body.leader_id || '550e8400-e29b-41d4-a716-446655440001', // 기본값 또는 실제 leader_id(추후 수정)

다시 돌아와서 projects/create로 URL를 변경해보았다. 생각보다 쉬웠다. URL부분만 create로 살짝바꾸니 바로 반영됐다.

API또한 다음과 같이 정리했다.

Create부분에 DTO를 도입했다.

팀원의 추천과 보안과 효율성을 위해서 DTO를 도입하기로 했다.

커서 Ai를 통해서 백앤드 project폴더안 dto폴더에 프로젝트 dto관련 파일들을 만들었다. 그외에 기존 코드에서 DTO로 바뀌면서 바꿔야할 코드들에 대해서 추가적인 수정을 했다.

https://github.com/Krafton-Jungle-Weight/Codeplanner_Backend/commit/0d4306e45c81d93a215166ecc193ba1a859dc8bc

+27일자 벨로그를 정리했습니다.

팀원분들의 npm run dev에 대해 도움을 주었습니다. 프론트엔드 진행정도에 대해 이야기 했습니다. 팀원분께 NextJS와 React 이론에 대해서 조금이나마 알려드렸습니다.

숙소갔다와서 CI/CD를 구축해봐야겠다.

프로젝트 요약 페이지 구성은 팀원의 의견에 따라 구성을

23:30 ~ 00:30

숙소에 갔다왔다.

00:30 ~ 01:00

배가고파 라면먹고 왔다.

01:00 ~ 03:00

CI/CD 구축하기

전제 조건

  1. GitHub 저장소
  2. EC2 인스턴스 (Ubuntu 등)
  3. RDS (MySQL, PostgreSQL 등)
  4. SES (이메일 발송)
  5. 도메인 (Route 53 또는 외부) – 이메일 도메인 인증을 위한 경우
  6. PM2 or Docker – 백엔드 프로세스 유지용
  7. Nginx or ALB – 프론트엔드/백엔드 리버스 프록시 및 HTTPS 적용

전체 아키텍처 흐름 요약

  1. GitHub에 Push 또는 PR 발생
  2. GitHub Actions를 통해 CI 수행 (빌드, 테스트 등)
  3. EC2에 SSH 배포 or Docker 컨테이너 재배포
  4. 배포 완료 후 PM2 재시작 or Docker Compose
  5. SES로 알림 이메일 전송 (선택)

EC2 인스트럭션을 생성하고 키페어를 통해 SSH로 접속을 시도 했습니다. 

ssh -i "C:\aws_key\codeplanner.pem" [ubuntu@---](mailto:ubuntu@---)

위 명령어를 통해 연결할 수 있게 되었다.

GPT에 따라 밑의 명령어로 서버를 준비해보고 있다.

sudo apt update
sudo apt install git nodejs npm nginx -y
sudo npm install -g pm2

GitHub Actions 작성 (Windows에서도 GitHub 웹 또는 VS Code에서 작성)

.github/workflows/deploy.yml

yaml
복사편집
name: Deploy to EC2

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v3

    - name: Set up SSH
      uses: webfactory/ssh-agent@v0.8.1
      with:
        ssh-private-key: ${{ secrets.EC2_SSH_KEY }}

    - name: Deploy to EC2
      run: |
        ssh -o StrictHostKeyChecking=no ubuntu@<EC2_PUBLIC_IP> << 'EOF'
          cd /home/ubuntu/your-project
          git pull origin main
          npm install
          npm run build
          pm2 restart all
        EOF

Windows에서는 GitHub Secrets에 EC2 개인키(EC2_SSH_KEY)를 base64 인코딩해서 저장한 후, Actions에서 디코딩해서 쓰는 방식도 가능합니다.

Git bash에서 기존의 AWS pem 키를 base64로 

base64 -w 0 /c/aws_key/codeplanner.pem > /c/aws_key/codeplanner.b64

명령어를 통해서 변환가능합니다.

이후에 해당 과정을 수행합니다.

GitHub Secrets 등록

  • GitHub > Repository > Settings > Secrets and variables > Actions
  • New repository secret 클릭
    • Name: ENCODED_EC2_SSH_KEY
    • Value: codeplanner.b64의 한 줄짜리 내용 붙여넣기

요기서 Actions가 제대로 되지 않는 문제가 생겨서 아래의 방법대로 진행했다.

해결 방법

.ssh 디렉토리를 먼저 생성해줘야 합니다. 다음 명령어를 그 전에 실행해야 합니다:

mkdir -p ~/.ssh

그리고 나서 다시 아래 명령 실행(AWS키 값은 바꿔야합니다.)

echo "base64로된 AWS키" | base64 -d > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa

이래도 안되서 Github action에 추가 스크립트를 작성했다.

- name: Set up SSH private key
	run: |
		mkdir -p ~/.ssh
		echo "${{ secrets.SSH_PRIVATE_KEY }}" | base64 -d > ~/.ssh/id_rsa
		chmod 600 ~/.ssh/id_rsa

줄바꿈에 주의해야한다!

그런데도 오류가 난다… 이번엔 새로운 유형의 오류이다.

나머진 내일해보겠다.

RDS 연결 설정 (MySQL or PostgreSQL)

  1. AWS 콘솔에서 RDS 생성
  2. 보안 그룹에서 EC2 → RDS 연결 허용
  3. EC2에서 접속 테스트:
bash
복사편집
mysql -h <RDS_ENDPOINT> -u admin -p
  1. .env 또는 config에 DB 정보 설정
DB_HOST=xxx.rds.amazonaws.com
DB_USER=admin
DB_PASS=yourpassword

SES 이메일 발송 설정

  1. AWS SES 콘솔에서 이메일 또는 도메인 인증
  2. IAM 사용자에 AmazonSESFullAccess 권한 부여
  3. Node.js 코드 예시 (Nodemailer 사용):
ts
복사편집
import AWS from 'aws-sdk';
import nodemailer from 'nodemailer';

AWS.config.update({ region: 'ap-northeast-2' });

const transporter = nodemailer.createTransport({
  SES: new AWS.SES(),
});

await transporter.sendMail({
  from: 'noreply@yourdomain.com',
  to: 'user@example.com',
  subject: '배포 완료',
  html: '<p>CI/CD 파이프라인이 성공적으로 작동했습니다.</p>'
});

SES에서 도메인 인증(SPF, DKIM)도 필수입니다.

체크리스트 (Windows 기준)

항목설명
SSH 키 관리~/.ssh/id_rsa와 .pem 파일은 GitHub Secrets로 관리
VS Code GitHub 연동GitHub Pull Requests and Issues 확장
GitHub Actions 디버깅Actions > Run Logs에서 확인
배포 로그EC2에서 pm2 logs 명령으로 확인
profile
Devkty
모든걸 기록하며 성장하고 싶은 개발자입니다. 현재 크래프톤 정글 8기를 수료하고 구직활동 중입니다.
이전 포스트

시프트업 특강 (김성찬 팀장님)

다음 포스트

WEEK 16 나만무 MVP TIL(6월29일 일요일)

0개의 댓글