하나씩기록해보기

[12-09 공부/개발 일지]

이세형 — Wed, 9 Dec 2020 23:35:13 +0900

1. 알고리즘 풀이

- 백준 10844 다시풀어보기 성공 - 점화식 도출했음

- 백준 11052

- 백준 9465

2. 스프링 개발

- MemberApiController 테스크 코드 작성 (회원가입/로그인) - 완료

- Logout 기능 ( + session 이용 ) - 미완

- 회원별 데이터관리 ( 기존에는 단일 회원용도 앱이였는데 이제 db데이터들이 각 회원별로 엮여야함) -미완

3. 졸업논문 쓰기

[12-08 공부/개발 일지]

이세형 — Tue, 8 Dec 2020 23:45:52 +0900

1. 알고리즘 풀이

- 백준 11727

- 백준 2156

DP 풀때 1,2,3, ... , k , ... n 상향으로 생각해보기도하고 역으로 n, n-1, n-2, n-3, .... k , .... , 1 처럼 하향식으로 나열해 보면서 점화식(규칙) 찾는 연습하자.

- 백준 10844 - 다시풀어보기

2. 스프링 공부

- @RequestParam은 GET Method 용

- @RequestBody은 POST Method 용

- Interceptor로 로그인 Session 인증하기

3. cs 공부

- DB

- 이것이 mysql이다 1장 가볍게 읽기

JPA 운영중에 칼럼이 새로 추가 될때 어떻게 해야할까?

이세형 — Mon, 7 Dec 2020 22:46:57 +0900

JPA로 백앤드 서버를 운영할 때 DB에 새로운 컬럼을 추가해야 하는 상황이 있을 수 있다.

entity와 db는 서버를 구동할 때 맵핑이 된다.

운영중인 애플리케이션의 경우 jpa.hibernate.ddl-auto 옵션이 일반적으로 none이다. 따라서 JPA의 Entity에 원하는 컬럼 필드를 추가하고 서버를 재실행 하더라도 바로 DB에 반영이 되지 않는다.

그렇다면 jpa.hibernate.ddl-auto 옵션을 update 바꾸는 것은 어떨까? 먼저 결론 부터 말하면 이는 운영상에 큰 문제를 가져올 수 있다. update로 하면 새로 추가하고자 하는 컬럼에 대해 alter문이 실행돼서 db가 업데이트 되는 것은 맞다. 하지만 update 옵션 설정을 깜빡하고 있다가 기존에 존재하던 컬럼이 삭제되는 경우이다. 삭제된 컬럼이 매우 중요한 데이터 였다면? 매우 크리티컬하다.

따라서 운영중인 애플리케이션의 경우 새로운 칼럼이 추가되게 된다면 jpa ddl-auto 옵션을 통해 해결하려하지 말고 직접 db에 원하는 칼럼을 추가해주도록하자.

항상 명심하자 운영중인 애플리케이션의 jpa.hibernate.ddl-auto은 none 을 유지한다.

Input tag와 label tag

이세형 — Mon, 7 Dec 2020 18:02:55 +0900

이글에서는 html에서 Input tag와 label tag의 대해서 간단하게 알아보자.

우선 코드를 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

    <form role="form" action="/member/new" method="post">
 
        <div class="form-group">
 
            <label for="email"><b>Email</b></label>
            <input type="email" placeholder="Enter Email" id="email" name="email" class="form-control" required>
 
            <label for="psw"><b>Password</b></label>
            <input type="password" placeholder="Enter Password" id="psw" name="psw" class="form-control"required>
 
            <label for="psw-repeat"><b>Repeat Password</b></label>
            <input type="password" placeholder="Repeat Password" id="psw-repeat" name="psw-repeat" class="form-control" required>
 
            <label for="name"><b>User Name</b></label>
            <input type="text" placeholder="name" id="name" name="name" class="form-control" required>
        
        </div>
 
        <a class="btn btn-danger" href="/">Cancel</a>
        <button type="submit" class="btn btn-primary">Submit</button>
 
    </form>
Colored by Color Scripter

cs

input tag는 form에서 사용자에게 입력 받는 역할을 한다.

