1차 팀 프로젝트 : FilmTalk (팀 회의)

영화 예매 웹 플랫폼 : 협업

Oct 01, 2024

Contents

코드컨벤션(규칙)폴더명(서버)폴더명(mustache)파일명 요약 코드컨벤션(규칙)1. 리소스 명칭 (Resource Naming)예시2 (값을 수정할때 post)예시2 (값을 참조할때 get) —- 고치자 1. spring project 2.build.gradle 3.properties Rebase 기반 브랜치 전략

팀플 규칙(파일명)

코드컨벤션(규칙)

폴더명(서버)

1. 주요 기능별 패키지 및 폴더 구성

1) 영화 관리 (`movie`)

역할: 영화 목록, 영화 상세 정보, 예고편, 상영 시간표 등을 관리합니다.

폴더 구조:

shop.mtcoding.cinema.movie

MovieController.java
MovieService.java
MovieRepository.java
MovieRequest.java
MovieResponse.java
Movie.java

2) 예매 관리 (`reservation`)

역할: 영화 예매, 좌석 선택, 예매 내역 조회, 예매 취소 등을 관리합니다.

폴더 구조:

shop.mtcoding.cinema.reservation

ReservationController.java
ReservationService.java
ReservationRepository.java
ReservationRequest.java
ReservationResponse.java
Reservation.java

3) 사용자 관리 (`user`)

역할: 회원가입, 로그인, 로그아웃, 사용자 정보 관리 등을 담당합니다.

폴더 구조:

shop.mtcoding.cinema.user

UserController.java
UserService.java
UserRepository.java
UserRequest.java
UserResponse.java
User.java

4) 마이페이지 관리 (`mypage`)

역할: 사용자의 개인 정보, 예매 내역, 리뷰 관리 등을 담당합니다.

폴더 구조:

shop.mtcoding.cinema.mypage

MypageController.java
MypageService.java
MypageRepository.java
MypageRequest.java
MypageResponse.java
Mypage.java

5) 결제 관리 (`payment`)

역할: 결제, 결제 수단 관리, 결제 내역 조회 등을 담당합니다.

폴더 구조:

shop.mtcoding.cinema.payment

PaymentController.java
PaymentService.java
PaymentRepository.java
PaymentRequest.java
PaymentResponse.java
Payment.java


shop/
└── mtcoding/
    └── cinema/
        ├── movie/
        │   ├── MovieController.java
        │   ├── MovieService.java
        │   ├── MovieRepository.java
        │   ├── MovieRequest.java
        │   ├── MovieResponse.java
        │   └── Movie.java
        ├── reservation/
        │   ├── ReservationController.java
        │   ├── ReservationService.java
        │   ├── ReservationRepository.java
        │   ├── ReservationRequest.java
        │   ├── ReservationResponse.java
        │   └── Reservation.java
        ├── user/
        │   ├── UserController.java
        │   ├── UserService.java
        │   ├── UserRepository.java
        │   ├── UserRequest.java
        │   ├── UserResponse.java
        │   └── User.java
        ├── mypage/
        │   ├── MypageController.java
        │   ├── MypageService.java
        │   ├── MypageRepository.java
        │   ├── MypageRequest.java
        │   ├── MypageResponse.java
        │   └── Mypage.java
        └── payment/
            ├── PaymentController.java
            ├── PaymentService.java
            ├── PaymentRepository.java
            ├── PaymentRequest.java
            ├── PaymentResponse.java
            └── Payment.java

폴더명(mustache)

1) 조회 페이지 폴더 (조회 기능을 위한 템플릿 파일)

목적: 이미 존재하는 데이터를 사용자에게 보여주는 템플릿을 저장하는 폴더입니다.

폴더명: views 또는 pages

views/movies/: 영화 목록 및 상세 정보를 보여주는 템플릿 파일

movie-list.mustache: 영화 목록 조회 페이지
movie-detail.mustache: 영화 상세 조회 페이지

views/reservations/: 예매 내역 조회 템플릿 파일

