[OAuth] 1. 로그인 app 만들기 - 기본 세팅

목숨이하나

Jun 11, 2024

Contents

환경세팅

오호스 패턴을 이용해 쇼핑몰 로그인 앱 만들기

환경세팅 프로젝트 생성 application 파일 수정, 작성 파일 세팅.기본세팅 (뷰) 템레이트 작성 - 〰️mustache 👨db 더미 만들기 application.yml 파일 수정

환경세팅

프로젝트 생성

application 파일 수정, 작성

확장자를 yml (야물)파일로 변경합니다.


server:
  servlet:
    encoding:
      charset: utf-8
      force: true
  port: 8080
spring:
  datasource:
    driver-class-name: org.h2.Driver
    url: jdbc:h2:mem:test;MODE=MySQL
    username: sa
    password:
  h2:
    console:
      enabled: true
  jpa:
    hibernate:
      ddl-auto: create # none, update
    show-sql: true
    properties:
      hibernate:
        format_sql: true

코드복붙

파일 세팅.

기본세팅

엔티티 테이블 생성

User.java


package loginapp.user;

import jakarta.persistence.*;
import lombok.Builder;
import lombok.Getter;
import lombok.NoArgsConstructor;

@NoArgsConstructor
@Getter
@Table(name = "user_tb")
@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    private String username;
    private String password;
    private String email;
    private String provider; // facebook, kakao, apple, naver

    @Builder
    public User(Integer id, String username, String password, String email, String provider) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.email = email;
        this.provider = provider;
    }
}

shop.java


package shop.mecoding.loginapp.shop;

import jakarta.persistence.*;
import lombok.Builder;
import lombok.Getter;
import lombok.NoArgsConstructor;

@NoArgsConstructor
@Getter
@Table(name = "shop_tb")
@Entity
public class Shop{
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    @Column(unique = true)
    private String name;
    private String price;
    private String qty;

    @Builder
    public Shop(Integer id, String name, String price, String qty) {
        this.id = id;
        this.name = name;
        this.price = price;
        this.qty = qty;
    }
}

머스테치 다운

(뷰) 템레이트 작성 - 〰️mustache 👨

경로

join-form.mustache


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>회원가입 페이지</h1>
<hr>
<form action="/join" method="post">
    <input type="text" placeholder="유저네임" value="ssar" name="username"> <br>
    <input type="password" placeholder="비밀번호" value="1234" name="password"> <br>
    <input type="email" placeholder="이메일" value="ssar@nate.com" name="email"> <br>
    <button type="submit">회원가입</button>
</form>
</body>
</html>

login-form.mustache


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>로그인 페이지</h1>
<hr>
<form action="/login" method="post">
    <input type="text" placeholder="유저네임" value="ssar" name="username"> <br>
    <input type="password" placeholder="비밀번호" value="1234" name="password"> <br>
    <button type="submit">로그인</button>
</form>
<a href="#">카카오 로그인</a>
</body>
</html>

main.mustache


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>메인(인증된) 페이지 : ssar</h1>
    <hr>
    <div>
        상품이름 : 바나나 <br>
        가격 : 1000 <br>
        재고 : 20 <br>
        <hr>
    </div>
    <div>
        상품이름 : 바나나 <br>
        가격 : 1000 <br>
        재고 : 20 <br>
        <hr>
    </div>
</body>
</html>

db 더미 만들기


INSERT INTO shop_tb(name, price, qty) VALUES ('바나나', 1000, 10);
INSERT INTO shop_tb(name, price, qty) VALUES ('아보카도', 2000, 10);
INSERT INTO shop_tb(name, price, qty) VALUES ('산딸기', 3000, 10);