[멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_82일차_"H2 DB 설정, Next.js, Tailwind, 컨벤션"

🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁
TIL 회고 - [82]일차

🚀82일차에는 H2 DB설정부터 각각 application.yml, application-dev.yml 등의 역할이 무엇인지, Next.js로 개발할 수 있는 프론트엔드와 Cursor를 통한 코드리뷰, 다양한 프로젝트 관련 컨벤션에 대해서 학습할 수 있었다.

학습 목표 : 프로젝트 관련 컨벤션에 익숙해져 팀 프로젝트 진행 시 팀의 컨벤션을 정한 후 진행할 수 있어야한다.

학습 과정 : 회고를 통해 작성

---

H2 Database

• 프로젝트를 진행할때 MySQL을 도입하기 전
  간단한 DB테스트를 진행하기 위해서 H2 Database를 사용해보았다.
• 프로젝트의 build.gradle에 의존성을 추가한다.

// 데이터베이스 관련
runtimeOnly("com.h2database:h2")
implementation("org.springframework.boot:spring-boot-starter-data-jpa")
runtimeOnly("come.mysql:mysql-connetor-j")

 

application.yml

• 8090 포트설정

profiles: 
	active: dev
	include: secret

• active: dev ➡️application-dev.yml 설정을 활성화시킴
  include: secret ➡️ application-secret.yml 설정을 포함시킴
• 정리하자면
  active:dev를 하게되면 application.yml 이 구동될때 application-dev.yml 도 같이 실행시킴
  include: secret을 통해 그 안에는 secret설정파일도 포함시키겠다는 것

 

• db_dev DB명으로 h2데이터베이스를 설정하는데 MySQL문법을 따르도록 MODE를 설정

 

• ddl-auto: update ➡️수정내역이 있을때만 업데이트

 

• 로컬호스트는 localhost로 하겠지만
  prod: 에서 cookieDomain 주소를 지정한 것처럼 구입한 도메인을 사용할것
  (ex. naver.com ← 처럼 localhost:5555 같은 포트가 아닌 주소형식의 도메인으로 사용)
  
  
• 프론트엔드 접근 도메인과, 백엔드 접근 도메인이 다른것도 확인 가능(www ↔ api)
  
  
• localhost부분에서 http://localhost:5173 처럼 하드코딩하는 것보다
  http://${custom.dev.cookieDomain}:5173 처럼 지정해놓으면
  cookieDomain 부분만 바꿔주어도 되기때문에 코드관리부분에서 효율적

 

application-test.yml

• application.yml 의 datasource: url과 url을 비교해보면 mem이 들어간단느 차이점
  ➡️jdbc:h2:memory 모드를 의미
  
  
• 물리적으로 h2 데이터베이스가 로컬쪽에 생성되지 않고 메모리에 저장되므로
  이 모드로 설정했을때 localhost 포트를 끄면 사라지는 휘발성의 DB를 가지므로
  
  DB의 영속성이 필요없다면 memory모드를 설정해두어 테스트환경에서 편히 수행할 수 있도록 하는 것

• 테스트 실행 시 이처럼 db_dev.mv.db가 생겨나야함 ➡️ 정상적으로 실행된 것

---

프론트엔드 개발

• https://nextjs.org/ ➡️Next.js 사용
  백엔드부분에서의 스프링과 비슷한 포지션
• 프론트엔드 기초 입문 시 괜찮은 프레임워크 (Next.js)

• 리액트를 패키징화시킨 것이 Next의 개념이고 리액트의 문법이랑 거의 다 호환 가능

 

Next.js 설치

• npx create-next-app@latest
• 진행했던 프로젝트의 root 디렉토리에서 backend 디렉토리와 같은 라인으로 만들어줌 (frontend)

• import alias만 no를 선택
  
  

• 다운로드된 next js의 구조를 확인 가능

---

Tailwind

• Tailwind CSS는 웹 개발자가 사용자 인터페이스(UI)를 빠르고 쉽게 디자인할 수 있도록 도와주는
  유틸리티 우선 CSS 프레임워크
  
  
• 기존의 CSS 프레임워크와 달리, Tailwind CSS는 미리 정의된 스타일 클래스를 제공하여
  HTML 코드 내에서 직접 스타일을 적용할 수 있도록 함
  
  
• tailwind.config.js 파일을 통해 기본 스타일을 사용자 정의 가능 (색상, 간격, 글꼴 등 다양한 스타일 옵션)
• 장점 :
  1) 빠른 개발 속도: 미리 정의된 유틸리티 클래스를 사용하여 스타일을 빠르게 적용
  2) 유지 보수 용이성: HTML 코드 내에서 스타일을 직접 관리하므로 CSS 파일과 HTML 파일 간의 전환 없이 작업