reservation-list.mustache: 예매 내역 목록 조회 페이지
reservation-detail.mustache: 예매 상세 정보 페이지

views/users/: 사용자 정보 및 프로필 조회 템플릿 파일

profile.mustache: 사용자 프로필 조회 페이지

views/mypage/: 마이페이지 조회 템플릿 파일

mypage-overview.mustache: 마이페이지 메인 화면 (개요)

views/payments/: 결제 내역 조회 템플릿 파일

payment-detail.mustache: 결제 상세 정보 페이지

2) 폼 페이지 폴더 (사용자 입력 폼을 위한 템플릿 파일)

목적: 사용자가 데이터를 입력하거나 수정할 수 있는 폼(양식)을 제공하는 템플릿을 저장하는 폴더입니다.

폴더명: forms

forms/movies/: 영화 관련 폼 템플릿 파일

movie-save-form.mustache: 영화 추가 폼 페이지
movie-update-form.mustache: 영화 수정 폼 페이지

forms/reservations/: 예매 관련 폼 템플릿 파일

reservation-form.mustache: 영화 예매 폼 페이지

forms/users/: 사용자 로그인 및 회원가입 폼 템플릿 파일

login-form.mustache: 로그인 폼 페이지
join-form.mustache: 회원가입 폼 페이지

forms/mypage/: 마이페이지 관련 폼 템플릿 파일

profile-edit-form.mustache: 사용자 프로필 수정 폼 페이지

forms/payments/: 결제 관련 폼 템플릿 파일

payment-form.mustache: 결제 정보 입력 폼 페이지

2. 템플릿 파일 이름 컨벤션

조회 페이지 템플릿 (Views)

영화 조회:

movie-list.mustache: 영화 목록 조회 페이지
movie-detail.mustache: 영화 상세 조회 페이지

예매 조회:

reservation-list.mustache: 예매 내역 목록 조회 페이지
reservation-detail.mustache: 예매 상세 정보 페이지

사용자 정보 조회:

profile.mustache: 사용자 프로필 조회 페이지

마이페이지:

mypage-overview.mustache: 마이페이지 메인 화면 (개요)

결제 조회:

payment-detail.mustache: 결제 상세 정보 페이지

폼 페이지 템플릿 (Forms)

영화 폼:

movie-save-form.mustache: 영화 추가 폼 페이지
movie-update-form.mustache: 영화 수정 폼 페이지

예매 폼:

reservation-form.mustache: 영화 예매 폼 페이지

사용자 로그인 및 회원가입:

login-form.mustache: 로그인 폼 페이지
join-form.mustache: 회원가입 폼 페이지

마이페이지 폼:

profile-edit-form.mustache: 사용자 프로필 수정 폼 페이지

결제 폼:

payment-form.mustache: 결제 정보 입력 폼 페이지


views/
├── movies/
│   ├── movie-list.mustache
│   ├── movie-detail.mustache
├── reservations/
│   ├── reservation-list.mustache
│   ├── reservation-detail.mustache
├── users/
│   ├── profile.mustache
├── mypage/
│   ├── mypage-overview.mustache
├── payments/
    ├── payment-detail.mustache

forms/
├── movies/
│   ├── movie-save-form.mustache
│   ├── movie-update-form.mustache
├── reservations/
│   ├── reservation-form.mustache
├── users/
│   ├── login-form.mustache
│   ├── join-form.mustache
├── mypage/
│   ├── profile-edit-form.mustache
├── payments/
    ├── payment-form.mustache

파일명

클래스 이름 (ClassNames)

파스칼 케이스(Pascal Case): 각 단어의 첫 글자를 대문자로 작성합니다.
예시: MyClass, EmployeeManager, UserProfile.

메서드 이름 (methodNames)

카멜 케이스(Camel Case): 첫 번째 단어는 소문자로 시작하고, 그다음 단어들은 첫 글자를 대문자로 작성합니다.
예시: calculateSalary, getUserName, setAge.

상수 이름 (CONSTANTS)

모든 글자를 대문자로 작성하고 단어는 언더스코어(_)로 구분합니다.
예시: MAX_VALUE, PI, DEFAULT_TIMEOUT.

