태야

PostgreSQL RLS 정책 - 데이터 조회 불가한 상황 해결하기

태욘이 — Thu, 22 May 2025 23:16:28 +0900

상황 - 오류 없는 빈 값 조회

현재 개인 사이드 프로젝트에서 Supabse를 사용해서 백엔드를 구성하고 있다. 사용자 프로필 정보를 담는 profiles 테이블을 만들었다. 이 propfiles 테이블의 데이터를 조회할 때, 본인꺼만 조회할 수 있도록 RLS 정책을 지정해 놓았다. 개발 중 웹훅 수신 로직에서 사용자 이메일 값을 기반으로 profile에서 사용자 id를 파싱 해야하는 상황이 생겼다. 이때 profiles에 접근해서 응답을 보니 항상 빈 배열 값이 나오는 문제가 생겼다.

원인 분석

Supabse의 profiles 테이블에 RLS(행 수준 보안)가 적용되어 있다.
RLS 정책이 "본인(로그인된 유저)만 자신의 profile을 select 할 수 있다."로 되어 있으면, 서버에서 웹훅(즉, 외부 시스템)이 호출할 때는 인증된 유저가 없으므로, 어떤 profile도 조회할 수 없다.

해결 방법

1. Service Role Key 사용

Supabse의 Service Role Key(서버 전용 시크릿 키)를 사용하면, RLS를 무시하고 모든 데이터에 접근이 가능했다.
현재는 Service Role Key를 사용하지 않는 supabse 객체를 클라이언트, 서버단 2개로 나누어서 사용 중이다.
이 방식은 서버에서만 사용해야 하며, 클라이언트에서는 절대 노출하면 안 된다.

import { supabaseAdmin } from '@/lib/supabase-server'; // Service Role Key 사용

const { data: userProfile } = await supabaseAdmin
  .from('profiles')
  .select('id')
  .eq('email', attr.user_email)
  .single();

2. 웹훅 전용 RLS 정책 추가

만약 Service Role Key를 사용하지 않고, 일반 API Key로만 접근해야 한다면,
웹훅에서 오는 요청의 IP나 특정 헤더, 혹은 별도의 인증 토큰을 기반으로 RLS 정책을 완화할 수 있다.
하지만, Service Role Key를 사용하는 것이 더 쉽고 안전하다.

결론

웹훅 등 서버에서 RLS를 우회해야 할 때는 Service Role Key를 사용하는 supabase client로 쿼리하기(쉽게 말해, 관리자용 supabse client)
모든 곳에서 Service Role Key를 사용하는 supabase client로 하지말고, 필요한 부분에서만 사용하기

적용 예시

import { supabaseAdmin } from '@/lib/supabase-server'; // Service Role Key 사용

let userId = '';
if (attr.user_email) {
  const { data: userProfile } = await supabaseAdmin
    .from('profiles')
    .select('id')
    .eq('email', attr.user_email)
    .single();
  userId = userProfile?.id ?? '';
}

CORS 개념 정리

태욘이 — Thu, 22 May 2025 22:54:58 +0900

개념

CORS는 Cross-Origin Resource Sharing의 약자로, 서로 다른 출처 간의 리소스 요청을 제어하기 위한 보안 기능이다. 브라우저는 보안상의 이유로 스크립트가 다른 도메인에 있는 리소스에 접근하는 것을 기본적으로 차단한다. 이 기본적인 보안 제한을 ‘동일 출처 정책(Same-Origin Policy)’라고 한다.

CORS는 이러한 동일 출처 정책의 제한을 우회할 수 있도록 서버에서 명시적으로 설정해, 브라우저가 다른 도메인에서 리소스를 요청하는 것을 허용하게 만드는 방법이다.

출처(Origin): 도메인, 프로토콜, 포트를 포함한 것을 의미한다. 예를 들어, http://example.com:3000과https://example.com:3000은 서로 다른 출처다.
동일 출처 정책 (Same-Origin Policy): 웹 페이지가 자신과 다른 출처의 리소스를 로드하는 것을 제한하는 브라우저의 보안 정책이다.

원인

클라이언트가 웹 서버에 다른 출처의 리소스에 접근하려고 할 때 발생한다. 브라우저가 서버에 요청을 보내고, 서버가 올바른 CORS 헤더를 포함하지 않으면 브라우저에서 요청이 차단된다.

예를 들어, 웹 애플리케이션의 클라이언트가 http://localhost:3000에서 실행 중이고, http://api.example.com으로 API 요청을 보내려고 할 때, 출처가 다르기 때문에 브라우저는 보안 정책에 의해 요청을 차단할 수 있다.

동작 방식

CORS 동작 방식은 브라우저와 서버 간의 HTTP 요청 및 응답 헤더를 통해, 서로 다른 출처에서 리소스를 공유하는 과정을 제어하는 것이다.

1. Simple Request(단순 요청)

특정 조건을 만족할 때 preflight 요청을 보내지 않고 바로 요청이 이루어진다. 특정 조건은 아래와 같다.

HTTP 메서드는 GET, POST, 또는 HEAD 여야 한다.
Content-Type 헤더가 다음과 같은 POST 요청
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
헤더는 브라우저가 자동으로 추가하는 안전한 헤더여야 하며, 여기에는 다음과 같은 제한이 있다.
- Accept, Accept-Language, Content-Language, Content-Type (application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나).

단순 요청에서는 브라우저가 요청을 보낼 때 Origin 헤더를 추가한다. 서버는 응답 시 해당 요청을 허용할지 여부를 결정하고, 다음과 같은 CORS 관련 헤더를 응답에 포함한다.

Access-Control-Allow-Origin: 요청을 허용할 출처를 지정( * 또는 특정 도메인).
Access-Control-Expose-Headers (선택적): 클라이언트에서 접근 가능한 응답 헤더 목록을 지정.

브라우저는 서버의 응답에 Access-Control-Allow-Origin 헤더가 포함되어 있는지 확인하고, 클라이언트가 해당 출처의 리소스에 접근하는 것을 허용할지 결정한다.

2. Preflight Request(사전 요청)

브라우저가 보안 확인을 위해 실제 요청을 보내기 전에 서버에 미리 허락을 구하는 요청이다. 주로 민감한 요청에 대해 사용되며, 다음과 같은 경우에 발생한다.

요청 메서드가 GET, POST, HEAD가 아닌 다른 메서드인 경우 (PUT, DELETE, OPTIONS 등)
요청 헤더가 안전하지 않은 커스텀 헤더를 포함하는 경우 (예: Authorization, Content-Type이 JSON 등)
요청에 Credentials (쿠키, 인증 토큰 등)이 포함된 경우

프리플라이트 요청은 OPTIONS 메서드를 사용해 서버에 보내진다. 이 요청은 브라우저가 실제 요청을 보내도 안전한지 확인하기 위해 서버에게 허락을 구하는 과정이다. 프리플라이트 요청에서는 다음과 같은 헤더가 사용된다.

Request Header(브라우저 → 서버)

Origin: 요청을 보낸 출처.
Access-Control-Request-Method: 실제 요청에서 사용하려는 HTTP 메서드.
Access-Control-Request-Headers (선택적): 실제 요청에서 사용될 추가 헤더 목록.

서버는 이러한 프리플라이트 요청에 대해 다음과 같은 응답을 보내야 한다.

Response Header(서버 → 브라우저)

Access-Control-Allow-Origin: 허용된 출처(* 또는 특정 도메인)
Access-Control-Allow-Methods: 클라이언트가 사용할 수 있는 HTTP 메서드 목록 (GET, POST, PUT 등).
Access-Control-Allow-Headers: 허용된 헤더 목록 (예: Authorization, Content-Type).
Access-Control-Max-Age (선택적): 클라이언트가 프리플라이트 응답을 캐시할 시간 (초 단위).
Access-Control-Allow-Credentials: 클라이언트가 쿠키를 전송할 수 있도록 허용

서버가 프리플라이트 요청에 대해 성공적으로 응답하면, 브라우저는 실제 요청을 서버로 전송하게 된다!

CORS 요청 예시

브라우저가 CORS 요청을 보내고, 서버가 응답하는 예시다.

1. Simple Request 예시

클라이언트가 GET 요청을 보내는 경우
- 여기서 브라우저는 응답에 포함된 Access-Control-Allow-Origin 헤더를 확인하여 클라이언트에서 이 데이터를 사용할 수 있게 한다.

// 요청(client -> Server)
GET /api/data HTTP/1.1
Host: api.example.com
Origin: http://localhost:3000

// 응답(Server -> Client)
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://localhost:3000
Content-Type: application/json

{
  "message": "CORS 요청 성공"
}

2. Preflight Request 예시

// Preflight 요청(client -> Server)
OPTIONS /api/data HTTP/1.1
Host: api.example.com
Origin: http://localhost:3000
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: Authorization

// Preflight 응답(Server -> Client)
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Authorization
Access-Control-Max-Age: 86400

Access-Control-Allow-Origin: 해당 요청을 허용할 출처를 명시 (http://localhost:3000).
Access-Control-Allow-Methods: 허용 가능한 메서드(GET, POST, PUT, DELETE).
Access-Control-Allow-Headers: Authorization 헤더가 허용됨을 명시.
Access-Control-Max-Age: 86400초 동안 프리플라이트 응답을 캐시함.

Preflight 요청에 대한 성공적인 응답을 받은 후, 클라이언트는 실제 요청을 보낸다.

// 실제 요청(client -> Server)
DELETE /api/data HTTP/1.1
Host: api.example.com
Origin: http://localhost:3000
Authorization: Bearer token123

// 실제 응답(Server -> Client)
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://localhost:3000
Content-Type: application/json

{
  "message": "리소스가 삭제되었습니다"
}

CORS 관련 주요 HTTP 헤더 요약

Access-Control-Allow-Origin: 허용할 출처를 지정 (은 모든 출처를 허용).
Access-Control-Allow-Methods: 클라이언트가 사용할 수 있는 HTTP 메서드를 지정.
Access-Control-Allow-Headers: 클라이언트가 사용할 수 있는 추가 헤더를 지정.
Access-Control-Allow-Credentials: 클라이언트가 쿠키나 인증 정보를 서버로 전송할 수 있도록 허용.
Access-Control-Max-Age: 프리플라이트 요청의 응답을 캐시할 수 있는 시간을 지정 (초 단위).
Access-Control-Expose-Headers: 클라이언트에서 접근 가능한 응답 헤더를 지정.

해결 방법

1.서버 측에서 CORS 설정

서버가 올바른 CORS 헤더를 포함하도록 설정하는 것이 가장 일반적인 해결 방법이다.
예를 들어, Node.js/Express 서버에서는 다음과 같이 설정할 수 있다.

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); // 모든 출처에 대해 CORS 허용
// 또는 특정 출처만 허용하고 싶다면:
// app.use(cors({ origin: 'http://localhost:3000' }));

app.get('/api/data', (req, res) => {
  res.json({ message: 'CORS 설정 성공' });
});

app.listen(5000, () => {
  console.log('Server is running on port 5000');
});

2.프록시 서버 사용

클라이언트와 서버 간에 프록시 서버를 두어 요청을 중계함으로써 동일 출처 정책을 회피하는 방법이다.
개발 환겨에서 주로 사용되며, 예를 들어 React에서는 package.json 에 proxy 설정을 추가해 사용할 수 있다.

{
  "proxy": "http://api.example.com"
}

3.브라우저 확장 프로그램 사용(개발 환경)

Chrome 등 브라우저에서 제공하는 CORS 해제 확장 프로그램을 사용해 에러를 일시적으로 해결할 수 있다.
하지만, 이 방법은 개발 환경에서만 사용하는 것이 좋다. 보안상 이유로 운영 환경에서는 권장되지 않는다!

4.서버 설정 변경

Apache 또는 Nginx 같은 웹 서버를 사용하는 경우, 서버 설정 파일에서 CORS 헤더를 추가해야 한다.
Nginx의 경우

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

Access-Control-Allow-Credentials 사용 시 주의

클라이언트가 쿠키 또는 인증 정보를 서버로 보내기 위해서는 Access-Control-Allow-Credentials: true를 설정하고, Access-Control-Allow-Origin에 * 대신 특정 출처를 명시해야 한다.

정리

CORS는 브라우저 보안 정책으로 인해 발생하는 문제로, 클라이언트가 다른 출처의 리소스에 접근하려고 할 때 발생한다.
서버에서 CORS 헤더를 적절히 설정함으로써 이를 해결할 수 있다.
프록시 서버 사용이나 브라우저 확장 프로그램 같은 해결책이 있지만, 이는 개발 환경에서 주로 사용되며, 운영 환경에서는 서버에서 CORS 정책을 설정하는 것이 가장 바람직한 방법이다.

[백준 9375] 패션왕 신해빈 - Python(해시맵, 집합)

태욘이 — Mon, 17 Mar 2025 11:58:09 +0900

https://www.acmicpc.net/problem/9375

import sys

input = sys.stdin.readline

N = int(input().rstrip())
for _ in range(N):
    M = int(input().rstrip())
    clothes = {}

    for _ in range(M):
        (item, cloth_type) = list(input().rstrip().split())
        clothes[cloth_type] = clothes.get(cloth_type, 0) + 1

    result = 1
    for count in clothes.values():
        result *= (count + 1) #해당 종류의 의상을 선택하지 않는 경우 포함

    print(result - 1) # 아무 옷도 안 입는 경우 제외

의상 타입별 고르지 않는 경우도 카운트하는게 중요하다.

[백준 11478] 서로 다른 부분 문자열의 개수 - Python (해시맵)

태욘이 — Thu, 13 Mar 2025 15:50:02 +0900

https://www.acmicpc.net/problem/11478

1번째 풀이 - O(N^2)

import sys

input = sys.stdin.readline

S = input().rstrip()

for i in range(len(S)):
    if S[i] in result:
        result[S[i]] += 1
    else:
        result[S[i]] = 1

    if i == len(S) - 1:
        break

    current_string = S[i]

    for j in range(i + 1, len(S)):
        current_string = current_string + S[j]
        if current_string in result:
            result[current_string] += 1
        else:
            result[current_string] = 1

print(len(result))

시간복잡도 O(n^2)이 걸리는 풀이로 작성했다. 해당 코드를 python의 set 자료형을 활용하면 간단하게 작성할 수 있다.

python set() 활용 풀이 - O(N^2)

import sys

input = sys.stdin.readline

S = input().rstrip()

result = set()

for i in range(len(S)):
    for j in range(i + 1, len(S) + 1):
        result.add(S[i:j])
print(len(result))

set(집합) 자료형은 집합의 중복을 제거하고 순서를 보장하지 않는 리터럴 객체를 생성한다.

[백준 1158] 요세푸스 문제 - Python(큐, 링크드 리스트)

태욘이 — Tue, 11 Mar 2025 17:13:07 +0900

https://www.acmicpc.net/problem/1158

1차 풀이

from collections import deque
import sys
input = sys.stdin.readline
[N, K] = list(map(int, input().strip().split()))

def get_answer():
    numbers = deque(range(1, N+1, 1))
    deleted_numbers = []

    i = -1
    count = 0
    while len(deleted_numbers) != N:
        i += 1

        if i >= N:
            i = 0

        if numbers[i] not in deleted_numbers:
            count += 1
            if count == K:
                count = 0
                deleted_numbers.append(numbers[i])
                continue
    return "<" + ", ".join(map(str, deleted_numbers)) + ">"

print(get_answer())

문제점

- 효율성 문제

삭제 여부 확인 방식:
코드에서는 원래의 numbers 데크에서 값을 제거하지 않고, 별도의 deleted_numbers 리스트에 추가한 후, 매번 if numbers[i] not in deleted_numbers:로 삭제 여부를 확인한다. 이 방식은 리스트의 멤버십 검사가 O(n) 시간 복잡도를 가지므로, N이 5000과 같이 큰 경우 불필요하게 많은 연산을 수행하게 되어 성능 문제가 발생할 수 있다.
불필요한 자료구조 사용:
데크(deque)를 선언해두었지만, 데크의 효율적인 회전(rotate) 기능이나 popleft() 등을 활용하지 않고 단순히 인덱스 접근 방식으로 사용하고 있습니다

개선된 코드

from collections import deque
import sys
input = sys.stdin.readline
[N, K] = list(map(int, input().strip().split()))

def get_answer():
    dq = deque(range(1, N+1, 1))
    result = []

    while dq:
        for _ in range(K - 1):
            dq.append(dq.popleft())
        result.append(dq.popleft())


    return "<" + ", ".join(map(str, result)) + ">"

print(get_answer())

개선 효과

- 매번 불필요한 인덱스 접근이나 멤버십 검사를 하지 않아 시간 복잡도를 O(N)으로 줄일 수 있다.

Python rotate 메서드 활용 코드

from collections import deque
import sys

input = sys.stdin.readline
N, K = map(int, input().split())
dq = deque(range(1, N + 1))
result = []

while dq:
    dq.rotate(-(K - 1))  # K-1번 왼쪽으로 회전
    result.append(dq.popleft())

print("<" + ", ".join(map(str, result)) + ">")

요세푸스 문제는 원형 구조를 활용해 특정 규칙에 따라 요소들을 제거하는 시뮬레이션 문제인데, 그 개념 자체는 원형 연결 리스트 (circular linked list)와 매우 유사하다.

주요 포인트

원형 연결 리스트:
노드들이 원형으로 연결되어 있어 마지막 노드의 다음이 첫 번째 노드가 된다. 요세푸스 문제에서는 이 구조를 통해 K번째 원소를 계속해서 찾아 제거하는 과정을 구현한다.
시뮬레이션:
문제의 해결 방법은 실제로 원형 연결 리스트를 사용해 구현할 수도 있고, Python의 deque 같은 자료구조를 이용해 원형 큐의 동작(회전 및 제거)을 시뮬레이션하는 방식으로도 구현할 수 있다.
예를 들어, deque를 사용하면 rotate()나 popleft() 같은 메서드로 간단하게 원형 구조를 흉내낼 수 있다.
알고리즘 선택:
요세푸스 문제는 원형 연결 리스트를 이용하는 시뮬레이션 문제로 접근할 수 있지만, 경우에 따라 수학적인 공식을 활용해 더 효율적으로 풀 수도 있다. 단, 일반적으로 K가 임의의 값일 때는 시뮬레이션 방법이 가장 직관적이다.

[백준 3015] 오아시스 재결합 - Python(스택)

태욘이 — Sun, 9 Mar 2025 15:39:49 +0900

https://www.acmicpc.net/problem/3015

import sys

input = sys.stdin.readline
N = int(input().strip())
heights = list(int(input().strip()) for _ in range(N))