type으로 email, password, text, number 등을 지정할 수 있고 placeholder로 어떤 입력을 받는지에 대한 설명을 써넣을수도 있다. 또한 전체 form이 submit 됐을 때 name 속성의 값으로 서버에게 전달 된다. 따라서 서버쪽에서는 input tag의 name 속성으로 값을 받아 처리하도록 한다. 예를 들어 위의 코드에서 서버쪽에서 post 방식으로 요청을 받았다면 HTTP post 메시지 body에

{ "email":"abc@def.com",

"psw":"1234",

"psw-repeat":"1234",

"name":"user"

} 이렇게 값이 들어온다는 의미이다.

label tag는 말 그대로 input tag의 이름표의 역할을 해준다. label의 for 속성과 input 태그의 id가 짝을 이룬다.

아래처럼 label을 클릭하면 해당 input 으로 focus 해주는 UX적인 기능을 제공해준다.

[백준 - 14719] 빗물

이세형 — Sun, 29 Nov 2020 23:27:53 +0900

- 문제설명

- 풀이코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

#include<iostream>
#include<vector>
#include<algorithm>
 
using namespace std;
 
int main(void){
 
    int h,w;
    int answer = 0;
    cin >> h >> w;
 
    vector<int> blocks(w,0);
 
    for(int i=0;i<w;i++){
        cin >> blocks[i];
    }
 
    for(int i=1;i<w-1;i++){
        
        int i_th = blocks[i];
        int left_max,right_max;
        
        left_max = *max_element(blocks.begin(),blocks.begin()+i+1);
        right_max = *max_element(blocks.begin()+i,blocks.end());
 
        answer += min(left_max,right_max) - i_th;
 
    }
 
    cout << answer;
 
    return 0;
}
Colored by Color Scripter

cs

- 시간복잡도

공간의 너비를 n개라 했을 때 O(n^2)

- 풀이

i번째 블럭을 기준으로 좌측 최대 높이블럭과 우측 최대 높이블럭을 찾아서 둘 중 높이가 낮은 블럭과 i번째 블럭의 높이차 만큼 빗물이 쌓인다고 생각하여 푼 문제이다. 주의해야할 점은 좌우측 최대 높이를 구할때 i 번째 블럭을 포함해야 한다는 점이다. 포함하지 않으면 0 0 0 2 3 또는 2 2 2 2 4 5 와 같은 입력에서 음수 값을 답으로 도출해내기 때문이다.

- Reference

www.acmicpc.net/problem/14719

[백준 - 16562] 친구비

이세형 — Sun, 22 Nov 2020 14:54:19 +0900

- 문제설명

- 풀이코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

#include<iostream>
#include<vector>
#include<set>
 
using namespace std;
 
int find(vector<int> &friends,int v){
    if(friends[v]==v) return v;
    else return friends[v] = find(friends,friends[v]);
}
 
void my_union(vector<int> &friends, int v,int w){
    int v_p = find(friends,v);
    int w_p = find(friends,w);
    if(v_p!=w_p) friends[v_p] = w_p;
}
 
 
int main(void){
 
    int n,m,k;
    int total = 0;
    cin >> n >> m >> k;
 
    vector<int> friends(n+1,0);
    vector<int> costs(n+1,0);
    vector<int> min_costs(n+1,INT32_MAX);
    for(int i=1;i<=n;i++){
        friends[i]=i;
        cin >> costs[i];
    }
    for(int i=0;i<m;i++){
        int v,w;
        cin >> v >> w;
        my_union(friends,v,w);
    }
 
    for(int i=1;i<=n;i++){
        friends[i] = find(friends,i);
    }
 
    set<int> friend_p;
    for(int i=1;i<=n;i++){
        friend_p.insert(friends[i]);
    }
 
    for(auto p : friend_p){
        int min = INT32_MAX;
        for(int i=1;i<=n;i++){
            if(friends[i]==p){
                min = min < costs[i] ? min : costs[i];
            }
        }
        total += min;
    }
 
 
    if(total>k) cout << "Oh no";
    else cout << total;
 
    return 0;
}
Colored by Color Scripter

cs

- 시간복잡도

O(nlogn) - 셋을 사용했기에 최악의 경우시 nlogn

- 남의 풀이와 비교

union-find로 친구 그룹을 만들고 set을 활용해서해당 그룹에서 제일 친구비가 낮은 친구를 선택하는 방법으로 풀었다.

