Jay's Dev Blog | Feed

[React] 흔하디 흔한 투두리스트 아니고 로그인 - 2

Mon, 18 May 2020 00:00:00 GMT

loginContainer 컴포넌트 만들기

import React from 'react';
import { useDispatch } from 'react-redux'; // ( 1 )
import SignInForm from '../components/Auth/SignInForm';
import { signInRequestAction } from '../redux/action/auth'; // ( 2 )
import { Router } from "react-router-dom";

function AccountContainer () {

    const dispatch = useDispatch();

    const onSignIn = (user) => dispatch(signInRequestAction(user)); // ( 3 )

    const signInForm = () => (<SignInForm onSignIn={onSignIn}/>); // ( 4 )

    return(
        <div className="body_wrapper">
            <Switch>
            <Router exact path="/accounts/signin" component={signInForm} /> // ( 4 )
            </Switch>
        </div>
    )
}

export default AccountContainer;

src/containers/AccountContainer.js 파일을 만들었다.
해당 컨테이너 컴포넌트에서 계정 관련한 라우팅을 잡는다.
( 1 ) -> react-redux모듈이 제공하는 useDispatch 함수를 통해 action을 디스패치 (실행, 발생) 시킬 수 있다.
( 2 ) -> createAction함수를 통해 만든 action 생성 함수를 import해서 사용한다.
( 3 ) -> 어떠한 action을 dispatch할 때는 dispatch 함수의 인자로 action을 넣어준다.
( 4 ) -> 필자는 SignInForm 컴포넌트에 onSignIn dispatch 함수를 넣어 리턴하는 함수를 생성해 라우트 컴포넌트로 넣어줬다.

SignInForm 컴포넌트 만들기

import React, { useState } from 'react'; // ( 1 )

const SignInForm = ({ onSignIn }) => {

    const [email, setEmail] = useState(''); // ( 2 )
    const [password, setPassword] = useState(''); // ( 3 )

    const _handleChange = (event) => {
        const { target: { name, value } } = event // 비구조화 할당
        if(name === 'email') {
            setEmail(value); // ( 4 )
        } else if(name === 'password'){
            setPassword(value); // ( 5 )
        }
    }

    const onSubmit = () => {
        const user = {
            email,
            password
        }
        onSignIn(user); // ( 6 )
        setEmail(''); // 인풋 초기화
        setPassword('');
    };

    return(
        <div>
            <div>
              <label>이메일</label>
              <input name = "email" type="text" placeholder="saasland@gmail.com" value={email} onChange={_handleChange}/>
            </div>
            <div>
              <label>비밀번호</label>
              <input name= "password" type="password" placeholder="******" value={password} onChange={_handleChange}/>
            </div>
            <button className="login-button" onClick={onSubmit}>로그인</button>
        </div>
    )
}
export default SignInForm;

src/components/SignInForm.js 간단한 형태의 로그인 컴포넌트를 만들었다.
( 1 ) -> 상태 관리를 위하여 useState hook을 사용한다.
( 2 ) -> email state를 초기화한다.
( 3 ) -> password state를 초기화한다.
( 4 ) -> email input태그에 입력된 값을 email state에 변경한다.
( 5 ) -> password input태그에 입력된 값을 password state에 변경한다.
( 6 ) -> 로그인 버튼이 눌렸을 때 props로 받은 onSignIn 액션 디스패치 함수에 email과 password를 담은 객체를 인자로 넣어 실행한다.

onSignIn 함수가 실행되면 signInRequestAction 액션이 디스패치되어 reducer에서 state값을 변동할 수 있다.

요약

이전 포스팅에서 생성한 redux action과 reducer, dispatch를 이어주었다.
실행 흐름
email과 password를 입력한 후 로그인 버튼을 누른다.
SignInForm 컴포넌트에서 props로 받은 onSignIn 액션 dispatch 함수에 객체를 넣어주며 호출한다.
로그인 액션이 생성되며 dispatch된다.
redux-saga 미들웨어의 제너레이터 함수가 실행된다. -> 비동기 통신, 또 다른 액션 dispatch를 여기서 처리한다.
saga 제너레이터 함수에서 비동기 통신을 한 후 해당 결과값으 성공 액션 or 실패 액션에 서버 응답값을 넣어 dispatch 한다.
성공 액션 or 실패 액션의 reducer에서 redux store의 state값을 변경시켜준다.(불변성을 지켜줘야함)

[백준 - 2667] 단지 번호 붙이기

Wed, 13 May 2020 00:00:00 GMT

[백준 - 2667] 단지 번호 붙이기

문제 설명

<그림 1>과 같이 정사각형 모양의 지도가 있다. 1은 집이 있는 곳을, 0은 집이 없는 곳을 나타낸다.
철수는 이 지도를 가지고 연결된 집들의 모임인 단지를 정의하고, 단지에 번호를 붙이려 한다.
여기서 연결되었다는 것은 어떤 집이 좌우, 혹은 아래위로 다른 집이 있는 경우를 말한다.
대각선상에 집이 있는 경우는 연결된 것이 아니다.
<그림 2>는 <그림 1>을 단지별로 번호를 붙인 것이다.
지도를 입력하여 단지수를 출력하고, 각 단지에 속하는 집의 수를 오름차순으로 정렬하여 출력하는 프로그램을 작성하시오.