def get_answer():
    stack = [] #(높이, 동일 높이 연속 개수) 집합
    result = 0
    for h in heights:
        same_count = 1
        #현재 h보다 작은 사람들은 볼 수 없으므로 pop하고, 그들이 형성헀던 쌍의 수를 더함
        while stack and stack[-1][0] < h:
            result += stack[-1][1]
            stack.pop()

        # 같은 높이의 경우, 같은 높이 그룹의 사람들과는 모두 볼 수 있음
        if stack and stack[-1][0] == h:
            cnt = stack[-1][1]
            stack.pop()
            result += cnt # 같은 높이 사람들과의 쌍 추가

            # 만약 스택에 아직 사람이 남아 있다면, 그 다음 높이 같은 사람과도 볼 수 있음
            if stack:
                result += 1
            same_count = cnt + 1
        else:
            # 스택이 비어있지 않다면, 바로 앞 사람과는 항상 볼 수 있음
            if stack:
                result += 1
        stack.append((h, same_count))
    return result

print(get_answer())

이 알고리즘의 핵심은:

왼쪽부터 순회하면서 스택에 (높이, 동일 높이 연속 개수)를 저장한다.
현재 사람보다 작은 사람들은 pop하여 그동안 형성된 쌍을 결과에 더하고,
동일한 높이의 사람들은 하나의 그룹으로 묶어 개수를 관리한다.
남아 있는 스택의 최상단이 있다면 그 사람과는 볼 수 있으므로 1을 더한다.

이 방식은 각 사람을 한 번씩만 처리하여 O(N) 시간 내에 해결할 수 있다.

다음 큰 수(Next Greater Element) 문제 - Stack 활용

태욘이 — Thu, 6 Mar 2025 15:17:51 +0900

배열이나 리스트에서 각 원소에 대해 오른쪽에 있는 원소들 중 자신보다 크거나 같은(또는 보통은 '큰' 경우가 많지만, 변형으로 '크거나 같은' 조건을 쓰기도 한다) 첫 번째 원소를 찾는 문제다.

예시 문제 설명

예를 들어, 배열 A가 주어졌을 때A = [3, 5, 2, 7, 5]각 원소에 대해 오른쪽으로 이동하며, 처음 만나는 자신보다 크거나 같은 원소를 찾습니다.

- 3의 오른쪽에는 5, 2, 7, 5가 있는데, 처음으로 3보다 크거나 같은 수는 5입니다.
- 5의 오른쪽에는 2, 7, 5가 있는데, 2는 작으므로 건너뛰고, 다음 7은 5보다 크므로 7이 됩니다.
- 2의 오른쪽에는 7, 5가 있으므로 7이 첫 번째 큰(또는 같은) 수입니다.
- 7의 오른쪽에는 5만 있으나 5는 7보다 작으므로, 7은 오른쪽에 조건을 만족하는 원소가 없는 것으로 처리합니다.
- 마지막 원소인 5는 오른쪽에 아무 원소도 없으므로 조건을 만족하는 원소가 없습니다.

보통 조건을 만족하는 원소가 없을 경우 -1 또는 0 등 특정 값을 반환합니다.

단순하게 이중 반복문을 사용하면, 각 원소마다 오른쪽의 모든 원소를 확인해야 하므로 시간복잡도가 O(n^2)가 된다. 하지만 스택(stack)을 이용하면, 한 번의 순회로 각 원소를 효율적으로 처리할 수 있다.

스택을 사용하는 이유

스택의 특징
- 스택은 후입선출(LIFO) 구조다. 이 특성을 이용하면, 배열을 한 번 순회하면서 "아직 답을 찾지 못한 원소들의 인덱스"를 스택에 저장해 두고, 새로운 원소가 들어올 때마다 이전 원소들과 비교하여 조건(큰 혹은 큰/같은)을 만족하는지 빠르게 확인할 수 있다.
시간복잡도
- 각 원소는 스택에 한 번 push되고, 조건이 맞으면 pop되므로 각 원소가 스택에 들어가고 나오는 과정이 한 번씩 이루어집니다. 따라서 전체 시간 복잡도는 O(n)이 됩니다.

알고리즘 동작 과정

초기화:
빈 스택을 준비하고, 결과를 저장할 배열을 초기화한다. 결과 배열은 각 원소의 "다음 큰(또는 같은) 수"의 인덱스나 값을 저장할 수 있다.
배열 순회:
배열의 인덱스를 0부터 n-1까지 순회한다.
- 현재 원소와 비교:
  현재 원소(A[i])가 들어왔을 때, 스택의 최상단에 있는 인덱스(예: j)를 확인한다.
  - 만약 A[i]가 A[j]보다 크거나(또는 크거나 같은) 하면, A[i]는 A[j]의 조건(다음 큰 또는 같은 수)을 만족하는 원소가 된다.
    따라서 결과 배열의 j번째 위치에 A[i] 또는 인덱스 i를 저장하고, 스택에서 j를 pop한다.
  - 이 과정을 스택이 비거나, 스택의 최상단 원소가 현재 원소보다 크거나 같은 조건을 만족할 때까지 반복한다.
- 현재 인덱스 push:
  그 후, 현재 인덱스 i를 스택에 push한다.
후처리:
배열 순회가 끝난 후에도 스택에 남아있는 인덱스들은 오른쪽에 조건을 만족하는 원소가 없는 경우다. 이 경우, 결과 배열에 -1 또는 0을 기록한다.

Python 코드 예시

def next_greater_or_equal(arr):
    n = len(arr)
    result = [-1] * n  # 조건을 만족하는 원소가 없으면 -1로 처리
    stack = []  # 인덱스를 저장하는 스택

    for i in range(n):
        # 현재 원소 arr[i]가 스택의 최상단 원소보다 크거나 같으면 조건을 만족
        while stack and arr[stack[-1]] <= arr[i]:
            idx = stack.pop()
            result[idx] = arr[i]
        stack.append(i)
    
    return result

# 예시 실행
A = [3, 5, 2, 7, 5]
print(next_greater_or_equal(A))  # 출력 예: [5, 7, 7, -1, -1]

위 글을 요약하자면 다음과 같다.

문제: 각 원소에 대해 오른쪽에서 처음으로 자신보다 크거나 같은 원소를 찾는 문제.
단순 방법: 이중 반복문을 사용하면 O(n^2) 시간복잡도.
스택 사용: 스택을 이용하면 각 원소가 한 번씩만 처리되므로 O(n) 시간복잡도로 해결 가능.
핵심: 스택에 아직 답을 찾지 못한 원소의 인덱스를 저장하고, 새 원소가 들어올 때마다 조건에 맞는 이전 원소들을 처리.

[백준 6198] 옥상 정원 꾸미기 - Python(스택)

태욘이 — Thu, 6 Mar 2025 15:03:32 +0900

https://www.acmicpc.net/problem/6198

이 문제는 "다음 큰(또는 같은) 수(Next Greater or Equal Element)" 문제다. 배열이나 리스트에서 각 원소에 대해 오른쪽에 있는 원소들 중 자신보다 크거나 같은(또는 보통은 '큰' 경우가 많지만, 변형으로 '크거나 같은' 조건을 쓰기도 한다) 첫 번째 원소를 찾는 문제이다.

1. 단순 탐색 풀이 - O(n^2)

from functools import reduce
import sys

input = sys.stdin.readline
N = int(input().strip())
heights = list(int(input().strip()) for _ in range(N))

def get_answer():
    results = []

    while heights:
        height = heights.pop(0)
        count = 0
        for i in range(len(heights)):
            if heights[i] < height:
                count += 1
            else:
                break
        results.append(count)
    print(reduce(lambda acc, value: acc + value, results))

2. 스택 이용 최적화 풀이 - O(n)

from functools import reduce
import sys

input = sys.stdin.readline
N = int(input().strip())
heights = list(int(input().strip()) for _ in range(N))

def get_answer():
    stack = []
    total_visible = 0

    for i in range(N - 1, -1, -1):
        # 현재 빌딩보다 낮은 빌딩들은 스택에서 제거
        while stack and heights[stack[-1]] < heights[i]:
            stack.pop()

        # 스택에 차단 빌딩이 있으면 그 위치까지 빌딩 수 계산
        if stack:
            visible = stack[-1] - i - 1
        else:
            # 오른쪽의 모든 빌딩이 보이는 경우
            visible = N - i - 1
        total_visible += visible

        # 현재 빌딩 인덱스를 추가
        stack.append(i)

    return total_visible

print(get_answer())

스택을 활용하면 오른쪽에서 왼쪽으로 한 번의 순회로 각 빌딩의 보이는 옥상 수를 구할 수 있어 전체 시간복잡도를 O(n)으로 최적화할 수 있다.
이 방법은 각 빌딩이 스택에 단 한 번 들어가고 한 번씩만 제거되므로 효율적이다.

[백준 2493] 탑 - Python(스택)

태욘이 — Thu, 6 Mar 2025 00:14:53 +0900

https://www.acmicpc.net/problem/2493

1. 단순 탐색 풀이 - O(n^2)

시간복잡도 O(n^2)를 가지는 모든 요소를 탐색하는 방식으로 풀이했다. 당연히, 시간초과로 실패했다.

N = int(input().strip())
heights = list(map(int, input().strip().split()))

def get_answer():
    answer = [0 for _ in range(N)]
    for i in range(len(heights), 0, -1):
        if i == 1:
            break
        current_top = heights[i - 1]
        for j in range(i - 1, 0, -1):
            left_top = heights[j - 1]
            if left_top >= current_top:
                answer[i - 1] = j
                break
    print(" ".join(map(str, answer)))

get_answer()

2. 스택 이용한 풀이 - 최악 O(n^2), 최선 O(n)

스택을 사용하면 각 요소를 한 번만 처리(삽입/삭제)하게 되어, 이미 검사한 요소들을 재검사하지 않아도 된다.

일반적으로 스택 기반 알고리즘에서는 리스트를 한 번 순회하며, 현재 요소보다 작은(또는 큰) 후보들은 스택에서 제거하는 식으로 진행하여, 각 요소가 스택에 한 번 push되고 최대 한 번 pop되도록 한다.

최악의 경우:
예를 들어, 만약 리스트가 내림차순 정렬되어 있다면, 각 요소마다 내부 for 루프가 거의 전체 남은 요소를 검사하게 된다.
따라서 전체 연산 횟수는 약 n+(n−1)+(n−2)+…+1=O(n^2)가 된다.

N = int(input().strip())
heights = list(map(int, input().strip().split()))

def get_answer():
    answer = [0 for _ in range(N)]

    while heights:
        height = heights.pop()

        for i in range(len(heights) - 1, -1, -1):
            if height < heights[i]:
                answer[len(heights)] = i + 1
                break

    print(" ".join(map(str, answer)))

get_answer()

3. 스택 이용한 풀이 - 최적화 O(n)

N = int(input().strip())
heights = list(map(int, input().strip().split()))

def get_answer():
    answer = [0 for _ in range(N)]
    stack = [] # 인덱스 저장

    for i in range(len(heights)):
        height = heights[i]
        # 스택에 있는 인덱스의 높이가 현재보다 작으면, 이들은 현재 탑의 신호를 받을 수 없음
        while stack and heights[stack[-1]] < height:
            stack.pop()

        # 스택이 남아 있으면, 스택의 최상단 인덱스가 현재 탑의 신호를 수신하는 탑이다
        if stack:
            answer[i] = stack[-1] + 1
        else:
            answer[i] = 0

        stack.append(i) # 현재 탑 인덱스 추가

    print(" ".join(map(str, answer)))

get_answer()

[알고리즘] DFS, BFS

태욘이 — Wed, 2 Oct 2024 16:53:46 +0900

DFS(Depth-First Search)와 BFS(Breadth-First Search)는 그래프나 트리 탐색에서 사용하는 대표적인 탐색 알고리즘이다. 두 알고리즘 모두 특정 노드를 방문하고, 그 노드와 연결된 다른 노드들을 탐색하는 방식으로 동작한다. DFS는 깊이를 우선으로 탐색하고, BFS는 너비를 우선으로 탐색한다.

1. DFS (Depth-First Search, 깊이 우선 탐색)

DFS는 탐색할 때 가능한 한 깊게 들어가는 방식으로 탐색한다. 즉, 한 경로를 따라 끝까지 가고, 더 이상 갈 곳이 없으면 다시 돌아와 다른 경로를 탐색한다. 이 방식은 재귀나 스택을 사용해 구현할 수 있다.

DFS 예시: 그래프 탐색

function dfs(graph, start, visited = new Set()) {
    // 현재 노드 방문 처리
    visited.add(start);
    console.log(start);

    // 현재 노드와 연결된 노드들을 재귀적으로 방문
    for (let neighbor of graph[start]) {
        if (!visited.has(neighbor)) {
            dfs(graph, neighbor, visited);
        }
    }
}
// 그래프 표현 (인접 리스트)
const graph = {
    1: [2, 3],
    2: [4],
    3: [5],
    4: [],
    5: []
}

dfs(graph, 1);  // 출력: 1 2 4 3 5

DFS의 시간 복잡도

시간 복잡도: O(V + E) (V는 노드 수, E는 간선 수)
그래프의 모든 노드를 방문하고 모든 간선을 처리해야 하기 때문에, 위와 같은 복잡도를 가진다.

2. BFS (Breadth-First Search, 너비 우선 탐색)

BFS는 탐색할 때 가까운 노드부터 차례대로 방문한다. 즉, 특정 노드에서 연결된 모든 노드를 먼저 탐색한 후, 그 다음 깊이의 노드들을 탐색한다. 이 방식은 큐(Queue) 자료 구조를 사용해 구현한다.

BFS 예시: 최단 경로 탐색

function bfs(graph, start) {
    const queue = [start]; // 탐색할 노드를 저장할 큐
    const visited = new Set(); // 방문한 노드를 저장할 집합
    visited.add(start);

    while (queue.length > 0) {
        const node = queue.shift(); // 탐색할 노드를 큐에서 꺼냄
        console.log(node);

        for (let neighbor of graph[node]) {
            if (!visited.has(neighbor)) {
                visited.add(neighbor);
                queue.push(neighbor);
            }
        }
    }
}

// 그래프 표현 (인접 리스트)
const graph = {
    1: [2, 3],
    2: [4],
    3: [5],
    4: [],
    5: []
};

bfs(graph, 1);  // 출력: 1 2 3 4 5

BFS의 시간 복잡도

시간 복잡도: O(V + E) (V는 노드 수, E는 간선 수)
모든 노드와 모든 간선을 한 번씩 방문하기 때문에 DFS와 마찬가지로 같은 복잡도를 가진다.

DFS와 BFS의 차이

탐색 방식: DFS는 깊이 우선으로 탐색하며, BFS는 너비 우선으로 탐색한다.
구현 방식: DFS는 재귀나 스택을 사용하고, BFS는 큐를 사용해 구현한다.
사용 사례:
- DFS는 경로 탐색(예: 미로 찾기)나 백트래킹이 필요한 문제에 적합하다.
- BFS는 그래프에서 최단 경로를 찾는 문제에 적합하다.

예시 문제

1. 미로 찾기

문제: N x M 크기의 미로가 주어질 때, 출발점에서 도착점까지 최단 경로를 찾으세요. 벽은 통과할 수 없으며, 상하좌우로만 이동할 수 있습니다.

// BFS
function shortestPath(maze, start, end) {
    const directions = [[0, 1], [1, 0], [0, -1], [1, 0]];
    const queue = [[start, 0]]; // [현재위치, 이동거리]
    const visited = new Set();
    visited.add(start.toString());

    while (queue.length > 0) {
        const [[x, y], distance] = queue.shift();

        if (x === end[0] && y === end[1]) return distance;

        for (let [dx, dy] of directions) {
            const newX = x + dx;
            const newY = y + dy;

            if (newX >= 0 && newY >= 0 &&
                newX < maze.length && newY < maze[0].length &&
                maze[newX][newY] === 0 && !visited.has([newX, newY].toString())
            ) {
                visited.add([newX, newY].toString());
                queue.push([[newX, newY], distance + 1]);
            }
        }
    }

    return -1; // 도착할 수 없는 경우
}

const maze = [
    [0, 1, 0, 0, 0],
    [0, 1, 0, 1, 0],
    [0, 0, 0, 1, 0],
    [0, 1, 1, 1, 0],
    [0, 0, 0, 0, 0]
];

console.log(shortestPath(maze, [0, 0], [4, 4]));  // 출력: 8 (최단 경로 거리)

2. 섬 개수 세기

문제: 2차원 배열에서 육지를 1, 바다를 0으로 나타내는 섬의 지도에서, 섬(연결된 1의 집합)의 개수를 구하세요.

// DFS
function numIslands(grid) {
    let count = 0;

    function dfs(grid, x, y) {
        if (x < 0 || y < 0 || x >= grid.length || y >= grid[0].length || grid[x][y] === '0') {
            return;
        }

        grid[x][y] = '0'; // 방문한 곳은 0 처리
        dfs(grid, x + 1, y);
        dfs(grid, x - 1, y);
        dfs(grid, x, y + 1);
        dfs(grid, x, y - 1);
    }

    for (let i = 0; i < grid.length; i++) {
        for (let j = 0; j < grid[0].length; j++) {
            if (grid[i][j] === '1') {
                count++;
                dfs(grid, i, j);
            }
        }
    }

    return count;
}

const grid = [
    ['1', '1', '0', '0', '0'],
    ['1', '1', '0', '0', '0'],
    ['0', '0', '1', '0', '0'],
    ['0', '0', '0', '1', '1']
];

console.log(numIslands(grid));  // 출력: 3 (3개의 섬)

[git] cherry-pick

태욘이 — Sat, 22 Jul 2023 17:19:26 +0900

cherry-pick

git cherry-pick <commit_hash>

git cherry-pick이란 다른 브랜치에 있는 커밋을 선택적으로 내 브랜치(현재 브랜치)에 적용시킬 때 사용하는 명령어다.

git cherry-pick <commit_hash_1> <commit_hash_2>

명령어 뒤에 commit hash를 나열해 주면 여러 개를 한 번에 적용시킬 수 있다.

git cherry-pick <commit_hash_1>...<commit_hash_4>

<commit_hash_1>...<commit_hash_4> 처럼 명령을 하면, 1번~4번 사이의 커밋들을 cherry-pick 하게 된다. 이때, hash1이 시간상 가장 빠른 커밋이고, hash1은 cherry-pick에 포함되지 않는다.

이 외에 대표적인 옵션들은 다음이 있다.

git cherry-pick <commit>: 해당 커밋을 현재 브랜치에 적용합니다.
git cherry-pick -n <commit>: 해당 커밋을 적용하지만 커밋을 생성하지 않습니다. (드라이 런 모드)
git cherry-pick -x <commit>: 적용된 커밋에 원본 커밋의 정보를 추가합니다.

conflict가 발생하는 경우

cherry-pick 하려는 커밋과 현재 브랜치 사이에 conflict가 발생할 수 있다. 이때 사용가능한 옵션이 두 가지가 있다고 한다.

conflict를 수정하고 cherry-pick 진행하기

이 경우는 merge를 할 때처럼, conflict난 파일들을 수정한다.
git add 로 수정된 코드를 git에 올린다.
git cherry-pick -continue 명령어를 통해 다시 진행시킨다.

cherry-pick 중단하기

git cherry-pick -abort 명령어를 사용해 중단시켜, cherry-pick 이전 상태로 돌아간다.

주의점