다른 사람의 풀이를 보니 set을 사용하지 않고 O(n)만에 푼 풀이법들이 있었다. union-find로 그룹을 나눈 뒤 해당 그룹들을 효과적으로 다루는 문제들을 더 풀어봐야겠다.

- Reference

www.acmicpc.net/problem/16562

create-react-app을 사용하지 않고 react 띄우기 - 1 -

이세형 — Thu, 19 Nov 2020 22:46:48 +0900

npm create-react-app my-app을 통해서 리액트를 실행하지 않고 리액트를 띄워보면서 npmcreate-react-app이 어떤 작업들을 처리해주는지 알아보자.

<html>
    <head>
        <meta charset="UTF-8">
        <!--  1. 리액트 라이브러리 추가   -->
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script>
            //2. 리액트 컴포넌트
            const e = React.createElement;
            class Hello extends React.Component{
                constructor(props){
                    super(props);
                }
                render() {
                    return e('h1',null,'Hello, React!');
                }
            }
        </script>
        <script>
            //3. ReactDOM을 사용하여 root에 컴포넌트 렌더링
            ReactDOM.render(e(Hello),document.querySelector('#root'));
        </script>
    </body>
</html>

Colored by Color Scripter

우선 리액트의 경우는 자바 스크립트 라이브러리므로 위의 코드처럼 react와 react-dom의 CDN을 import한 뒤 script에 react 컴포넌트를 작성하고 ReactDOM을 통해 원하는 곳에 해당 컴포넌트를 render할 수 있다. 위의 코드는 javascript만을 이용한 방식이다.

<html>
    <head>
        <meta charset="UTF-8">
        <!--  1. 리액트 라이브러리 추가   -->
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <!--  2. 바벨 추가   -->
        <script src="https://unpkg.com/@babel/standalone@7.12.6/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
            // 3. 리액트 컴포넌트
            class Hello extends React.Component{
                constructor(props){
                    super(props);
                }
                render() {
                    return (
                        <React.Fragment>
                            <h1>Hello, React!</h1>
                        </React.Fragment>
                    );
                }
            }
        </script>
        <script type="text/babel">
            // 4. ReactDOM을 사용하여 root에 컴포넌트 렌더링
            ReactDOM.render(<Hello/>,document.querySelector('#root'));
        </script>
    </body>
</html>

Colored by Color Scripter

이 코드는 JSX 문법을 사용한 방식이다. 이때 JSX를 읽고 브라우저가 이해할 수 있도록 바꿔주는 Babel을 사용한다. babel CDN을 추가해주고 script의 type을 "text/babel"로 지정해주면 babel이 해당 script를 브라우저가 jsx로 작성된 리액액트 코드를 이해할 수 있도록 해준다.

이벤트 위임 그리고 this, e.currentTarget, e.target

이세형 — Thu, 19 Nov 2020 15:36:26 +0900

이번 글에서는 이벤트 위임에 대해서 알아보자

우선 결과물 모습 부터 보자.

아래와 같은 html 코드가 있을 때, 클릭 되는 대상에게 active 클래스를 붙여주고 기존에 active 클래스를 가지고 있는 대상은 active 클래스를 지워주는 방식으로 구현을 하면 된다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .active{
        color : red;
      }
    </style>
  </head>
  <body>
    <h1 id="main-title"> DOM (Document Object Model)</h1>
    <ul class="fruit-list">
      <li class="fruit">apple</li>
      <li class="fruit">banana</li>
      <li class="fruit">melon</li>
    </ul>
  </body>
</html>
 

Colored by Color Scripter

이때 각 li 들은 ul의 하위 태그들 이므로 ul을 가져와서 for문을 이용해서 접근하여 직접 이벤트 처리를 할 수 도있다.

하지만 모든 이벤트를 감지 할 수 있는 부모 태그인 ul에게 이벤트 리스너를 추가해주고 e.target을 통해서 li들 마다 이벤트가 처리 되는 것 처럼 할 수 있다. 즉 부모 태그에게 이벤트를 위임하는 방식이다. script 코드는 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

    <script>
      var currentFruit;
      var fruits = document.querySelector('.fruit-list')
 
      function clickHandler(e){
        if(currentFruit){
          currentFruit.classList.remove('active')
        }
        e.target.classList.add('active');
        currentFruit = e.target;
      }
 
      fruits.addEventListener('click', clickHandler);
    </script>
