[스프링+리액트 웹 만들기] #1. 환경 세팅하기

이전 글 : [스프링+리액트 웹 만들기] #0. 프로젝트 개요

---

항상 제일 어렵고 예외 상황도 많고 알 수 없는 에러도 많은 환경 세팅부터! 저장소에 front와 back으로 폴더를 나누어서 front 폴더는 VS Code로, back 폴더는 intelliJ로 접근했다.

(처음 프로젝트를 생성하고 시작할 때는 이클립스 EE를 이용했고, 나중에 이를 intelliJ로 열어서 사용했기 때문에 back 쪽은 조금 혼란이 있을 수 있음...)

 

 

 

BACKEND

먼저 백엔드에 대한 환경 설정을 해보겠다. IDE로는 IntelliJ를 사용하는데, 아직 학생이신 분들은 학생 인증을 받아 무료 설치할 수 있으므로 찾아보시길 바란다.

이전 글에서 스프링 프레임워크를 시도하다가 설정 에러에 스트레스를 받아서 부트로 변경했다고 적었는데, 그만큼 스프링 부트는 설정 등에서 프레임워크보다 훨씬 편리하게 사용할 수 있다. 부트는 반복되는 설정 파일 등을 여러 번 손대지 않아도 되고 빠르게 접근이 가능하다는 장점이 있다. 하지만, 현업에서는 의외로 프레임워크를 많이 사용하는 것 같으니 기왕이면 둘 다 알고 있는 것이 좋을 것 같다는 생각.

 

1-(1). Spring Initializr로 설정 등을 포함한 틀을 잡는다.

start.spring.io/

 

 

위처럼 Maven, Java를 선택하고 버전을 선택한 후 메타데이터도 채워주었다. Group, Artifact 의 아이디는 원하는대로 설정하면 된다. 아래의 Generate를 클릭하면 프로젝트 파일을 다운받을 수 있다. 압축해제한 뒤, IntelliJ에서 import 해준다.

 

아까 생성했던 artifact 이름에 해당하는 폴더를 선택해서 import를 한다.

 

 

 

1-(2). 또는, Spring Tool Suite 4를 이용한다.

 

New Spring Starter Project를 클릭해서 설정을 채워넣는다. 이클립스 EE에서는 Help > Eclipse Marketplace 에 들어가 STS를 검색해 설치할 수 있다. 캡처를 미리 해두지 못해서 참고했던 블로그 링크를 남긴다.

 

참고 블로그 : corini.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8-%EC%97%B0%EB%8F%99%ED%95%98%EC%97%AC-CRUD-%EA%B5%AC%ED%98%84-8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8%EC%97%90%EC%84%9C-%ED%99%98%EA%B2%BD%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-8n

 

설치한 Dependencies : 

- Spring Boot DevTools

- Mybatis Framework

- MySQL Driver

- Spring Web

 

Spring Boot DevTools는 작업을 하면서 저장할 때마다 서버를 다시 빌드해서 부팅해주는 역할을 하고, DB로 MySQL을 사용할 것이므로 이에 접근할 수 있는 MySQL Driver를 설치한다. 또한, DB와 스프링을 연결해주는 역할을 Mybatis가 하게 되기 때문에 Mybatis Framework도 설치하고, Web 프로젝트이므로 Spring Web을 받는다.

 

 

(1) 또는 (2)의 방법으로 프로젝트를 생성하고 폴더를 열어 기본 파일들을 확인할 수 있을 것이다. (1)의 경우에는 dependency가 아직 추가되어 있지 않기 때문에 (2)에서 나열한 dependency들을 추가해야 할 것이다. pom.xml에서 확인할 수 있다.

 

<pom.xml>

pom.xml은 프로젝트의 메타 데이터와 구조 등을 설명하고 있는 파일로, 프로젝트당 하나씩 존재한다. 사용자가 추가하는 dependency도 여기에 들어가게 되며, 버전 정보 등을 담고 있기도 하다. 뭔가 설정이 이상하다 싶으면 여기부터 확인해보는 편. pom.xml을 변경하고 나서는 혹시 모르니 maven update 등으로 변경 사항을 한번 업데이트 해주는 편이 안전하다.

 

 

 

 

 

2. 패키지를 생성한다.

 

src > main > java > com.formapp(각자 설정한 프로젝트명) 아래에 config, controller, mapper, model, service, vo 패키지를 생성했다.

(config : 설정 파일을 넣으려고 생성했는데 사실상 없어도 됨. CORS 필터를 위해 생성했던 폴더)

 