cherry-pick을 하는 경우 같은 내용을 갖고 있는 커밋이 여러 개 생기기 때문에, 나중에 누가 누굴 cherry-pick 했는지 모르는 상황이 생길 수 있다. 가능하다면 git rebase를 사용하는 방법이 좋다고 한다.

Singleton Pattern 개념 익히기

태욘이 — Thu, 6 Apr 2023 23:51:20 +0900

싱글톤 패턴은 디자인 패턴 중 하나로, 특정 클래스의 인스턴스가 전체 시스템에서 오직 '한 개'만 생성되도록 보장하는 것을 목적으로 한다. 이 패턴을 사용하면 전역 변수를 사용하지 않고도 특정 클래스의 인스턴스에 대한 전역 접근이 가능하며, 이를 통해 코드의 유연성과 유지 보수성을 높일 수 있다. 예를 들어 로깅 라이브러리를 구현할 때, 여러 곳에서 로그를 출력하게 된다고 해보자. 이때 각각의 로그 출력 메서드마다 로깅 객체를 생성된다면 시스템 리소스의 낭비가 발생할 수 있다. 따라서, singleton 패턴을 사용하여 로깅 객체를 전체 시스템에서 한 번만 생성하도록 보장할 수 있다.

다음은 Java로 나타낸 싱글톤 패턴의 예제 코드다.

public class Logger {
    // 인스턴스 변수
    private static Logger instance = null;
    
    // 생성자를 private로 만들어 다른 클래스에서 인스턴스 생성을 막는다.
    private Logger() {}
    
    // getInstance() 메소드를 통해 전역적으로 유일한 인스턴스를 반환한다.
    public staitc Logger getInstance() {
    	if(instance == null) {
        	instance = new Logger();
        }
        return instance;
    }
    
    // 로그를 출력하는 메소드
    public void log(String message){
    	System.out.println(message);
    }
}

// Logger 인스턴스를 가져와서 로그를 출력한다.
Logger logger = Logger.getInstance();
logger.log("Hello, world!");

위 예시에서, Logger 클래스는 생성자를 private으로 만들어 다른 클래스에서 인스턴스를 생성할 수 없도록 했다. 대신, getInstance() 메서드를 통해 전역적으로 유일한 인스턴스를 반환하도록 했다. 이렇게 함으로써, Logger 클래스의 인스턴스는 오직 한 개만 생성될 수 있도록 보장할 수 있다. 위의 코드에서 Logger 클래스의 인스턴스를 가져와서 로그를 출력하게 되는데, 이때 getInstance() 메서드를 사용해 전역적으로 유일한 인스턴스를 가져오도록 했다. 따라서, Logger 클래스의 인스턴스는 오직 한 개만 생성되며, 로그를 출력하는 코드에서는 이를 공유하여 사용할 수 있다.

Singleton 패턴의 장점은 다음과 같다,.

1. 전역적인 인스턴스

singleton 패턴은 전역적으로 하나의 인스턴스만을 유지하므로, 모든 코드에서 해당 인스턴스에 대해 접근할 수 있다.

2. 리소스 절약

객체를 여러 번 생성하지 않으므로, 시스템 자원을 절약할 수 있다.

3. 데이터 공유

하나의 인스턴스를 공유하기 때문에, 데이터를 공유하거나 데이터를 수정하기 용이하다.

Singleton 패턴의 단점은 다음과 같다.

1. 테스트가 어려움

전역적인 인스턴스를 사용하므로, 테스트할때 다른 인스턴스를 사용할 수 없어 테스트가 어려울 수 있다.

2. 결합도 증가

다른 객체와의 결합도가 높아지므로, 유지보수가 어려워질 수 있다.

3. 멀티스레딩 이슈

싱글톤 패턴을 사용할 때, 멀티스레드 환경에서 동시에 인스턴스를 생성하려는 이슈가 발생할 수 있다.

그럼 Singleton 패턴을 언제 사용하는 것이 좋을지에 대해 알아본다면 다음이 있다.

1. 전역적으로 사용되는 객체

어떤 객체가 전체 시스템에서 단 하나만 존재해야할 때 사용한다.

2. 자원의 낭비를 방지해야 할 때

객체를 여러 개 생성할 필요가 없으므로, 시스템 자원의 낭비를 방지하기 위해 싱글톤 패턴을 사용한다.

3. 공유 자원

싱글톤 패턴을 사용하여 전역적으로 인스턴스를 공유할 수 있다. 예를 들어, 로깅이나 설정 정보를 공유하는 경우에 사용하기 적합하다.

4. 동일한 객체의 상태를 유지할 때

싱글톤 패턴을 사용해 하나의 인스턴스를 사용하면, 해당 객체의 상태를 유지할 수 있다.

Singleton 패턴은 다음과 같은 특징을 가지고 있다.

클래스 내부에서 인스턴스를 생성하고, 외부에서 직접 생성할 수 없도록 생성자를 private으로 선언한다.
유일한 인스턴스에 접근하기 위한 public static 메서드를 제공한다.
인스턴스가 이미 생성되어 있으면 해당 인스턴스를 반환하고, 생성되어 있지 않으면 인스턴스를 생성한 후 반환한다.

다음은 TypeScript를 사용한 싱글톤 패턴 예제 코드다.

class Singleton {
    private static instance: Singleton;
    
    // 생성자를 private으로 선언해 외부에서 인스턴스 생성을 막는다.
    private constructor() {}
    
    // 인스턴스를 반환하는 메서드를 static으로 선언하여 전역적으로 접근할 수 있게한다.
    public static getInstance(): Singleton {
        if(!Singleton.instance) {
            Singleton.instance = new Singleton();
        }
        return Singleton.instance;
    }
    
    public doSomething(): void {
    	console.log("Singleton instance is doing something...");
    }
}

// Singleton 클래스의 인스턴스를 생성할 수 없다.
// const instance = new Singleton(); // Error: 'constructor' is private.

// Singleton 클래스의 인스턴스는 getInstance 메서드를 통해서만 생성한다.
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // true

instance1.doSomething(); // "Singleton instance is doing something..."
instance2.doSOmething(); // "Singleton instance is doing something..."

위 코드에서 Singleton 클래스를 정의하고, private 생성자를 선언해 외부에서 인스턴스 생성을 막는다. 인스턴스를 반환하는 getInstance 메서드를 static으로 선언해 전역적으로 접근할 수 있도록 한다. 이때, 인스턴스가 생성되어 있지 않은 경우에만 인스턴스를 생성하고 반환하게 한다.

실제로 인스턴스를 사용할 때에는 getInstance 메서드를 호출해 인스턴스를 생성하고, 반환된 인스턴스에서 메서드를 호출한다. 인스턴스는 한 번 생성되면 전역적으로 유지되므로, 여러 곳에서 같은 인스턴스를 사용할 수 있다.

Entity, Repository 개념 & 프론트엔드에 적용하기

태욘이 — Wed, 5 Apr 2023 06:53:14 +0900

Entity와 Repository는 개발에서 많이 사용되는 개념이다. Entity는 도메인 모델의 구성 요소로, 하나 이상의 속성을 가지며 유일하게 구분될 수 있는 식별자를 가지고 있다. Repository는 DB나 File system과 같은 저장소에 접근하는 객체이다. Repository는 Entity를 생성, 읽기, 수정, 삭제(CRUD)하는 데 사용된다.

예를 들어, 블로그 게시물을 저장하는 웹 애플리케이션을 만든다고 가정해보자. 이 애플리케이션에서는 게시물을 생성, 읽기, 수정, 삭제해야 한다. 게시물을 저장하는 DB가 있다면, Entity는 게시물을 나타내고 Repository는 DB에 접근하는 객체를 나타낸다. 여기서 Entity는 게시물의 속성을 가지고 있다. 예를 들어, 게시물의 제목, 내용, 작성자, 작성일 등이 게시물의 속성이 될 수 있다. 게시물의 식별자는 유일한 값을 가지며, 이를 통해 다른 게시물과 구분할 수 있다.

Repository는 DB와 같은 저장소에 접근하는 '객체'이다. 예를 들어, MySQL DB에 게시물을 조회하는 경우 Repository는 MySQL DB에 접근하여 데이터를 조회하고 변경하는 역할을 한다. Repository는 다음과 같은 인터페이스를 제공한다.

interface PostRepository {
    create(post: Post): Promise<Post>;
    findById(id: number): Promise<Post | null>;
    findAll(): Promise<Post[]>;
    update(post: Post): Promise<Post>;
    delete(id: number): Promise<boolean>;
}

위 인터페이스는 게시물을 생성, 조회, 수정, 삭제하는 메서드를 정의한다. create 메서드는 게시물을 생성하고, findById 메서드는 주어진 ID에 해당하는 게시물을 조회한다. findAll 메서드는 모든 게시물을 조회한다. update 메서드는 주어진 게시물을 수정하고, delete 메서드는 주어진 ID에 해당하는 게시물을 삭제한다.

이러한 Entity와 Repository 패턴은 도메인 모델과 데이터 액세스 로직을 분리하고, 단일 책임 원칙(Single Responsibility Principle)을 따르기 위해 사용된다. 이를 통해 코드의 가독성, 유지보수성, 확장성을 향상할 수 있다.

보통 프론트엔드에서는 Entity와 Repository 패턴을 직접적으로 적용하기보다는, Redux와 같은 상태관리 라이브러리를 사용해 상태를 관리한다. 하지만, 비즈니스 로직을 분리하고, 코드를 유지보수 가능한 상태로 유지하기 위해 Entity와 Repository를 적용할 수 있다. 예를 들어, 게시물을 생성하고 조회하는 간단한 React 애플리케이션을 만든다고 해보자. 이 애플리케이션에는 게시물을 생성, 목록 조회하는 기능을 제공한다.

먼저, Entity를 정의해 보자. 이 애플리케이션에서는 게시물이라는 모델이 필요하므로, 다음과 같은 'Post' 모델을 만들 수 있다.

interface Post {
  id: number;
  title: string;
  content: string;
  author: string;
  createdAt: Date;
}

다음으로 Repository를 정의해보자. 이 애플리케이션에서는 게시물 목록을 관리하기 위해 ‘PostRepository’를 만들어보자.

interface PostRepository {
  create(post: Post): Promise<Post>;
  findAll(): Promise<Post[]>;
}

여기서 ‘create’ 메서드는 새로운 게시물을 생성하고, ‘findAll’ 메서드는 모든 게시물을 조회하는 역할을 한다. 이 Repository를 구현하기 위해서는, 서버 API와 통신을 처리하는 클라이언트 코드를 작성해야 한다.

class ApiPostRepository implements PostRepository {
  async create(post: Post): Promise<Post> {
    const response = await fetch('/api/posts', {
      method: 'POST',
      body: JSON.stringify(post),
      headers: {
        'Content-Type': 'application/json',
      },
    });
    return response.json();
  }

  async findAll(): Promise<Post[]> {
    const response = await fetch('/api/posts');
    return response.json();
  }
}

위 ApiPostRepository 클래스는 HTTP API를 통해 게시물을 생성하고, 조회하는 역할을 수행한다. 이 클래스를 사용하여 게시물을 생성하고, 조회하는 React 컴포넌트를 작성할 수 있다. 간단한 예시 코드이다.

function PostList() {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    const repository = new ApiPostRepository();
    repository.findAll().then(setPosts);
  }, []);

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
          <p>By {post.author} on {post.createdAt.toISOString()}</p>
        </div>
      ))}
    </div>
  );
}

function PostForm() {
  const [post, setPost] = useState
	//..

[React Native] patch-package 사용

태욘이 — Wed, 7 Dec 2022 21:23:17 +0900

patch-package

서드파티 라이브러리를 커스텀한 상태가 배포상태에서도 지속되도록 관리해주는 패키지.

즉, node_modules에 수정한 사항이 git으로 관리되고 어떠한 실행 환경에서도 적용되도록 한다.

patch-package를 사용할 시 매번 버전이 달라질 때마다 patch 파일의 버전을 인스톨 되어 있는 버전과 맞춰줘야 하는 단점이 있다.

1. 설치

npm install —save-dev patch-package

2. 설정

// package.json

"scripts": {
	"postinstall": "patch-package", // 해당 스크립트 추가
},

3. 변경하고자 하는 패키지 코드 수정

패키지 코드를 원하는대로 수정한다.

4. patch 적용

npx patch-package [변경한 패키지 이름]

5. “patches”라는 폴더가 생기고, 폴더 안에 변경한 패치 내용이 저장되어 있음을 확인

6. node_moduels 을 지웠다가 npm install 해보면 자동으로 패치내용들이 적용되어 있음

주의) 수정한 패키지의 patches 버전과 package.json의 패키지 버전이 다르면 에러를 유발하니 버전 체크하는 것이 중요!

[React] 01. 리액트란 무엇인가?

태욘이 — Mon, 24 Jan 2022 23:55:27 +0900

서론

우선 리액트 공식 문서에서 리액트를 '사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리'로 소개하고 있다. SPA(Single Page Application)형태로 하나의 페이지에서 보여지는 컴포넌트 조합을 동적으로 바꿔가며 화면을 표현하는 형태다. Virtual DOM이라는 개념을 사용해 이러한 SPA를 구현하고 있다. 장, 단점이 존재하지만 자세한 내용은 나중에 다루도록 하겠다.

React 특징

1. Component 구조

2. JSX

3. Data Flow

4. Virtual DOM

1. Component

"컴포넌트"라고 불리는 작고 고립된 부품을 이용해 복잡한 UI를 구성하도록 해주는 것이 리액트이다. 컴포넌트에는 몇 가지 종류가 있다. 크게 2가지로 나누자면 '함수형 컴포넌트', '클래스형 컴포넌트'가 있다. 우선 클래스형 컴포넌트는 다음과 같은 구조를 가지고 있다. 아래에 간단한 예시를 작성해봤다.

class MyClassComponent extends React.Component {
    render() {
    	return(
            <div className="my-component">
            	<h1>Hello World!</h1>
                <ul>
                    <li>React!</li>
                    <li>React Native</li>
                </ul>
            </div>
        );
    }
}

이러한 컴포넌트는 재사용 가능하고 여러 컴포넌트들을 조합해 다양한 형태의 UI를 쉽게 만들 수 있다. 불필요한 반복적 코드를 줄이고 빠르게 UI를 구성할 수 있어 개발 생산성에 있어 장점을 가진다. 또한 작은 형태의 컴포넌트는 테스트하기 용이해 코드를 유지보수하기에도 도움이 된다. 아래에 여러 작은 컴포넌트를 조합한 예시 코드가 있다.

class App extends Component {
  render() {
    return (
      <Layout>
        <Header />
        <Navigation />
        <Content>
          <Sidebar></Sidebar>
          <Router />
        </Content>
        <Footer></Footer>
      </Layout>
    );
  }
}

2. JSX

리액트에서는 HTML의 태그 문법과 비슷한 형태로 ui 화면을 표현하고 있다. HTML과 비슷하지만 HTML과는 다르다. 리액트에서는 JSX라 하는 JavaScript를 확장한 문법을 사용한다. 간단하게 JavaScript이지만 화면을 표시하기 위해서 조금 더 확장된 개념이라고 보면 된다.

JSX란?
Javascript를 확장한 문법입니다.

React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

출처: React 공식문서

3. Data Flow - 단방향 데이터 바인딩

단방향 데이터 바인딩은 간단히 말해 데이터의 흐름이 한 방향으로만 이뤄진다. 부모 요소에서 자식 요소로 전달이 되고 적절한 Event를 통해 데이터를 갱신하게 된다. 양방향 바인딩은 앱의 규모가 커질수록 추적하기 어려워지고 그에 따라 복잡해지게 된다. 이런 단점을 보완해 데이터 흐름을 보다 예측 가능하도록 하고자 리액트에서 단방향 형태로 바인딩을 하도록 했다고 한다. 단방향, 양방향 각각 장, 단점이 존재하기에 사용하는 프레임워크나 라이브러리에 따라 사용되는 데이터 바인딩 형태도 다 다르다. 조금 더 깊은 내용은 검색을 하면 많이 나오니 참고하면 될 것 같다.

4. Virtual DOM

브라우저는 화면을 그리기 위해서 DOM(Document Object Model)이라는 개념을 사용한다. DOM은 HTML 파일 내용을 토대로 만들어지는데, JavaScript와 같은 스크립팅 언어로 수정할 수 있도록 만들어진, 웹 페이지의 객체 지향 표현이다. DOM은 브라우저가 화면을 그리기 위해서 필요한 정보가 트리 형태로 저장된 데이터다. DOM에 변화가 생기면 렌더 트리를 재생성하고 레이아웃을 만들고 다시 보여주는 과정이 반복된다. DOM 트리가 재생성되는 과정에서 모든 요소들이 다시 계산되고 많은 연산을 반복하게 되면서 비효율적이게 된다. React에서는 이런 불필요하고 비효율적인 방식을 개선하고자 Virtual DOM이라는 개념을 도입했다.

React에서 Virtual DOM은 UI의 이상적인 또는 가상의 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍적 개념이다. 뷰에서 변화가 생기면 실제 DOM에 적용되기 전 가상 DOM에서 먼저 적용이 되고 비교를 통해 최종적 결과가 실제 DOM으로 전달이 된다. 이런 DOM 관리 과정을 리액트 내에서 자동화, 추상화를 통해 불필요한 연산 비용을 줄이고 성능을 높이도록 해준다.

참고자료: 리액트 공식문서 - Virtual DOM

[2021 회고록] '새로운'것들이 많았던 2021년 서울살이

태욘이 — Sat, 1 Jan 2022 23:51:58 +0900

2021년이 어느덧 지나가고 2022년을 맞이하면서 회고를 작성하게 되었다. 처음으로 작성해보는 회고록이라.. 어떤 내용으로 채워나가야 할지 모르겠다. 작년에 있었던 일들을 하나씩 떠올리며 글을 작성하려고 한다.

불행 중 다행?

작년 1월, 2월 졸업을 앞두고 취직을 하기 위해 이곳저곳 이력서를 제출하고 면접을 보러 다니며 바쁘게 보냈다.

기억으로는 40~50개 정도 지원했던 것 같다. 친구들은 전공을 살려 취직을 했고, 나는 조금은 다른 길인 개발자로 진로를 정하면서 불확실성에 대한 두려움이 많았었다. 그래도 처음으로 내가 하고 싶었던 일이었고 지금이 아니면 계속해서 수동적으로 삶을 살 거 같아 공부를 열심히 했던 기억이 있다.

지원했던 회사들 중 몇 군데 면접 제의가 와서 서울과 대구를 왕복하며 면접을 보러 다녔다. 그렇게 첫 회사에 취직을 하게 됐다. 처음에는 원래 이런 식으로 일을 하는 것인가 싶었다. 아직 아무것도 모르는 상태였으니, 그냥 그런가 보다 하며 회사 생활을 했다. 동료 직원 분들도 다 좋으신 분들이었고 잘 지낼 수 있어 재밌었다. 하지만 회사가 경영적으로 문제가 있었는데.. 이 문제로 난 이직을 하게 됐다.(지금 생각해도 문제가 심히 많았다..) 첫 사회생활? 경험을 했다고 생각하고 빠르게 이직을 했다. 다른 분들도 다 이직을 하셨다고 알고 있다. ㅎ

