[Spring] (MAC, IntelliJ, vue.js) Spring boot로 프로젝트 만들고, vue.js 설치와 프로젝트 열기.

 

 

이번에 만들 웹사이트는
vue.js를 사용할 것이다
🐠

 

 

 

 

 

1. 만들고자 하는 것은?

 

회원가입 웹사이트를 만들고자 한다. Vue.js를 사용하여 프론트 공부를 하면서, 간단한 회원가입과 로그인을 수행하는 웹사이트를 만들 것이다. 대부분의 웹사이트에 회원가입과 로그인 기능은 필요하니 다른 프로젝트를 하게 돼도 미리 만들어두면 편리할 것 같다.

간편 로그인, 회원가입 기능을 제공하는 것이 이번 프로젝트의 목표이며, Vue의 사용 방법을 터득하고 어떻게 흘러가는지 파악하고자 한다.

 

 

 

 

 

 

 

---

 

 

 

 

2. Spring initializr 생성하기.

 

□  https://start.spring.io/

 

□ dependencies 설정하기.

 

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-oauth2-client'
	implementation 'org.springframework.boot:spring-boot-starter-security'
	implementation 'org.springframework.boot:spring-boot-starter-validation'
	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'
	testImplementation 'org.springframework.security:spring-security-test'
	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
}

• implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
  : @Entity, @Repository 등 데이터베이스 관리를 편리하게 해준다.
  
  
• implementation 'org.springframework.boot:spring-boot-starter-oauth2-client'
  : 카카오톡, 구글로 간편하게 로그인하는 소셜 로그인 기능이다.

• implementation 'org.springframework.boot:spring-boot-starter-security'
  : 인증과 권한 등 보안 관리 담당한다.
  
  
• implementation 'org.springframework.boot:spring-boot-starter-validation'
  : @Email, @NotNull 등 입력값을 검증을 편리하게 해 준다.
  
  
• implementation 'org.springframework.boot:spring-boot-starter-web'
  : 내장된 톰켓 서버, 컨트롤러 등 web을 개발하기 위해 편리한 기능을 제공한다.
  
  
• compileOnly 'org.projectlombok:lombok'
  annotationProcessor 'org.projectlombok:lombok'
  : 롬복 라이브러리로 @Getter, @Setter 등 코드 양을 줄이는데 도움을 준다.
  
  
• developmentOnly 'org.springframework.boot:spring-boot-devtools'
  : 코드를 수정하면 자동으로 리로드를 해주는 등 편리를 제공한다.
  
  
• runtimeOnly 'com.h2database:h2'
  : 데이터베이스를 h2로 사용할 경우 선택한다.

□ Java 버전 선택하기

✔︎  [Mac 기준] 자바 버전을 잘 모르겠다면?

 

• 터미널에 들어간다.
• 터미널에 java --version이라고 치면 된다.
  ▸ openjdk 17.0.11으로 확인됐다.
• 만약 안 뜬다면 java 설치가 안되어있으니, 설치합시다.

 

 

□ 사용자 설정하기

spring.application.name=JoinWeb

// 추가해주기
spring.security.user.name=sori
spring.security.user.password=1234

본인이 원하는 이름과 패스워드를 작성합니다.

 

 

 

□ 간단하게 화면에 hello, join-web 출력

@RestController
public class Hello {

    @GetMapping("/hello")
    public String helloWorld() {
        return "hello, join-web";
    }
}

□ http://localhost:8080/hello 들어가기

• 처음에 위의 경로로 들어가면 /login으로 url이 변경되면서 아래와 같은 화면이 나온다.

 

 

• dependencies에 security를 넣어서 그런 거니, 위에 있는 사용자 설정하기에서 이름과 패드워드를 넣어놨던 정보대로 입력해 주면 제대로 출력되는 것을 확인할 수 있다.

 

 

• 엔터를 누르면 /hello로 들어가진다.

잘 뜨는걸 확인할 수 있다

 

 

 

 

 

---

 

 

 

 

3. Vue.js 설치하기.

□ Node.js 설치하기
https://nodejs.org/ko

Node.js — Run JavaScript Everywhere

 

 

□ 설치 후 터미널에서 npm -v로 확인하기

 

 

□ npm create vue@latest  ->  y를 누르면 설치를 시작한다.

 

 

□ 설정하기

• Project name : 프로젝트 이름 설정
  여기서 vue-project라고 했는데, 나중에 수정했습니다.
  수정 방법은 mv vue-project join-web으로 mv 원래이름 변경이름의 형식으로 쓰면 됩니다.
  
  
• Select features to include in your project : 프로젝트에 추가하고 싶은 기능
  방향키고 이동하시고, 스페이스바로 선택/해제하세요.
  
  
• Select experimental features to include in your project: 실험적인 기능
  선택하지 않고 넘어갑니다.

 

 

 

 

□ 실행하기

• cd join-web 만든 프로젝트로 이동하기.
  
  
• npm install 의존성 설치하기.
  
  
• npm run dev 개발 서버 실행하기.
• http://localhost:5173/ 로 들어가서 확인하기.

어떻게 하면 되는지 친절히 설명도 해준다

 

끝