src > main > resources 아래에는 mapper 패키지를 생성했다. 여기에는 위에 java 폴더에서 생성한 mapper 패키지에 들어가는 자바 파일과 달리 xml 형태의 mapper 파일들이 들어갈 것이다.

 

이제 DB 설정을 위해 application.properties 를 작성하자.

#MySQL
spring.datasource.url=jdbc:mysql://localhost:3306/{dbName}?useUnicode=true&characterEncoding=utf8&verifyServerCertificate=false&useSSL=false&serverTimezone=UTC
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username={username}
spring.datasource.password={password}

#MyBatis
mybatis.mapper-locations=classpath*:mapper/*.xml

 

MySQL 부분은 어떤 DB를 어떻게 사용할 것인지에 대한 설정이다. 맨 위 url에는 MySQL의 어떤 스키마를 사용하는지, 인코딩 정보와 타임존 등의 정보가 들어간다. 중간에 localhost:3306/{dbName} 부분이 중요한데, 내가 만든 DB의 이름이 {dbName} 대신 들어가야 한다.

test라는 이름으로 생성했다면 localhost:3306/test 이렇게 들어가야 한다.

두 번째 줄의 driver-class-name은 프로젝트 생성 시 의존성 주입했던 mysql driver를 사용하겠다는 의미이고, 세 번째와 네 번째 줄의 username과 password를 정확히 작성해야 한다. 만든 DB가 포함된 Connection의 username 과 password를 따옴표 없이 작성한다.

 

MySQL Workbench 기준으로 DB의 connection 정보를 확인했을 때, 중간에 있는 Username인 admin과 password가 필요한 것.

 

그 다음으로 Mybatis 부분은 쿼리를 직접 작성하는 mapper 파일이 어디에 있는지를 알려주기 위한 코드이다. resources 폴더 아래에 만들었던 mapper 패키지 안에 들어갈 xml 파일들을 대상으로 한다.

 

 

 

 

FRONTEND

이제 front 폴더에 들어가게 될 리액트 프로젝트 설정을 해보겠다. Node.js 등 JavaScript로 프로젝트를 해보신 분들을 알겠지만 자잘하게 받아놔야 할 것들이 많다. IDE는 VS Code를 사용했다.

 

 

1. npm 설치

 

생성해둔 폴더를 VS Code에서 켜서 IDE 내부 터미널을 이용했다. 우선 npm 을 설치한다. yarn을 사용해도 되는데, 둘 중 뭘 쓰든 상관 없음.

npm 기준으로 설명하자면, Node.js를 바탕으로 하는 모듈을 모아둔 패키지같은 개념이다. (NPM = Node Package Manager)

 

npm을 설치하기 위해서는 node.js를 설치해야 한다.

nodejs.org/en/

Node.js

위 링크에서 OS에 맞는지 확인하고 좌측의 LTS 버전을 다운받는다. Setup 창이 뜨면 손이 가는 대로 Next.. Next... 하다가 Install 한다.

 

 

 

설치가 완료되고 나면 잘 설치되었는지를 터미널에서 확인한다.

node -v
npm -v

한 줄씩 입력해서 버전이 잘 뜨면 설치가 정상적으로 된 것이다. 내가 받은 버전은 아래와 같다. 

 

 

처음에 back과 front로 폴더를 나누어서 시작했었다. (back은 위에서 설정)

이제 front 폴더 안으로 들어가서 리액트 앱을 생성하도록 하겠다.

 

 

 

 

 

 

2. create-react-app

 

npm 버전이 5.2.0 이상이라면 더 간단하게 npx라는 걸 사용할 수 있다.

npx create-react-app form-app

form-app은 front 폴더 밑에 생성할 프로젝트의 이름이다. 아무 이름이나 원하는대로 작성하면 된다.

 

 

 

만약 npx를 사용할 수 없는 버전이라면 npm을 이용하면 된다. yarn도 동일

npm install -g create-react-app
create-react-app form-app

 

아무튼, 이렇게 생성한 프로젝트에는 index.js, App.js, package.json 등등이 생성되어 있다.

 

 

 

 

cd form-app
npm start

 

만들었던 프로젝트로 들어간 후, npm start를 입력하고 조금 기다리면 브라우저로 localhost:3000의 리액트 앱 기본 화면이 뜨게 된다!

 

 

 

 

 

이제 기본적인 세팅은 끝났다. 기능을 하나씩 구현할 준비가 됐지만, 다음 편에서는 DB부터 설계하도록 하겠다.