Opal1031

[GDGoC PKNU] 2026.05 Tech Talk

Opal1031 — Mon, 11 May 2026 22:53:02 +0900

2026.05.08 테크톡 발표자료입니다.

GDGoC PKNU 8기 파이썬 스터디 중간 점검 발표입니다.

Tech Talk.pdf

2.75MB

[Python] Algorithm #04: 완전탐색과 백트래킹

Opal1031 — Mon, 11 May 2026 21:02:36 +0900

이번 글에서는 완전탐색과 백트래킹을 함께 정리합니다.

완전탐색은 가능한 경우를 모두 확인하는 방법입니다.

백트래킹은 그 중 의미 없는 경우를 중간에 잘라내며 탐색 효율을 높이는 방식입니다.

코딩테스트에서는 둘을 따로 쓰기도 하고, 함께 섞어서 쓰는 경우도 많습니다.

1. 완전탐색이란

완전탐색(Brute Force)은 가능한 모든 경우를 빠짐없이 확인하는 방법입니다.

문제를 빠르게 푸는 핵심은 "모든 경우를 직접 만들어볼 수 있는가"를 판단하는 것입니다.

경우의 수가 작으면 가장 확실한 방법입니다.
조건이 복잡해도 일단 전부 검사하면 정답을 찾을 수 있습니다.
대신 경우의 수가 너무 크면 시간 초과가 날 수 있습니다.

예를 들어 숫자 3개를 골라 합을 구하거나, 문자열의 모든 부분집합을 확인하는 문제는 완전탐색으로 접근할 수 있습니다.

nums = [1, 2, 3]

for i in range(len(nums)):
    for j in range(len(nums)):
        if (i != j):
            print(nums[i], nums[j])

반복문을 여러 번 중첩해서 모든 경우를 보는 방식이 가장 단순한 완전탐색입니다.

2. 완전탐색의 대표 방식

완전탐색은 문제에 따라 여러 형태로 나타납니다.

반복문 중첩: 작은 범위의 경우를 직접 모두 확인할 때 사용합니다.
재귀 호출: 선택과 비선택을 반복해야 할 때 사용합니다.
순열/조합/부분집합 생성: 경우의 수를 체계적으로 만들 때 사용합니다.

from itertools import permutations, combinations

nums = [1, 2, 3]

print(list(permutations(nums, 2)))
print(list(combinations(nums, 2)))

파이썬에서는 itertools를 활용하면 순열과 조합을 간단하게 만들 수 있습니다.
직접 구현하는 것보다 코드가 짧아지기 때문에, 문제에서 허용된다면 적극적으로 사용할 수 있습니다.

3. 백트래킹이란

백트래킹(Backtracking)은 탐색 도중 더 볼 필요가 없는 경우를 만나면 그 경로를 중단하고 되돌아가는 기법입니다.

즉, "아무거나 다 해보는 완전탐색"에 "불필요한 가지치기"를 더한 방식이라고 볼 수 있습니다.

현재 선택이 조건을 위반하면 더 깊게 들어가지 않습니다.
가능한 후보만 이어서 탐색합니다.
재귀와 함께 자주 사용됩니다.

백트래킹이 필요한 대표 문제는 순열 생성, N과 M 시리즈, N-Queen, 스도쿠 등이 있습니다.

def dfs(nums, path, used):
	# 경우의 수를 모두 모았으면 출력
	if (len(path) == 2):
		print(path)
		return

	# 아직 사용하지 않은 숫자를 선택
	for num in nums:
		if (num in used):
			continue

		# 선택
		path.append(num)
		used.add(num)

		# 다음 선택으로 재귀
		dfs(nums, path, used)

		# 선택 취소 (백트래킹)
		path.pop()
		used.remove(num)

nums = [1, 2, 3]
dfs(nums, [], set())

위의 예시처럼 선택한 뒤에는 다시 원상복구하는 과정이 중요합니다.

4. 순열과 조합 만들기

백트래킹은 순열과 조합을 직접 만드는 데 자주 쓰입니다.

아래 예시는 모두 재귀를 기반으로 백트래킹을 적용한 구현입니다.

각 선택 후 자신을 다시 호출하고, 원상복구하는 방식으로 모든 경우를 탐색합니다.

순열은 순서가 중요하고, 조합은 순서가 중요하지 않습니다.

def permutations_backtracking(nums, path, used):
	# 모든 원소를 선택했으면 순열 완성
	if (len(path) == len(nums)):
		print(path)
		return

	# 아직 사용하지 않은 각 원소를 시도
	for num in nums:
		if (used[num]):
			continue

		# 현재 원소 선택
		used[num] = True
		path.append(num)

		# 다음 위치에 올 원소 선택
		permutations_backtracking(nums, path, used)

		# 선택 취소
		path.pop()
		used[num] = False

nums = [1, 2, 3]
used = {1: False, 2: False, 3: False}

permutations_backtracking(nums, [], used)

조합은 보통 현재 위치를 기준으로 뒤쪽만 선택하도록 만들면 됩니다.

def combinations_backtracking(nums, start, path):
	# 2개를 선택했으면 조합 완성
	if (len(path) == 2):
		print(path)
		return

	# start 이후의 원소만 선택 (중복 제거)
	for i in range(start, len(nums)):
		path.append(nums[i])
        
		# 현재 위치 다음부터 선택하도록 (순서 고정)
		combinations_backtracking(nums, i + 1, path)
		path.pop()

nums = [1, 2, 3]
combinations_backtracking(nums, 0, [])

5. 백트래킹의 핵심: 가지치기

백트래킹에서 가장 중요한 건 가지치기입니다.

현재 상태가 이미 조건을 만족할 수 없다고 판단되면, 더 내려가지 않고 바로 종료합니다.

예를 들어 합이 목표값을 넘은 경우, 이미 사용한 숫자가 중복된 경우, 규칙을 위반한 경우 등이 있습니다.

def dfs(total, idx, nums, target):
	# 가지치기: 합이 목표를 넘으면 더 볼 필요 없음
	if (total > target):
		return

	# 모든 원소를 확인했으면 합이 목표와 같은지 확인
	if (idx == len(nums)):
		if (total == target):
			print("가능한 경우")
            
		return

	# 현재 원소를 선택하는 경우
	dfs(total + nums[idx], idx + 1, nums, target)
    
	# 현재 원소를 선택하지 않는 경우
	dfs(total, idx + 1, nums, target)

nums = [1, 3, 5]
dfs(0, 0, nums, 6)

가지치기를 잘하면 완전탐색보다 훨씬 적은 경우만 확인할 수 있습니다.

6. 자주 하는 실수/주의점

• 재귀 호출 후 원상복구를 빼먹으면 다음 탐색 결과가 틀어질 수 있습니다.
• 방문 여부를 관리할 때는 선택과 해제를 짝으로 맞춰야 합니다.
• 중복을 허용하지 않는 문제에서는 같은 경우를 여러 번 세지 않도록 주의해야 합니다.
• 가지치기를 너무 늦게 하면 백트래킹의 의미가 줄어듭니다.
• 경우의 수가 너무 큰 문제는 완전탐색으로는 해결이 어렵습니다.

7. 종합 예제

아래는 1부터 4까지의 숫자에서 2개를 골라 합이 5가 되는 경우를 찾는 예제입니다.

완전탐색 방식

def find_cases(nums, start, path, target):
	# 2개를 선택했으면 합 확인
	if (len(path) == 2):
		if (sum(path) == target):
			print(path)
            
		return

	# start 이후의 원소만 선택하는 조합
	for i in range(start, len(nums)):
		path.append(nums[i])
		find_cases(nums, i + 1, path, target)
		path.pop()