식별자 (IdentiFiers)

카멜 케이스로 작성해야 하며, 이 식별자에는 메서드, 변수, 필드 등이 포함됩니다. 클래스 이름이나 상수와 같은 특별한 경우를 제외하고, 대부분의 식별자는 카멜 케이스를 사용합니다.
예시: userName, orderId, totalAmount.

변수 이름 (variableNames)

지역 변수, 인스턴스 변수, 매개변수 이름 등은 모두 카멜 케이스로 작성합니다.
예시: count, fileName, orderTotal.

요약

카멜 케이스 (Camel Case): 메서드 이름, 변수 이름, 필드 이름, 식별자

예: userName, calculateSalary, totalAmount

파스칼 케이스 (Pascal Case): 클래스 이름

예: MyClass, EmployeeManager, UserProfile

대문자와 언더스코어 (UPPERCASE with UNDERSCORES): 상수 이름

예: MAX_VALUE, PI, DEFAULT_TIMEOUT

팀플 규칙(주소명)

코드컨벤션(규칙)

v2로 진행 (post만 사용)

1. 리소스 명칭 (Resource Naming)

규칙: 리소스 이름은 데이터베이스 테이블 이름을 기반으로 하며, 일반적으로 복수형을 사용합니다.

사용자: /users

예시:

게시글: /boards
댓글: /comments

2. 리소스의 식별 (Resource Identification)

규칙: 각 리소스에 대한 고유 식별자는 URL의 Path Variable로 사용합니다.

예시:

특정 사용자를 조회: /users/{userId}
특정 게시글을 조회: /boards/{boardId}
특정 댓글을 조회: /comments/{commentId}

예시2 (값을 수정할때 post)

뒤에 /기능 붙이기

2.1.update 할때 /update


@PostMapping("/api/board/{id}/update")

2.2.delete 할때 /delete


@PostMapping("/api/board/{id}/delete")

2.3.insert 할때 /save


 @PostMapping("/api/board/save")

예시2 (값을 참조할때 get) —- 고치자

규칙에 따른 URL 명명 요약

폼 페이지 (form 접미사):

사용자가 데이터를 입력하거나 수정할 수 있는 폼(양식)을 제공하는 페이지에 사용합니다.

예시:

저장 폼: GET /api/board/save-form
수정 폼: GET /api/board/{id}/update-form

단순 조회 페이지:

사용자가 데이터를 입력하거나 수정하는 것이 아닌, 단순히 정보를 조회하거나 화면을 렌더링하는 경우에는 form 접미사를 붙이지 않습니다.

예시:

게시글 목록 조회: GET /board
게시글 상세 조회: GET /board/{id}

1.form 접두사

1.1 게시판글을 저장가능한 페이지


@GetMapping("/api/board/save-form")

1.2 글을 저장하려고 버튼을 누를때


@PostMapping("/api/board/save")

2. 단순 조회

2.상세보기(리소스 식별: Path Variable로 표현 (`/boards/{boardId}`))


@GetMapping("/board/{id}")

저장 폼 제공: GET /api/board/save-form

새 게시글을 작성하기 위한 폼을 제공하는 화면으로 이동합니다. 이 요청은 데이터베이스에 변경을 가하지 않으며, 단순히 폼을 렌더링합니다.

수정 폼 제공: GET /api/board/{id}/update-form

기존 게시글을 수정하기 위한 폼을 제공하는 화면으로 이동합니다. 이 요청 역시 데이터베이스에 변경을 가하지 않으며, 수정 폼을 렌더링합니다.

조회 페이지 제공: GET /board/{id}

특정 게시글의 상세 정보를 조회하는 페이지로 이동합니다. 이 요청은 단순 조회이며, 데이터베이스 변경이 없습니다.

컨벤션 요약

리소스 명칭: 복수형 사용 (/users, /movies)

리소스 식별: Path Variable로 표현 (/movies/{movieId})

계층적 관계: URL 경로로 표현 (/movies/{movieId}/comments)