입력

첫 번째 줄에는 지도의 크기 N(정사각형이므로 가로와 세로의 크기는 같으며 5≤N≤25)이 입력되고, 그 다음 N줄에는 각각 N개의 자료(0혹은 1)가 입력된다.

출력

첫 번째 줄에는 총 단지수를 출력하시오. 그리고 각 단지내 집의 수를 오름차순으로 정렬하여 한 줄에 하나씩 출력하시오.

입력 예제

출력 예제

코드

package baekJoon.BFS;

import java.util.*;

// 단지번호붙이기
public class B_2667 {
    
    private static ArrayList<Integer> list = new ArrayList<Integer>();
    private static int[][] map;
    private static boolean[][] visited;
    static int []dy = {0, 1, -1, 0}; // 하상우좌
    static int []dx = {1, 0, 0, -1};
    static int n;

    public static void solution () {
        Scanner sc = new Scanner(System.in);
        n = sc.nextInt();
        map = new int[n][n];
        visited = new boolean[n][n];

        for(int i=0; i<n; i++) {
            String input = sc.next();
            for(int j=0; j<n; j++) {
                map[i][j] = input.charAt(j) - '0';
            }
        }

        for(int i=0; i<n; i++) {
            for(int j=0; j<n; j++) {
                if(map[i][j] == 1 && !visited[i][j]) {
                    bfs(i,j);
                }
            }
        }

        System.out.println(list.size());
        Collections.sort(list);
        for(int result : list) {
            System.out.println(result);
        }

    }

    private static void bfs (int y, int x) {
        Queue<int[]> queue = new LinkedList<int[]>();
        int count = 1;
        queue.offer(new int[] {y, x});
        visited[y][x] = true;

        while(!queue.isEmpty()) {
            int [] data = queue.poll();
            int curY = data[0];
            int curX = data[1];

            for(int i=0; i<4; i++) {
                int newY = curY + dy[i];
                int newX = curX + dx[i];

                if (newX >= 0 && newY >= 0 && newX < n && newY < n ) { // map 범위
                    if(map[newY][newX] != 0 && !visited[newY][newX]) {
                        visited[newY][newX] = true;
                        queue.offer(new int[]{newY, newX});
                        count++;
                    }
                }
            }
        }
        list.add(count);
    }

    public static void main(String[] args) {
        solution();
    }
}

[React] 흔하디 흔한 투두리스트 아니고 로그인 - 1

Mon, 11 May 2020 00:00:00 GMT

개요

react를 처음으로 입문한다면 흔하디 흔한 투두리스트, 카운터 예제를 가장 많이 보게된다.
필자도 react를 투두리스트, 카운터와 같은 예제로 실습을 진행했다.
하지만 실제 프로젝트에 들어가면 서버와 비동기 통신을 해야하고, 상태 관리 등등 많은 개념이 필요해진다.
좀 더 편한 상태 관리를 위해 redux를 도입하고 비동기 통신을 위해 redux-saga를 이용하게 됐다.
하지만 모든 서비스에 필요한 흔하디 흔한 로그인, 회원가입 예제가 없어 처음에 감을 잡기 힘들어 조금이나마 도움이 되기 위해 포스팅하게 됐다.

간단한 설명만 진행하기 위해 프로젝트 구조화, 예제 코드는 간단하게만 작성한다.

redux action 만들기

최근에는 redux의 action, reducer등을 하나의 파일에서 작성하는 DUCKS 패턴을 많이 사용하지만
필자는 모두 분리 시켰다.
redux를 사용한다면 어떠한 변화를 일으키기 위해서는 action이라는 것을 발생시켜줘야한다.
액션은 하나의 객체로 표현되면 type이외의 값은 개발자 마음대로 설정할 수 있다. 필자는 로그인을 위해 필요한 액션을 SIGNIN_REQUEST SIGNIN_SUCCESS SIGNIN_FAIL 3가지로 만들었다.

src/redux/actions 디렉토리에 auth.js을 생성한다.
액션 생성 함수를 직접 객체를 리턴하는 함수로 작성해도 되지만
redux-actions 모듈의 createAction 함수를 사용하면 좀 더 간결하고 쉽게 액션을 생성 할 수 있다.
creatAction으로 액션을 생성할 때 첫번째 인자는 액션 타입, 두번째 인자는 이외의 데이터를 자유롭게 객체로 넣을 수 있다.

import { createAction } from 'redux-actions';

// actions
export const SIGNIN_REQUEST = 'auth/SIGNIN_REQUEST';
export const SIGNIN_SUCCESS = 'auth/SIGNIN_SUCCESS';
export const SIGNIN_FAIL = 'auth/SIGNIN_FAIL';

// create actions
export const signInRequestAction = createAction(SIGNIN_REQUEST, user => (user));
export const signInSuccessAction = createAction(SIGNIN_SUCCESS, token => (token));
export const signInFailAction = createAction(SIGNIN_FAIL);

redux reducer 만들기