새로운 회사, 첫 이직 도전!

2021년 6월, 첫 이직이자 나의 2번째 회사인 '반려생활'로 오게 됐다. 뭔가 생각했던 이직 과정보다 후다닥 빠르게 진행됐었다. 서류를 넣고 면접을 2번을 보고 합격하기까지 1주일 안에 이뤄졌다. 처음에는 솔직히 느낌이 살짝 싸했었다..ㅎㅎ 생각보다 너무 쉽게 이직을 해버려서 다들 이런가 하는 생각이 들었다. 아무튼, 성공적인 이직을 하고 현재까지 열심히 일 하고 있다!

처음 한 달 정도는 파일럿 과제를 수행하고 강의를 들었다. 로그인 페이지를 만드는 것이었는데 React와 TypeScript를 사용했다. 그리고 클래스형을 사용해 객체 지향 형태로 코드를 작성했었다. 간단할 줄 알았는데.. 쉽지 않았다.. 우선은 class 사용에 익숙하지 않았고 TypeScript 또한 처음으로 사용해봤기 때문이다. 이 과제를 수행하면서 레이아웃과 아키텍처에 대한 필요성을 알게 됐고, 그 외에 정말 많은 것들을 알게 됐다. 내가 여태 했던 것들은 정말 막? 하는 것이었던 걸.. 알 수 있었다. 아직까지도 갈 길이 멀다 ㅜㅜ

입사한 지 2달쯤 돼서 첫 일을 하게 됐다. React Native로 만든 앱 프론트 단을 담당하게 됐다. 간단한 것부터 시작해 조금씩 더 많은 작업들을 해나갔다. 일을 하면서 느낀 것들이 정말 많다. 그중 하나가 코드를 작성할 때 고려해야 할 것들이 정말 많고, 단순히 코드를 작성할 줄 안다고 일을 잘하는 게 아니라는 것이다.

React Native를 사용하면서 가장 답답했던? 부분이 자료나 예시를 찾기가 쉽지 않았던 것이다. 관련 라이브러리나 자료들이 업데이트가 엄청 많았고 그래서 사용하던 기능들 중 바꿔야하는 부분들이 생각보다 많았었다. 뭐가 이리도 빠르게 바뀌는지.. 그래도 코드를 작성하고 배포, 빌드, 테스트까지 직접 해볼 수 있었고 그런 것들이 많은 공부가 됐다. 배포하니까 생각난 건데 안드로이드 배포할 때 구글 정책 때문에 reject을 진짜 수 없이 당했다..하.. 처음 2~3번은 그럴 수 있지 하다가 어느새 짜증이 났었다ㅎ

거절 사유에 대한 명확한 정보를 주지 않고 거절만 하니 정말 답답했었다. 불과 몇일 전인 12월에도 새 버전이 같은 정책 사유(유저가 직접 콘텐츠를 만들고 참여하는 부분이 있으면, 유저나 콘텐츠에 대해 신고/차단 기능이 있어야 한다)로 거절당했다. 을의 입장이니 어쩌겠나.. 따라줘야지..ㅜㅜ 그래도 덕분에 '이런 문제도 고려해야 하는구나' 알게 됐으니 좋게 생각하고 있다.

1년간의 서울살이..그리고 2022년!

서울에 올라와 많은 일도 있었고 좋은 사람들도 많이 만났던 한 해였다. 좋은 기억들만 남기고 새해에는 더 알차게 보내고자 한다. 2022년에는 해보고 싶은 일들을 다 진행하고 또 많은 사람들도 만났으면 좋겠다. 그리고 개발자로서 자기개발도 꾸준히 하고 계획한 것들을 착실하게 이루면서 인생에 있어 중요한 시점이 되는 한 해가 되길 바란다. 내년 이맘때쯤 작성할 새로운 회고록에 좋은 것들만 있었으면 좋겠다. 돈도 많이 벌고 여행도 많이 다닐거다!!

[React] react-testing-library 사용법 및 기본 개념

태욘이 — Sat, 10 Jul 2021 13:52:40 +0900

리액트에서 테스트를 위해서 많이 사용하는 도구 중 하나인 React Testing Library에 대한 포스트입니다.

테스트에 사용되는 라이브러리들이 많으니 각자 본인에게 맞는 것을 활용해 공부하며 적용해 보는 것이 좋을 것 같습니다.

아래에 리액트 공식 사이트에서 사용되는 테스트 유틸 및 라이브러리 예시를 확인해보세요.

Enzyme: React를 위한 JavaScript 테스트 유틸.
Jest: React를 포함한 JavaScript 테스트 프레임워크.
react-testing-library: 가벼운 React DOM 테스트 유틸.
React-unit: React를 위한 가벼운 단위테스트 라이브러리.
Skin-deep: 얕은 렌더링을 지원하는 React 테스트 유틸.
Unexpected-react: React 컴포넌트와 이벤트를 발생시켜주는 플러그인.

설치

yarn add @testing-library/react @testing-library/jest-dom

npm install --save react-testing-library @testing-library/jest-dom

npm 또는 yarn을 이용해 react-testing-library를 설치한다. react-testing-library 가 @testing-library/react 로 변경되었으니 주의!

jest-dom 도 @testing-library/jest-dom 으로 변경됐다고 한다.

react-testing-library는 '사용자 관점'에서 테스트를 진행한다. 보통 Enzyme를 이용한 테스트 방식은 상태값, 상태 변수에 대해 테스트를 한다. 하지만 전자는 상태 관리는 컴포넌트의 구현 세부사항일 뿐이다. 즉, 상태 변수가 언제든 다른 컴포넌트로 옮겨지거나, react에서 vue.js로 바뀌더라도 테스트에는 문제가 없어야한다.

다양한 쿼리

getBy* 쿼리 (ex. getByTestId, getByText, getByRole): 이 함수들은 동기적(synchronous)이며 그 요소가 현재 DOM 안에 있는지 확인한다. 즉, 현재상태만 확인한다. 그렇지 않으면 에러를 발생시킨다.
findBy* 쿼리 (ex. findByText): 이 함수들은 비동기적(asynchronous)이다. 그 요소를 찾을 때까지 일정 시간(기본 5초)을 기다린다. 만약 그 시간이 지난 후에도 요소를 찾을 수 없으면 에러를 발생시킨다.
queryBy* 쿼리: 이 함수들은 getBy* 처럼 동기적이다. 하지만 요소를 찾을 수 없어도 에러를 발생시키지 않는다. 단지 null 값을 리턴한다.

테스트 디버깅하기

render(<SomeComponent />);
screen.debug(); //원하는 실행 지점에서 DOM트리를 console에 출력해, 디버깅할 수 있다.

screen.debug() 는 브라우저의 개발 도구처럼 편리하고 상호작용적이진 않지만, 테스트 환경에서 어떤 일이 일어나고 있는지 확실히 알 수 있도록 도와준다.

const link = screen.getByRole('link', { name: /how it works/i });
screen.debug(link);

위와 같이 debug 함수에 파라미터를 전달하면 해당 요소만을 콘솔에 출력해준다.

Mocking

jest.fn: Mock a function
jest.mock: Mock a module → 자동적으로 모듈의 모든 함수를 mocking 해준다.
jest.spyOn: Spy or mock a function → 마찬가지로 모든 함수를 mocking 해주면서, 원래의 함수를 다시 복원할 수도 있다.

가장 기본적인 사용 방식은 함수를 mock 함수로 재할당하는 것이다. 재할당 된 함수가 쓰이는 어디서든지 mock 함수가 원래의 함수 대신 호출 될 것이다.

예시

jest.fn() mocking

// app.js
import * as math from './math.js';

export const doAdd      = (a, b) => math.add(a, b);
export const doSubtract = (a, b) => math.subtract(a, b);
export const doMultiply = (a, b) => math.multiply(a, b);
export const doDivide   = (a, b) => math.divide(a, b);

// math.js
export const add      = (a, b) => a + b;
export const subtract = (a, b) => b - a;
export const multiply = (a, b) => a * b;
export const divide   = (a, b) => b / a;

// app.test.js

import * as app from "./app";
import * as math from "./math";

math.add = jest.fn();
math.subtract = jest.fn();

test("calls math.add", () => {
  app.doAdd(1, 2);
  expect(math.add).toHaveBeenCalledWith(1, 2);
});

test("calls math.subtract", () => {
  app.doSubtract(1, 2);
  expect(math.subtract).toHaveBeenCalledWith(1, 2);
});

jest.mock() mocking

jest.mock('./math.js');

위의 코드로 mocking하는 것은 본질적으로 아래 코드처럼 하는거랑 같다.

export const add      = jest.fn();
export const subtract = jest.fn();
export const multiply = jest.fn();
export const divide   = jest.fn();

// app.test.js

import * as app from "./app";
import * as math from "./math";

// Set all module functions to jest.fn
jest.mock("./math.js");

test("calls math.add", () => {
  app.doAdd(1, 2);
  expect(math.add).toHaveBeenCalledWith(1, 2);
});

test("calls math.subtract", () => {
  app.doSubtract(1, 2);
  expect(math.subtract).toHaveBeenCalledWith(1, 2);
});

[JavaScript] Jest를 사용한 테스트 코드 짜기!

태욘이 — Sun, 4 Jul 2021 21:25:05 +0900

참고로 이 글에서 말하는 테스트는 React환경에서 사용하기 위한 방법을 공부한 것을 정리했다.

우선, Jest를 설치한다.

npm install --save-dev jest

yarn add --dev jest

다음으로 간단한 예시로 sum.js 파일을 하나 만들고, 다음과 같이 작성한다.

function sum(a, b) {
  return a + b;
}

이제 위의 코드를 테스트하기 위한 sum.test.js 테스트 파일을 하나 생성한다.

const { sum, sumOf } = require("./sum");

//test, it --> 새로운 테스트 작성
test("adds 1 + 2 to equal 3", () => {
	expect(sum(1, 2)).toBe(3);
});

앞서 만든 sum함수를 import해온 다음 테스트 구문에 활용해 제대로 원하는 결과가 테스트되는지 확인하는 코드이다.

이제 테스트 코드를 실행해볼 차례인데, 다음과 같이 pakage.json파일에 추가해준다.

"scripts": {
	"test": "jest"
}

아래 명령어를 통해 테스트를 실행하도록 한다.

npm run test

테스트 코드가 제대로 통과가 된다면, 다음과 같은 결과가 나타날 것이다. 참고로 아래 결과는 VSCode를 사용했을 때 나타난 결과이다.

PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

추가적으로 describe를 사용을 해보기 위해 sum.js파일에 새로운 함수를 추가해주자. 여기서 describe 메서드는 여러 테스트 케이스를 묶어주는 기능을 한다.

// sum.js

function sum(a, b) {
  return a + b;
}

// 배열의 합
function sumOf(numbers) {
  return numbers.reduce((acc, current) => acc + current, 0);
}

module.exports = { sum, sumOf };

그리고 테스트 코드 역시 수정해주고, 실행을 하게 되면 테스트 결과가 나타난다.

// sum.test.js
const { sum, sumOf } = require("./sum");

describe("sum", () => {
  it("calculates 1 + 2", () => {
    expect(sum(1, 2)).toBe(3);
  });

  it("calculates all numbers", () => {
    const array = [1, 2, 3, 4, 5];
    expect(sumOf(array)).toBe(15);
  });
});

test 대신 it을 사용해도 같은 기능이다. 다만 it을 사용하게 되면, 테스트 케이스 설명을 영어로 작성할 경우 "말이 되게" 매끄럽게 작성 가능해져 사용한다고 한다.

[TypeScript] 기본 타입 (Basic Types)

태욘이 — Tue, 22 Jun 2021 22:46:00 +0900

Boolean

let isDone: boolean = false;

Number

타입스크립트에서 숫자는 부동 소수점 값 또는 BigInteger 값이다. 16진수, 10진수, 8진수, 2진수 타입도 지원한다.

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;

String

자바스크립트와 똑같이 double quotes(""), single quotes('')로 문자열을 감싼다.

let color: string = "blue";
color = 'red';

마찬가지로 backtick (`${ expr }`) 형태로 사용하면 된다.

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.

I'll be ${age + 1} years old next month.`;

Array

let list: number[] = [1, 2, 3];

let list: Array<number> = [1, 2, 3]; //제네릭 타입방식

유니언 타입(다중 타입)의 ‘문자열과 숫자를 동시에 가지는 배열’도 선언할 수 있다.

// Union 이용한 배열
let array: (string | number)[] = ['Apple', 1, 2, 'Banana', 'Mango', 3];

let array: Array<string | number> = ['Apple', 1, 2, 'Banana', 'Mango', 3];

배열이 가지는 항목의 값을 단언할 수 없다면 any를 사용할 수 있다.

let array: any[] = [0, 1, {}, [], 'str', false];

인터페이스(Interface)나 커스텀 타입(Type)을 사용할 수도 있다.

interface IUser {
  name: string,
  age: number,
  isValid: boolean
}

let userArr: IUser[] = [
  {
    name: 'Jiho',
    age: 25,
    isValid: true
  },
  {
    name: 'Juliet',
    age: 42,
    isValid: false
  },
  {
    name: 'Evan',
    age: 52,
    isValid: true
  }
];

readonly 키워드나 ReadonlyArray 타입을 사용해 읽기 전용 배열을 생성할 수도 있다.

let arrA: readonly number[] = [1, 2, 3, 4];
let arrB: ReadonlyArray<number> = [0, 5, 5, 2];

arrA[0] = 123; // Error - TS2542: Index signature in type 'readonly number[]' only permits reading.
arrA.push(123); // Error - TS2339: Property 'push' does not exist on type 'readonly number[]'.

arrB[0] = 123; // Error - TS2542: Index signature in type 'readonly number[]' only permits reading.
arrB.push(123); // Error - TS2339: Property 'push' does not exist on type 'readonly number[]'.

Tuple

배열 요소의 수가 고정된 형태의 자료형이다. 각각의 요소별로 타입을 지정해주면 된다.

// Declare a tuple type
let x: [string, number];

// Initialize it
x = ["hello", 10]; // OK

// Initialize it incorrectly
x = [10, "hello"]; // Error

Enum

특정 값들의 집합을 의미하는 자료형이다. 타입스크립트에서는 문자형 이넘과 숫자형 이넘을 제공 한다.

enum Color {
  Red, //0
  Green, //1
  Blue, //2
}
let c: Color = Color.Green;

기본적으로 enum은 인덱스 번호가 0번부터 시작하지만, 따로 지정해 변경해줄 수 있다. 또는 모든 값에 수동으로 설정해주는 것도 가능하다. 이때 번호 대신 문자열도 지정 가능하지만, 모든 값에 설정해줘야만 한다는 것을 주의해야 한다.

enum Color {
  Red = 1,
  Green, //2
  Blue, //3
}
let c: Color = Color.Green;

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}
let c: Color = Color.Green;

enum Color {
  Red = "red",
  Green = "green",
  Blue = "blue",
}

리버스 매핑(Reverse Mapping) - 숫자형 이넘에만 존재하는 특징이다. enum의 키(key)로 값(value)을 얻을 수 있고 값(value)으로 키(key)를 얻을 수도 있다. enum 요소에 해당하는 번호를 통해 값을 얻을 수 있다.

enum Color {
  Red = 1,
  Green,
  Blue,
}
let colorName: string = Color[2];

// Displays 'Green'
console.log(colorName);

Void

일반적으로 값을 반환하지 않는 함수에서 사용한다. : void 위치는 함수가 반환 타입을 명시하는 곳이다.

값을 반환하지 않는 함수는 실제로는 undefined를 반환한다.

function hello(msg: string): void {
  console.log(`Hello ${msg}`);
}
const hi: void = hello('world'); // Hello world
console.log(hi); // undefined

Object

object는 원시 타입이 아닌 타입을 나타낸다. number, string, boolean, bigint, symbol, null, 또는 undefined 가 아닌 나머지를 의미한다.

declare function create(o: object | null): void;

create({ prop: 0 }); // 성공
create(null); // 성공

create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류

타입 단언(Type assertions)

컴파일러에게 개발자가 명확하게 타입에 대해서 알려주는 방법이다. 예를 들어 타입스크립트의 타입인 string가 아닌 조금 더 명확한 "some_type"이라고 하는 명확한 타입이라고 알려주는 경우다.

다른 언어의 타입 변환(형 변환)과 유사하지만, 다른 특별한 검사를 하거나 데이터를 재구성하지는 않는다. 이는 런타임에 영향을 미치지 않으며, 온전히 컴파일러만 이를 사용한다. 타입 스크립트는 개발자가 필요한 어떤 특정 검사를 수행했다고 인지한다.

타입 단언의 사용법은 2가지 경우가 있다.

- Angle Braket 형태

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

- as 형태

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

위 두 예제는 동일하며 어떤 것을 사용할지는 주로 선호에 따른 선택이다. 하지만 TypeScript를 JSX와 함께 사용할 때는, as-스타일의 단언만 허용된다.

Union

2개 이상의 타입을 지정해주고자 할 때 사용하며, OR연산자 | (vertical bar)를 를 사용해 타입들을 지정한다. 유니언 타입은 여러 타입 중 하나가 될 수 있는 값을 의미한다.

let union: (string | number);
union = 'Hello type!';
union = 123;

[백준 10866] 덱 - Python (Deque)

태욘이 — Thu, 20 May 2021 10:19:16 +0900

10866번: 덱

첫째 줄에 주어지는 명령의 수 N (1 ≤ N ≤ 10,000)이 주어진다. 둘째 줄부터 N개의 줄에는 명령이 하나씩 주어진다. 주어지는 정수는 1보다 크거나 같고, 100,000보다 작거나 같다. 문제에 나와있지

www.acmicpc.net

<내 코드>

import sys

class Deque:
    def __init__(self):
        self.result = list()

    def push_front(self, num):
        self.result.insert(0, num)

    def push_back(self, num):
        self.result.append(num)

    def pop_front(self):
        if(self.empty()):
            return -1
        else:
            return self.result.pop(0)

    def pop_back(self):
        if(self.empty()):
            return -1
        else:
            return self.result.pop()

    def front(self):
        if(self.empty()):
            return -1
        else:
            return self.result[0]

    def back(self):
        if(self.empty()):
            return -1
        else:
            return self.result[-1]

    def size(self):
        return len(self.result)

    def empty(self):
        if(self.size() == 0):
            return 1
        else:
            return 0


N = int(sys.stdin.readline())
deque = Deque()

for _ in range(N):
    input_split = sys.stdin.readline().split()
    oper = input_split[0]

    if(oper == 'push_front'):
        deque.push_front(int(input_split[1]))
    elif(oper == 'push_back'):
        deque.push_back(int(input_split[1]))
    elif(oper == 'pop_front'):
        print(deque.pop_front())
    elif(oper == 'pop_back'):
        print(deque.pop_back())
    elif(oper == 'front'):
        print(deque.front())
    elif(oper == 'back'):
        print(deque.back())
    elif(oper == 'empty'):
        print(deque.empty())
    elif(oper == 'size'):
        print(deque.size())