필터링 및 검색: Query String 사용 (/movies?title=제목)

정렬 및 페이징: Query String 사용 (/movies?sort=-createdAt&page=2&size=20)

상태 및 액션 표현: 명확한 동사 사용 (/auth/movies/{movieId}/reservations )

소문자 및 하이픈: URL은 소문자로 작성하고 단어는 하이픈으로 구분 (/user-profiles)

비동기통신(fetch, AJAX): /api (api/movies/now-showing ) : 지금상영중인영화

인증 : /auth (/auth/movies/{movieId}/book)

폼 페이지 (form 접미사): /users/save-form

단순 조회 페이지: /movie

팀플 규칙_네이밍(html,css,javascript,jquery)

1. HTML 네이밍 컨벤션

ID와 클래스 네이밍: 소문자로 작성하며, 여러 단어로 구성된 경우에는 언더스코어(__) 두 개로 연결합니다.

예시: header__menu, footer__links, main__content
태그 속성 순서: 태그의 속성은 일관된 순서로 작성합니다. 일반적으로 id → class → data-* → 기타 순서로 작성하는 것이 좋습니다.


html코드 복사
<div id="main__header" class="header__menu" data-type="main"></div>

2. CSS 네이밍 및 작성 컨벤션

클래스 네이밍: HTML과 동일하게 소문자와 언더스코어(__) 두 개를 사용합니다.

예시: .container__header, .button__primary

사용하지 않는 스타일 제거: 사용하지 않는 CSS 규칙은 코드에서 제거합니다.

3. 자바스크립트 및 jQuery 네이밍 컨벤션

변수 및 함수 네이밍: CamelCase를 사용하여 함수와 변수 이름을 작성합니다.

예시: getUserData, updateUserInfo, isActive


javascript코드 복사
const userData = {};
function getUserData() { ... }

jQuery 객체 네이밍: jQuery로 선택한 요소를 담는 변수는 $ 기호로 시작합니다.

예시: const $headerMenu = $('#header__menu');

함수 선언: 함수 선언은 function 키워드를 사용하는 대신 화살표 함수를 사용합니다. (ES6 이상)


javascript코드 복사
const updateUserData = () => {
    // function code
};

이벤트 핸들러 네이밍

이벤트 핸들러 함수의 이름은 on으로 시작합니다.
예시:


javascript코드 복사
const onButtonClick = () => {
    // handle button click
};

프로젝트 세팅

1. spring project

2.build.gradle


plugins {
	id 'java'
	id 'org.springframework.boot' version '3.3.3'
	id 'io.spring.dependency-management' version '1.1.6'
}

group = 'shop.mtcoding'
version = '0.0.1-SNAPSHOT'

java {
	toolchain {
		languageVersion = JavaLanguageVersion.of(21)
	}
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
	// 아임포트 관련
	maven {url 'https://jitpack.io'}
}

dependencies {
	implementation group: 'org.qlrm', name: 'qlrm', version: '4.0.1'
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-mustache'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	runtimeOnly 'com.h2database:h2'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'

	implementation 'org.springframework.boot:spring-boot-starter-aop'
	implementation 'org.springframework.boot:spring-boot-starter-validation'
	runtimeOnly 'com.mysql:mysql-connector-j'

	// 아임포트 관련 //
	// https://mvnrepository.com/artifact/com.github.iamport/iamport-rest-client-java
	implementation group: 'com.github.iamport', name: 'iamport-rest-client-java', version: '0.2.22'
	// https://mvnrepository.com/artifact/com.squareup.retrofit2/adapter-rxjava2
	implementation group: 'com.squareup.retrofit2', name: 'adapter-rxjava2', version: '2.9.0'
	// https://mvnrepository.com/artifact/com.google.code.gson/gson
	implementation group: 'com.google.code.gson', name: 'gson', version: '2.8.5'
	// https://mvnrepository.com/artifact/com.squareup.okhttp3/okhttp
	implementation group: 'com.squareup.okhttp3', name: 'okhttp', version: '4.9.3'
	// https://mvnrepository.com/artifact/com.squareup.retrofit2/converter-gson
	implementation group: 'com.squareup.retrofit2', name: 'converter-gson', version: '2.3.0'
	
}