redux action을 dispatch시켜 상태에 어떠한 변화를 주고 싶다면
redux reducer에서 실질적으로 state값을 변경시키는 작업을 진행한다. 리덕스를 사용할 때 여러개의 리듀서를 만들고 이를 하나의 루트 리듀서(Root Reducer)로 만들 수 있다.

src/redux/reducer/auth.js를 생성한다.
위에서 3가지로 구분한 액션별로 변경될 state값을 action객체에서 받아 불변성을 유지하면 넣어주면 된다.
reducer를 구현할 때 switch문으로 많이들 작성하지만 redux-actions 모듈의 handleActions를 사용하게 되면 좀 더 간결한 코드를 작성할 수 있다.

import handleActions from "redux-actions/es/handleActions"
import {
    SIGNIN_FAIL,
    SIGNIN_SUCCESS,
    SIGNIN_REQUEST
} from "../action/auth"

// state initialize
const initialState = {
    loading : false,
    payload : {
        token : ''
    },
}

// reducer
export default handleActions({
    [SIGNIN_REQUEST]: (state, action) => ({
        ...state,
        loading: true
    }),
    [SIGNIN_SUCCESS]: (state, action) => ({
        ...state,
        loading: false,
        payload: {
            token: action.payload.token
        }
    }),
    [SIGNIN_FAIL]: (state, action) => ({
        ...state
    })
}, initialState);

root reducer로 여러개의 reducer 합치기

src/redux/reducer/index.js를 생성한다.
해당 파일에서는 여러개의 reducer를 root reducer로 합치는 작업을 한다.

import { combineReducers } from "redux"
import auth from "./auth"

export default combineReducers({
    auth
});

saga 구현하기

redux-saga는 제너레이터 함수를 구현하여 사용한다.
src/redux/saga/authSaga.js 파일을 생성한다.

해당 예제 saga 제너레이터 함수에서는 api 호출 함수가 구현되어있다고 가정한다.
redux-saga모듈의 call 함수를 통해 특정 함수를 비동기로 호출할 수 있다.
put 함수로 액션을 디스패치할 수 있다.

import { call, put, takeEvery } from "redux-saga/effects"
import { requestSignIn } from "../apis/auth"
import { SIGNIN_REQUEST } from "../redux/action/auth"
import { signInSuccessAction, signInFailAction } from "../redux/action/auth"

function* postSignInSaga(action) {
    try {
        const email = action.payload.id;
        const password = action.payload.pw;
        const result = yield call(requestSignIn, email, password); // call 을 사용하면 특정 함수를 호출하고, 결과물이 반환 될 때까지 기다려줄 수 있다.
        if(result.message === "SUCCESS") {
            yield put(signInSuccessAction({token : result.data.token})); // 성공 액션 디스패치
        } else {
            yield put(signInFailAction({error: "로그인 실패"})); // 실패 액션 디스패치
        }
    } catch (e) {
        yield put(signInFailAction({error: e.message})); // 실패 액션 디스패치
    }
}

// 사가들을 합치기
export function* postsSaga() {
    yield takeEvery(SIGNIN_REQUEST, postSignInSaga);
}

root saga로 여러개의 saga 합치기

src/redux/saga/index.js 파일을 생성하여 여러개의 saga를 root saga로 합쳐준다.

import { all } from "../../node_modules/redux-saga/effects"
import { postsSaga } from "./authSaga"

export default function* rootSaga() {
    yield all([
      postsSaga(),
    ]);
}

요약

redux action을 생성하는 코드
변화된 action을 감지하여 state를 변경해주는 redux reducer 코드
서버로부터 로그인 통신을 하기위한 redux-saga 미들웨어 코드 를 작성했다.
아직까지는 이 모든게 하나로 연결되어 있지 않다!
왜냐하면 아직 이 모든 로직이 돌 수 있게 해주는 action을 컴포넌트에 붙이지 않았기 때문이다.
다음 포스팅에서 SIGNIN_REQUEST 액션을 디스패치하는 코드와 간단한 로그인 컴포넌트를 만들 예정이다!
설명이 부족한 부분이 많아 앞으로 계속해서 수정할 예정이다!

[백준 - 1966] 프린터 큐

Sat, 25 Apr 2020 00:00:00 GMT

[백준 - 1966] 프린터 큐

문제 설명

여러분도 알다시피 여러분의 프린터 기기는 여러분이 인쇄하고자 하는 문서를 인쇄 명령을 받은 ‘순서대로’, 즉 먼저 요청된 것을 먼저 인쇄한다. 여러 개의 문서가 쌓인다면 Queue 자료구조에 쌓여서 FIFO - First In First Out - 에 따라 인쇄가 되게 된다. 하지만 상근이는 새로운 프린터기 내부 소프트웨어를 개발하였는데, 이 프린터기는 다음과 같은 조건에 따라 인쇄를 하게 된다.

현재 Queue의 가장 앞에 있는 문서의 ‘중요도’를 확인한다. 나머지 문서들 중 현재 문서보다 중요도가 높은 문서가 하나라도 있다면, 이 문서를 인쇄하지 않고 Queue의 가장 뒤에 재배치 한다. 그렇지 않다면 바로 인쇄를 한다. 예를 들어 Queue에 4개의 문서(A B C D)가 있고, 중요도가 2 1 4 3 라면 C를 인쇄하고, 다음으로 D를 인쇄하고 A, B를 인쇄하게 된다.