nums = [1, 2, 3, 4]
find_cases(nums, 0, [], 5)

백트래킹 방식

def find_cases_backtracking(nums, start, path, target):
	# 가지치기: 합이 목표를 이미 넘었으면 이후 더할 수 있는 건 양수뿐이므로 의미 없음
	if (sum(path) > target):
		return

	# 2개를 선택했으면 합 확인
	if (len(path) == 2):
		if (sum(path) == target):
			print(path)
            
		return

	# start 이후의 원소만 선택하는 조합
	for i in range(start, len(nums)):
		path.append(nums[i])
		find_cases_backtracking(nums, i + 1, path, target)
		path.pop()

nums = [1, 2, 3, 4]
find_cases_backtracking(nums, 0, [], 5)

이 문제는 완전탐색으로 모든 조합을 확인하고, 조건에 맞는 경우만 출력하는 방식입니다.

규모가 커지면 여기에 가지치기를 추가해서 불필요한 탐색을 줄일 수 있습니다.

8. 종합 요약

• 완전탐색: 가능한 모든 경우를 확인하는 방법
• 백트래킹: 불필요한 경우를 중간에 잘라내는 완전탐색
• 재귀와 함께 자주 사용됨
• 순열, 조합, 부분집합 문제에 특히 유용함
• 가지치기를 잘하면 탐색 효율을 크게 높일 수 있음

[Python] Basic #04: 딕셔너리 (Dictionary)

Opal1031 — Mon, 11 May 2026 17:47:13 +0900

Python에서 핵심 자료구조 중 하나인 딕셔너리에 대해 다룹니다.

딕셔너리의 기초 문법부터 주요 메서드 및 기능까지 함께 살펴보겠습니다.

1. 딕셔너리 (Dictionary)

딕셔너리는 데이터를 Key-Value쌍으로 저장하며, 여러 값들을 효과적으로 관리할 수 있는 자료구조입니다.

Key
데이터를 식별할 수 있는 고유 값

Value
Key와 연결된 데이터

리스트 (List) vs 딕셔너리 (Dictionary)

딕셔너리 생성 및 기본 사용법

# 딕셔너리 생성
info = {"name": "Alice", "age": 25}

# 값 접근
print(info["name"])  # 출력: Alice

# 값 수정
info["age"] = 26
print(info["age"])  # 출력: 26

2. 딕셔너리 주요 메서드 및 기능

딕셔너리가 기본적으로 제공하는 몇 가지 유용한 메서드를 알아봅시다.

.keys(), .values(), .items()

딕셔너리에 포함되는 값들에 대한 직접적인 접근을 하는 메서드입니다.

info = {"name": "Alice", "age": 25}

print(info.keys())   # dict_keys(['name', 'age'])
print(info.values()) # dict_values(['Alice', 25])
print(info.items())  # dict_items([('name', 'Alice'), ('age', 25)])

.get()을 사용한 안전한 키 접근

키가 존재하지 않을 때 기본값을 반환하도록 설정합니다.

이를 통해 KeyError 예외를 방지하고, 안전하게 기본값(default)을 반환받아 프로그램의 안정성과 보안성을 높일 수 있습니다.

print(info.get("city", "Unknown"))  # 출력: Unknown

찾고자 하는 key(city)가 있으면 값을 출력하고, 없으면 기본값(Unknown)을 출력합니다.

항목 추가/수정/삭제
각 값에 대한 데이터 관리를 키를 이용하여 처리할 수 있습니다.

info[“key”] = value        # 값 수정
del info[“key”]            # 값 삭제

in 키워드를 이용한 키 확인
특정 키가 딕셔너리에 존재하는지 확인할 수 있습니다.

if "name" in info:
    print("Key exists!")

3. 딕셔너리 활용

딕셔너리 컴프리헨션 (Dictionary Comprehension)

딕셔너리를 빠르고 간결하게 생성할 수 있는 파이썬 만의 문법입니다.

# 리스트 데이터를 딕셔너리로 변환

students = [{"name": "Alice", "score": 85}, {"name": "Bob", "score": 90}]
scores = {s["name"]: s["score"] for s in students}

print(scores)  # 출력: {'Alice': 85, 'Bob': 90}

이미 리스트라는 형태로 데이터가 존재하는데 딕셔너리로 변환하는 이유는 다음과 같습니다.

검색 속도: 키(key)를 알면 데이터의 양과 상관없이 즉시 값을 찾음
데이터 간의 관계(의미) 표현: 두 개 이상의 정보를 한 쌍으로 묶어 데이터의 관계를 명확히 정의
데이터 수정과 관리의 편리함: 리스트에서 인덱스 번호를 알아낼 필요없이 바로 접근 가능

데이터 분류와 집계

# 문자열에서 각 알파벳의 빈도수 세기

text = "hello world"
freq = {}

for char in text:
    if char in freq:
        freq[char] += 1

    else:
        freq[char] = 1

print(freq)  # 출력: {'h': 1, 'e': 1, 'l': 3, 'o': 2, ...}

4. 딕셔너리 활용 패턴

문자열에서 각 문자 개수 세기

text = "hello world"
freq = {}

for char in text:
    freq[char] = freq.get(char, 0) + 1

print(freq) # 출력: {'h': 1, 'e': 1, 'l': 3, 'o': 2, ' ': 1, 'w': 1, 'r': 1, 'd': 1}

값 기준 정렬하기

scores = {"Alice": 85, "Bob": 90, "Charlie": 80}

# 딕셔너리를 값 기준으로 내림차순 정렬
sorted_scores = dict(sorted(scores.items(), key = lambda x: x[1], reverse = True))

print(sorted_scores)
# 출력: {'Bob': 90, 'Alice': 85, 'Charlie': 80}

두 배열의 공통 요소 찾기

# 배열 두 개
arr1 = [1, 2, 3, 4, 5]
arr2 = [3, 4, 5, 6, 7]

# 딕셔너리로 배열 1의 모든 값을 저장
map_dict = {x: True for x in arr1}

# 배열 2를 순회하며 공통 요소 찾아내기
common_elements = [x for x in arr2 if x in map_dict]

print(common_elements)
# 출력: [3, 4, 5]

Two Sum

합이 target이 되는 두 숫자의 인덱스를 찾는 전형적인 코딩 테스트 문제입니다.

내가 필요한 숫자(diff)가 이미 나온 적 있는지 확인하는 동시에 현재 숫자와 그 위치를 기록하는 방식입니다.

nums = [2, 7, 11, 15]
target = 9

num_dict = {}

for i, num in enumerate(nums):
    diff = target - num

    if diff in num_dict:  # 이전에 봤던 숫자가 현재 값의 차이(diff)라면 인덱스 반환
        print([num_dict[diff], i])

        break

    num_dict[num] = i

# 출력: [0, 1]

[Python] Algorithm #03: 이분 탐색 (Binary Search)

Opal1031 — Wed, 6 May 2026 18:12:09 +0900

이번 글에서는 정렬을 간단히 짚고, 이분 탐색을 중심으로 다룹니다.

정렬은 이분 탐색을 위한 전제 조건이 되는 경우가 많습니다.

그래서 정렬 자체는 짧게 보고, 이분 탐색의 원리와 활용에 더 집중해보겠습니다.

정렬에 대한 세부적인 내용은 기초 트랙을 참고하시면 되겠습니다.

[Python] Basic #03: 정렬