tasks.named('test') {
	useJUnitPlatform()
}

3.properties

3-1. dev


# 1. UTF-8 ??
server.servlet.encoding.charset=UTF-8
server.servlet.encoding.force=true
# 2. H2 ?????? ??
spring.datasource.driver-class-name=org.h2.Driver
spring.datasource.url=jdbc:h2:mem:test
spring.datasource.username=sa
# 3. ?????? ??
spring.jpa.hibernate.ddl-auto=create
spring.jpa.show-sql=true
spring.jpa.defer-datasource-initialization=true
# 4.Dummy
spring.sql.init.data-locations=classpath:db/data.sql
# 5. Mustache Setting
spring.mustache.servlet.expose-request-attributes=true
spring.mustache.servlet.expose-session-attributes=true
# 6. Query format
spring.jpa.properties.hibernate.format_sql=true
# 7. OpenInView
spring.jpa.open-in-view=false

spring.jpa.properties.hibernate.default_batch_fetch_size=100

3-2. prod


# 1. UTF-8
server.servlet.encoding.charset=UTF-8
server.servlet.encoding.force=true
# 2. H2
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/blogdb
spring.datasource.username=root
spring.datasource.password=root1234
# 3. Hibernate
spring.jpa.hibernate.ddl-auto=none
# 3. Mustache Setting
spring.mustache.servlet.expose-request-attributes=true
spring.mustache.servlet.expose-session-attributes=true
# 4. OpenInView
spring.jpa.open-in-view=false

Git Flow 전략

Rebase 기반 브랜치 전략

1. `git checkout dev` 및 `git pull origin dev`

이 단계는 각 개발자가 현재 dev 브랜치로 이동한 후 최신 상태로 업데이트하는 과정

git checkout dev: 현재 브랜치를 dev 브랜치로 변경합니다.

git pull origin dev: 원격 저장소(origin)에 있는 dev 브랜치의 최신 커밋을 로컬 dev 브랜치로 가져옵니다.

2. `git checkout 각자브랜치` 및 `git rebase dev`

이 단계는 개발자들이 자신이 작업하고 있는 **기능 브랜치(feature branch)**로 돌아간 후, dev 브랜치에 적용된 최신 변경 사항을 자신의 브랜치 위에 재적용(rebase) 하는 과정입니다.

git checkout 각자브랜치: 자신의 작업 브랜치로 이동합니다.

git rebase dev: dev 브랜치의 최신 변경 사항을 현재 브랜치의 커밋 히스토리 위에 재적용하여, 충돌을 해결하며 최신 코드베이스와 동기화합니다.

Rebase는 커밋 히스토리를 보다 깨끗하고 직선형으로 만들어 주는 장점이 있으며, 커밋 히스토리가 마치 하나의 타임라인처럼 보이게 합니다.

3. 충돌 해결 및 `git rebase --continue`

충돌이 발생할 경우 개발자는 rebase 도중 충돌을 해결한 후 git add 후 git rebase —continue (commit 다시 할 필요 없음)

git push: 자신의 브랜치를 원격 저장소로 푸시하여, 최신 상태를 공유합니다.

4. PR(Pull Request) 요청 및 승인

모든 충돌을 해결한 후, 개발자는 PR(Pull Request) 요청을 합니다. 팀장은 이를 GitHub(또는 GitLab, Bitbucket 등)에서 검토하고, 필요한 경우 코드를 리뷰한 후 merge합니다.

5. Non-Fast-Forward (Non-FF) 병합

팀장이 PR을 승인하고 병합할 때 Non-Fast-Forward 병합을 하도록 설정

Fast-Forward 병합은 중간에 새 커밋이 없을 때, 브랜치를 그냥 앞으로 옮기는 방식입니다. 하지만 Non-Fast-Forward 병합은 새로운 병합 커밋을 생성하여, 브랜치가 병합된 히스토리를 명확하게 기록하는 방식입니다.