여러분이 할 일은, 현재 Queue에 있는 문서의 수와 중요도가 주어졌을 때, 어떤 한 문서가 몇 번째로 인쇄되는지 알아내는 것이다. 예를 들어 위의 예에서 C문서는 1번째로, A문서는 3번째로 인쇄되게 된다.

입력

첫 줄에 test case의 수가 주어진다.
각 test case에 대해서 문서의 수 N(100이하)와 몇 번째로 인쇄되었는지 궁금한 문서가 현재 Queue의 어떤 위치에 있는지를 알려주는 M(0이상 N미만)이 주어진다.
다음줄에 N개 문서의 중요도가 주어지는데, 중요도는 1 이상 9 이하이다.
중요도가 같은 문서가 여러 개 있을 수도 있다.
위의 예는 N=4, M=0(A문서가 궁금하다면), 중요도는 2 1 4 3이 된다.

출력

각 test case에 대해 문서가 몇 번째로 인쇄되는지 출력한다.

입력 예제

3
1 0
5
4 2
1 2 3 4
6 0
1 1 9 1 1 1

출력 예제

1
2
5

풀이

문제는 어렵지 않았지만..
처음에 주먹구구식으로 풀다보니 코드가 너무 더러워져서
다시 다 지우고 처음부터 시작했다!

Document 클래스안에 원소들의 index와 priority를 저장한 이후에
계속해서 큐의 첫번째 원소가 뒤에 더 큰 우선순위를 가진 원소가 있는지 체크했다.

코드

package baekJoon.BurteForce;

import java.util.*;

class Document {
    int index, priority;

    public Document (int index, int priority) {
        this.index = index;
        this.priority = priority;
    }
}

public class B_1966 {

    private static void solution () {
        Scanner sc = new Scanner(System.in);
        int testCase = sc.nextInt();
        int[] result = new int[testCase];
        for(int i=0; i<testCase; i++) {
            int n = sc.nextInt();
            int targetIndex = sc.nextInt();
            LinkedList<Document> queue = new LinkedList<Document>();

            for(int j=0; j<n; j++) {
                queue.offer(new Document(j, sc.nextInt()));
            }

            int count = 1;
            while(true) {
                if(isMax(queue)) {
                    if(queue.getFirst().index == targetIndex) {
                        result[i] = count;
                        break;
                    } else {
                        queue.poll();
                        count++;
                    }
                } else {
                    queue.offer(queue.poll());
                }
            }
        }

        for(int item : result) {
            System.out.println(item);
        }

    }

    private static boolean isMax (LinkedList<Document> queue) {
        for(int i=1; i<queue.size(); i++) {
            if(queue.getFirst().priority < queue.get(i).priority) {
                return false;
            }
        }
        return true;
    }

    public static void main(String[] args) {
        solution();
    }
}

[백준 - 11051] 이항계수 2

Sat, 25 Apr 2020 00:00:00 GMT

[백준 - 11051] 이항계수 2

문제 설명

자연수 N 과 정수 K 가 주어졌을 때 이항 계수를 10,007로 나눈 나머지를 구하는 프로그램을 작성하시오.

입력

첫째 줄에 N과 K가 주어진다. (1 ≤ N ≤ 1,000, 0 ≤ K ≤ N)

출력

N K 이항계수를 10,007로 나눈 나머지를 출력한다.

입력 예제

5 2

출력 예제

풀이

오랜만에 수학개념이 나와서 이항계수 개념을 다시 보고왔다..ㅎㅎ 이항계수를 계속해서 나열해보면서 규칙을 찾아봤지만 실패..
구글이 주는 조금의 힌트를 얻어서 풀었다!
파스칼 삼각형! 정말 이거면 이 문제 그냥 풀린다..!!ㅎㅎ

코드

package baekJoon.DP;

import java.util.Scanner;

public class B_11051 {

    private static void solutiuon () {
        Scanner sc = new Scanner(System.in);

        int n = sc.nextInt();
        int k = sc.nextInt();

        int[][] dp = new int[n+1][n+1];

            for(int i=0 ; i<=n; i++) {
                for(int j=0; j<=i; j++) {
                    if(i == j || j == 0) {
                        dp[i][j] = 1;
                    } else {
                        dp[i][j] = (dp[i-1][j-1] + dp[i-1][j]) % 10007;
                    }
                }
            }

        System.out.println(dp[n][k]);
    }

    public static void main(String[] args) {
        solutiuon();
    }
}

React - Redux 기본 용어 개념

Thu, 09 Apr 2020 00:00:00 GMT

Redux란

가장 사용률이 높은 상태 관리 라이브러리
컴포넌트들의 상태 관련 로직들을 다른 파일로 분리시켜서 더욱 효율적으로 관리 가능
컴포넌트끼리 상태를 공유할 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다.
상태변화 로직이 들어있는 스토오를 통하여, 우리가 원하는 컴포넌트에 원하는 상태값과 함수를 직접 주입할 수 있다.

