[Final Project] 브루노, 데이터 (feat. Schema, MongoDB)
·
Project
브루노프로젝트를 시작하기전에 API 요청을 재현할 수 있도록 테스트하기 위해 브루노를 사용하였다.팀에게 필요한 대략적인 API 요청을 페이지별로 분리하여 Collection을 설계하였다.설계한 폴더와 참고사항을 팀원에게 공유하고 각자의 로컬에서 테스트해 볼 수 있도록 하였다.먼저 환경변수로 API 서버 URL과 API를 사용할 수 있게 허가된 ID를 설정하였다.API 요청을 보낼 때 어디서 보냈는지 확인할 수 있게 헤더에 Client-Id를 설정하였다.로그인 API 요청 시 성공하면 응답으로 토큰을 발급받아 환경 변수에 토큰을 저장하도록 설정하였다.이렇게 스크립트를 작성해두면 다른 사용자들이 로그인을해도 각자의 토큰이 환경 변수에 저장된다.발급받은 토큰은 로그인한 사용자의 고유의 값으로 Baerer To..
[Final Project] 프로젝트 구조와 기능 흐름 정리
·
Project
프로젝트 구조📁 final-team-project/│├── 📁 app/ # App 라우트 그룹│ ├── 📁 (auth)/ ## 인증 관련 라우트 그룹│ │ ├── 📁 login/│ │ │ └── 📄 page.tsx ### 로그인 페이지│ │ ├── 📁 signup/│ │ │ └── 📄 page.tsx ### 회원가입 페이지│ │ └── 📄 layout.tsx ### 로그인/회원가입 전용 레이아웃 (헤터/푸터 X) (로고 홈 링크)│ ││ ├── 📁 mypage/ ..
[Final Project] 코드 컨벤션 정리
·
Project
팀원들의 코드에 통일성을 주기 위해 코드 스타일과 구조, 규칙을 정의하여, 누가 작성해도 읽기 쉽고 유지보수가 가능하도록 코드 컨벤션을 정리했다.특히 팀 코드의 일관성을 유지하기 위해 Prettier와 ESLint 패키지를 사용해 프로젝트 내에서 자동으로 포맷팅과 규칙 검사를 수행하도록 설정했고, 확장자까지 함께 사용해 안정성을 높였다.네이밍 규칙변수 / 함수camelCase 사용// 변수const handleSubmit = () => { }// 함수export async function getPosts() { }컴포넌트 / 타입 / 인터페이스PascalCase 사용// 컴포넌트export default function ErrorPage() { }// 타입export type UserCreateForm ..
[Final Project] 브랜치 전략
·
Project
이 프로젝트의 브랜치 전략 목표는 병렬 개발을 안전하게 유지하면서 코드 충돌과 리뷰 비용(시간, 집중력, 리스크)을 최소화하고, 배포 흐름을 안정적으로 가져가는 것이다.복잡한 Git Flow 전체를 적용하기보다는 초보자 팀에서도 실수 없이 사용할 수 있는 구조를 선택했다.브랜치 역할main 브랜치 (배포용)- 항상 배포 가능한 상태를 유지한다.- 직접 작업/직접 커밋 금지- `develop`에서 검증된 코드만 `PR`로 병합한다.develop 브랜치 (개발 통합)- 기능 개발이 완료된 `feature` 브랜치들이 모이는 곳이다.- 팀원들이 함께 테스트하고 통합 확인을 하는 기준 브랜치이다.feature/* 브랜치 (기능 개발)- 각자 맡은 작업을 독립적으로 개발하는 브랜치이다.- 네이밍 예시: `feat..
[Final Project] 이슈, PR, 커밋 컨벤션 정리
·
Project
팀 프로젝트를 진행하면서 이슈 생성 → 작업 → 커밋 → PR 생성까지의 흐름을 팀원 모두가 동일하게 이해하고 사용할 수 있도록 협업 컨벤션을 정리했다.이제 막 배운 초보 개발자이기에 규칙을 많이 만드는 것보다 헷갈리지 않고 그대로 따라 할 수 있는 구조를 만드는 데 초점을 맞췄다.이슈 · PR 템플릿 관리 방식이슈와 PR 컨벤션은 GitHub가 자동으로 인식해서 사용하는 템플릿 파일이다..github 디렉토리 하위에서 관리한다.GitHub는 정해진 파일명을 가진 템플릿만 자동으로 인식하기 때문에 아래와 같은 네이밍을 사용했다.이슈 템플릿이슈 템플릿은 최근에 폴더 방식으로 바뀌었고, ISSUE_TEMPLATE 폴더 안에 여러 유형의 이슈 템플릿을 생성할 수 있다.# 폴더명은 고정, 파일명은 자유.gith..
[Final Project] GitHub Actions로 자동 배포(CI/CD) 설정
·
Project
CI/CD코드를 자주, 안전하게, 자동으로 서비스에 반영하기 위한 개발 문화이자 자동화 흐름CI(Continuous Integration)코드를 자주 합치고, 문제가 없는지 자동으로 확인하는 과정CD(Continuous Deployment)검증된 코드를 자동으로 배포하는 과정즉, CI/CD는 코드가 정해진 조건을 만족했을 때만 자동으로 배포되도록 보장하는 안전장치다. GitHub ActionGitHub에서 제공하는 CI/CD 자동화 도구코드가 push, pull request 등 특정 이벤트가 발생할 때마다 미리 정의한 작업을 자동으로 실행할 수 있음워크플로우 파일(.github/workflows/)에 작업 단계를 정의하면, 별도의 서버 없이도 손쉽게 자동화 파이프라인을 구축할 수 있음예를 들어, 코드가..