이 방식은 병합 기록이 남기 때문에 프로젝트 히스토리를 추적하고, 나중에 문제가 발생했을 때 어느 브랜치에서 어떤 기능이 병합되었는지를 명확히 할 수 있다는 장점이 있다.

GitHub

Branch : 이니셜/패키지명/기능명 ex) hsj/welcome/view

commit : 작업 내용에 대한 요약 담기

comment : 문제를 겪은 부분 정리

issue : 버그나 해결사항 올리기

type	subject	body(선택 사항)	footer(선택 사항)
feat: 새로운 기능 추가	제목은 최대 50글자를 넘기지 않는다.	본문은 한 줄당 72자 내로 작성	이슈 트래커 ID를 작성
fix: 버그 수정	ㅤ	양에 구애받지 않고 최대한 상세히 작성	"유형: #이슈 번호" 형식으로 작성
docs: 문서 수정	마침표 및 특수기호는 사용x	어떻게 변경했는지 보다 무엇을 변경했는지 또는 왜 변경했는지를 설명	여러 개의 이슈 번호를 적을 때는 쉼표(,)로 구분
style: 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우	ㅤ	ㅤ	Fixes: 이슈 수정 중 (아직 해결되지 않은 경우)
refactor: 코드 리팩토링	ㅤ	ㅤ	Resolves: 이슈를 해결한 경우
test: 테스트 코드, 리팩토링 테스트 코드 추가	영문으로 표기하는 경우 동사 원형을 가장 앞에 두고 첫 글자는 대문자로 표기(과거 시제 사용 금지)	ㅤ	Ref: 참고할 이슈가 있을 경우
chore: 빌드 업무 수정, 패키지 매니저 수정, production code와 무관한 부분들 (.gitignore, build.gradle 같은)	ㅤ	Related to: 해당 커밋에 관련된 이슈 번호(아직 해결되지 않은 경우)	ㅤ
comment: 주석 추가 및 변경	ㅤ	ㅤ	ㅤ
remove: 파일, 폴더 삭제	ㅤ	ex) Fixes: #45 Related to: #34, #23	ㅤ
rename: 파일, 폴더명 수정	ㅤ	ㅤ	ㅤ

See more posts

1차 팀 프로젝트 : FilmTalk (팀 회의)

코드컨벤션(규칙)

폴더명(서버)

1. 주요 기능별 패키지 및 폴더 구성

1) 영화 관리 (movie)

2) 예매 관리 (reservation)

3) 사용자 관리 (user)

4) 마이페이지 관리 (mypage)

5) 결제 관리 (payment)

폴더명(mustache)

1) 조회 페이지 폴더 (조회 기능을 위한 템플릿 파일)

2) 폼 페이지 폴더 (사용자 입력 폼을 위한 템플릿 파일)

2. 템플릿 파일 이름 컨벤션

조회 페이지 템플릿 (Views)

폼 페이지 템플릿 (Forms)

파일명

요약

코드컨벤션(규칙)

1. 리소스 명칭 (Resource Naming)

2. 리소스의 식별 (Resource Identification)

예시2 (값을 수정할때 post)

2.1.update 할때 /update

2.2.delete 할때 /delete

2.3.insert 할때 /save

예시2 (값을 참조할때 get) —- 고치자

규칙에 따른 URL 명명 요약

1.form 접두사

2. 단순 조회

2.상세보기(리소스 식별: Path Variable로 표현 (/boards/{boardId}))

컨벤션 요약

1. HTML 네이밍 컨벤션

2. CSS 네이밍 및 작성 컨벤션

3. 자바스크립트 및 jQuery 네이밍 컨벤션

1. spring project

2.build.gradle

3.properties

3-1. dev

3-2. prod

Rebase 기반 브랜치 전략

1. git checkout dev 및 git pull origin dev

2. git checkout 각자브랜치 및 git rebase dev

3. 충돌 해결 및 git rebase --continue

4. PR(Pull Request) 요청 및 승인

5. Non-Fast-Forward (Non-FF) 병합

More articles