• 단점 :
  - HTML 코드의 복잡성 증가: 유틸리티 클래스를 많이 사용할수록 HTML 코드가 길어지고 복잡해질 수 있음
  
  
• 사용법 : 
  1) 설치: npm 또는 yarn을 사용하여 Tailwind CSS를 프로젝트에 설치
  2) 설정: tailwind.config.js 파일을 생성하고 프로젝트 요구 사항에 맞게 스타일을 설정
  3) 사용: HTML 코드 내에서 Tailwind CSS 유틸리티 클래스를 사용하여 스타일을 적용
  4) 빌드: Tailwind CLI를 사용하여 최종 CSS 파일을 빌드

---

application-secret.yml 처리

• secret 설정파일은 gitignore 처리
  ➡️gitignore처리를 하게되면 status 색이 조금 다름
• default로 secret 내용을 명시해두면 secret 파일중에서 “필요 요소”들은 올리고 싶을때 분리해서 사용 가능

custom:
    jwt: NEED_TO_INPUT

• 이 파일안에는 이처럼 NEED_TO_INPUT 으로 값을 넣어야한다는 규격이나 틀을 명시해줄 수 있다.
• 실제 값은 들어가지 않지만 어떤 값이 필요한지를 팀원들이 알 수 있게된다.

---

팀 프로젝트 브랜치 생성법

• feature/#1 처럼 브랜치를 만들면 이처럼 디렉토리 안에 #1이 들어가는 구조를 확인 가능
• feature/#1 를 만들고 PR을 날려서 “merge”가 되도록 요청한 다음, "merge"가 되면
  feature/#1 브랜치를 삭제하는 것
  
  
• 장점 : 해당 브랜치가 무엇을 뜻하는지를 유추할 필요가 없음
• feature/notice 보단 feature/#2 이슈 넘버링 사용
  ➡️이슈에 들어가서 그 이슈가 어떤 기능을 담당하고 있는지를 자세히 확인할 수 있게하여 문서화에 용이

---

커밋메시지 컨벤션

• ex. “feat: 공지사항 상세페이지 API 작업”
• ex. “feat: 공지사항 상세페이지 API 작업 #1”
  ➡️#1 이슈의 하이퍼링크가 걸림

팀에서 정한 컨벤션

---

이슈 Issue

1번 방법

• issue_template.md 로 이슈의 기본 형식을 지정해줄 수 있음

• 이슈를 만들고자 할때 기본 템플릿이 표시되는 것을 확인 가능
• ⚠️변경사항 : ISSUE_TEMPLATE 디렉토리 하위에 넣어야 적용

---

2번 방법

• Settings → general → issue 만들기 → custom template issue

• new issue 클릭 후 만들어놓은 issue_template_v2 를 선택하면 이처럼 바로 템플릿이 표시되는 것을 확인 가능

• github에서 직접 이슈를 만들어주었을때는 git pull로 로컬에 변경사항을 업데이트해주어야한다.

---

🚀회고 결과 :

DB설정, 컨벤션 정하기 등 팀 프로젝트를 시작하기 전에 수행해야할 일이 많은 것을 깨달았다.

이슈와 PR 컨벤션 정하기 또한 팀원들과의 많은 소통을 통해 어떠한 요소들이 들어가야할지를 토의해볼 수 있었다.

향후 계획 : 

- 도메인 생성 및 사용