[백준 7568] 덩치 - Python (브루트포스)

태욘이 — Mon, 17 May 2021 11:05:29 +0900

7568번: 덩치

우리는 사람의 덩치를 키와 몸무게, 이 두 개의 값으로 표현하여 그 등수를 매겨보려고 한다. 어떤 사람의 몸무게가 x kg이고 키가 y cm라면 이 사람의 덩치는 (x, y)로 표시된다. 두 사람 A 와 B의 덩

www.acmicpc.net

<내 코드>

n = int(input())
arr = [list(map(int, input().split())) for _ in range(n)]

counts = [1 for _ in range(n)]

for i in range(n):
    for j in range(n):
        if((arr[i][0] < arr[j][0]) and (arr[i][1] < arr[j][1])):
            counts[i] += 1

print(*counts)

자신보다 키, 몸무게 모두 큰 사람 수를 단순히 모두 비교하면 되는 문제다.

[Redux] To Do List 예제 - TypeScript, React

태욘이 — Mon, 26 Apr 2021 14:54:52 +0900

순서

리덕스 리듀서 모듈 생성(Ducks Pattern) - 한 파일에 액션, 액션 생성 함수, 리듀서를 작성하는 방식
각 리듀서 모듈에서 액션타입(TS에서의 타입이 아님), 액션 생성 함수, 액션 객체 타입 선언(TS에서의 타입), 초기값, 기본값 타입들, 리듀서를 작성한다.
'루트 리듀서'역할을 하는 index.ts를 만들어, 리덕스의 combineReducers를 이용해 만든 리듀서 모듈들을 하나로 통합해 export 한다.
프로젝트 전체에 리듀서를 적용하고, 스토어에 접근 가능하도록 앱의 최상위 파일에서 store를 생성해 Provider를 이용해 적용시킨다.
필요한 컴포넌트들을 작성한다. 여기서, useSelector , useDispatch 를 이용해 각각 조금 더 쉽게 리듀서를 연결하고 스토어에 접근해 값을 사용하고, 액션을 발생시켜 상태를 변화시킨다.

리듀서 모듈 생성

리덕스 사용에 필요한 액션, 액션 생성함수, 리듀서를 한 파일에 작성한다. 이러한 방식을 'Ducks 패턴'이라 한다.

우선, 필요한 액션 타입을 상수로 설정한다.

const ADD_TODO = "todo/ADD_TODO" as const;
const REMOVE_TODO = "todo/REMOVE_TODO" as const;
const TOGGLE_TODO = "todo/TOGGLE_TODO" as const;

위와 같이 타입스크립트 문법인 Type Assertions(타입 단언)을 사용해 액션 타입에 대한 타입 추론의 범위를 줄여 string 타입이 아닌 명확히 액션 타입을 추론하도록 해준다. 액션 타입들을 상수화 시켜두면 추후에 코드 수정에 있어 용이해진다.

다음으로 액션 생성 함수를 작성한다. 모듈 외부에서 사용할 수 있도록 export 해준다. Context api나 Redux 에서 액션을 dispatch를 이용해 액션을 발생시킬 때 해당 액션 생성 함수들을 사용한다.

// Action Creators
export const addTodo = (text: string) => ({ type: ADD_TODO, payload: text });
export const removeTodo = (id: number) => ({ type: REMOVE_TODO, payload: id });
export const toggleTodo = (id: number) => ({ type: TOGGLE_TODO, payload: id });

다음으로 액션 객체에 대한 타입들을 설정해줘야 한다.

// 액션 객체 타입 설정
type TodoAction =
  | ReturnType<typeof addTodo>
  | ReturnType<typeof removeTodo>
  | ReturnType<typeof toggleTodo>;

ReturnType<T> 는 유틸리티 타입의 한 종류로서 전역적으로 사용 가능하다. 기능으로는 함수 T의 반환 타입으로 구성된 타입을 만들어준다. 아래에 간단한 예시를 살펴보자.

declare function f1(): { a: number, b: string }
type T0 = ReturnType<() => string>;  // string
type T1 = ReturnType<(s: string) => void>;  // void
type T2 = ReturnType<(<T>() => T)>;  // {}
type T3 = ReturnType<(<T extends U, U extends number[]>() => T)>;  // number[]
type T4 = ReturnType<typeof f1>;  // { a: number, b: string }
type T5 = ReturnType<any>;  // any
type T6 = ReturnType<never>;  // any
type T7 = ReturnType<string>;  // 오류
type T8 = ReturnType<Function>;  // 오류

ReturnType으로 인한 위의 액션 객체의 타입은 다음과 같이 될 것이다. 앞서 Type Assertions으로 const로 지정을 해주지 않았다면 제대로 동작하지 않을 수도 있다.

다음으로 리듀서 함수에 전달 할 state에 대해 필요한 타입과 초기값들을 지정해준다.

export type Todo = {
  id: number;
  text: string;
  isToggle: boolean;
};

export type Todos = Todo[];

export const initialState: Todos = [
  {
    id: 0,
    text: "타입스크립트 투두리스트",
    isToggle: false
  },
  {
    id: 1,
    text: "타입스크립트 리덕스",
    isToggle: false
  }
];

마지막으로 앞서 작성한 state와 action 객체에 대한 타입을 이용해 리듀서 함수를 작성한다.

// Reducer
export default function todoReducer(state: Todos = initialState, action: TodoAction): Todos {
  switch (action.type) {
    case ADD_TODO:
      const id = Math.max(...state.map((todo) => todo.id)) + 1; // 현재 있는 리스트 중 가장 큰 id값에 +1 한다.

      return state.concat({
        id,
        text: action.payload,
        isToggle: false
      });

    case REMOVE_TODO:
      return state.filter((todo) => todo.id !== action.payload);

    case TOGGLE_TODO:
      return state.map((todo) =>
        todo.id === action.payload
          ? { ...todo, isToggle: !todo.isToggle }
          : todo
      );

    default:
      return state;
  }
}

최종적인 리듀서 모듈의 코드는 다음과 같다.

// src/modules/todo.ts


// Action Type
const ADD_TODO = "todo/ADD_TODO" as const; // Type Assertions(현재 나타내는 타입보다 더 구체적인 타입을 나타내려 할 때 이용)
const REMOVE_TODO = "todo/REMOVE_TODO" as const;
const TOGGLE_TODO = "todo/TOGGLE_TODO" as const;

// Action Creators
export const addTodo = (text: string) => ({ type: ADD_TODO, payload: text });
export const removeTodo = (id: number) => ({ type: REMOVE_TODO, payload: id });
export const toggleTodo = (id: number) => ({ type: TOGGLE_TODO, payload: id });

// 액션 객체 타입 설정
// ReturnType --> 타입스크립트의 특정함수의 반환 타입을 추출해내는 제네릭 타입으로
// 이를 통해 interface 중복작성을 피할 수 있다.
type TodoAction =
  | ReturnType<typeof addTodo>
  | ReturnType<typeof removeTodo>
  | ReturnType<typeof toggleTodo>;

//---- 리듀서에 전달 할 state에 대한 처리 ----
export type Todo = {
  id: number;
  text: string;
  isToggle: boolean;
};

export type Todos = Todo[];

export const initialState: Todos = [
  {
    id: 0,
    text: "타입스크립트 투두리스트",
    isToggle: false
  },
  {
    id: 1,
    text: "타입스크립트 리덕스",
    isToggle: false
  }
];

// ------------------------------------

// Reducer
export default function todoReducer(
  state: Todos = initialState,
  action: TodoAction
): Todos {
  switch (action.type) {
    case ADD_TODO:
      const id = Math.max(...state.map((todo) => todo.id)) + 1;
      return state.concat({
        id,
        text: action.payload,
        isToggle: false
      });

    case REMOVE_TODO:
      return state.filter((todo) => todo.id !== action.payload);

    case TOGGLE_TODO:
      return state.map((todo) =>
        todo.id === action.payload
          ? { ...todo, isToggle: !todo.isToggle }
          : todo
      );

    default:
      return state;
  }
}

Root reducer 만들기

리덕스의 combineReducers를 이용해 만든 리듀서 모듈들을 하나로 통합해 만든 루트 리듀서 파일을 export 한다.

// src/modules/index.ts

import { combineReducers } from "redux";
import todoReducer from "./todo";

const rootReducer = combineReducers({
  // 여러 리듀서 모듈들을 하나로 병합한다.
  todoReducer
});

export default rootReducer;
export type RootState = ReturnType<typeof rootReducer>;

최상위 컴포넌트 Provider 감싸기

최상위 컴포넌트 파일인 루트의 index.tsx 파일에서 <Provider> 컴포넌트로 하위 모든 컴포넌트에서 store에 접근이 가능하게 해 준다.

// ./index.tsx

import { render } from "react-dom";
import React from "react";
import { Provider } from "react-redux";
import { createStore } from "redux";

import rootReducer from "./modules";
import App from "./App";

const store = createStore(rootReducer); // store 생성

const rootElement = document.getElementById("root");
render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

필요한 컴포넌트들 작성

Redux를 사용하기 위한 준비를 다 마쳤다. 이제 컴포넌트들을 작성하고 Redux 기능들을 활용하면 된다.

src 폴더 안에 components폴더를 만들고, TodoApp.tsx 와 TodoAppContianer.tsx파일을 만든다. 각각의 코드는 다음과 같다.

// /components/TodoApp.tsx

import React, { useState } from "react";
import { Todos, Todo } from "../modules/todo";
import { useDispatch } from "react-redux";
import { addTodo, toggleTodo, removeTodo } from "../modules/todo";

type Props = {
  todos: Todos;
};