Python에서 정렬을 다루는 방법을 다룹니다. 리스트를 정렬할 때 자주 사용하는 sort()와 sorted(), 정렬 기준을 바꾸는 key, 간단한 함수를 만드는 lambda, 그리고 역순 정렬까지 함께 살펴보겠습니다.1.

opal1031.tistory.com

1. 정렬은 왜 필요한가

이분 탐색은 정렬된 데이터에서만 제대로 사용할 수 있습니다.

데이터가 정렬되어 있어야 가운데 값을 기준으로 왼쪽과 오른쪽 중 어디를 버릴지 판단할 수 있기 때문입니다.

nums = [5, 2, 9, 1, 3]

nums.sort()
print(nums)  # [1, 2, 3, 5, 9]

result = sorted(nums)
print(result)  # [1, 2, 3, 5, 9]

sort()는 원본 리스트를 바꾸고, sorted()는 새로운 리스트를 반환합니다.

이분 탐색을 할 데이터는 보통 먼저 정렬해 둡니다.

2. 이분 탐색의 기본 원리

이분 탐색(Binary Search)은 정렬된 배열에서 원하는 값을 빠르게 찾는 방법입니다.

가운데 값을 확인한 뒤, 찾는 값이 더 작으면 왼쪽, 더 크면 오른쪽만 남기고 탐색 범위를 절반씩 줄입니다.

배열이 정렬 되어있기에 크기 비교를 통해 가능합니다.

시간복잡도는 O(log n)입니다.

매번 탐색 범위가 절반으로 줄어들기 때문에 데이터가 커질수록 효율이 좋습니다.

nums = [1, 2, 3, 5, 9]
target = 5

left = 0
right = len(nums) - 1
found = False

while (left <= right):
    mid = (left + right) // 2

    if (nums[mid] == target):
        found = True
        break
        
    elif (nums[mid] < target):
        left = mid + 1
        
    else:
        right = mid - 1

print(found)  # True

3. 직접 구현하는 이분 탐색

코딩테스트에서는 이분 탐색을 직접 구현할 수 있어야 합니다.

반복문으로 구현하면 이해하기 쉽고, 범위를 직접 제어하기도 편합니다.

def binary_search(arr, target):
    left = 0
    right = len(arr) - 1

    while (left <= right):
        mid = (left + right) // 2

        if (arr[mid] == target):
            return mid
            
        elif (arr[mid] < target):
            left = mid + 1
            
        else:
            right = mid - 1

    return -1

nums = [1, 2, 3, 5, 9]

print(binary_search(nums, 3))  # 2
print(binary_search(nums, 4))  # -1

반환값을 True/False로 둘 수도 있고, 위치 인덱스로 둘 수도 있습니다.

4. bisect 모듈 활용

Python에서는 bisect 모듈을 사용하면 정렬된 리스트에서 위치를 쉽게 찾을 수 있습니다.

bisect_left()는 삽입될 왼쪽 위치를, bisect_right()는 오른쪽 위치를 반환합니다.

import bisect

nums = [1, 2, 2, 2, 3, 5]

left = bisect.bisect_left(nums, 2)
right = bisect.bisect_right(nums, 2)

print(left)   # 1
print(right)  # 4

bisect_left()와 bisect_right()는 같은 값이 여러 개 있을 때 유용합니다.
첫 등장 위치와 마지막 다음 위치를 구할 수 있기 때문입니다.

5. 이분 탐색 응용

이분 탐색은 단순히 값을 찾는 것뿐 아니라, 조건을 만족하는 최소값이나 최대값을 찾는 데도 자주 쓰입니다.

예를 들어 “이 값 이상이 처음 나오는 위치”를 찾는 문제는 정렬과 이분 탐색을 함께 활용하면 쉽게 풀 수 있습니다.

import bisect

scores = [10, 20, 20, 35, 40, 50]
target = 20

idx = bisect.bisect_left(scores, target)
print(idx)  # 1

if (idx < len(scores)):
    print(scores[idx])  # 20

이런 방식은 중복 원소가 있는 배열, 점수 기준 필터링, 구간 탐색 문제에서 자주 등장합니다.

6. 자주 하는 실수/주의점

• 이분 탐색은 정렬된 데이터에서만 사용할 수 있습니다.
• 중간값은 보통 (left + right) // 2로 구합니다.
• left, right 갱신을 잘못하면 무한 루프가 생길 수 있습니다.
• bisect_left()와 bisect_right()의 차이를 구분해야 합니다.
• 중복 값이 있을 때는 “찾는다”보다 “어디에 들어가는가”를 기준으로 생각하면 편합니다.

7. 종합 예제

아래 예시는 학생 점수 목록에서 특정 점수가 처음 등장하는 위치를 찾는 예제입니다.

import bisect

scores = [45, 50, 50, 60, 70, 80, 80, 90]
target = 80

# target이 들어갈 가장 왼쪽 위치
idx = bisect.bisect_left(scores, target)

if (idx < len(scores) and scores[idx] == target):
    print(idx)  # 5
    
else:
    print(-1)

직접 구현한 이분 탐색과 bisect의 역할을 모두 알고 있으면, 문제에 따라 더 빠르게 선택할 수 있습니다.

8. 종합 요약

• 정렬: 이분 탐색의 전제 조건
• 이분 탐색: 정렬된 데이터에서 범위를 절반씩 줄이며 탐색
• 시간복잡도: O(log n)
• bisect_left(): 왼쪽 삽입 위치
• bisect_right(): 오른쪽 삽입 위치
• 반복문 구현: 코딩테스트에서 자주 사용

[Python] Basic #03: 정렬

Opal1031 — Wed, 6 May 2026 17:13:23 +0900

Python에서 정렬을 다루는 방법을 다룹니다.

리스트를 정렬할 때 자주 사용하는 sort()와 sorted(), 정렬 기준을 바꾸는 key, 간단한 함수를 만드는 lambda, 그리고 역순 정렬까지 함께 살펴보겠습니다.

1. sort()와 sorted()

sort()와 sorted()는 모두 데이터를 정렬할 때 사용합니다.

sort()

리스트 자체를 직접 정렬

nums = [5, 2, 9, 1, 3]

nums.sort()

print(nums)  # [1, 2, 3, 5, 9]

list형의 method 중 하나이므로 list.sort()의 형태로 작성한다.

sorted()

정렬된 새로운 리스트를 반환

nums = [5, 2, 9, 1, 3]

result = sorted(nums)

print(result)  # [1, 2, 3, 5, 9]
print(nums)    # [5, 2, 9, 1, 3]

내장 함수이므로, sorted(list)의 형태로 작성한다.

sort()는 원본을 바꾸기 때문에 이후에도 같은 리스트를 계속 사용할 계획이라면 주의해야 합니다.

2. key 활용

정렬할 때 값 자체가 아니라 특정 기준으로 정렬하고 싶을 때가 있습니다.

이럴 때 key 인자를 사용하면 됩니다.

key에는 정렬 기준이 되는 함수를 넣습니다.

words = ["banana", "apple", "kiwi", "pear"]

result = sorted(words, key = len)

print(result)  # ['kiwi', 'pear', 'apple', 'banana']

students = [
    ("Alice", 90),
    ("Bob", 75),
    ("Charlie", 85)
]

result = sorted(students, key = lambda x: x[1])

print(result)  # [('Bob', 75), ('Charlie', 85), ('Alice', 90)]

key를 사용하면 문자열 길이, 숫자, 튜플의 특정 위치처럼 다양한 기준으로 정렬할 수 있습니다.

3. lambda 함수

lambda는 짧은 함수를 한 줄로 작성할 때 사용합니다.

