근태 시스템 만들기 - 프로젝트 생성하기
이번 포스팅에서는 백엔드와 프론트엔드 프로젝트를 생성할 것이다.
순서는 Backend -> Frontend 이다.
이렇게 생성하는 이유는 하나의 디렉토리 안에 Backend와 Frontend 모두 만들려고 할때 가장 수월하다고 생각되기 때문이다.
✅ Backend 프로젝트 생성하기
IntelliJ를 열고 New Project를 클릭한다.
프로젝트 이름은 HR_Project로 설정했다.
Spring Boot 3.x 버전을 사용할 예정이기 때문에 Java 17 이상이 필요하다.
나는 이미 JDK 21이 설치되어 있어서 그대로 사용했다.
Spring Initializr 설정
필요한 라이브러리를 선택한다.
필수 dependencies는 다음 4가지다:
- Lombok
- Spring Web
- Spring Data JPA
- PostgreSQL Driver
현재로는 이 정도만 있어도 기본적인 기능 구현에는 충분하다.
프로젝트가 생성되었다면, 오른쪽 상단의 서버실행 버튼(▶)을 눌러 서버를 실행해보자.
하지만 아래와 같은 에러를 만나게 된다.
이 에러는 우리가 DB 관련 의존성은 추가했지만 아직 설정이 하나도 안 되어 있기 때문이다.
따라서 application.properties 파일 또는 application.yml 파일에 DB 설정을 추가해줘야 한다.
application.yml 설정하기
기본적으로 application.properties 파일이 생성되어 있지만,
나는 가독성 때문에 yml 형식을 선호한다.
그래서 application.properties 파일을 삭제하고,
src > main > resources 경로에 application.yml 파일을 새로 만든다.
아래 내용을 추가하자.
(DB명과 계정/비밀번호는 이전 포스팅에서 생성한 내용을 참고 – 근태 시스템 만들기 - DB 설치)
spring:
datasource:
url: jdbc:postgresql://localhost:5432/hr_db
username: user01
password: qwer1234
driver-class-name: org.postgresql.Driver
이번에는 8080 포트로 서버가 정상적으로 실행되었다.
브라우저를 열고 접속해 보자.
에러 페이지처럼 보이지만 스프링 서버는 제대로 작동하고 있는 상태다.
IntelliJ에서 DB 도구 사용하기
IntelliJ는 자체적으로 DB 툴을 제공한다.
우측 사이드바에서 Database를 클릭하자.
여기서 거의 대부분의 DB 작업을 처리할 수 있다.
(단, 복잡한 프로시저 작업은 제외)
[+] 버튼 > Data Source > PostgreSQL 순으로 선택한 뒤,
접속 정보를 입력하고 Test Connection을 눌러보자.
모두 올바르게 입력했다면 초록색 메시지인 Succeeded가 나타난다.
정상 연결이 확인되면 [OK] 버튼을 눌러 저장한다.
이제 DB가 목록에 나타난다.
하지만 아직 DB에는 아무것도 없다.
왜냐하면 우리가 아직 테이블을 하나도 만들지 않았기 때문이다.
✅ Frontend 프로젝트 생성하기
이번엔 Vue 3를 이용해 프론트엔드 프로젝트를 만들어 보자.
Vue를 사용하려면 먼저 node.js가 설치되어 있어야 한다.
설치 방법은 간단하게 homebrew를 이용하면 된다.
나는 이미 설치가 되어 있어서 이번엔 업그레이드만 진행했다.
프로젝트 생성
프로젝트 생성은 IntelliJ의 Terminal을 써도 되고, Mac 기본 터미널도 가능하다.
나는 iTerm2를 선호해서 이걸 사용했다.
Spring Boot 프로젝트 디렉토리로 이동해서 다음 명령어를 실행한다:
npm create vue@latest
프로젝트 이름은 기본값이 vue-project이지만,
나는 frontend로 바꾸었다.
이 이름은 디렉토리 이름으로도 표시되기 때문에 한눈에 알아볼 수 있는 이름이 좋다.
추가 옵션으로는 Router와 Pinia만 선택했다.
방향키와 스페이스바를 사용해서 선택할 수 있고, 엔터로 다음 단계로 넘어간다.
설치 후 안내 메시지
설치가 완료되면 친절하게 다음 단계 안내가 나온다.
frontend 디렉토리로 이동한 뒤 다음 명령어를 실행하자
npm install
npm run dev
IntelliJ 터미널에서는 command 키를 누른 상태로 주소를 클릭하면 브라우저가 바로 열린다.
서버 종료는 Ctrl + C로 할 수 있다.
또는 브라우저에 http://localhost:5173 을 직접 입력해도 된다.
✅ 마무리
이로써 백엔드(Spring Boot)와 프론트엔드(Vue 3) 프로젝트의 기본적인 설정이 모두 완료되었다.
다음 포스팅에서는 근태/휴가를 관리하는 테이블을 설계하고, 더미 데이터 생성까지해보도록 하겠다.