const TodoApp = ({ todos }: Props) => {
  // 디스패치 함수에 파라미터로 액션객체를 넣어주면 스토어로 전달하여 액션을 발생시키고,
  // 리듀서 모듈에 이 액션이 있다면 새로운 상태로 바뀌게 되는것
  const dispatch = useDispatch();
  const [input, setInput] = useState("");

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    dispatch(addTodo(input));
    setInput("");
  };

  const handleClick = (id: number) => {
    dispatch(toggleTodo(id));
  };

  const handleRemove = (id: number) => {
    dispatch(removeTodo(id));
  };

  const done = {
    textDecoration: "line-through"
  };

  return (
    <>
      <div>
        <form onSubmit={(e) => handleSubmit(e)}>
          <input value={input} onChange={(e) => setInput(e.target.value)} />
          <button type="submit">등록</button>
        </form>
      </div>
      <div>
        {todos.map((todo) => {
          const { id, text, isToggle } = todo;
          return (
            <div
              key={id}
              onClick={() => handleClick(id)}
              style={isToggle ? done : undefined}
            >
              {text}
              <button onClick={() => handleRemove(id)}>삭제</button>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default TodoApp;

위의 코드에서 dispatch 함수의 인자로 '액션 생성함수(action creator)'를 넣어줬다. 즉, modules 폴더에서 작성한 리듀서 파일 안의 액션 생성 함수들의 결과로 '액션 객체' 값을 리턴 받아 dispatch 하게 된다. 그런 다음 reducer에서 액션 타입에 맞는 로직을 수행하게 되고 store의 상태 값을 변화시키게 된다.

// /components/TodoAppContainer.tsx

import React from "react";
import TodoApp from "./TodoApp";
import { useSelector } from "react-redux";
import { RootState } from "../modules";

const TodoAppContainer = () => {
  // useSelector :: 간단하게 리듀서 모듈과 연결해 데이터를 받아올 수 있다.
  const todos = useSelector((state: RootState) => state.todoReducer);
  return <TodoApp todos={todos} />;
};

export default TodoAppContainer;

useSelector는connect 를 통해 상태 값을 조회하는 것보다 훨씬 간결하게 작성하고 코드 가독성이 상승되는 장점이 있는 함수다.

최종적으로 다음과 같이 나타나게된다.

[Redux] Redux 개념 익히기

태욘이 — Sun, 28 Feb 2021 20:33:45 +0900

Redux는 애플리케이션 상태를 관리하기 위한 오픈 소스 JavaScript 라이브러리다.

1. Redux 등장 배경

리덕스가 등장하기 이전 프론트엔드에서 데이터 흐름(형상)을 관리하는 방식은 MVC 패턴이었다. MVC 패턴의 큰 특징 중 하나가 ‘양방향 데이터 흐름’이다. 모델이 변경된다면 뷰 또한 변경되고, 사용자에 의해 뷰에서 변경이 일어난다면 모델 또한 변경된다. 이러한 양방향 데이터 흐름은 설계하기 간단하고 코드 작성하기 쉬운 장점이 있다. 하지만 애플케이션 규모가 커진다면 문제가 생긴다. 한 개의 모델이 여러 개의 뷰를 조작하고 한 개의 뷰가 여러 개의 모델을 조작한다면 데이터 흐름을 이해하기 힘들어진다. 버그를 찾기 어려워지고 데이터 흐름을 추적하는 데 많은 시간을 투자해야 하는 단점이 있다.

Model— 데이터의 형식이나 구조를 관리한다. 모델에 맞지 않는 데이터는 흐름을 제어받을 수 있다.
View — 코드가 사용자에게 보여지는 부분을 담당한다. 사용자에게 보여지는 모습과 형태를 관리한다.
Controller — 변화하는 데이터를 관리한다. View에서 발생하는 이벤트로 변경되는 데이터나 서버로부터 받은 변경된 데이터를 Model과 View에 업데이트해준다.

출처: http://aalmiray.github.io/griffon-patterns

2. Flux 등장

페이스북에서 MVC 패턴으로 데이터 흐름을 관리하는 데 많은 어려움을 겪고 있었고 그의 대안으로 Flux라는 새로운 아키텍처 패턴을 개발하였다.

Flux는 MVC 패턴에서 겪은 복잡한 상황을 개선하는 것이 목적이었고 그 방법으로 ’ 단방향 데이터 흐름’을 적용한 것이다.

View는 MVC 패턴과 달리 데이터를 변경시키지 않고 Action을 넘겨준다.
Action은 반드시 Dispatcher를 지나게 되고 Dispatcher를 통해서 데이터 변경이 일어나고 View는 변경된 데이터를 Store를 통해서 전달받는다.

이러한 단방향 데이터 흐름은 기존의 MVC 패턴에 있던 ‘상태의 전이’(뷰와 모델 사이의 데이터 변경이 연결된 수많은 곳으로 따라 변경되는 현상) 현상을 없애주고 ‘예측 가능하다’는 특징을 갖는다.

3. Redux의 등장

2015년에 Dan Abramov에 의해서 React + Flux의 구조에 ‘Reducer’를 결합한 ‘Redux’가 등장하게 된다.

리덕스의 특징 3가지

1. Single source of truth

모든 상태는 하나의 스토어 안에 하나의 객체 트리 구조로 저장

2. State is read-only

상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법뿐이다. 데이터의 변경은 Reducer만 할 수 있다. Reducer 이외의 공간에서는 데이터(상태)는 읽기 모드인 것이다.

3. Changes are made with pure functions

변화를 일으키는 함수, 리듀서는 순수한 함수여야 한다.

리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받습니다.
이전의 상태는 절대로 건드리지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환합니다.
똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결괏값을 반환해야만 합니다.

만약 매번 같은 입력에 대해 같은 결과를 리턴하지 않는 경우는, 예를 들어 랜덤 숫자를 생성한다던지 혹은, 네트워크에 요청을 한다던지 등 이러한 작업은 결코 순수하지 않은 작업이므로, 리듀서 함수의 바깥에서 처리해줘야 한다. 그런 것을 하기 위해서, 리덕스 미들웨어를 사용할 수 있다.

리덕스의 구성요소

- Store

상태를 관리하고 저장되는 장소이며, 직접적으로 스토어에 접근해서는 안되고 dispatch, subscribe, getState 같은 함수들을 이용해 스토어의 state에 접근한다. 스토어는 현재의 앱 상태와, 리듀서가 들어가 있고, 추가적으로 몇 가지 내장 함수들을 포함하고 있다.

Dispatch 함수 : 액션을 발생시켜 store에 상태 변화가 필요하다는 것을 알리는 역할을 한다. 호출된 액션은 reducer 함수를 호출시키고, 액션에 맞는 로직과 상태 변화 과정을 거친다.
getState 함수 : 현재 애플리케이션의 state 값에 접근한다.
Subscribe 함수 : 함수 형태의 값을 파라미터로 받고, action이 dispatch 될 때마다 전달받은 함수를 호출한다.

- Reducer 함수

dispatch에 의해 액션이 전달되면, 액션 객체 값과 기존 state 값을 참조해 새로운 state 값을 반환해주는 역할을 한다.

const reducer = (currentState, action) => {
	
    // 상태 업데이트 로직
    
    return newState;
}


const reducer = (prevState, action) => {
  switch(action.type) {
    case 'SAVE_MONEY' :
    return {
      ...
    }
    default ...
  }
}

- Action 객체

액션 객체는 반드시 type 영역을 필수로 설정해줘야 하며, 그 외의 어떤 데이터는 개발자가 마음대로 넣을 수 있다.

// 액션 객체

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "액션 객체 데이터"
  }
}

// 액션 생성함수 --> 인자를 받아와 액션 객체를 반환해주는 함수다.
const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

[React] Memoization Hooks - useMemo, useCallback

태욘이 — Thu, 25 Feb 2021 22:47:08 +0900

메모이제이션이란 계산된 값을 자료구조에 저장하고 이후 같은 계산을 반복하지 않고 자료구조에서 꺼내 재사용하는 것을 말한다. 메모이제이션의 대표적인 예로는 동적계획법의 탑다운 방식이 있다.

1. 기본 개념

useMemo와 useCallback는 메모이제이션 기능을 지원하는 리액트의 내장 훅으로, 퍼포먼스 최적화를 위하여 사용된다.
useMemo는 메모이제이션된 값을 반환한다.
useCallback은 메모이제이션된 콜백을 반환한다.

리액트는 실제로는 상태가 변경되는 컴포넌트와 그 이하의 모든 자식 컴포넌트가 랜더링의 대상이 된다. 문제는 자식 컴포넌트의 상태가 변경되지 않아도(갱신될 필요가 없어도) 불필요한 랜더링이 일어난다는 것이다. 자바스크립트에서 함수도 참조형 데이터이기 때문에 늘 새로운 값으로 취급되어 동일성을 보장받지 못하므로 리액트에서 매번 새로운 렌더링 대상이 된다.

2. useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

“생성(create)” 함수와 그것의 의존성 값의 배열을 전달해야 한다.useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산할 것이다. 이 최적화는 모든 렌더링 시의 고비용 계산을 방지하게 해 준다.

배열이 없는 경우 매 렌더링 때마다 새 값을 계산하게 된다.
useMemo로 전달된 함수는 렌더링 중에 실행된다.
무분별하게 useMemo를 사용하면 오히려 성능이 저하될 수 있다. 따라서 최대한 사용하지 않고 useEffect Hook 등을 활용해 비동기적으로 동작하도록 고안하는 것이 좋다. (리액트 공식 문서에서 추천하는 방식)

3. useCallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

콜백과 그것의 의존성 값을 배열로 만들어 인자로 전달하며, 메모이제이션된 콜백함수를 반환한다. 그 메모이제이션된 버전은 콜백의 의존성이 변경되었을 때에만 변경된다. 이것은, 불필요한 렌더링을 방지하기 위해(예로 shouldComponentUpdate를 사용하여) 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용하다.

useCallback(fn, deps)은 useMemo(() => fn, deps)와 같다고 한다.
useEffect와 마찬가지로 두 번째 인자로 빈 배열([])을 넣으면 어떤 상태 값에도 반응하지 않으며, 두 번째 인자로 아무것도 넣지 않으면 모든 상태 변화에 반응한다.

[WEB] 쿠키(Cookie)와 세션(Session) 개념 익히기

태욘이 — Tue, 8 Dec 2020 00:56:49 +0900

HTTP의 특징

HTTP 프로토콜의 특징이자 약점을 보완하기 위해서 사용한다.
HTTP 프로토콜 환경에서 서버는 클라이언트가 누구인지 확인해야 한다. 그 이유는 HTTP 프로토콜이 connectionless, stateless 한 특성이 있기 때문이다.

HTTP(Hypertext Transfer Protocol)는 인터넷상에서 데이터를 주고 받기 위해 서버/클라이언트 모델을 따르는 통신규약을 의미한다. 이 HTTP 프로토콜에는 비연결성(Connectionless)과 비상태성(Stateless)이라는 특징을 가진다. 이는 서버의 자원을 절약하기 위해 모든 사용자의 요청마다 연결과 해제의 과정을 거치기 때문에 연결 상태가 유지되지 않고, 연결 해제 후에 상태 정보가 저장되지 않는다는 것이다.

하지만, 이로 인해 사용자를 식별할 수 없어서 같은 사용자가 요청을 여러 번 하더라도 매번 새로운 사용자로 인식하는 단점이 있다. 이렇게 HTTP의 비연결 성과 비상 태성을 보완하여 서버가 클라이언트를 식별하게 해주는 것이 Cookie와 Session이다.

Connectionless

클라이언트가 요청을 한 후 응답을 받으면 그 연결을 끊어 버리는 특징
HTTP는 먼저 클라이언트가 request를 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 response를 보내고 접속을 끊는 특성이 있다.

Stateless

통신이 끝나면 상태를 유지하지 않는 특징
연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있다.

쿠키 (Cookie)

쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일
사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다는 특징이 있다.
쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.
클라이언트에 300개까지 쿠키 저장 가능, 하나의 도메인당 20개의 값만 가질 수 있음, 하나의 쿠키값은 4KB까지 저장한다.
Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.
쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송한다.
이름, 값, 만료 날짜/시간(쿠키 저장기간), 경로 정보 등이 들어있다.
서버가 가지고 있는 것이 아니라 사용자에게 저장되기 때문에, 임의로 고치거나 지울 수 있고, 가로채기도 쉬워 보안이 취약하다.

쿠키의 구성 요소

이름 : 각각의 쿠키를 구별하는 데 사용되는 이름
값 : 쿠키의 이름과 관련된 값
유효시간 : 쿠키의 유지시간
도메인 : 쿠키를 전송할 도메인
경로 : 쿠키를 전송할 요청 경로

쿠키의 동작 프로세스

클라이언트가 페이지를 요청
서버에서 쿠키를 생성
HTTP 헤더에 쿠키를 포함시켜 응답
브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때 쿠키를 업데이트하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

세션 (Session)

세션은 쿠키를 기반하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다.
서버에서는 클라이언트를 구분하기 위해 세션 ID를 부여하며 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증 상태를 유지한다.
접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정이 가능하다.
사용자에 대한 정보를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 된다.
접속자 수가 많은 웹 사이트인 경우 서버에 과부하를 주게 되므로 성능 저하의 요인이 된다.
클라이언트가 Request를 보내면, 해당 서버의 엔진이 클라이언트에게 유일한 ID를 부여하는 데 이것이 세션 ID다.

세션 동작 프로세스

클라이언트가 서버에 요청했을 때, 필요에 따라 세션에 클라이언트에 대한 데이터를 저장하고 세션 아이디를 응답을 통해 발급해준다. (브라우저 단에서 관리될 수 있도록 쿠키로 발급하는 게 일반적인 구조)
클라이언트는 발급받은 세션 아이디를 쿠키로 저장한다. (ex. JSESSIONID)
클라이언트는 다시 서버에 요청할 때, 세션 아이디를 서버에 전달하여 상태 정보를 서버가 활용할 수 있도록 해준다.

	Cookie	Session
저장위치	클라이언트	서버
저장형식	text	Object
리소스	클라이언트의 리소스	서버의 리소스
용량제한	도메인당 20개, 1쿠키당 4KB	제한 없음
만료시점	쿠키 저장시 설정(설정 없을 시에는 브라우저 종료시 만료)	알 수 없음

[Express] Body-Parser 미들웨어 다루기

태욘이 — Fri, 4 Dec 2020 16:13:50 +0900

expressjs/body-parser

Node.js body parsing middleware. Contribute to expressjs/body-parser development by creating an account on GitHub.

github.com

What are express.json() and express.urlencoded()?

I cannot find any documentation on express.json() and express.urlencoded(). What do each of them do exactly?

stackoverflow.com

1. Parsing 이란?

parsing : 가지고 있는 데이터를 내가 원하는 형태의 데이터로 ‘가공'하는 과정

parser : 파싱 과정을 하는 모듈이나 메서드를 일컫는다.

내가 원하는 형식에 맞춰 해석하는 용도이므로 bodyParser 뿐만 아니라 cookieParser, JSON.parse, JSON.stringifyJSON.stringify.. 등 파서의 종류는 셀 수 없이 많다.

예를 들어 외국어를 번역할 때 어떤 언어인지 정하고 해당 언어에 맞게 구문을 해석해주는 것을 parser, 그에 따라 실제 번역하는 것을 compiler라고 할 수 있다.

2. BodyParser

HTTPpost put 요청 시 request body에 들어오는 데이터 값을 읽을 수 있는 구문으로 파싱함과 동시에
req.body 로 입력해주어 응답 과정에서 요청에 body 프로퍼티를 새로이 쓸 수 있게 해주는 미들웨어

클라이언트 측에서 API post와 put 메서드로 요청 시 (get delete는 불가능) body를 포함하여 보낼 수 있는데 이 값을 서버 측에서 받는다고 그대로 사용할 수 있는 것이 아니고, 서버 내에서 해석 가능한 형태로 변형해야 사용할 수 있게 되는 것이다.
이때 API 요청에서 받은 body 값을 파싱하는 역할을 수행하는 것이 bodyParser라는 미들웨어이다.

설치

npm insatll body-parser --save

예제

<form action="/email_post" method="post">
      email: <input type="text" name="email" /><br />
      <input type="submit" />
</form>

- body-parser 사용하지 않은 경우

// body-parser 없이 사용하면
app.post('/email_post', function (req, res) {
  console.log(req.body);
  res.send('post response');
});

// undefined 출력된다.

- body-parser 사용한 경우

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

post나 put으로 넘어온 데이터 중 json형식이나 encoding 된 url 데이터를 분석하도록 express 서버에 설정해주는 구문이다.

const express = require('express');
const app = express();
const bodyParser = require('body-parser');


// 클라이언트에서 오는 응답이 json형태 or 
// json이 아닌 그냥 post(urlencoding된) 데이터를 파싱
app.use(express.json()) // for parsing application/json
app.use(express.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded

app.post('/email_post', function (req, res) {
  console.log(req.body);
  console.log(req.body.email);
  res.send('post response');
});

/*
출력
  { email: 'asd@asdasdasd.com' }
  'asd@asdasdasd.com'
*/

express 문서에 따르면 미들웨어 없이 req.body 에 접근하는 경우에는 기본으로undefined 가 설정되어 있으므로 bodyParser, multer와 같은 미들웨어를 사용하여 요청 데이터 값에 접근해야 한다고 되어있다.

클라이언트 측에서 { name: 'John', age:...}와req.body 혹은 req.body.name, req.body.job 등으로 해당 데이터에 곧바로 접근할 수 있게 된다.

[React] Class Component vs Function Component

태욘이 — Thu, 3 Dec 2020 00:49:50 +0900

1. Component Create

// 클래스 컴포넌트
class ClassComp extends React.Component {
  render() {
    return (
      <div className="container">
        <h2>class style component</h2>
        <p>Number : 2</p>
      </div>
    )
  }
}

// 함수형 컴포넌트
function FuncComp(props) {
  return (
    <div className="container">
      <h2>function style component</h2>
      <p>Number : 2</p>
    </div>
  );
}

2. Props

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div className="container">
        <h1>Hello World</h1>
        <FuncComp initNumber={2}></FuncComp>
        <ClassComp initNumber={2}></ClassComp>
      </div>
    )
  }
}

// 함수형
// 인자로 props라는 이름으로 편의상 쓰는 것(다른 이름도 가능)
function FuncComp(props) {
  return (
    <div className="container">
      <h2>function style component</h2>
      <p>Number : {props.initNumber}</p>
    </div>
  );
}

// 클래스형
class ClassComp extends React.Component {
  render() {
    return (
      <div className="container">
        <h2>class style component</h2>
        <p>Number : {this.props.initNumber}</p>
      </div>
    )
  }
}

3. State

// 함수형
function FuncComp(props) {
  // state 초기화
  let numberState = useState(props.initNumber); // --> useState는 무조건 배열이 리턴
  let number = numberState[0]; //state 사용, 배열의 첫번째: 상태값
  let setNumber = numberState[1]; // state 변경, 배열의 두번째: 상태를 바꿀수 있는 함수

  // 간단 축약형 사용법
  let [_date, setDate] = useState((new Date()).toString());

  return (
    <div className="container">
      <h2>function style component</h2>
      <p>Number : {number}</p>
      <p>Date : {_date}</p>
      <input type="button" value="random" onClick={
        function () {
          setNumber(Math.random());
        }
      } />
      <input type="button" value="date" onClick={
        function () {
          setDate((new Date()).toString());
        }
      } />
    </div>
  );
}

Function 컴포넌트에서 state를 사용하기 위해서는 useState Hooks를 사용한다.

useState(초기값) - [state value, func] 배열 return

useState는 무조건 2개의 값 요소를 갖는 배열이 리턴된다.
초기값을 줬을 때, 리턴된 배열의 첫 번째 요소가 그 값이 된다.
리턴된 배열의 2번째 값은 함수로, state를 바꿀 수 있는 함수다.

// 클래스형
class ClassComp extends React.Component {
  // state 초기화
  state = {
    number: this.props.initNumber,
    date: (new Date()).toString()
  }
  render() {
    return (
      <div className="container">
        <h2>class style component</h2>
        <p>Number : {this.state.number}</p> {/*state 사용 */}
        <p>Date : {this.state.date}</p>
        <input type="button" value="random" onClick={
          function () {
            this.setState({ number: Math.random() }); {/*state 변경 */ }
          }.bind(this)
        } />
        <input type="button" value="date" onClick={
          function () {
            this.setState({ date: (new Date()).toString() }); {/*state 변경 */ }
          }.bind(this)
        } />
      </div>
    )
  }
}

Class 컴포넌트에서 안 좋은 점이 bind를 해줘야 하는 것이다. 바인딩을 안 하고 사용하는 방법들이 존재한다. (ex. 화살표 함수...)

state 초기화 : constructor를 사용하거나, 위와 같이 사용해 초기화할 수 있다.
state 사용 : this.state를 이용한다. 여기서 render 함수 안에서 바인딩을 해줘야 한다.
state 변경 : this.setState를 이용한다.

4. Life cycle

useEffect(<function>, <Array>)

<Array> == 생략 : 첫 렌더링 + state 변화에 따른 모든 렌더링 시에 동작한다.
<Array> == [ ] : 첫 렌더링 시에만 동작한다. componentDidMount()와 같다.
<Array> == [state] : 첫 렌더링 시 동작하고, 배열 안에 넣어준 값의 상태가 변할 때마다 계속 동작한다. componentDidMount() & componentDidUpdate()
Clean up : return으로 함수를 지정해주면 clean up작업을 한다. componentWillUnmount()와 같은 동작이다. 즉, 컴포넌트가 수명을 다하고 사라질 때 어떤 행동을 하는 것을 의미한다.

[React] 이벤트 처리하기

태욘이 — Tue, 1 Dec 2020 00:29:52 +0900

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다. 몇 가지 차이는 다음과 같다.

React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용한다.
JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.
React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야한다.

ES6 클래스를 사용하여 컴포넌트를 정의할 때, 일반적인 패턴은 이벤트 핸들러를 클래스의 메서드로 만드는 것이다.

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다.
    this.handleClick = this.handleClick.bind(this);
  }
  
  // 토글 이벤트 메서드
  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

- this의 의미와 binding

JSX 콜백 안에서 this의 의미에 대해 주의해야 합니다. JavaScript에서 클래스 메서드는 기본적으로 바인딩되어 있지 않다. this.handleClick을 바인딩하지 않고 onClick에 전달하였다면, 함수가 실제 호출될 때 this는 undefined가 된다.

이는 React만의 특수한 동작이 아니며, JavaScript에서 함수가 작동하는 방식의 일부다. 일반적으로 onClick={this.handleClick}과 같이 뒤에 ()를 사용하지 않고 메서드를 참조할 경우, 해당 메서드를 바인딩 해야 한다.

- binding 하지 않는 2가지 방법

리액트 문서에서 소개하는 실험적인 문법인 퍼블릭 클래스 필드 문법를 사용한다.

class LoggingButton extends React.Component {
  // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
  // 주의: 이 문법은 *실험적인* 문법입니다.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

만약 클래스 필드 문법을 사용하고 있지 않다면, 콜백에 화살표 함수를 사용하는 방법도 있다.

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

이 문법의 문제점은 LoggingButton이 렌더링될 때마다 다른 콜백이 생성된다는 것이다. 대부분의 경우 문제가 되지 않으나, 콜백이 하위 컴포넌트에 props로서 전달된다면 그 컴포넌트들은 추가로 다시 렌더링을 수행할 수도 있다. 이러한 종류의 성능 문제를 피하고자, 생성자 안에서 바인딩하거나 클래스 필드 문법을 사용하는 것을 권장합니다.

- 이벤트 핸들러에 인자 전달하기

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

위 두 줄은 동등하며 각각 화살표 함수와 Function.prototype.bind를 사용한다.

두 경우 모두 React 이벤트를 나타내는 e 인자가 ID 뒤에 두 번째 인자로 전달된다. 화살표 함수를 사용하면 명시적으로 인자를 전달해야 하지만 bind를 사용할 경우 추가 인자가 자동으로 전달된다.

[React] State 다루기

태욘이 — Mon, 30 Nov 2020 22:46:43 +0900

1. State

컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.
props와의 차이점이라면, state는 컴포넌트 내부에 존재하고 있기 때문에, 상태 값 변경이 가능하다는 것이다.(즉, 구현하는 쪽에 중점을 둔다.)
this.setState() 메소드를 통해서 상태 값을 변경해준다.
상위 컴포넌트의 state는 하위 컴포넌트의 props로 전달된다.

import React, { Component } from 'react'
import Subject from './components/Subject';
import Content from './components/Content';
import TOC from './components/TOC';

class App extends Component {
  // 초기 this.state를 지정하는 class constructor
  constructor(props) {
    super(props);
    this.state = {
      subject: { title: "WEB", sub: "World Wide Web!" },
      contents: [
        { id: 1, title: 'HTML', desc: 'HTML is for information' },
        { id: 2, title: 'CSS', desc: 'CSS is for design' },
        { id: 3, title: 'JavaScript', desc: 'JavaScript is for interactive' }
      ]
    }
  }

	// this.state를 이용해 state 값 사용
     // 상위 컴포넌트의 state는 하위 컴포넌트의 props로 전달된다.!!!!!!
  render() {
    return (
      <div className="App">
        <Subject title={this.state.subject.title} sub={this.state.subject.sub} />
        <TOC data={this.state.contents} />
        <Content />
      </div>
    );
  }
}


export default App;

클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 한다.

- Constructor(생성자) : JS Class 문법

constructor 메소드는 class 로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드다. "constructor"라는 이름을 가진 특수한 메서드는 클래스 안에 한 개만 존재할 수 있다. 만약 클래스에 여러 개의 constructor 메서드가 존재하면 SyntaxError 가 발생할 것이다. constructor는 부모 클래스의 constructor를 호출하기 위해 super 키워드를 사용할 수 있다.

State 객체를 사용하고 싶다면 컴포넌트를 생성할 때 가장 윗부분(render() 함수보다 먼저)에 constructor() 함수를 적어준다. 컴포넌트 생성자에서 super를 호출하기 전에는 this를 사용할 수 없기 때문이다. 즉, 컴포넌트의 시작 부분에서 constructor()constructor()라는 함수가 컴포넌트의 초기화를 시켜줘야 StateState에 값을 넣어 사용할 수 있는 것이다.

- super(props)를 써야 하는 이유

자바스크립트에서 supersuper는 부모 클래스 생성자의 참조다. 그리고 자바스크립트는 언어적 제약사항으로서 생성자에서 super를

Hooks를 사용한다면 super 나 this에 대해 고민하지 않아도 된다!!!

2. setState

- 컴포넌트에서 state를 직접 바꾸면 안 된다.

this.state를 지정할 수 있는 유일한 공간은 바로 constructor입니다.

// Wrong
this.state.comment = 'Hello';

다음과 같이 setState() 함수를 사용해서 state를 변경해야 한다.

// Correct
this.setState({comment: 'Hello'});

- State 업데이트는 비동기적일 수도 있다.

this.props와 this.state가 비동기적으로 업데이트될 수 있기 때문에 다음 state를 계산할 때 해당 값에 의존해서는 안 된다.

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

props와 state의 비동기적 업데이트를 고려해 함수를 인자로 사용하는 다른 형태의 setState()를 사용하면 된다. 그 함수는 이전 state를 첫 번째 인자로 받아들일 것이고, 업데이트가 적용된 시점의 props를 두 번째 인자로 받아들일 것이다.

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

// Correct
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

- 독립적으로 state들을 업데이트할 수 있다.

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }
  
  // 독립적으로 각각 업데이트
  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

[React] Component 생성 & props 다루기

태욘이 — Mon, 30 Nov 2020 13:16:37 +0900

1. Function Component & Class Component

// 함수형 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환한다.

// 클래스형 컴포넌트
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

ES6 Class를 사용해 컴포넌트를 정의하면 된다.

- 함수형에서 클래스형 컴포넌트로 바꾸기

React.Component를 확장하는 동일한 이름의 ES6 class를 생성합니다.
render()라고 불리는 빈 메서드를 추가합니다.
함수의 내용을 render() 메서드 안으로 옮깁니다.
render() 내용 안에 있는 props를 this.props로 변경합니다.