정렬 기준이 간단할 때 lambda를 함께 쓰면 코드가 짧고 보기 쉬워집니다.

별도의 이름 없는 익명 함수를 즉석에서 정의하여 코드를 획기적으로 간결하게 만들고, 가독성을 높이며, 불필요한 함수 정의 과정을 줄여줍니다.

nums = [1, -4, 3, -2, 5]

result = sorted(nums, key = lambda x: abs(x))

print(result)  # [1, -2, 3, -4, 5]

points = [(3, 4), (1, 2), (5, 1)]

result = sorted(points, key = lambda x: x[0] + x[1])

print(result)  # [(1, 2), (3, 4), (5, 1)]

4. 역순 정렬

내림차순으로 정렬하고 싶을 때는 reverse = True를 사용합니다.

숫자뿐 아니라 문자열, 튜플 정렬에도 동일하게 적용할 수 있습니다.

nums = [5, 2, 9, 1, 3]

result = sorted(nums, reverse = True)

print(result)  # [9, 5, 3, 2, 1]

words = ["banana", "apple", "kiwi", "pear"]

result = sorted(words, key = len, reverse = True)

print(result)  # ['banana', 'apple', 'pear', 'kiwi']

reverse = True는 key와 함께 자주 사용됩니다. 정렬 기준은 유지한 채 순서만 반대로 바꿀 수 있습니다.

5. 종합 예제

아래 예시는 학생 정보를 이름, 점수 기준으로 정리하는 간단한 예제입니다.

students = [
    {"name": "Alice", "score": 90},
    {"name": "Bob", "score": 75},
    {"name": "Charlie", "score": 85},
    {"name": "Dave", "score": 90}
]

# 점수 오름차순 정렬
by_score = sorted(students, key = lambda x: x["score"])
print(by_score)

# 점수가 같으면 이름 순으로 정렬
by_score_name = sorted(students, key = lambda x: (x["score"], x["name"]))
print(by_score_name)

# 점수 내림차순 정렬
desc_score = sorted(students, key = lambda x: x["score"], reverse = True)
print(desc_score)

정렬 문제에서는 어떤 기준으로 정렬할지 먼저 정하고, 그 기준을 key와 lambda로 표현하는 습관을 들이면 좋습니다.

6. 자주 하는 실수/주의점

• sort()는 원본 리스트를 직접 바꾸고, sorted()는 새 리스트를 만듭니다.
• key에는 정렬 기준을 반환하는 함수를 넣어야 합니다.
• reverse = True는 내림차순 정렬을 의미합니다.
• 문자열 숫자를 정렬할 때는 실제 숫자 기준인지 문자 기준인지 확인해야 합니다.

7. 종합 요약

• sort(): 리스트 자체를 정렬
• sorted(): 정렬된 새 리스트 반환
• key: 정렬 기준 지정
• lambda: 간단한 정렬 기준을 짧게 작성
• reverse = True: 역순 정렬

[GDGoC PKNU] 7기 비기너 지원 과정 및 합격 후기

Opal1031 — Wed, 6 May 2026 16:36:04 +0900

들어가면서…

2025년 복학을 하면서, 개발자로 성장하고 싶다는 마음이 더욱 커졌다.
그래서 꼭 개발자들을 위한 동아리에 가입해야겠다고 다짐했다.

하지만 1학기에는 이전에 활동하던 동아리에서 회장직을 맡게 되었다.
개인의 성장을 잠시 미루더라도, 다수와 함께하는 책임을 다하는 것이 우선이라고 생각했다.
그래서 그때는 개발 관련 동아리 가입을 잠시 뒤로 미루기로 했다.

그리고 마침내 회장 임기를 마치고 나서, 바로 GDGoC PKNU에 지원하게 된 것이다.

이 글은 많은 사람들이 GDGoC에 관심은 있지만, 중앙 동아리가 아니다 보니 정보가 부족한 경우가 많은 것 같았다.

그래서 직접 지원하며 겪은 과정을 되돌아보며 정리하게 되었다.

GDGoC PKNU를 선택한 이유

사실 이 내용은 면접 때도 받았던 질문이다.

나의 희망 진로는 결국 정보 보안 전문가(화이트 해커)다.
관련된 기초 지식은 필요하지만, 보안 분야는 결국 스스로 깊게 공부해야 한다는 것도 잘 알고 있다.

학교에는 정보 보안을 다루는 중앙 동아리도 있고,
교수님의 연구실과 연계된 과 동아리도 있고,
대학생 연합 개발자 동아리도 있다.
그럼에도 나는 GDGoC PKNU의 모집 공고만을 기다렸다.

그 이유는 2022년으로 거슬러 올라간다.

그 당시 GDSC가 주최한 제 1회 ‘놀러와요 해커톤’ 에 참여했다.
다양한 학교의 개발자들과 소통하며 해커톤을 진행했고, 고등학생 시절 웹 공부를 위해 자주 참고했던 생활코딩 이고잉(egoing) 님의 Git 세션 특강까지 들을 기회도 있었다.

이 경험을 통해 GDSC라는 동아리가 체계적이고, 네트워킹이 활발하며, 얻어갈 수 있는 게 많은 곳이라는 확신이 생겼다.
그리고 “복학하면 꼭 가입해야겠다”라고 마음먹었다.

물론 보안과 직결되는 동아리에 들어갔다면 더 직접적인 경험을 얻었을 수도 있다.
하지만 나는 아직 그 정도 단계가 아니라고 생각했고, 처음 진로를 컴퓨터 쪽으로 정할 때도 ‘정보보호학과’가 아닌 ‘컴퓨터공학과’를 선택했던 이유 역시 기초 이론을 먼저 다지자는 생각 때문이었다.

이번에도 같은 맥락에서, 보안 이전에 기본기를 더 넓히고 쌓을 수 있는 GDGoC PKNU가 나에게 맞는 선택이라고 생각했다.

GDGoC PKNU란

GDGoC(Google Developer Groups on Campus) PKNU는 함께 배우고, 만들고, 성장하는 부경대학교 학생 개발자 커뮤니티입니다.

비기너부터 현업 개발자 분들까지 약 110여명의 멤버들이 함께하고 있습니다.

지원 과정

01. 트랙 결정

비기너 / 멤버 중 어느 과정으로 지원할 지 고민이 많았다.

처음에는 멤버 과정을 지원하려 했다.
이전에 활동했던 과 선배에게 물어보니, 멤버 과정은 실질적인 프로젝트를 진행하는 경우가 많고, 비기너 과정은 개발에 입문한 사람들이 주로 참여한다는 이유에서였다.

그러나 결국 나는 비기너 과정(백엔드 트랙)으로 지원했다.
프론트엔드는 고등학생 때나 1학기 전공 수업에서 간단히 다뤄본 적이 있어 기본은 알고 있었지만, 백엔드 분야는 한 번도 경험해본 적이 없었기 때문이다.
새로운 영역을 배워보고 싶다는 마음이 더 컸다.

물론 프론트엔드 트랙에서 리액트를 배우고 싶은 마음도 있었다. 하지만 해당 과정은 HTML/CSS/JS 같은 기초부터 시작하는 커리큘럼으로 보였기에, 나에게는 백엔드가 더 적합하다고 생각했다.

02. 서류 지원

서류 지원 과정에서 큰 어려움은 없었다.
기본적인 인적 사항을 작성한 뒤, 총 세 가지 문항과 마지막으로 블로그 및 Github를 첨부하는 항목이 있었다.

지원 동기 서술