Redux에서 자주 사용되는 개념 정리

액션

상태에 어떠한 변화가 필요하게 될 때 액션이라는 것을 발생시킨다.
하나의 객체로 표현하며 액션 객체에는 type필드는 필수로 들어가야한다.

그 외 data는 사용자 마음대로 조정이 가능하다.

{
type : "ADD_TODO",
data : {
  id : 0,
  text : "리덕스 배우기"
}
}

액션 생성함수 (Action Creator)

액션을 만드는 함수다.
파라미터를 받아와 액션 객체 형태로 만들어주는 책임이 있다.
액션 생성함수를 통해 액션을 생성하는 이유는 따로 있다.
나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위해서다.
때문에 보통 함수 앞에 export 키워드를 통해 다른 파일에서 불러와서 사용한다.
액션 생성함수는 필수적으로 구현요소가 아니다.

액션을 발생 시킬 때 마다 직접 액션 객체를 작성해도 괜찮다.

export const addTodo = (data) => {
return {
type: "ADD_TODO",
data
};
}

Reducer

리듀서는 state의 변화시키는 역할을 한다.
2가지 파라미터를 받는다.
첫번째를 파라미터는 현재 state값, 두번째 파라미터는 변화를 시키고자 하는 액션 객체
이 2가지 파라미터를 받아 새로운 state를 만든다.
리덕서 리듀서에서는 default문에서는 기존 state를 반환하도록 작성한다.

리덕스를 사용할 때 여러개의 리듀서를 만들고 이를 하나의 루트 리듀서(Root Reducer)로 만들 수 있다.

function addTodo(state, action) {
switch (action.type) {
case 'ADD_TODO' :
  return state.concat(action.todo);
default :
  return state;
}
}

Store

리덕스에서 한 애플리케이션에 하나의 스토어를 만들게 된다.
스토어 안에는 현재 앱 상태, 리듀서가 들어있다.
내장 함수도 포함되어 있다.

Dispatch

디스패치는 스토어의 내장함수 중 하나다.
디스패치는 액션을 발생 시키는 역할을 한다.
dispatch 함수에 액션을 파라미터로 전달한다.
디스패치 함수를 호출하게 되면 스토어는 리듀서 함수를 실행시킨다.
해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어준다.

스토어의 내장함수다.
함수 형태의 값을 파라미터로 받는다.
액션이 디스패치 되었을 때 마다 전달해준 함수가 호출된다.

프로그래머스 - 기능개발

Wed, 26 Feb 2020 00:00:00 GMT

프로그래머스 - 기능개발

문제 설명

프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다.

또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다.

먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요.

제한 사항

작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다.
작업 진도는 100 미만의 자연수입니다.
작업 속도는 100 이하의 자연수입니다.
배포는 하루에 한 번만 할 수 있으며, 하루의 끝에 이루어진다고 가정합니다. 예를 들어 진도율이 95%인 작업의 개발 속도가 하루에 4%라면 배포는 2일 뒤에 이루어집니다.

입출력 예

progresses	speeds	return
[93,30,55]	[1,30,5]	[2,1]

입출력 예 설명

첫 번째 기능은 93% 완료되어 있고 하루에 1%씩 작업이 가능하므로 7일간 작업 후 배포가 가능합니다.
두 번째 기능은 30%가 완료되어 있고 하루에 30%씩 작업이 가능하므로 3일간 작업 후 배포가 가능합니다. 하지만 이전 첫 번째 기능이 아직 완성된 상태가 아니기 때문에 첫 번째 기능이 배포되는 7일째 배포됩니다.
세 번째 기능은 55%가 완료되어 있고 하루에 5%씩 작업이 가능하므로 9일간 작업 후 배포가 가능합니다.

따라서 7일째에 2개의 기능, 9일째에 1개의 기능이 배포됩니다.

코드

import java.util.*;

public class P_functionDevelop {

    public static int[] solution(int[] progresses, int[] speeds) {
        int [] answer = {};
        int [] temp = new int[progresses.length];
        List<Integer> list = new ArrayList<Integer>();

        // 매칭되는 task마다 진행도를 매칭하여 몇일이 걸려야하는지 계산
        for(int i=0; i<progresses.length; i++) {
            int count = 0;
            int sum = progresses[i];
            while (sum < 100) {
                sum += speeds[i];
                count++;
            }
            temp[i] = count;
        }

        // 기준값을 설정하여 뒤에 자신보다 빨리 끝난 일이 있으면 자기의 카운트 ++
        // 자신보다 큰 값이 나오면 list에 add하고 피봇값 변경
        int pivot = temp[0];
        int count = 1;
        for(int j=1; j<temp.length; j++) {
            if(temp[j] <= pivot) {
                count++;
            } else {
                list.add(count);
                pivot = temp[j];
                count = 1;
            }
        }
        list.add(count);

        answer = new int[list.size()];
        for(int k=0; k<list.size(); k++) {
            answer[k] = list.get(k);
        }

        return answer;
    }