※ 주의

사용자 정의 컴포넌트는 반드시 대문자로 시작해야 한다.

Element가 소문자로 시작하는 경우에는 <div> 나 <span> 같은 내장 컴포넌트라는 것을 뜻하며 'div' 나 'span' 같은 문자열 형태로 React.createElement에 전달된다. <Foo />와 같이 대문자로 시작하는 타입들은 React.createElement(Foo)의 형태로 컴파일되며 JavaScript 파일 내에 사용자가 정의했거나 import 한 컴포넌트를 가리킨다고 한다.

2. Props

props는 읽기 전용이다.

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다.

App.js

// APP.js
import React, { Component } from 'react'
import Subject from './components/Subject'; //컴포넌트 import
import Content from './components/Content'; //컴포넌트 import


class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="Wold Wide Web!" /> // props 전달
        리액트 공부하기!
        <Content title="HTML" desc="HTML is ..." /> // props 전달
      </div>
    );
  }
}

export default App;

하위 컴포넌트에 전달할 데이터를 props로 전달한다. 여기선 <Subject>, <Content> 각 컴포넌트에 porps를 전달해줬다.

Subject.js

// Subject.js
import React, { Component } from 'react'

export default class Subject extends Component {
  render() {
    console.log('Subject render!');
    return (
      <header>
        <h1>{this.props.title}</h1> // 전달받은 props를 사용해 렌더링한다.
        {this.props.sub}
      </header>
    )
  }
}

Content.js

// Content.js
import React, { Component } from 'react'

export default class Content extends Component {
  render() {
    return (
      <article>
        <h2>{this.props.title}</h2> // 전달받은 props를 사용해 렌더링한다.
        {this.props.desc}
      </article>
    )
  }
}

전달받은 props를 사용할 때는 현재 Class를 가리키는 this를 사용한다.

this.props.(전달받은 props 명) 형식으로 중괄호와 함께 사용해주면 받은 데이터를 렌더링 할 수 있게 된다.

- 결과 화면

<결과 화면>

[백준 1992] 쿼드트리 - Python (분할정복, 재귀)

태욘이 — Tue, 24 Nov 2020 17:10:56 +0900

1992번: 쿼드트리

첫째 줄에는 영상의 크기를 나타내는 숫자 N 이 주어진다. N 은 언제나 2의 제곱수로 주어지며, 1≤N ≤64의 범위를 가진다. 두 번째 줄부터는 길이 N 의 문자열이 N 개 들어온다. 각 문자열은 0 또는

www.acmicpc.net

<내 코드>

n = int(input())
video = [list(input()) for _ in range(n)]