500자 내외 분량이었기에, 앞서 정리했던 GDGoC PKNU를 선택한 이유를 중심으로 솔직하게 서술했다.

프로젝트 및 대회 참여 등의 활동 서술

평소 기록을 남기는 습관이 있어 Github에 백업해두었던 내용을 바탕으로 풀어썼다.

빈 수레가 요란하다.

물론 아직 수상 경력이나 대규모 프로젝트 경험은 없다.
하지만 비기너 트랙에 지원한 만큼, 부족한 실력이라도 꾸준히 참여하고 발전하려는 모습을 보여주는 데 집중했다.

갈등 해결 경험 및 리더십 관련 내용 서술

개발자로 살아가기 위해서는 팀 프로젝트가 필수적이다.
프론트엔드, 백엔드, 디자이너 등 다양한 역할의 사람들과 협업하다 보면 갈등은 불가피하게 발생한다.

나는 평소 조별 과제나 팀플에서 주로 팀을 이끌며 진행하는 편이고, 갈등을 키우지 않고 조율하려는 성격이다.

이러한 경험을 바탕으로, 동아리 임원 및 회장직을 맡아 활동했던 사례를 함께 녹여 서술했다.

03. 면접

냅다 합격해버렸다.

서로 알아가는 과정이며 부담없이 참가해달라는 멘트에 갑자기 새로운 활동을 하는 모습을 그리며 설레기 시작했다.
면접 날짜를 예약하고, 당일에도 편한 마음으로 학교로 갔다.

면접은 부담 없는 자리라 했지만, 막상 들어가니 예상보다 긴장되는 분위기였다.
코어 멤버 세 분 앞에서 진행되었고, 단순 질의응답을 생각했는데 생각보다 빡빡하게 느껴졌다.

자기소개 및 서류 지원 내용

간단하게 나를 소개하고, 제출한 서류에 관한 이야기를 다시 하였다.
크게 꾸밈없이 내가 직접 활동하고 겪었던 내용을 직접 작성하였기에, 준비없이 간 것 치고는 무난하게 답변한 것 같다.

GDGoC PKNU에 지원한 이유

면접을 시작하고 아,, 이런 분위기구나,, 를 깨달은 뒤 바로 머리를 굴리면서 어떤 내용을 물어볼까.. 생각하면서 가장 먼저 예상했던 내용이다.

모두가 의문을 가질만한 내용이었다.
코어 멤버분들도 학교 재학생이며, 컴퓨터공학 전공으로 재학 중이기에 관련 동아리의 존재는 당연히 알고 있을 것이다.

하지만 이 또한 나름 나만의 생각을 가지고 지원했었기에 잘 설명하였다.
이후 코어 멤버분께 이 동아리에 대해 어떻게 생각하는지와 어떠한 이유에서 지원했는지 모두 말하고 나니, 동아리에 대해 애정을 가져주는 것 같아서 고맙다는 답변을 받았다.(!!!)

비기너로 지원한 이유

서류 지원 때 개인 블로그 및 Github가 있다면 첨부해달라는 항목에 반가운 마음으로 모두 작성하였다.

면접을 진행하면서 한 분께서 직접 Github를 구경(?)하는 것 같았다.

그러면서 이 정도면 멤버 과정으로 지원해도 될 것 같은데, 비기너 과정으로 지원한 이유를 물어보셔서, 백엔드에 관해서는 무지하기에 배워보고 싶다는 답변을 하였다.

백엔드 트랙으로 지원한 이유

앞의 질문과 함께 이어지는 질문이었다.
백엔드에 관련해서는 무지한 수준이기에 비기너로 지원하였다는 답변을 하였다.

활동한 내용들을 살펴보시더니 크롤링과 관련된 내용들이 많던데 데이터분석에는 관심이 없냐고 물어보셔서 단호하게 없다고 했다.

백엔드 트랙을 진행하기 위해서 Java를 사용하는데 기본적인 지식이 있나는 질문에, 사실 나는 Python을 주로 사용하고, 전공 수업을 위해 C++을 간간히 쓰는 정도였기에 사실대로 말하고, 자습하면서 따라갈 수 있다고 답변했다.

처음 이 질문들을 받을 때, 이 사람이 정말 백엔드에 관심이 있어서 지원한건지 확인하는 거라 생각하고 나름 침착하게 답변하려했다.
그러나 면접 도중 코어 멤버 한 분이 면접과는 외적으로 과선배로써의 조언을 해주셨다. 알고보니 이번 백엔드 트랙을 진행하는 멘토 분이셨다.

처음 개발을 접하는 비기너를 위한 방식으로 진행되겠지만, 아에 무지한 상태로 접하면 전공 과목 1~2개 수준의 분량이 될 수도 있다는 것이었다. 프론트엔드를 기본적으로 할 줄 안다지만, 정작 실무에서 많이 사용되는 React와 같은 내용은 모르기에 프론트엔드 트랙을 들어보는 것은 어떠하냐는 내용이었다.
이어서 옆에 있던 프론트엔드 멘토분께서 커리큘럼을 설명해주시는데 주된 내용은 HTML / CSS / JS에 관한 내용은 초반에 일부이고 React를 주로 다루게 될 거라고 설명해주셨다.

비기너 과정을 한 번 한 이후에는 멤버로 활동해야한다고 생각했었기에, 혹시 이번에 비기너 과정에서 프론트엔드 트랙을 들어도 다음 학기에 다른 트랙의 내용을 들을 수 있냐고 질문한 결과, 가능하다는 답변을 들었다.

그래서 나는 이러한 이유에서 백엔드 트랙에 지원했었는데, 여러번의 수강이 가능하다면 프론트엔드를 먼저 하고 싶은 생각도 있다라고 답변하며 즉석에서 지원을 변경하게 되었다.

해당 코어 멤버분의 조언에 매우 감사하게 생각하고 있다.

기타 질문

이 외에는 면접을 하면 당연히 물어보는 그러한 내용들이었고, 궁금한 내용들을 질문하는 시간이었다.
트랙 변경을 하는 과정에서 이미 고민이 해결돼서 크게 더 할 말은 없었다.

최종 합격

면접 다음 날이 바로 개강이었고, 수강 정정도 해야했기에 정신없는 와중에도 메일함을 계속 새로고침 하였다.
그리고 드디어 비기너 최종 합격이라는 메일을 받았다!!!

바로 공지사항을 확인하고, 팀 채팅 및 디스코드 채널에 참가했다.
이후 프론트엔드 트랙 멘토와 비기너들이 모인 단톡방에도 초대되며 본격적인 활동이 시작되었다.

마치며…

앞으로 프론트엔드 트랙을 수강하며 배운 내용을 이어서 기록할 예정이다.
GDGoC는 예전부터 참여하고 싶던 커뮤니티였고, 나름 열심히 준비한 끝에 합격했기에 더 열심히 임하려 한다.

이 글이 미래의 지원자들에게 작은 도움이 되기를 바라며 글을 마친다.

[Frontend] #06. React - 비동기 통신

Opal1031 — Wed, 6 May 2026 16:30:14 +0900

비동기 통신

Axios를 사용하여 서버와 HTTP 통신을 수행하고 데이터를 주고받을 수 있다.

1️⃣ 비동기 통신 개요

동기 vs 비동기

구분	동기 통신	비동기 통신
처리 방식	요청 → 응답 대기 → 다음 작업	요청 → 다른 작업 진행 → 응답 처리
적합한 경우	은행 서비스 (정확성 중요)	SNS 타임라인 (속도 중요)
사용자 경험	응답 대기 중 화면 멈춤	응답 대기 중에도 다른 작업 가능