    public static void main (String[] args) {
        int[] progresses = {40, 93, 30, 55, 60, 65};
        int[] speeds = {60, 1, 30, 5, 10, 7};
        // [1, 2, 3]

        // [2,1]
        solution(progresses, speeds);

    }

}

Spring - Bean, Bean Scope, Spring Annotation

Thu, 17 Oct 2019 00:00:00 GMT

Bean 이란?

Spring을 사용하다보면 bean 이라는 용어가 많이 나오는데 bean에 대해 알아보자.

상속을 받지않고 가장 기본적인 field와 getter, setter만 가지고 있는 객체가 bean이다.
Spring에서 POJO(plain old java object)는 beans라고 불린다.
bean을 생성하기 위해서는 xml config file의 설정을 통해 Spring container에 의해 생성된다.
xml config file에서는 bean의 lifecycle과 dependency를 설정할 수 있다.
Spring container에서 객체를 생성해주기 때문에 개발자가 new 생성자로 객체를 생성할 필요가 없다.
container에 의해 생성된 bean에 접근하기 위해서는 getBean("[bean_id]")로 통해 bean에 대한 reference 값을 가져올 수 있다.

Spring에서 Bean의 속성

Key attributes
- class(required) : 클래스의 이름을 속성에 반드시 넣어줘야한다.
- id : 해당 bean의 유니크한 값
- scope : 객체의 scope (singleton, prototype) singleton에 대해서 추가공부
- constructor-arg : bean을 생성할 때 constructor에게 넘겨줄 인자, 이를 통해 의존성을 주입한다.
- property : bean을 생성할 때 setter메소드를 호출하고 setter의 인자값으로 value로 넘겨준다.
- init, destroy method

<!-- A simple bean definition -->
<bean id="..." class="...">
</bean>

<!-- A bean definition with scope-->
<bean id="..." class="..." scope="singleton">
</bean>

<!-- A bean definition with property -->
<bean id="..." class="...">
	<property name="message" value="Hello World!"/>
</bean>

<!-- A bean definition with initialization method -->
<bean id="..." class="..." init-method="...“ >
</bean>

Spring Bean의 Scope

Bean Scope	설명
singleton	bean을 단 하나만 생성하여 값을 공유한다(default scopt)
prototype	매번 새로운 요청 마다 bean을 생성하며 값을 공유하지 않는다.
request	HTTP request의 하나의 bean
session	HTTP session의 하나의 bean
global-session	gobal HTTP session의 하나의 bean

Bean은 2가지의 type을 가지고있다.
- singleton
- prototype
'singleton'으로 설정한 객체는 Spring container에서 단 한번 생성된다.
- singleton 객체는 언제 생성되고 언제 수거될까?
- Spring container가 생성될 때 singleton 객체가 생성되고 container가 종료될 때 garbage collercter에 의해 수거된다.
'prototype'으로 설정한 객체는 요청 마다 새로운 객체를 생성한다.
- 더 이상 사용하지 않는 prototype 객체는 garbage collercter가 메모리를 회수한다.
객체의 scope를 정의하지 않을 경우 scope default값이 singleton으로 객체가 생성된다.

Dependency Injection methods

의존성주입을 하는 방법은 2가지가 있다.

생성자를 통해 의존성 주입
property의 setter를 통해 의존성 주입

Spring Annotation을 사용하여 설정

Spring 2.5버전 이후로 등장하여 요즘 많이 사용하는 방법이다.
xml configuration size를 줄이기 위한 목적으로 annotation이 나왔다.
bean wired을 위해 xml을 통해서 설정하는 방법의 대체재로 사용된다.
bean의 configuration을 class 자체에 옮겨 class 안에서 직접 의존성을 주입한다.
xml을 사용하게 되면 bean을 설정할 때 마다 계속해서 설정을 넣어줘야하는데 annotation으로 좀 더 명시적이고 보기좋은 코드를 만들어준다.
xml과 annotation을 둘다 사용한다면 xml이 annotaion을 override하게 된다, 즉! xml이 우선순위다.

그렇다면 대표적인 Spring Annotation 몇가지에 대해 알아보자.

첫번째로 Spring Annotation을 사용하기 위해서 Spring Annotation을 활성화 시켜줘야한다.

<?xml version="1.0" encoding="UTF-8" ?>

<beans xmlns="http://www.springframework.org/schema/beans"
    ...
    xmlns:context="http://www.springframework.org/schema/context"
    ...

   <context:annotation-config/>

xmlns:context="http://www.springframework.org/schema/context"
<context:annotation-config/>

위 2개의 코드를 web.xml에 추가시켜 Spring Annotation을 활성화 시켰다.

@Required Annotation

setter 메소드에서 인자를 반드시 받아야할 경우 사용하는 어노테이션

public class Boy {
 private String name;
 private int age;

 @Required
 public void setName(String name){
  this.name = name;
 }

 @Required
 public void setAge(int age){
  this.age = age;
 }

 //   getters ...
}

위 코드에서 setName, setAge 메소드에 @Required 어노테이션이 설정되어 있기 때문에, name과 age는 반드시 필수로 주입시켜줘야한다.

<bean id="boy" class="Boy">
 <property name="name" value="Rony"/>
 <property name="age" value="10"/>
