mbti 테스트 만들기, Spring

calis_ws·2023년 5월 24일
CSSSpringTILdbhtmljs
0

세렝게티 동물테스트 만들기

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body class="container">
    <article class="start">
        <h1 class="mt-5 text-center">나랑 꼭 닮은 세렝게티 동물은?</h1>
        <button type="button" class="btn btn-primary mt-5" onclick="start();">테스트 시작하기</button>
    </article>
    <article class="question">
        <div class="progress mt-5">
            <div class="progress-bar" role="progressbar" style="width: calc(100/12*1%)"></div>
        </div>
        <h2 id="title" class="text-center mt-5">문제</h2>
        <input id="type" type="hidden" value="EI">
        <button id="A" type="button" class="btn btn-primary mt-5">Primary</button>
        <button id="B" type="button" class="btn btn-primary mt-5">Primary</button>
    </article>
    <article class="result">
        <img id="img" class="rounded mt-5" src="lion.png" alt="animal">
        <h2 id="animal" class="text-center mt-5">동물이름</h2>
        <h3 id="explain" class="text-center mt-5">설명</h3>
    </article>
    <a class="mt-5 banner"
        href="https://www.codelion.net/catalog/Q291cnNlTm9kZTpqbW9r?utm_source=animal_test&utm_medium=web_lecture&utm_campaign=삼두">
        <img class="banner-img" src="banner.png" alt="banner">
    </a>
    <input type="hidden" id="EI" value="0">
    <input type="hidden" id="SN" value="0">
    <input type="hidden" id="TF" value="0">
    <input type="hidden" id="JP" value="0">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
        crossorigin="anonymous"></script>
    <script>
        var num = 1;
        var q = {
            1: { "title": "문제 1번", "type": "EI", "A": "E", "B": "I" },
            2: { "title": "문제 2번", "type": "EI", "A": "E", "B": "I" },
            3: { "title": "문제 3번", "type": "EI", "A": "E", "B": "I" },
            4: { "title": "문제 4번", "type": "SN", "A": "S", "B": "N" },
            5: { "title": "문제 5번", "type": "SN", "A": "S", "B": "N" },
            6: { "title": "문제 6번", "type": "SN", "A": "S", "B": "N" },
            7: { "title": "문제 7번", "type": "TF", "A": "T", "B": "F" },
            8: { "title": "문제 8번", "type": "TF", "A": "T", "B": "F" },
            9: { "title": "문제 9번", "type": "TF", "A": "T", "B": "F" },
            10: { "title": "문제 10번", "type": "JP", "A": "J", "B": "P" },
            11: { "title": "문제 11번", "type": "JP", "A": "J", "B": "P" },
            12: { "title": "문제 12번", "type": "JP", "A": "J", "B": "P" },
        }
        var result = {
            "ISTJ": { "animal": "하마", "explain": "하마 설명", "img": "lion.png" },
            "ENFP": { "animal": "멋쟁이 사자", "explain": "멋쟁이 사자 설명", "img": "lion.png" },
            "ENTJ": { "animal": "호랑이", "explain": "호랑이 설명", "img": "lion.png" },
        }
        function start() {
            $(".start").hide();
            $(".question").show();
            next();
        }
        $("#A").click(function () {
            var type = ($("#type").val());
            var preValue = $("#" + type).val();
            $("#" + type).val(parseInt(preValue) + 1);
            next();
        });
        $("#B").click(function () {
            next();
        })
        function next() {
            if (num == 13) {
                $(".question").hide();
                $(".result").show();
                var mbti = "";
                ($("#EI").val() < 2) ? mbti += "I" : mbti += "E";
                ($("#SN").val() < 2) ? mbti += "N" : mbti += "S";
                ($("#TF").val() < 2) ? mbti += "F" : mbti += "T";
                ($("#JP").val() < 2) ? mbti += "P" : mbti += "J";
                alert(mbti);
                $("#img").attr("src", result[mbti]["img"]);
                $("#animal").html(result[mbti]["animal"]);
                $("#explain").html(result[mbti]["explain"]);
            } else {
                $(".progress-bar").attr('style', 'width: calc(100/12*' + num + '%)');
                $("#title").html(q[num]["title"]);
                $("#type").val(q[num]["type"]);
                $("#A").html(q[num]["A"]);
                $("#B").html(q[num]["B"]);
                num++;
            }
        }
    </script>
</body>

</html>
article {
    display: flex;
    flex-direction: column;
}

.question {
    display: none;
}

.result {
    display: none;
}

#img {
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

.banner {
    display: flex;
    justify-content: center;
    width: 300px;
    margin: 0 auto;
}

.banner-img {
    width: 300px;
}

Spring of Toby

템플릿 메소드 패턴

abstract class를 이용해 바뀌는 메소드만 추상 메소드로 정의 해놓고 바뀌는 부분을 추상클래스의 구현체로 사용하는 패턴

abstract class 로 만들기

public abstract class UserDao {

   public abstract Connection getConnection() throws ClassNotFoundException, SQLException;
}

abstract class 구현체 만들기

  • DUserDao class
public class DUserDao extends UserDao{
   @Override
   public Connection getConnection() throws ClassNotFoundException, SQLException {
       Class.forName("com.mysql.cj.jdbc.Driver");
       Connection conn = DriverManager.getConnection(
               "", "", ""
       );
       return conn;
   }
}
  • NUserDao class