동기 통신: 브라우저가 서버에 요청을 보낸 후 응답이 올 때까지 다음 동작을 실행하지 않음
비동기 통신: 브라우저가 서버에 요청을 보낸 후 응답을 기다리는 동안 다른 작업을 수행할 수 있음
웹 브라우저는 HTTP 요청을 통해 서버와 통신한다.
서버는 JSON, HTML, 이미지 등의 형식으로 응답을 반환한다.
웹 페이지에서는 사용자 경험을 고려하여 비동기 통신을 주로 사용한다.

2️⃣ RESTful API

HTTP 메서드

메서드	역할	CRUD
`GET`	리소스 조회	Read
`POST`	리소스 생성	Create
`PUT`	리소스 전체 수정	Update
`PATCH`	리소스 일부 수정	Update
`DELETE`	리소스 삭제	Delete

RESTful API 예시

GET /users           → 사용자 목록 조회
GET /users/1         → ID가 1인 사용자 조회
POST /users          → 새 사용자 생성
PUT /users/1         → 사용자 정보 전체 수정
PATCH /users/1       → 사용자 정보 일부 수정
DELETE /users/1      → ID가 1인 사용자 삭제

HTTP 상태 코드

코드	의미
`200 OK`	요청 성공
`201 Created`	리소스 생성 성공
`400 Bad Request`	잘못된 요청
`401 Unauthorized`	인증 실패
`404 Not Found`	리소스 없음
`500 Internal Server Error`	서버 오류

JSON 데이터 구조

{
  "id": 1,
  "title": "할 일 작성하기",
  "completed": false
}

3️⃣ Axios를 이용한 API 호출

설치

npm install axios

Axios의 특징

Promise 기반으로 동작
응답이 JSON으로 자동 변환
API 요청 취소 가능
상태 코드 기반 오류 구분 용이
Timeout 기능 지원
다양한 브라우저 지원

GET 요청 (데이터 조회)

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

POST 요청 (데이터 생성)

axios.post('https://jsonplaceholder.typicode.com/todos', {
  title: '새로운 할 일',
  completed: false
})
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

PUT 요청 (전체 수정)

axios.put('https://jsonplaceholder.typicode.com/todos/1', {
  id: 1,
  title: '할 일 수정됨',
  completed: true
})
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

PATCH 요청 (일부 수정)

axios.patch('https://jsonplaceholder.typicode.com/todos/1', {
  completed: true
})
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

DELETE 요청 (데이터 삭제)

axios.delete('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => console.log('삭제 완료'))
  .catch(err => console.error(err));

Timeout 설정

axios.get('https://jsonplaceholder.typicode.com/todos', {
  timeout: 3000 // 3초 안에 응답 없으면 에러
})
  .then(response => console.log('성공:', response.data))
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.error('타임아웃 발생');
    } else {
      console.error('기타 오류:', error.message);
    }
  });

4️⃣ async/await를 이용한 비동기 처리

Promise 방식

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => console.log('응답:', res.data))
  .catch(err => console.error('에러:', err));

async/await 방식

비동기 코드를 동기 코드처럼 작성할 수 있다.
코드 가독성이 향상된다.

async function getTodo() {
  try {
    const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
    console.log('응답:', res.data);
  } catch (err) {
    console.error('에러:', err);
  }
}

getTodo();

try/catch를 통한 에러 처리

async function getTodo() {
  try {
    const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
    console.log('응답 데이터:', res.data);
  } catch (err) {
    if (err.response) {
      // 서버가 응답했지만 에러 상태 코드
      console.error('서버 오류:', err.response.status);
      console.error('에러 데이터:', err.response.data);
    } else if (err.request) {
      // 요청은 보냈지만 응답 없음
      console.error('응답 없음:', err.request);
    } else {
      // 요청 자체에 문제
      console.error('요청 오류:', err.message);
    }
  }
}

5️⃣ React에서 Axios 사용하기

기본 예제: 데이터 불러오기

import { useState, useEffect } from 'react';
import axios from 'axios';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTodos();
  }, []);

  const fetchTodos = async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5');
      setTodos(res.data);
    } catch (err) {
      setError('데이터를 불러오는데 실패했습니다.');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  if (loading) return <p>로딩 중...</p>;
  if (error) return <p style={{ color: 'red' }}>{error}</p>;

  return (
    <div>
      <h1>Todo 리스트</h1>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

6️⃣ Axios vs Fetch API

비교	Axios	Fetch API
설치	필요 (`npm install axios`)	불필요 (내장)
JSON 파싱	자동 (`res.data`)	수동 (`.json()`)
에러 처리	HTTP 에러 자동 감지	수동 확인 (`res.ok`)
Timeout	지원	미지원
코드 길이	짧고 간결	다소 김
브라우저 호환성	폴리필 포함	최신 브라우저만 지원

[Frontend] #05. React - React Router와 전역 상태 관리

Opal1031 — Wed, 6 May 2026 16:25:10 +0900

React Router와 전역 상태 관리

React Router를 사용하여 SPA를 구현하고, useContext로 전역 상태를 관리할 수 있다.

1️⃣ React Router

React는 SPA(Single Page Application) 방식으로 동작한다.
SPA는 하나의 HTML 파일로 여러 화면을 구현하기 때문에, URL과 화면을 연결하는 라우팅 관리가 필요하다.
React Router는 URL 경로에 따라 적절한 컴포넌트를 렌더링해주는 도구다.
페이지 새로고침 없이 화면을 전환할 수 있다.

설치

npm install react-router-dom

기본 설정

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<div>404 Not Found</div>} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

요소	역할
`<BrowserRouter>`	앱 전체에 라우팅 기능 제공
`<Routes>`	라우트 목록을 감싸는 컨테이너
`<Route>`	URL 경로와 컴포넌트를 연결
`path="*"`	정의되지 않은 경로 처리 (404)

2️⃣ 페이지 이동 방법

1. Link 컴포넌트

클릭 가능한 링크를 만들 때 사용
HTML의 <a> 태그와 비슷하지만, 페이지 새로고침이 발생하지 않는다.

import { Link } from 'react-router-dom';

function Nav() {
  return (
    <nav>
      <Link to="/">홈</Link>
      <span> | </span>
      <Link to="/about">소개</Link>
    </nav>
  );
}

2. useNavigate Hook

조건부 이동이나 이벤트 기반 이동에 사용
로그인 성공 후 자동으로 페이지 이동하는 경우 등에 유용

import { useNavigate } from 'react-router-dom';

function LoginButton() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 로그인 로직...
    navigate('/home'); // 로그인 성공 후 홈으로 이동
  };

  return <button onClick={handleLogin}>로그인</button>;
}

비교	Link	useNavigate
형태	JSX 태그	함수
사용처	클릭 가능한 링크	조건부/이벤트 기반 이동
예시	`<Link to="/about">소개</Link>`	`navigate('/about')`

비교

Link

useNavigate

형태 JSX 태그 함수

사용처 클릭 가능한 링크 조건부/이벤트 기반 이동

예시 <Link to="/about">소개</Link> navigate('/about')

3️⃣ 컴포넌트 구조화

화면을 작은 단위로 분리하여 재사용성과 유지보수성을 높인다.
공통 레이아웃(Header, Footer 등)을 별도 컴포넌트로 분리한다.

function Header() {
  return <header>나의 React 앱</header>;
}

function Footer() {
  return <footer>© 2025</footer>;
}

function AppShell({ children }) {
  return (
    <>
      <Header />
      {children}
      <Footer />
    </>
  );
}