</bean>

위의 의존성 주입은 @Required로 설정된 name과 age를 두개다 필수로 주입해줘야한다.

<!-- Property 'age' is required for bean 'boy' -->
<bean id="boy" class="Boy">
 <property name="name" value="Rony"/>
</bean>

위의 의존성 주입은 @Required로 설정된 age를 주입해주지 않았기 때문에 에러가 발생한다.

@Autowired Annotation

자동적으로 의존성주입을 시키기 위한 어노테이션

xml을 사용하여 의존성을 주입하는 방법

public class Boy {
private String name;
private int age;

// getters and setters ... }

```java
public class College {

 private Boy student;

 public void setStudent(Boy aboy){
  this.stuendt = aboy;
 }
}

<bean id="boy" class="Boy">
 <property name="name" value="Rony"/>
 <property name="age" value="10"/>
</bean>

<bean id="college" class="College">
  <property name="student" ref="boy"/>
</bean>

xml파일에서 property의 ref값에 주입시킬 bean의 id를 명시하여 의존성주입을 한다.

@Autowired

어노테이션을 사용하여 의존성을 주입하는 방범

type에 의해서 자동적으로 의존성을 주입해준다.

public class Boy {
 private String name;
 private int age;

 //   getters and setters ...
}

public class College {

 @Autowired
 private Boy student;
}

<bean id="boy" class="Boy">
 <property name="name" value="Rony"/>
 <property name="age" value="10"/>
</bean>

<bean id="college" class="College">
</bean>

College 클래스의 student 필드에 @Autowired 어노테이션을 사용하여 Boy라는 type을 가진 bean을 주입한다.

하지만!!, 만약 같은 type을 가진 bean이 여러개일때는 Spring container가 값을 어떻게 주입할까?? 이 경우에는 Spring Container는 값을 주입하지 않고 에러를 발생시킨다. 이 문제를 @Qualifier 어노테이션을 사용하여 해결할 수 있다.

@Qualifier

위에서 말한 상황에서 마법사같이 해결해줄 수 있는 어노테이션이 @Qualifier다. 같은 type의 객체가 1개 이상일 경우 어떠한 bean을 주입할지 모호하기 때문에 qulifier value를 통해 구분하여 자동적으로 주입하게 한다.

public class Boy {
 private String name;
 private int age;

 //   getters and setters ...
}

public class College {

@Autowired
@Qualifier(value="tony")
 private Boy student;

  //   getters ...
}

<bean id="boy1" class="Boy">
 <qualifier value="rony"/>
 <property name="name" value="Rony"/>
 <property name="age" value="10"/>
</bean>

<bean id="boy2" class="Boy">
 <qualifier value="tony"/>
 <property name="name" value="Tony"/>
 <property name="age" value="8"/>
</bean>

<bean id="college" class="College">
</bean>

College 클래스에서 @Qualifier(value="tony")로 어노테이션을 추가하였다. Qualifier는 type으로 bean을 찾아 의존성을 주입하지 않고 의 value값으로 구분해서 주입한다.

@Resouce

@Autowired 어노테이션과 기능은 비슷하지만 다른 점이 있다. @Autowired 는 bean의 type에 따라 의존성주입을 하지만, @Resource 어노테이션은 beand의 unique한 id값을 통해 해당 bean을 의존성주입한다. 그렇다면, 어차피 @Autowired와 기능도 똑같고 같은 type의 bean이 여러개일 때 걱정도 안해도 되는 @Resource 어노테이션보다 왜 @Autowired 어노테이션을 더 많이 사용할까? 그 답은 Spring에서는 대부분 singleton bean으로 단 하나의 객체만을 생성하기 때문에 @Autowired 어노테이션을 더 자주 사용한다.

public class College {

  @Resource(name="boy1")
  private Boy student;

  //   getters and setters ...
}

<bean id="boy1" class="Boy">
 <property name="name" value="Rony"/>
 <property name="age" value="10"/>
</bean>

<bean id="boy2" class="Boy">
 <property name="name" value="Tony"/>
 <property name="age" value="8"/>
</bean>

<bean id="college" class="College">
</bean>

xml파일에서 bean의 unique한 id값을 @Resource(name="boy1")의 name값으로 bean의 id를 값으로 넘겨 해당 bean을 의존성주입한다.

Spring - Dependency Injection

Sat, 16 Oct 2010 00:00:00 GMT

SPRING

Dependency Injection

Dependency Injection 이란?

A클래스에서 B클래스에게 의존(depend)을 할 경우, 내부에 존재하는 필드(멤버 변수)에게 외부에서 값을 주입시켜주는 것을 말한다. 위에 말로는 설명이 부족하다. 아래 코드를 보며 이해해보겠다.

public class PetOwner {
    private AnimalType animal;
    
    public PetOwner() {
        /* 의존성 주입에서는 new 생성자를 사용하지 않는다. */
        this.animal = new Dog(); 
    }
}

위의 코드는 의존성주입이 아닌 의존성 주입을 이해하기 위한 코드이다.
위에 코드를 보면 현재 PetOwner()객체는 AnimalType객체에게 의존하고있다. 이러한 의존을 의존성이라고 하며, animal이라는 필드에게 값을 외부에서 넣어주는 것을 주입이라고한다.
이 말을 합쳐 의존성 주입, Dependency Injection이라고 말한다.
DI는 Spring framework에 의해 지원하는 디자인패턴이다.
DI를 통해 많은 객체들 사이의 coupling을 줄이고 framework에 의해 동적으로 의존성을 주입할 수 있다.

이제 좀 더 의존성 주입에 대해 알아보자.

위 그림을 보게되 Spring Container에서 각각의 객체 Bean A와 Bean B를 생성하고 A객체에서 B객체 사이에 외부에서 의존성 주입을한다. 이러한 설정은 위 그림에서는 xml config 파일 설정으로 한다.
위 그림을 코드로 살펴보자.

public class Dog implements AnimalType {
    ...
    }

public class Cat implements AnimalType {
    ...   
    }

public class PetOwner {
    private AnimalType animal;
    
    public PetOwner(AnimalType animal){
        this.animal = animal;
        }
    }

Bean Container에서는 위와 같이 Cat, Dog 객체를 생성한 후 PetOwner객체로 AnimalType의 animal필드에게 의존성주입을 하게된다.

Spring Container

Spring Container는 Spring 프레임워크의 핵심 컴포넌트이다. 주요기능으로 1. 객체를 생성 및 관리 2.객체의 의존성 주입이 있다.
Spring Container는 xml과 annotations등으로 표현할 수 있다. 객체를 관리하기 위해서 Container는 DI를 사용한다.

또한, Spring Container는 2가지의 타입이 있는데

BeanFactory
ApplicationContext
로 나뉜다.

ApplicationContext를 사용하여 container를 생성할 때는 아래의 코드를 사용한다.

ApplicationContext context = new ClassPathXmlApplicationContext("[xml config path]");

PetOwner person = (PetOwner) context.getBean("[bean id]");

new ClassPathXmlApplicationContext()의 인자로 xml config파일 경로를 넣어주고, context.getBean()메소드를 통해 bean의 id를 인자로 넘겨 bean을 받아온다.

Spring Container와 Dependecy Injection 순서도

위 그림을 설명하자면 main함수가 호출된 이후에 ApplicationContext가 container를 생성하고 생성된 container가 Dog객체와 Cat객체를 생성한다. 이후에 PetOwneranimal 클래스에서 의존성주입을 한다.

Dependency Injection의 장점

의존성을 줄일 수 있다.
- 의존성의 감소는 모든 코드를 수정해야하는 번거러운 일 감소에 비례한다.(즉, DI를 통해 많은 코드를 수정하지 않을 수 있다.)
코드의 재사용성
- 어떠한 인터페이스가 다른 곳에서도 구현이 필요할 경우 DI를 통해 코드를 변경할 필요가 없다.
읽기 쉬운 코드를 만들어준다.
테스트에 용이하다.
결합도(coupling)을 줄이면서 확장성을 높일 수 있다.
등등 정말 수도 없이 많은 장점이 있다.

Jay's Dev Blog | Feed

[React] 흔하디 흔한 투두리스트 아니고 로그인 - 2

loginContainer 컴포넌트 만들기

SignInForm 컴포넌트 만들기

요약

[백준 - 2667] 단지 번호 붙이기

[백준 - 2667] 단지 번호 붙이기

문제 설명

입력

출력

입력 예제

출력 예제

코드

[React] 흔하디 흔한 투두리스트 아니고 로그인 - 1

개요

redux action 만들기

redux reducer 만들기

root reducer로 여러개의 reducer 합치기

saga 구현하기

root saga로 여러개의 saga 합치기

요약

[백준 - 1966] 프린터 큐

[백준 - 1966] 프린터 큐

문제 설명

입력

출력

입력 예제

출력 예제

풀이

코드

[백준 - 11051] 이항계수 2

[백준 - 11051] 이항계수 2

문제 설명

입력

출력

입력 예제

출력 예제

풀이

코드

React - Redux 기본 용어 개념

Redux란

Redux에서 자주 사용되는 개념 정리

액션

액션 생성함수 (Action Creator)

Reducer

Store

Dispatch

Subscribe

프로그래머스 - 기능개발

프로그래머스 - 기능개발

문제 설명

제한 사항

입출력 예

입출력 예 설명

코드

Spring - Bean, Bean Scope, Spring Annotation

Bean 이란?

Spring에서 Bean의 속성

Spring Bean의 Scope

Dependency Injection methods

Spring Annotation을 사용하여 설정

@Required Annotation

@Autowired Annotation

@Autowired

하지만!!, 만약 같은 type을 가진 bean이 여러개일때는 Spring container가 값을 어떻게 주입할까?? 이 경우에는 Spring Container는 값을 주입하지 않고 에러를 발생시킨다. 이 문제를 @Qualifier 어노테이션을 사용하여 해결할 수 있다.

@Qualifier

@Resouce

Spring - Dependency Injection

SPRING

Dependency Injection

Dependency Injection 이란?

Spring Container

Spring Container와 Dependecy Injection 순서도

Dependency Injection의 장점