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

LEFT 2025. 4. 11. 18:15

🦁멋쟁이사자처럼 백엔드 부트캠프 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 이슈 넘버링 사용
➡️이슈에 들어가서 그 이슈가 어떤 기능을 담당하고 있는지를 자세히 확인할 수 있게하여 문서화에 용이