Router와 결합

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <AppShell>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </AppShell>
    </BrowserRouter>
  );
}

4️⃣ 폴더 구조 설계

기본 구조

src/
├── components/      # 공통 UI 컴포넌트
│   ├── Header.jsx
│   └── Footer.jsx
├── pages/           # 페이지 컴포넌트
│   ├── Home.jsx
│   └── About.jsx
├── contexts/        # 전역 상태 관리
│   └── ThemeContext.jsx
└── App.jsx          # 라우팅 설정

대규모 프로젝트 구조

src/
├── features/        # 기능별 폴더
│   ├── auth/
│   │   ├── pages/
│   │   ├── components/
│   │   └── services/  # API 통신
└── shared/          # 공용 컴포넌트

5️⃣ useContext (전역 상태 관리)

컴포넌트 깊이가 깊어질수록 같은 데이터를 여러 단계에 걸쳐 전달해야 하는 Props Drilling 문제가 발생한다.
useContext를 사용하면 상위에서 제공한 값을 하위 어디서나 직접 꺼내 쓸 수 있다.
여러 컴포넌트에서 공통적으로 사용해야 하는 데이터(테마, 로그인 정보 등)를 관리할 때 유용하다.

Context 생성 (contexts/ThemeContext.jsx)

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext(null);

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const value = { theme, setTheme };

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

Context 사용 (components/Header.jsx)

import { Link } from 'react-router-dom';
import { useTheme } from '../contexts/ThemeContext';

function Header() {
  const { theme, setTheme } = useTheme();
  const nextTheme = theme === 'light' ? 'dark' : 'light';

  return (
    <header style={{
      background: theme === 'light' ? '#f9f9f9' : '#1a1a1a',
      color: theme === 'light' ? '#111' : '#f0f0f0',
      padding: '12px 16px'
    }}>
      <nav>
        <Link to="/">홈</Link> | <Link to="/about">소개</Link>
      </nav>
      <div>
        <span>현재 테마: {theme}</span>
        <button onClick={() => setTheme(nextTheme)}>테마 전환</button>
      </div>
    </header>
  );
}

export default Header;

App에서 Provider로 감싸기

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { ThemeProvider } from './contexts/ThemeContext';
import Header from './components/Header';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <ThemeProvider>
      <BrowserRouter>
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="*" element={<div>404 Not Found</div>} />
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
  );
}

export default App;

페이지 컴포넌트에서 Context 사용 (pages/Home.jsx)

import { useTheme } from '../contexts/ThemeContext';

function Home() {
  const { theme } = useTheme();

  const style = {
    padding: 24,
    minHeight: '100vh',
    background: theme === 'light' ? '#ffffff' : '#111111',
    color: theme === 'light' ? '#111111' : '#f5f5f5'
  };

  return (
    <main style={style}>
      <h1>홈</h1>
      <p>React Router로 연결된 홈 화면입니다.</p>
      <p>헤더의 테마 전환 버튼으로 전역 상태를 변경할 수 있습니다.</p>
    </main>
  );
}

export default Home;

useContext 사용 시 주의사항

너무 많은 값을 한 Context에 넣지 말 것: 하위 컴포넌트 전체가 불필요하게 리렌더링될 수 있다.
변경 빈도에 따라 Context 분리: 자주 변경되는 값과 그렇지 않은 값을 별도 Context로 관리한다.
적절한 사용처: 테마, 로그인 정보, 언어 설정 등 전역적으로 필요한 데이터에 적합하다.
성능 최적화: useMemo를 활용하여 Context value 객체를 메모이제이션할 수 있다.

import { useMemo } from 'react';

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const value = useMemo(() => ({ theme, setTheme }), [theme]);

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

[Frontend] #04. React - State와 Hooks

Opal1031 — Wed, 6 May 2026 16:21:46 +0900

State와 Hooks

React Hooks를 사용하여 함수형 컴포넌트에서 상태 관리와 부수 효과를 처리할 수 있다.

1️⃣ State (useState)

State는 컴포넌트 내부에서 관리되는 동적인 데이터다.
State가 변경되면 React는 자동으로 컴포넌트를 리렌더링한다.
일반 변수는 변경되어도 UI가 업데이트되지 않지만, State는 변경 시 자동으로 화면을 갱신한다.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 초기값 0

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

State의 특징

내부 데이터: 컴포넌트 내부에서만 관리
변경 가능: setState 함수를 통해 값 변경
추적: State 값이 변하면 UI가 자동으로 업데이트
비동기성: setState는 즉시 반영되지 않고, 나중에 일괄 처리됨

State의 비동기성

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

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // 아직 이전 값 출력
};

함수형 업데이트

이전 상태를 기반으로 새로운 상태를 계산할 때 사용
연속적인 상태 업데이트가 필요할 때 유용

const handleClick = () => {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  // count는 3 증가
};

2️⃣ useEffect

useEffect는 렌더링 후 부수 효과(side effect)를 처리하는 Hook이다.
부수 효과란 렌더링 과정과는 별개의 작업을 의미한다.
- 콘솔 로그 출력
- 서버에서 데이터 불러오기
- 타이머 사용
- DOM 직접 조작
- 외부 라이브러리 호출

import { useState, useEffect } from 'react';

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

  // count가 변경될 때마다 실행
  useEffect(() => {
    console.log(`count가 ${count}로 변경되었습니다.`);
  }, [count]); // 의존성 배열

  return (
    <div>
      <p>현재 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

의존성 배열

의존성 배열	실행 시점
`[]` (빈 배열)	컴포넌트 마운트 시 1회만 실행
`[state]`	해당 state가 변경될 때마다 실행
생략	매 렌더링마다 실행 (성능 저하 가능)

마운트 시 1회만 실행

useEffect(() => {
  console.log("컴포넌트가 마운트되었습니다.");
  // 초기 데이터 로딩 등에 사용
}, []);

useEffect 무한 루프 주의

// ❌ 잘못된 예: 무한 루프 발생
function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(prev => prev + 1); // count 변경
  }, [count]); // count가 변경될 때마다 실행 → 무한 반복

  return <p>{count}</p>;
}

// ✅ 올바른 예: 빈 배열로 1회만 실행
useEffect(() => {
  setCount(prev => prev + 1);
}, []);

cleanup 함수

useEffect에서 반환하는 함수는 컴포넌트가 언마운트되거나 다음 effect가 실행되기 전에 호출된다.
타이머 해제, 구독 취소 등에 사용

useEffect(() => {
  const timer = setInterval(() => {
    console.log('1초마다 실행');
  }, 1000);

  // cleanup 함수
  return () => {
    clearInterval(timer);
    console.log('타이머 해제');
  };
}, []);

3️⃣ 이벤트 처리

React에서 이벤트는 camelCase로 작성한다 (onClick, onChange).
이벤트 핸들러는 함수 참조를 전달해야 한다.
인자가 있는 함수를 전달할 때는 화살표 함수로 감싸야 한다.

function Button() {
  const handleClick = () => {
    alert('버튼 클릭!');
  };

  return <button onClick={handleClick}>클릭</button>;
}

인자가 있는 이벤트 핸들러

function Greeting() {
  const sayHello = (name) => {
    alert(`안녕, ${name}!`);
  };

  // ❌ 잘못된 예: 렌더링 시 즉시 실행
  // return <button onClick={sayHello('민서')}>인사</button>;

  // ✅ 올바른 예: 클릭 시 실행
  return <button onClick={() => sayHello('민서')}>인사</button>;
}

이벤트 객체 (e)

