회원 가입 구현 - Githubissues

MorganJH-Kim commented 3 years ago

[x] DB 테이블 생성
[x] view 컨트롤러 생성
[x] 회원가입 기능 구현
[x] 비밀번호 암호화
[x] 회원가입 페이지 구현

MorganJH-Kim commented 3 years ago

회원가입 페이지 구현 중 get mapping 이 적용되지 않는 이슈 1.application.yml 이 문제인가? 2.DB config 경로가 잘못되었는가? 3.controller , requestmapping 이 적용되지 않았는가? 4.src/main/webapp/WEB-INF/jsp/user 경로가 잘못되었는가 5.gradle 세팅이 안되었는가

MorganJH-Kim commented 3 years ago

1.application.yml 이 문제인가? application properties 에서 aplication.yml로 변경했었었음

spring:
  mvc:
    view:
      prefix: /WEB-INF/jsp/
      suffix: .jsp
    static-path-pattern: /static/**
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/ramenrecipebook?serverTimezone=UTC&characterEncoding=UTF-8
    username: root
    password: root

logging:
  level:
    root: info

하지만 문제가 없었음

MorganJH-Kim commented 3 years ago

2.DB config가 잘못되었나?

package com.morganj.RamenRecipeBook.config;

import javax.sql.DataSource;

import org.apache.ibatis.session.SqlSessionFactory;
import org.mybatis.spring.SqlSessionFactoryBean;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.io.Resource;
import org.springframework.core.io.support.PathMatchingResourcePatternResolver;

@Configuration
@MapperScan(basePackages="com.morganj.RamenRecipeBook.*") 
public class DatabaseConfig {

     @Bean
        public SqlSessionFactory sqlSessionFactory(DataSource dataSource) throws Exception {
            SqlSessionFactoryBean sessionFactory = new SqlSessionFactoryBean();
            sessionFactory.setDataSource(dataSource);

            Resource[] res = new PathMatchingResourcePatternResolver().getResources("classpath:mappers/*Mapper.xml");
            sessionFactory.setMapperLocations(res);

            return sessionFactory.getObject();
        }

}

중간에 com.ramenrecipebook.에서 com.morganj.RamenRecipeBook.으로 바꾼거 외에는 문제가 없었음

MorganJH-Kim commented 3 years ago

3.controller , requestmapping 이 적용되지 않았는가?

package com.morganj.RamenRecipeBook.user;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/user")
public class UserController {
    @GetMapping("/signin_view")
    public String signInView() {
        return "user/signIn";
    }

    @GetMapping("/signup_view")
    public String signUpView() {
        return "user/signUp";
    }
}

둘다 어노테이션 적용이 되어있었음

MorganJH-Kim commented 3 years ago

4.src/main/webapp/WEB-INF/jsp/user 경로가 잘못되었는가

경로는 여러번 확인했음에도 문제가 없었음.

5.gradle 세팅이 안되었는가

plugins {
    id 'org.springframework.boot' version '2.5.4'
    id 'io.spring.dependency-management' version '1.0.11.RELEASE'
    id 'java'
}

group = 'com.morganj'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'

configurations {
    compileOnly {
        extendsFrom annotationProcessor
    }
}

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:2.2.0'
    developmentOnly 'org.springframework.boot:spring-boot-devtools'
    runtimeOnly 'mysql:mysql-connector-java'
    annotationProcessor 'org.springframework.boot:spring-boot-configuration-processor'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'

    // jsp사용
    implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
    implementation 'javax.servlet:jstl:1.2'
}

test {
    useJUnitPlatform()
}

초기에

    // jsp사용
    implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
    implementation 'javax.servlet:jstl:1.2'

가 없어서 추가해주었으나 작동이 되지 않아 한참을 다른 이슈를 찾아서 몇시간 해맷는데 맨 마지막에서야 Gradle refresh 를 해줘야하는것을 깨닳고 해주니 페이지가 정상적으로 출력이 되었음

MorganJH-Kim commented 3 years ago

boot Strap의 valid tooltip을 적용해보려 하였으나 적용되지 않아 추후 alert에서 form tooltip으로 적용할 수 있도록 할것 .

진행 했던 사항 기입

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- bootstrap CDN link -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- css style 적용 -->
  <link rel="stylesheet" href="/static/css/style.css">

<title>라면 레시피 북 - 회원가입</title>

</head>
<body>
    <div id="wrap">
        <c:import url="/WEB-INF/jsp/include/header.jsp"/>
        <section style="padding-top: 100px; padding-bottom: 100px" class="content  d-flex justify-content-center">
            <div class="border rounded signUp-box d-flex justify-content-center align-items-center">
                <div class="w-100 mr-3 ml-3">
                    <form id="signUpForm" class="needs-validation" novalidate>
                        <h1 class="text-center mb-4">회원가입</h1>
                        <div class="mt-3 form-group">
                            <label for="loginIdInput">아이디*</label>
                            <div class="d-flex">
                                <input  type="text" id="loginIdInput" class="form-control" placeholder="아이디" required>
                                <div class="valid-tooltip">
                                    아이디 입력완료
                                </div>
                                <div class="invalid-tooltip">
                                    아이디를 입력해 주세요
                                </div>
                                <button type="button" class="btn btn-info btn-sm" id="isDuplicateBtn">중복확인</button>
                            </div>
                        </div>

                        <div class="form-group">
                            <input type="password" class="form-control mt-3" id="passwordInput" placeholder="패스워드" required>
                                    <div class="valid-tooltip">
                                        비밀번호 입력완료
                                    </div>
                                    <div class="invalid-tooltip">
                                        비밀번호를 입력해 주세요
                                    </div>
                        </div>

                        <div class="form-group">
                            <input type="password" class="form-control mt-3" id="passwordConfirmInput" placeholder="패스워드 확인" required minlength="7" maxlength="12">
                                    <div class="invalid-tooltip">
                                        비밀번호를 확인해 주세요
                                    </div>
                            <small class="text-danger d-none " id="errorPassword">비밀번호가 일치하지 않습니다.</small>
                        </div>

                        <div class="form-group">
                            <input type="text" class="form-control mt-3" id="nameInput" placeholder="이름" required>
                                <div class="invalid-tooltip">
                                    이름을 입력해 주세요
                                </div>
                        </div>

                        <div class="form-group">
                            <input type="text" class="form-control mt-3" id="phoneInput" placeholder="전화번호" required minlength="7" maxlength="12">
                                <div class="invalid-tooltip">
                                    전화번호를 입력해 주세요
                                </div>
                        </div>

                        <div class="form-group">
                            <input type="text" class="form-control mt-3" id="emailInput" placeholder="이메일" required>

                            <div class="invalid-tooltip">
                                 이메일을 입력해 주세요
                            </div>
                        </div>                      
                        <button id="signUpBtn" type="submit" class="btn btn-primary btn-block mt-3">회원가입</button>
                    </form>
                </div>
            </div>
        </section>
        <c:import url="/WEB-INF/jsp/include/footer.jsp"/>
    </div>

    <script type="text/javascript">
    (function() {
          'use strict';
          window.addEventListener('load', function() {

            var forms = document.getElementsByClassName('needs-validation');

            var validation = Array.prototype.filter.call(forms, function(form) {
              form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                  event.preventDefault();
                  event.stopPropagation();
                }
                form.classList.add('was-validated');
              }, false);
            });
          }, false);
        })();
    </script>
</body>
</html>

MorganJH-Kim / RamenRecipeBook

회원 가입 구현 #2