def divide(x, y, n):
    ans = []
    check = True
    color = video[x][y]

    for i in range(x, x+n):
        if not check:
            break
        for j in range(y, y+n):
            if color != video[i][j]:
                check = False
                ans.append("(")
                ans.extend(divide(x, y, n//2))
                ans.extend(divide(x, y+n//2, n//2))
                ans.extend(divide(x+n//2, y, n//2))
                ans.extend(divide(x+n//2, y+n//2, n//2))
                ans.append(")")
                return ans
    return color


print("".join(divide(0, 0, n)))

list.append와 list.extend의 차이에 대해 알게 됐다.

a = [1, 2, 3]
b = [4, 5, 6]

a.append(b)
print(a) # [1, 2, 3, [4, 5, 6]]

a = [1, 2, 3]
b = [4, 5, 6]

a.extend(b)
print(a) # [1, 2, 3, 4, 5, 6]

append는 해당 리스트(b) 그 자체를 리스트(a) 끝에 넣어준다. 반면에 extend는 해당 리스트(b) 안의 요소들을 (a)리스트 끝에 넣어 확장시켜준다.

[백준 2630] 색종이 만들기 - Python (분할정복, 재귀)

태욘이 — Tue, 24 Nov 2020 12:50:43 +0900

2630번: 색종이 만들기

첫째 줄에는 전체 종이의 한 변의 길이 N이 주어져 있다. N은 2, 4, 8, 16, 32, 64, 128 중 하나이다. 색종이의 각 가로줄의 정사각형칸들의 색이 윗줄부터 차례로 둘째 줄부터 마지막 줄까지 주어진다.

www.acmicpc.net

<내 코드>

N = int(input())
paper = [list(map(int, input().split())) for _ in range(N)]

white, blue = 0, 0


def divide(x, y, n):
    global white, blue
    color = paper[x][y]
    check = True

    for i in range(x, x+n):
        if not check:
            break

        for j in range(y, y+n):
            if color != paper[i][j]:
                check = False
                divide(x, y, n//2)  # 1사분면
                divide(x, y+n//2, n//2)  # 2사분면
                divide(x+n//2, y, n//2)  # 3사분면
                divide(x+n//2, y+n//2, n//2)  # 4사분면
                break
    if check:
        if color:
            blue += 1
        else:
            white += 1


divide(0, 0, N)
print(white)
print(blue)

이 문제는 처음 접하는 개념인 '쿼드트리'를 만드는 것이었다. 트리의 자식노드가 4개씩 분할하는 방법이라고 한다.

여기서 분할 된 영역 안에서 같은 색인지 판단해 다르다면 또 다시 나누면서 찾아간다. 일반 동적 계획법과 다르게 분할 정복은 중복되는 하위 문제가 없다는 것이 차이다.

[React] React Hooks - useState, useEffect

태욘이 — Fri, 13 Nov 2020 18:01:10 +0900

Hooks는 리액트 v16.8에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. Hook은 함수형 컴포넌트에서 React의 특징을 갖게 해주는 함수다.

- Hook 사용 규칙

최상위(at the top level)에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 말아야한다.
React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있다. 바로 직접 작성한 custom Hook 내이다.)

1. useState

import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

- 형태

const [value, setValue] = useState(0); // [현재 state, 업데이트 함수]와 state 초기값

function ExampleWithManyStates() {
  // 상태 변수를 여러 개 선언했습니다!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

현재의 state값과 이 값을 업데이트하는 함수를 배열 할당 형태로 사용한다. 이 함수를 이벤트 핸들러나 다른 곳에서 호출해 사용 가능하다. state 초기값을 첫 번째 렌더링에만 딱 한번 사용된다.

2. useEffect

// React가 DOM을 업데이트한 뒤에 문서의 타이틀을 바꾸는 컴포넌트
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // componentDidMount, componentDidUpdate와 비슷합니다
  useEffect(() => {
    // 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것이다.

2-1. useEffect의 두 번째 인수 사용

- 특정 값을 넣어주는 경우

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // count가 바뀔 때만 effect를 재실행합니다.

2번째 인자로 배열이 주어지는데, 배열 안 값이 리렌더링 시에 변경되지 않는다면 리액트는 effect를 건너뛴다. 즉 안의 값이 변할 때만 리렌더링을 한다. 배열 내에 여러 개의 값이 있다면 그중의 단 하나만 다를지라도 리액트는 effect를 재실행합니다.

- 빈 배열을 인자로 줄 경우

  useEffect(() => {
    console.log('마운트 될 때만 실행됩니다.');
  }, []);

빈 배열([])을 넘기게 되면, effect 안의 prop과 state는 초깃값을 유지하게 된다. 즉, 화면에 가장 처음 렌더링 될 때만 실행되고 업데이트할 경우에는 실행할 필요가 없는 경우에 빈 배열을 설정해준다. effect를 실행하고 이를 정리(clean-up)하는 과정을 (마운트와 마운트 해제 시에) 딱 한 번씩만 실행하고 싶다면, 빈 배열([])을 두 번째 인수로 넘기면 된다.

useEffect(<function>, <Array>)

<Array> == 생략 : 첫 렌더링 + state 변화에 따른 모든 렌더링 시에 동작한다.
<Array> == [ ] : 첫 렌더링 시에만 동작한다. componentDidMount()와 같다.
<Array> == [state] : 첫 렌더링 시 동작하고, 배열 안에 넣어준 값의 상태가 변할 때마다 계속 동작한다. componentDidMount() & componentDidUpdate()
Clean up : return으로 함수를 지정해주면 clean up작업을 한다. componentWillUnMount()와 같은 동작이다. 즉, 컴포넌트가 수명을 다하고 사라질 때 어떤 행동을 하는 것을 의미한다.

2-2. 정리(Clean-up)를 이용하는 Effects

 useEffect(() => {
    console.log('effect');
    console.log(name);
    
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시
    return () => {
      console.log('cleanup');
      console.log(name);
    };
  });

[Node.js] http-proxy-middleware 모듈

태욘이 — Tue, 10 Nov 2020 23:29:56 +0900

http-proxy-middleware

The one-liner node.js proxy middleware for connect, express and browser-sync

www.npmjs.com

1. 설치

$ npm install http-proxy-middleware --save-dev

2. 사용법

- client 단 src파일 아래 'setupProxy.js' 파일을 생성한다.

- 다음과 같이 proxy 설정을 한다.

1) http-proxy-middleware v1.0 이전

const proxy = require('http-proxy-middleware');

// src/setupProxy.js
module.exports = function(app) {
    app.use(
        proxy('/api', {
            target: "http://localhost:5000/", 
            changeOrigin: true
        })
    );
};

proxy 설정을 추가해줌으로 /api로 시작되는 API는 target으로 설정된 서버 URL로 호출하도록 설정된다.

2) http-proxy-middleware v1.0 이후 수정

const createProxyMiddleware = require('http-proxy-middleware');

// src/setupProxy.js
module.exports = function(app) {
    app.use(
        createProxyMiddleware('/api', {
            target: "http://localhost:5000/", 
            changeOrigin: true
        })
    );
};

- 기본형태

const { createProxyMiddleware } = require('http-proxy-middleware');
 
const apiProxy = createProxyMiddleware('/api', { target: 'http://www.example.org' });
//                                      		\____/   \_____________________________/
//                                       	 	  |                    |
//                                      		context             options
 
// 'apiProxy' is now ready to be used as middleware in a server.

context로 설정한 주소가 tartget으로 설정한 서버 쪽 url로 proxing 된다.

여러 옵션들은 차차 필요할 때 사용하면 될 듯하다.

[Express] express.Router() 와 express() 차이

태욘이 — Thu, 5 Nov 2020 13:04:41 +0900

Differences between express.Router and app.get?

I'm starting with NodeJS and Express 4, and I'm a bit confused. I been reading the Express website, but can't see when to use a route handler or when to use express.Router. As I could see, if I wa...

stackoverflow.com

app.js

var express = require('express'),
    dogs    = require('./routes/dogs'), // 모듈로 만든 라우터들을 사용
    cats    = require('./routes/cats'),
    birds   = require('./routes/birds');

var app = express();

app.use('/dogs',  dogs);
app.use('/cats',  cats);
app.use('/birds', birds);

app.listen(3000);

use메서드는 모든 HTTP 메서드에 대해 요청 주소만 일치하면 실행되지만

get, post, put, patch, delete 같은 메서드는 주소뿐만 아니라 HTTP 메서드까지 일치하는 요청일 때만 실행된다.

- express()는 listen()을 이용해 수신한다.

routes/dog.js

var express = require('express');

var router = express.Router();

router.get('/', function(req, res) {
    res.send('GET handler for /dogs route.');
});

router.post('/', function(req, res) {
    res.send('POST handler for /dogs route.');
});

module.exports = router; // 라우터를 모듈화

router에도 app처럼 use, get, post, put, patch, delete 같은 메서드를 붙일 수 있다. use를 제외하고는 각각 HTTP 요청 메서드와 상응한다.

라우터에서는 반드시 요청에 대한 응답을 보내거나 에러 핸들러로 요청을 넘겨야 한다. 응답을 보내지 않으면 브라우저는 계속 응답을 기다린다. res객체에 들어 있는 메서드들로 응답을 보낸다.

- Router는 요청에 대해 listen()을 사용하지 않는다.

두 가지 경우 차이점

var app = express()가 호출되면 앱 객체가 반환된다. 이것을 Main app으로 생각한다.
var router = express.Router()가 호출되면 Main app과는 조금 다른 Mini app이 반환된다.

코드(미들웨어)가 복잡해지는 것을 방지하고 재사용성을 높이기 위해 각 라우터를 별도의 모듈로 만드는 것이다. 즉, 각 기능에 맞는 Mini app을 만들고 그것들을 Main app에서 불러와 사용하는 것이다.

위의 예에서, /dogs 경로에 대한 코드는 메인 앱을 복잡하게 하지 않도록 자체 파일로 이동했다. /cats와 /birds에 대한 코드는 그들 자신의 파일에서 유사한 구조가 될 것이다. 이 코드를 세 개의 미니 앱으로 분리하면 각각을 위한 logic 작업을 따로 할 수 있고, 나머지 두 개에 어떤 영향을 미칠지 걱정하지 않아도 된다.

[Node.js] Mongoose 모듈 사용하기

태욘이 — Tue, 3 Nov 2020 22:25:35 +0900

mongoose

Mongoose MongoDB ODM

www.npmjs.com

1. Mongoose ?

Node.js 비동기 환경에서 동작하도록 디자인 된 몽고DB 모델링 툴이다. Mongoose는 promise와 callback 모두 지원한다.

2. 설치

$ npm install mongoose --save

3. 불러오기(importing)

// Using Node.js `require()`
const mongoose = require('mongoose');
 
// Using ES6 imports
import mongoose from 'mongoose';

4. 몽고DB 연결

만약 하나의 DB만 사용한다면, mongoose.connect()를 사용하고, 만약 추가적인 연결들이 필요할 경우에 mongoose.createConnection()을 사용한다. 두 가지 경우 모두 mongodb://URI 또는 host, database, port, options 같은 파라미터를 받습니다.

// npm공식 문서 사용 예시
mongoose.connect('mongodb://localhost/my_database', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useFindAndModify: false,
  useCreateIndex: true
});

// 사용 예시
// config.mongoURI --> 몽고DB url을 외부 모듈(config라는 명)로 만들어 불러서 사용한 경우
mongoose.connect(config.mongoURI, {
  useNewUrlParser: true, 
  useUnifiedTopology: true, 
  useCreateIndex: true, 
  useFindAndModify: false
})
.then(() => console.log('MongoDB Conneted...'))
.catch(err => console.log(err));

여기서 몽고 DB 가 Local 일 경우 주소만 해당되지만 클라우드를 통해서 올 때는 비밀번호까지 들어가기 때문에 조심해야 한다.

5. 스키마 정의 & 모델화

var mySchema = mongoose.Schema({
    name : 'string',
    address : 'string',
    age : 'number'
});

// mongoose.model('ModelName', mySchema)
const MyModel = mongoose.model('ModelName');

정의된 스키마를 객체처럼 사용할 수 있도록 model() 함수로 컴파일한다.

6. 모델 객체 생성 후 데이터 입력

const newInfo = new MyModel({name:'Hong Gil Dong', address:'서울시 강남구', age:'26'});

new를 이용해 모델 객체를 생성해 데이터를 입력해준다.

7. 데이터 저장

newInfo.save(function(error, data){
    if(error){
        console.log(error);
    }else{
        console.log('Saved!')
    }
});

Model.save(function(err,product)); : Callback
Model.save().then(resolved,rejected); : Promise

8. 데이터 가져오기

// find(): 전체 데이터 불러오기, findOne() : 데이터 하나 가져오기
MyModel.find({}, function (err, docs) {
  // docs.forEach
});

// 예제
newInfo.find(function(error, students){
    console.log('--- Read all ---');
    if(error){
        console.log(error);
    }else{
        console.log(students);
    }
})

9. 데이터 수정하기

// 특정 id에 해당하는 데이터 수정
MyModel.findOne({_id:'585b777f7e2315063457e4ac'}, function(error,student){
    if(error){
        console.log(error);
    }else{
        student.name = '김철수';
        student.save(function(error,modified_student){
            if(error){
                console.log(error);
            }else{
                console.log(modified_student);
            }
        });
    }
});

// update() 이용방법도 있다.

10. 데이터 삭제하기

MyModel.findOne({title:'아바타'}, function(err, doc) {
   if ( doc ) {
      doc.name = '홍길동';
      doc.remove(function(err, product) {
         console.log('Find and Remove : ', err, product);
      });         
   }
});

// remove()함수 이용 
MyModel.remove({job:'학생'}).then(resolved, rejected);

[백준 14889] 스타트와 링크 - Python (브루트포스, 백트래킹)

태욘이 — Mon, 2 Nov 2020 22:03:50 +0900

14889번: 스타트와 링크

예제 2의 경우에 (1, 3, 6), (2, 4, 5)로 팀을 나누면 되고, 예제 3의 경우에는 (1, 2, 4, 5), (3, 6, 7, 8)로 팀을 나누면 된다.

www.acmicpc.net

<내 코드>

from itertools import combinations

N = int(input())
S = list(list(map(int, input().split())) for _ in range(N))
comb = combinations(range(N), N//2)  # 0 ~ N-1을 N/2 만큼 씩 조합
ans = float('inf')  # inf는 어떤 숫자와 비교해도 무조건 크다고 판정
# -inf는 어떤 수보다 무조건 작다

for c in comb:
    start_team = list(c)
    link_team = list(set(range(N)) - set(c))  # 차집합 후 리스트화

    start_ability, link_ability = 0, 0

    for i in range(N//2 - 1):
        for j in range(i+1, N//2):
            start_ability += S[start_team[i]][start_team[j]
                                              ] + S[start_team[j]][start_team[i]]
            link_ability += S[link_team[i]][link_team[j]] + \
                S[link_team[j]][link_team[i]]

    ans = min(ans, abs(start_ability - link_ability))

print(ans)

이번 문제는 백트래킹 문제지만 브루트포스로 풀었다. 다른 사람의 풀이를 참조하면서 새로운 개념들을 몇 가지 알게 됐다. 집합을 이용해 팀을 나누는 방법을 사용했다.

inf - 어떤 숫자와 비교해도 무조건 크다고 판정되는 파이썬 기능

-inf - 어떤 숫자와 비교해도 무조건 작다

[Node.js] Express.js 란 무엇인가?

태욘이 — Mon, 2 Nov 2020 14:49:31 +0900

Express 공식 문서를 참조했습니다.

1. Express?

: Node.js를 위한 빠르고 개방적인 웹 프레임워크, 최소한의 기능을 갖춘 라우팅 및 미들웨어 웹 프레임워크

2. 설치

npm install express --save

npm install express

3. 기본 사용법

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

4. 라우팅

1) 구조

app.METHOD(PATH, HANDLER)

- app : express() 객체 인스턴스

- METHOD : HTTP 요청 메소드(get, post, put, delete...)

- PATH : 서버에서의 경로 url

- HANDLER : 라우트가 성공했을 때 실행되는 함수

2) 예제

- 라우트 메소드

var express = require('express');
var app = express();
// 홈 화면으로 라우팅 되며, hello world가 출력
app.get('/', function(req, res) {
  res.send('hello world');
});

// GET method route
app.get('/', function (req, res) {
  res.send('GET request to the homepage');
});

// POST method route
app.post('/', function (req, res) {
  res.send('POST request to the homepage');
});

- 라우트 경로

요청 메소드와의 조합을 통해, 요청이 이루어질 수 있는 엔드포인트를 정의한다. 라우트 경로는 문자열, 문자열 패턴 또는 정규식 일 수 있다.

- 라우트 핸들러

하나의 콜백 함수는 하나의 라우트를 처리할 수 있다. 예를 들면 다음과 같다.

app.get('/example/a', function (req, res) {
  res.send('Hello from A!');
});

미들웨어와 비슷하게 작동하는 여러 콜백 함수를 제공하여 요청을 처리할 수 있다. 유일한 차이점은 이러한 콜백은 next('route')를 호출하여 나머지 라우트 콜백을 우회할 수도 있다는 점이다. 이러한 메커니즘을 이용하면 라우트에 대한 사전 조건을 지정한 후, 현재의 라우트를 계속할 이유가 없는 경우에는 제어를 후속 라우트에 전달할 수 있다.

// 2개 이상의 콜백 함수는 하나의 라우트를 처리할 수 있다(next 오브젝트를 반드시 지정해야 함)
app.get('/example/b', function (req, res, next) {
  console.log('the response will be sent by the next function ...');
  next();
}, function (req, res) {
  res.send('Hello from B!');
});

// 하나의 콜백 함수 배열은 하나의 라우트를 처리할 수 있다.
var cb0 = function (req, res, next) {
  console.log('CB0');
  next();
}

var cb1 = function (req, res, next) {
  console.log('CB1');
  next();
}

var cb2 = function (req, res) {
  res.send('Hello from C!');
}

app.get('/example/c', [cb0, cb1, cb2]);

// 독립적인 함수와 함수 배열의 조합은 하나의 라우트를 처리할 수 있다.
var cb0 = function (req, res, next) {
  console.log('CB0');
  next();
}

var cb1 = function (req, res, next) {
  console.log('CB1');
  next();
}

app.get('/example/d', [cb0, cb1], function (req, res, next) {
  console.log('the response will be sent by the next function ...');
  next();
}, function (req, res) {
  res.send('Hello from D!');
});

5. 미들웨어

1) 작성

<출처: https://expressjs.com>

2) 예제

var express = require('express');
var app = express();

// 미들웨어 함수 작성 후 변수 할당
var requestTime = function (req, res, next) {
  req.requestTime = Date.now();
  next();
};

// 미들웨어 함수를 로드하려면 미들웨어 함수를 지정하여 app.use()를 호출
// 루트 경로 라우트 로드 전에 먼저 로드 된다.
app.use(requestTime);

// 콜백 함수는 미들웨어 함수가 req(요청 오브젝트)에 추가하는 특성을 사용한다.
app.get('/', function (req, res) {
  var responseText = 'Hello World!';
  responseText += 'Requested at: ' + req.requestTime + '';
  res.send(responseText);
});

app.listen(3000);

- app.use() : 사용하고자 하는 미들웨어 함수를 로드한다.

미들웨어의 로드 순서는 중요하며, 먼저 로드되는 미들웨어 함수가 먼저 실행된다.

만약 위 예제에서 루트 경로 라우링 이후 app.use()를 하면 루트 경로의 라우트 핸들러가 요청-응답 주기를 종료하므로 요청은 절대로 requestTime에 도달하지 못한다. (스택 내의 그다음 미들웨어 함수에 요청을 전달하는 next() 요청이 없기 때문이다.)

현재의 미들웨어 함수가 요청-응답 주기를 종료하지 않는 경우에는 next()를 호출하여 그 다음 미들웨어 함수에 제어를 전달해야 합니다. 그렇지 않으면 해당 요청은 정지된 채로 방치됩니다.

사용자는 요청 오브젝트, 응답 오브젝트, 스택 내의 그 다음 미들웨어 함수, 그리고 모든 Node.js API에 대한 액세스 권한을 가지고 있으므로, 미들웨어 함수에 대한 가능성, 중요성은 끝이 없다고 설명돼있다.

3) 여러 미들웨어 함수 종류

<출처: https://expressjs.com/ko/resources/middleware.html>

이 외에도 유명한 여러 미들웨어가 많으니 필요에 따라 사용하면 될 듯하다.

[백준 14888] 연산자 끼워넣기 - Python (백트래킹, DFS, 브루트포스)

태욘이 — Tue, 27 Oct 2020 20:29:04 +0900

14888번: 연산자 끼워넣기

첫째 줄에 수의 개수 N(2 ≤ N ≤ 11)가 주어진다. 둘째 줄에는 A1, A2, ..., AN이 주어진다. (1 ≤ Ai ≤ 100) 셋째 줄에는 합이 N-1인 4개의 정수가 주어지는데, 차례대로 덧셈(+)의 개수, 뺄셈(-)의 개수,

www.acmicpc.net

<내 코드>

N = int(input())
nums = list(map(int, input().split()))
add, sub, mul, div = map(int, input().split())

# 비교값
max_ = -1e9
min_ = 1e9


def dfs(cnt, res, add, sub, mul, div):
    global max_, min_
    # 재귀 탈출 조건
    if cnt == N:
        max_ = max(res, max_)
        min_ = min(res, min_)
        return

    if add:
        dfs(cnt+1, res+nums[cnt], add-1, sub, mul, div)
    if sub:
        dfs(cnt+1, res-nums[cnt], add, sub-1, mul, div)
    if mul:
        dfs(cnt+1, res*nums[cnt], add, sub, mul-1, div)
    if div:
        dfs(cnt+1, int(res/nums[cnt]), add, sub, mul, div-1)


dfs(1, nums[0], add, sub, mul, div)
print(max_)
print(min_)

백트래킹을 이용해 모든 경우를 다 탐색하는 방법이다. 아직까지 재귀와 백트래킹 개념이 어려운 것 같다..

[백준 15652] N과 M (4) - Python (백트래킹, DFS)

태욘이 — Tue, 27 Oct 2020 00:08:58 +0900

15652번: N과 M (4)

한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해

www.acmicpc.net

<내 코드>

import sys
N, M = map(int, sys.stdin.readline().split())
visited = [0 for _ in range(N)]
arr = []


def dfs(cnt):
    if cnt == M:
        print(*arr)
        return

    for i in range(N):
        if visited[i] == 0:
            arr.append(i+1)

            dfs(cnt+1)  # 다음 깊이 탐색
            visited[i] = 1

            arr.pop()  # 탐사한 내용 제거
            # 시작 탐색 값만 제외시키도록 나머진 초기화
            for j in range(i+1, N):
                visited[j] = 0


dfs(0)

[백준 15651] N과 M (3) - Python (백트래킹, DFS)

태욘이 — Mon, 26 Oct 2020 23:56:55 +0900

15651번: N과 M (3)

www.acmicpc.net

<내 코드>

N, M = map(int, input().split())
#visited = [0 for _ in range(N)]
arr = []


def dfs(cnt):
    if cnt == M:
        print(*arr)
        return

    for i in range(N):
        arr.append(i+1)
        dfs(cnt+1)  # 다음 깊이 탐색
        arr.pop()  # 탐사한 내용 제거


dfs(0)

앞의 (1), (2) 순열, 조합 문제랑은 다르게 같은 수 중복 제거가 없다. 중복이 허용되고 그냥 탐사한 내용만 제거해주면 간단하게 된다.

[백준 15650] N과 M (2) - Python (백트래킹, DFS, 조합)

태욘이 — Mon, 26 Oct 2020 23:10:53 +0900

15650번: N과 M (2)

www.acmicpc.net

<내 코드>

N, M = map(int, input().split())
visited = [0 for _ in range(N)]
arr = []

def dfs(cnt):
    if cnt == M:
        print(*arr)
        return

    for i in range(N):
        if visited[i] == 0:
            visited[i] = 1  # 중복 제거
            arr.append(i+1)

            dfs(cnt+1)  # 다음 깊이 탐색
            arr.pop()  # 탐사한 내용 제거

            # 순열 부분과의 차이점
            for j in range(i+1, N):
                visited[j] = 0

dfs(0)

처음 i의 DFS 탐색에 사용 된 i값을 제외시키는 것이 순열과 다른 조합의 차이다.

파이썬 itertools 모듈의 combinations를 사용한 방법

from itertools import combinations

N, M = map(int, input().split())

p = combinations(range(1, N+1), M)
for i in p:
    print(*i)

[백준 15649] N과 M(1) - Python (백트래킹, DFS, 순열)

태욘이 — Mon, 26 Oct 2020 20:35:40 +0900

15649번: N과 M (1)

www.acmicpc.net

<내 코드>

N, M = map(int, input().split())
visited = [0 for _ in range(N)]
arr = []


def dfs(cnt):
    if cnt == M:
        print(*arr)
        return

    for i in range(N):
        if visited[i] == 0:
            visited[i] = 1  # 중복 제거
            arr.append(i+1)

            dfs(cnt+1)  # 다음 깊이 탐색

            visited[i] = 0  # 탐사 완료 후 다시 초기화
            arr.pop()  # 탐사한 내용 제거


dfs(0)

DFS와 백트래킹을 이용해 푸는 문제다. 재귀가 사용되다 보니 이해를 하는데 꽤 힘들었다..

파이썬 itertools 모듈을 사용한 방법

from itertools import permutations

N, M = map(int, input().split())

p = permutations(range(1, N+1), M)
for i in p:
    print(*i)

[백준 14226] 이모티콘 - Python (BFS, DP)

태욘이 — Sun, 25 Oct 2020 14:33:32 +0900

14226번: 이모티콘

영선이는 매우 기쁘기 때문에, 효빈이에게 스마일 이모티콘을 S개 보내려고 한다. 영선이는 이미 화면에 이모티콘 1개를 입력했다. 이제, 다음과 같은 3가지 연산만 사용해서 이모티콘을 S개 만

www.acmicpc.net

<내 코드>

from collections import deque


def bfs():

    while q:
        s, c = q.popleft()
        # 복사, 붙여넣기, 삭제 후 1초씩 증가 && 다녀간 곳 q에 추가
        # 복사
        if check[s][s] == -1:
            check[s][s] = check[s][c] + 1
            q.append((s, s))
        # 붙여넣기
        if s+c <= S and check[s+c][c] == -1:
            check[s+c][c] = check[s][c] + 1
            q.append((s+c, c))
        # 삭제
        if s-1 >= 0 and check[s-1][c] == -1:
            check[s-1][c] = check[s][c] + 1
            q.append((s-1, c))


S = int(input())
q = deque()
MAX = 1001
check = [[-1]*MAX for _ in range(MAX)]

check[1][0] = 0
q.append((1, 0))

bfs()

ans = -1
for i in range(S):
    if check[S][i] != -1:
        if ans == -1 or ans > check[S][i]:
            ans = check[S][i]
print(ans)

처음에 문제를 복사 - 붙여 넣기 - 복사- 붙여 넣기... 하는 것으로 잘못 이해했었다. 실제로는 클립보드에 들어있는 이모티콘은 여러 번 화면에 붙여 넣기가 가능한 것이다.

이 문제는 기존의 BFS 문제랑 조금 차이가 있다. 기존에는 입력을 그래프 형태로 주어졌는데, 이 문제는 본인이 새로 그래프를 만들어야 했다. 복사, 붙여넣기, 삭제 부분을 작성하고 현재 s,c에 대한 시간 check [s][c] 값에 +1초씩 해준다. 그리고 찾고자 하는 입력 값 check [s] 중 최솟값을 찾아 출력하면 된다.

[백준 1261] 알고스팟 - Python (우선순위 큐, BFS)

태욘이 — Sat, 24 Oct 2020 19:53:19 +0900

1261번: 알고스팟

첫째 줄에 미로의 크기를 나타내는 가로 크기 M, 세로 크기 N (1 ≤ N, M ≤ 100)이 주어진다. 다음 N개의 줄에는 미로의 상태를 나타내는 숫자 0과 1이 주어진다. 0은 빈 방을 의미하고, 1은 벽을 의미

www.acmicpc.net

<내 코드>

import heapq
import sys


def bfs():
    dx = [1, -1, 0, 0]
    dy = [0, 0, 1, -1]

    while(q):

        cnt, x, y = heapq.heappop(q)  # (0,0,0)형식
        done[x][y] = 1

        if x == N-1 and y == M-1:
            return cnt

        for i in range(4):
            nx = x + dx[i]
            ny = y + dy[i]

            if (0 <= nx < N) and (0 <= ny < M) and done[nx][ny] == 0:
                done[nx][ny] = 1

                # 길이 있는 경우 우선순위(최소힙)가 가도록 한다.
                if maps[nx][ny] == '0':
                    heapq.heappush(q, (cnt, nx, ny))
                elif maps[nx][ny] == '1':
                    heapq.heappush(q, (cnt+1, nx, ny))
                


M, N = map(int, sys.stdin.readline().split())
maps = [list(str(sys.stdin.readline())) for _ in range(N)]
q = []
done = [[0]*M for _ in range(N)]

heapq.heappush(q, (0, 0, 0))

print(bfs())

BFS와 우선수위 큐를 이용하는 독특한 문제이다. 처음에는 BFS로만 문제를 풀려고 했지만 어려웠다.

heap을 사용하는 이유는 '벽을 가장 적게 부수고 이동하는 경우'가 항상 우선순위에 있는 채로 BFS를 해야하기 때문이다.

여기서 길(0)이 있다면 우선순위를 줘서 그 길부터 가도록 한다. 만약 길이 없고 벽(1)만 있다면 cnt+1을 해줘 벽을 부순다. 우선순위가 낮은 값부터 탐색하게 되서 원하는 동작이 구현된다.

[백준 11286] 절댓값 힙 - Python (우선순위 큐, 힙)

태욘이 — Fri, 23 Oct 2020 16:13:35 +0900

11286번: 절댓값 힙

첫째 줄에 연산의 개수 N(1≤N≤100,000)이 주어진다. 다음 N개의 줄에는 연산에 대한 정보를 나타내는 정수 x가 주어진다. 만약 x가 0이 아니라면 배열에 x라는 값을 넣는(추가하는) 연산이고, x가 0

www.acmicpc.net

<내 코드>

import heapq
from sys import stdin

N = int(stdin.readline())
heap = []

for i in range(N):
    num = int(stdin.readline())
    if num == 0:
        if heap:
            print(heapq.heappop(heap)[1])
        else:
            print(0)

    else:
        heapq.heappush(heap, [abs(num), num]) # 절댓값 처리해 작은 값부터 힙에 넣는다.(우선순위, 값)

push 할 때는 절댓값을 기준으로 최소 힙으로 정렬해주면, pop의 경우에 절댓값이 작은 값이 먼저 pop 되고 절댓값이 작은 경우가 여러 개일 경우에는 기존 값이 작은 수가 먼저 출력되게 된다.

[백준 1927] 최소 힙 - Python( 우선순위 큐, 힙)

태욘이 — Fri, 23 Oct 2020 16:00:58 +0900

1927번: 최소 힙

첫째 줄에 연산의 개수 N(1≤N≤100,000)이 주어진다. 다음 N개의 줄에는 연산에 대한 정보를 나타내는 정수 x가 주어진다. 만약 x가 자연수라면 배열에 x라는 값을 넣는(추가하는) 연산이고, x가 0이

www.acmicpc.net

<내 코드>

import heapq
from sys import stdin
N = int(stdin.readline())
heap = []
for i in range(N):
    num = int(stdin.readline())
    if num == 0:
        if heap:
            print(heapq.heappop(heap)[1])
        else:
            print(0)

    else:
        heapq.heappush(heap, [num, num])

[백준 11279] 최대 힙 - Python ( 우선순위 큐, 힙)

태욘이 — Fri, 23 Oct 2020 15:26:33 +0900

11279번: 최대 힙

www.acmicpc.net

<내 코드>

import heapq
from sys import stdin

N = int(stdin.readline())
heap = []

for i in range(N):
    num = int(stdin.readline())
    if num == 0:
        if heap:
            print(-heapq.heappop(heap))  # 음수된 값에서 가장 작은 것 빼서 다시 음수하면 최대값임
        else:
            print(0)
    else:
        heapq.heappush(heap, -num)  # 음수처리해 최대힙처럼 구성

파이썬에서는 최소 힙만 제공해준다. 따라서 이 문제에서는 최대 힙을 활용해야 하기에 기본 힙 모듈을 최대 힙으로 구현했다.

방식은 여러 가지가 있는 것 같다. 내가 사용한 방법은 우선 heappush를 할 때 넣어주는 값을 음수 처리를 해준다.

그다음 heappop으로 값을 꺼내면 최솟값이 나오는데 이것을 다시 음수를 해주면 최댓값이 된다.

아래는 튜플, 리스트 형식을 활용한 방식이다.

import heapq
from sys import stdin
N = int(stdin.readline())
heap = []
for i in range(N):
    num = int(stdin.readline())
    if num == 0:
        if heap:
            print(heapq.heappop(heap)[1])  # 값은 리스트or 튜플형태로 나오기에 1번째 요소를 뽑으면 값이 된다.
        else:
            print(0)

    else:
        heapq.heappush(heap, [-num, num])  # 값을 넣을 때 반대로 우선순위 처리해준다. (우선순위, 값)

[백준 10973] 이전 순열 - Python (순열)

태욘이 — Thu, 22 Oct 2020 23:25:37 +0900

10973번: 이전 순열

첫째 줄에 입력으로 주어진 순열의 이전에 오는 순열을 출력한다. 만약, 사전순으로 가장 처음에 오는 순열인 경우에는 -1을 출력한다.

www.acmicpc.net

<내 코드>

N = int(input())
nums = list(map(int, input().split()))

k = N-2
check = False
while k > -1:
    if nums[k] > nums[k+1]:
        for i in range(k+1, len(nums)):
            if nums[i] < nums[k]:  # k 이후에서 nums[k]보다 작은 것중 가장 큰 인덱스 찾음
                m = i
                check = True
    if check == True:
        break

    k -= 1


if check == False:
    print(-1)
else:
    # k, m 값 바꾸기
    nums[k], nums[m] = nums[m], nums[k]

    # k 이후 값 내림차순 정렬
    tmp = nums[k+1:]
    tmp.sort(reverse=True)

    ans = nums[:k+1] + tmp
    print(*ans)

진짜 짜증나는 문제였다..

[백준 1476] 날짜 계산 - Python (브루트포스)

태욘이 — Thu, 22 Oct 2020 00:29:46 +0900

1476번: 날짜 계산

준규가 사는 나라는 우리가 사용하는 연도와 다른 방식을 이용한다. 준규가 사는 나라에서는 수 3개를 이용해서 연도를 나타낸다. 각각의 수는 지구, 태양, 그리고 달을 나타낸다. 지구를 나타

www.acmicpc.net

<내 코드>

E, S, M = map(int, input().split())

e, s, m = 1, 1, 1
year = 0
while True:
    year += 1

    if e == E and s == S and m == M:
        print(year)
        break

    e += 1
    s += 1
    m += 1

    if e == 16:
        e = 1
    if s == 29:
        s = 1
    if m == 20:
        m = 1