이벤트 핸들러는 자동으로 이벤트 객체 e를 받는다.
e.target으로 이벤트가 발생한 요소에 접근할 수 있다.

function InputExample() {
  const [text, setText] = useState('');

  const handleChange = (e) => {
    setText(e.target.value); // 입력값 가져오기
  };

  return (
    <div>
      <input type="text" onChange={handleChange} placeholder="입력하세요" />
      <p>입력값: {text}</p>
    </div>
  );
}

이벤트 전파 (Bubbling)

이벤트는 자식에서 부모로 전파된다.
e.stopPropagation()으로 전파를 막을 수 있다.

function App() {
  const handleCloseMenu = () => console.log("메뉴 닫힘");
  const handleLogin = (e) => {
    e.stopPropagation(); // 부모로 이벤트 전달 차단
    console.log("로그인 클릭");
  };

  return (
    <div onClick={handleCloseMenu}>
      <button onClick={handleLogin}>로그인</button>
    </div>
  );
}

4️⃣ 조건부 렌더링

조건에 따라 다른 UI를 렌더링할 수 있다.
주로 삼항 연산자를 사용한다.

function LoginButton({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <button>로그아웃</button>
      ) : (
        <button>로그인</button>
      )}
    </div>
  );
}

조건부 렌더링 예제

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? <p>환영합니다!</p> : <p>로그인해주세요</p>}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? "로그아웃" : "로그인"}
      </button>
    </div>
  );
}

&& 연산자를 이용한 조건부 렌더링

function Notification({ hasUnread }) {
  return (
    <div>
      {hasUnread && <p>읽지 않은 메시지가 있습니다.</p>}
    </div>
  );
}

[Frontend] #03. React 기초

Opal1031 — Wed, 6 May 2026 16:19:24 +0900

들어가면서...

React는 처음 다뤄보는 내용이었기에, 제공된 학습 자료 이외에도 Github Copilot등을 통해 다양한 예제를 알아보는 방식으로 공부하였다.

React

React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리다.

React 소개

React는 Facebook(현 Meta)에서 개발한 오픈소스 JavaScript 라이브러리로, 컴포넌트 기반으로 UI를 구성하고 상태 관리를 효율적으로 수행한다.

SPA(Single Page Application) 개발에 주로 사용되며, Virtual DOM을 통해 빠른 렌더링 성능을 제공한다.

React의 주요 특징

컴포넌트 기반 구조: 재사용 가능한 독립적인 UI 조각으로 구성
단방향 데이터 흐름: 상태 변화를 명시적으로 관리하여 인과 관계 파악이 용이
JSX 문법: JavaScript에 HTML을 가미한 문법으로 초보자도 쉽게 학습 가능
Virtual DOM: 실제 DOM 조작을 최소화하여 성능 최적화
강력한 커뮤니티: Meta의 적극적인 지원과 활발한 개발자 커뮤니티

React 프로젝트 시작하기

Vite를 사용하여 React 프로젝트를 생성할 수 있다.

# React 프로젝트 생성
npm create vite@latest

# 프로젝트 디렉토리로 이동
cd project-name

# 패키지 설치
npm install

# 개발 서버 실행
npm run dev

프로젝트 구조

src/
├── components/      # 공통 UI 컴포넌트
│   ├── Header.jsx
│   └── Footer.jsx
├── pages/           # 페이지 컴포넌트
│   ├── Home.jsx
│   └── About.jsx
├── contexts/        # 전역 상태 관리
│   └── ThemeContext.jsx
├── App.jsx          # 메인 컴포넌트
└── main.jsx         # 앱 진입점

1️⃣ JSX (JavaScript XML)

JSX는 JavaScript의 확장 문법으로, HTML과 유사한 문법을 사용할 수 있게 해준다.
JSX는 트랜스파일러를 거쳐 JavaScript 코드로 변환된다.
JSX 내에서는 표현식(Expression)만 사용 가능하며, if문이나 for문 같은 문(Statement)은 사용할 수 없다.

function App() {
  const name = "React";
  const isLoggedIn = true;

  return (
    <div>
      <h1>Hello, {name}!</h1>
      {isLoggedIn ? <p>환영합니다!</p> : <p>로그인해주세요</p>}
    </div>
  );
}

JSX에서 표현식과 문의 차이

// ✅ 가능: 표현식 사용
function Greeting() {
  const user = { name: "민서", login: true };
  const message = user.login ? "환영합니다" : "로그인 필요";

  return <p>{message}</p>;
}

// ❌ 불가능: JSX 내부에서 if문 사용
function Greeting() {
  return (
    <div>
      {if (isLoggedIn) { "환영" } else { "로그인" }}
    </div>
  );
}

JSX는 반드시 하나의 최상위 요소만 반환

// ❌ 잘못된 예시
return (
  <h1>안녕</h1>
  <h2>리액트</h2>
);

// ✅ 해결 1: div로 감싸기
return (
  <div>
    <h1>안녕</h1>
    <h2>리액트</h2>
  </div>
);

// ✅ 해결 2: Fragment 사용
return (
  <>
    <h1>안녕</h1>
    <h2>리액트</h2>
  </>
);

2️⃣ Virtual DOM

React의 가장 큰 특징 중 하나가 Virtual DOM이다.
DOM(Document Object Model)은 HTML 문서를 JavaScript가 이용할 수 있는 객체 형태로 만든 것이다.
웹 애플리케이션에서 사용자와의 상호작용이 많아질수록, DOM을 직접 조작하는 비용이 커진다.
React는 가상 DOM을 메모리에 유지하고, 변경 사항을 계산한 후 실제 DOM에 변경된 부분만 반영한다.

렌더링 과정

[상태 변경] → [Virtual DOM 업데이트] → [이전 Virtual DOM과 비교] → [변경된 부분만 실제 DOM 업데이트]

3️⃣ 컴포넌트 (Component)

컴포넌트는 화면의 UI를 구성하는 독립적이며 재사용 가능한 블록이다.
React에서는 함수형 컴포넌트를 주로 사용한다.
컴포넌트 이름은 반드시 대문자로 시작해야 한다.

함수형 컴포넌트

function Welcome({ name }) {
  return <h1>안녕하세요, {name}님!</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="민서" />
      <Welcome name="React 사용자" />
    </div>
  );
}

컴포넌트의 구성

import: 외부 파일의 모듈을 불러올 때 사용
컴포넌트 정의: 함수형 컴포넌트로 상태와 로직을 포함
return: JSX 표현식을 반환
export: 다른 파일에서 이 컴포넌트를 사용할 수 있도록 내보내기

import React, { useState } from 'react';

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

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default Counter;

4️⃣ Props

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다.
Props는 읽기 전용이며, 자식 컴포넌트에서 직접 수정할 수 없다.
주로 부모 → 자식의 단방향 데이터 흐름을 따른다.

// 부모 컴포넌트
function App() {
  return (
    <div>
      <Greeting name="민서" age={20} />
      <Greeting name="사용자" age={21} />
    </div>
  );
}

// 자식 컴포넌트
function Greeting({ name, age }) {
  return (
    <div>
      <p>이름: {name}</p>
      <p>나이: {age}</p>
    </div>
  );
}

배열 렌더링

function App() {
  const names = ['민서', '사용자1', '사용자2'];

  return (
    <div>
      {names.map((name, index) => (
        <Greeting key={index} name={name} />
      ))}
    </div>
  );
}

Props로 함수 전달

function Button({ onClick }) {
  return <button onClick={onClick}>클릭</button>;
}

function App() {
  const handleClick = () => alert("버튼 클릭!");
  return <Button onClick={handleClick} />;
}