public class NUserDao extends UserDao{
   @Override
   public Connection getConnection() throws ClassNotFoundException, SQLException {

       Map<String, String> env = getenv();
       String dbHost = env.get("DB_HOST"); //DB_HOST=jdbc:mysql://localhost:3306/spring-db
       String dbUser = env.get("DB_USER");
       String dbPassword = env.get("DB_PASSWORD");

       Class.forName("com.mysql.cj.jdbc.Driver");
       Connection conn = DriverManager.getConnection(
               dbHost, dbUser, dbPassword
       );
       return conn;
   }

SimpleConnectionMaker적용

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.Map;

import static java.lang.System.getenv;

public class SimpleConnectionMaker {
    public Connection makeNewConnection() throws ClassNotFoundException, SQLException {
        Map<String, String> env = getenv();
        String dbHost = env.get("DB_HOST");
        String dbUser = env.get("DB_USER");
        String dbPassword = env.get("DB_PASSWORD");

        Class.forName("com.mysql.cj.jdbc.Driver");
        Connection conn = DriverManager.getConnection(
                dbHost, dbUser, dbPassword
        );

        return conn;
    }
}

Interface 적용

import java.sql.Connection;
import java.sql.SQLException;

public interface ConnectionMaker {
    Connection makeConnection() throws ClassNotFoundException, SQLException;
}

생성자를 이용한 DI

import com.example.tobyspring3.domain.User;

import java.sql.*;

public class UserDao {

    ConnectionMaker connectionMaker;

    public UserDao(ConnectionMaker connectionMaker) {
        this.connectionMaker = connectionMaker;
    }

    public void add(User user) throws ClassNotFoundException, SQLException {
        Connection conn = connectionMaker.makeConnection();

        PreparedStatement pstmt = conn.prepareStatement("insert into users(id, name, password) values(?, ?, ?)");
        pstmt.setString(1, user.getId());
        pstmt.setString(2, user.getName());
        pstmt.setString(3, user.getPassword());

        pstmt.executeUpdate();
        pstmt.close();
        conn.close();
    }

    public User get(String id) throws ClassNotFoundException, SQLException {
        Connection conn = connectionMaker.makeConnection();

        PreparedStatement pstmt = conn.prepareStatement("select id, name ,password from users where id = ?");
        pstmt.setString(1, id);
        ResultSet rs = pstmt.executeQuery();
        rs.next(); // ctrl + enter

        User user = new User();
        user.setId(rs.getString("id"));
        user.setName(rs.getString("name"));
        user.setPassword(rs.getString("password"));

        pstmt.close();
        conn.close();

        return user;
    }
}

UserDaoTest

import com.example.tobyspring3.domain.User;

import java.sql.SQLException;

public class UserDaoTest {
    public static void main(String[] args) throws SQLException, ClassNotFoundException {
        ConnectionMaker connectionMaker = new DConnectionMaker();
        UserDao userDao = new UserDao(connectionMaker);
        User user = new User();
        user.setId("8");
        user.setName("kyeongrok");
        user.setPassword("6767");
        userDao.add(user);

        User selectedUser = userDao.get("8");
        System.out.println(selectedUser.getId());
        System.out.println(selectedUser.getName());
        System.out.println(selectedUser.getPassword());
    }
}

인사이트 타임

n 번째 원소까지

https://school.programmers.co.kr/learn/courses/30/lessons/181889
16:20 ~ 17:00

public class untilNum {
    public static void main(String[] args) {
        int[] arr = {5, 2, 1, 7, 5};
        int n = 3;
        int[] arr1 = new int[n];

        for (int i = 0; i < n; i++) {
            arr1[i] = arr[i];
        }
        System.out.println(Arrays.toString(arr1));
    }
}

풀이 완료

양꼬치

https://school.programmers.co.kr/learn/courses/30/lessons/120830
17:10 ~ 17:30

class Solution {
    public int solution(int n, int k) {
        int answer = 0;
        int yang = n * 12000;
        int drink = k * 2000;
        int service = n / 10 * 2000;
        answer = yang + drink - service;
        return answer;
    }
}

풀이 완료

review

이번 주의 마지막 인강은 mbti 테스트 만들기였다. JS를 당장 어제 4시간 배운지라 완성하고도 이해가 어려웠지만 확실히 눈에 보이는 결과물이 코딩하는데 흥미를 주었다. 이럴때마다 프론트에 미련이 남는건 기분탓이겠지? 완성이라기엔 많이 부족하지만 나중에라도 완성해 보고싶은 프로젝트였다.

스프링시간은 오늘도 큰 어려움없이 실습을 해냈다. 물론 완벽하게 로직을 이해는 못 하지만 강사님의 설명대로만 따라하면 막힘없이 해내는게 여유롭고 재밌었다. 언젠간 이 로직들을 이해할 날이 오겠지라며 내 자신을 위로 하고있다.

인사이트탐은 어제와 달리 태환님께서 아주 기초적인 문제를 가져오셔서 아주아주 할만했다. 생각해보면 어제 문제도 그렇게 어려운건 아닌데 알고리즘에 신경을 안 쓴 나였기에 유난히 어려워했던 것 같다. 최근에 DB나 스프링 그리고 프론트 언어들을 배우느라 알고리즘에 신경을 안 쓰게 되어서 취약해졌다는건 핑계처럼 들리겠지만 사실이다. 그렇다고 아예 놓을 순 없으니 지금이라도 알고리즘 문제들을 자주 풀어봐야겠다. 정말 할 일이 끝이 없는 것 같다. 그래도 힘내자

profile
calis_ws
반갑습니다람지
이전 포스트

JavaScript, UserDao

다음 포스트

Codeup 1097, 1098 review

0개의 댓글