Colored by Color Scripter

cs

이벤트 핸들러는 부모태그인 ul에 추가해줬지만 해당 li를 클릭하면 ul이 해당 이벤트를 감지하고 해당 이벤트 핸들러 내에서 e.target을 통해서 클릭된 li를 접근하여 active 클래스를 추가해주면 된다. 또 currentFruit로 이전 선택된 li를 저장해 놓은뒤 classList를 조작해주는 방식으로 이전 대상의 active를 지워준다.

e.currentTaget 과 this는 ul을 가리키고

e.target은 해당 li을 가리킨다.

[프로그래머스 - 42884] 단속카메라

이세형 — Thu, 19 Nov 2020 14:43:09 +0900

- 문제설명

- 풀이코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#include <string>
#include <algorithm>
#include <vector>
 
using namespace std;
 
int solution(vector<vector<int>> routes) {
    int answer = 1;
    int n = routes.size();
    sort(routes.begin(),routes.end());
    int front = routes[0][1];
    for(int i=0;i<n-1;i++){
        if(routes[i][1]<front) front = routes[i][1];
        if(routes[i+1][0]>front){
            answer++;
            front = routes[i+1][1];
        }
    }
    return answer;
}
Colored by Color Scripter

cs

- 시간복잡도

O(nlogn)

- 남의 풀이와 비교

정렬을 하면 진입한 지점이 빠른 순으로 정렬이 된다. 맨 처음 진입한 차의 나간 지점을 기준으로 시작한다. 다음 차량의 나간 지점이 기준 점보다 작으면 카메라가 커버할 수 있는 구간을 줄인다. 또 다음 차량의 진입 지점이 현재 카메라 커버지점에 벗어나면 카메라가 한대 더 필요하므로 카메라 대수를 늘려주고, 해당 차의 나간 지점을 다시 커버리지로 설정한다. 다른 사람들도 거의 같은 방식으로 풀었음을 확인 했다.

- Reference

programmers.co.kr/learn/courses/30/lessons/42884

[프로그래머스 - 42898] 등굣길

이세형 — Mon, 9 Nov 2020 23:16:56 +0900

- 문제설명

- 풀이코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

#include <string>
#include <vector>
#include <iostream>
using namespace std;
 
//https://programmers.co.kr/learn/courses/30/lessons/42898
 
int solution(int m, int n, vector<vector<int>> puddles) {
   
    int answer = 0;
    
    vector<vector<int>> DP(n+1,vector<int>(m+1,0));
 
    for(auto puddle : puddles){
        DP[puddle[1]][puddle[0]] = -1;
    }
    
    DP[1][1] = 1;
    for(int i=1;i<=n;i++){
        for(int j=1;j<=m;j++){
            if(i==1 && j==1) continue;
            if(DP[i][j]== -1){
                DP[i][j] = 0;
                continue;
            }
            if(i==1) DP[i][j] = DP[i][j-1];
            else if(j==1) DP[i][j] = DP[i-1][j];
            else{
                DP[i][j] = (DP[i-1][j] + DP[i][j-1]) % 1000000007; 
            }
        }
    }
    
    answer = DP[n][m];
    
    return answer;
}
Colored by Color Scripter

cs

- 시간복잡도

O(nm)

- 남의 풀이와 비교

처음에 웅덩이를 일괄적으로 처리하지 않고 풀어서 시간초과가 났던 문제이다. 매번 해당 좌표가 웅덩이 인지 확인하게 되면 시간 복잡도가 O(nm)에서 최악의 경우 O((nm)^2)이 되버리기 때문이다. DP로 푸니까 시간복잡도에 대한 고민을 딱히 하지 않았는데 물 웅덩이를 처리하는 것도 생각을 해줬어야 하는 문제이다. 다른 사람들의 코드를 보면 조건과 DP 배열을 채우는 방식이 내 코드보다 좀더 깔끔했다. 조건 작성할 때 어떻게 하면 최적화 할 수 있는지 고민을 하는 습관이 필요하다고 생각이 들었다.

- Reference

programmers.co.kr/learn/courses/30/lessons/42898