yujenius 님의 블로그

[UMC] 나의 두번째 React Hook (useContext)

yujenius — Mon, 24 Mar 2025 02:05:12 +0900

최근에 umc 활동을 하면서 React의 여러 가지 개념을 배우고 있는데, 이번에는 useContext에 대해 공부했다.

처음에는 props drilling 이 왜 문제인지 정확히 와닿지 않았는데, 직접 코드를 작성하고 나니

useContext의 필요성을 확실히 깨달을 수 있었다.

이 글에서는 props drilling의 문제를 알아보고, 이를 해결하는 방법으로 useContext를 사용하는 방법을 정리해보려고 한다.

Props drilling 문제 이해하기

React에서 부모 → 자식 → 손자로 데이터를 전달하려면 props를 계속 내려줘야 한다.
이 과정에서 중간에 위치한 컴포넌트가 실제로는 데이터를 사용하지 않지만,

단순히 props를 전달하기 위해 존재해야 하는 문제가 발생한다.
이런 현상을 props drilling(프롭 드릴링) 이라고 한다.

import { useState } from 'react';
import ButtonGroup from './components/ButtonGroup';

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

  const handleIncrement = () => setCount(count + 1);
  const handleDecrement = () => setCount(count - 1);

  return (
    <>
      <h1>{count}</h1>
      <ButtonGroup handleIncrement={handleIncrement} handleDecrement={handleDecrement} />
    </>
  );
}

export default App;

ButtonGroup.tsx

interface ButtonGroupProps {
  handleIncrement: () => void;
  handleDecrement: () => void;
}

const ButtonGroup = ({ handleIncrement, handleDecrement }: ButtonGroupProps) => {
  return (
    <div>
      <button onClick={handleIncrement}>+1 증가</button>
      <button onClick={handleDecrement}>-1 감소</button>
    </div>
  );
};

export default ButtonGroup;

이 코드에서는 App 컴포넌트에서 ButtonGroup을 거쳐 Button 까지 props 를 계속 전달해야 한다.

하지만 ButtonGroup 자체는 count 값을 사용하지 않으므로 불필요한 props 전달이 발생하는 것이 문제였다.

이를 해결하기 위해서 useContext를 사용할 수 있다.

props drilling 해결하기 (useContext 사용하기)

React의 useContext를 활용하면 중간 컴포넌트를 거치지 않고 필요한 곳에서 바로 데이터를 사용할 수 있다.

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

//Context 생성
const CountContext = createContext<{ count: number; setCount: (value: number) => void } | undefined>(undefined);

//Provider 생성
const CountProvider = ({ children }: { children: ReactNode }) => {
  const [count, setCount] = useState(0);

  return <CountContext.Provider value={{ count, setCount }}>{children}</CountContext.Provider>;
};

//Custom Hook 생성(useContext를 쉽게 사용하도록)
const useCount = () => {
  const context = useContext(CountContext);
  if (!context) throw new Error('useCount must be used within a CountProvider');
  return context;
};

export { CountProvider, useCount };

App.tsx

import { CountProvider } from './context/CountContext';
import Counter from './components/Counter';

function App() {
  return (
    <CountProvider>
      <Counter />
    </CountProvider>
  );
}

export default App;

Counter.tsx

import { useCount } from '../context/CountContext';
import ButtonGroup from './ButtonGroup';

const Counter = () => {
  const { count } = useCount();
  return (
    <>
      <h1>{count}</h1>
      <ButtonGroup />
    </>
  );
};

export default Counter;

ButtonGroup.tsx

import { useCount } from '../context/CountContext';
import Button from './Button';

const ButtonGroup = () => {
  const { setCount } = useCount();

  return (
    <div>
      <Button onClick={() => setCount(prev => prev + 1)} text='+1 증가' />
      <Button onClick={() => setCount(prev => prev - 1)} text='-1 감소' />
    </div>
  );
};

export default ButtonGroup;

마무리

이번에 공부하면서 props drilling 이 왜 문제가 되는지 직접 경험해 보고,

이를 해결하는 방법으로 useContext를 활용할 수 있다는 걸 배웠다.

물론 처음 써보기에 내가 익숙하게 잘 쓴다는 생각이 들지는 않았지만 여러번 활용해보면 그만큼 언제 Context API를 사용해야 하는지 알 수 있겠다는 생각이 들었다. 앞으로 React 프로젝트를 할 때, 언제 Context API를 사용해야 하는지 고민하면서 적용해봐야겠다.

[React]React 의존성 충돌 해결

yujenius — Thu, 13 Feb 2025 15:10:40 +0900

외 않되

React 프로젝트 생성 중에 에러가 발생했다.!!!!!!!!!!!!!!!!

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: reactstudy@0.1.0
npm ERR! Found: react@19.0.0
npm ERR! node_modules/react
npm ERR!   react@"^19.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR! node_modules/@testing-library/react
npm ERR!   @testing-library/react@"^13.4.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR!

내가 생각했을 때는 평소에는 그냥 생성하던 것을 template 옵션을 추가해서 생긴 에러같은데,

여기서 내가 말하는 template은 대멋사 제공 필요없는 파일을 다 제거한 기본적으로 개발하기 위해 남기는 초기 상태의 필수적인 파일만 남은 basic한 상태를 말하는 데 혹시나 시도해보고 싶은 사람에게는

npx create-react-app <프로젝트명> --template basic-react

를 추천한다.

별 문제 없다면 바로 잘 생성되겠지만 ,, 나와 같은 경우는

react@19.0.0을 사용하고 있는데, @testing-library/react@13.4.0이 React 18을 요구하면서 의존성 충돌이 발생했다.

그렇게 해결하는 데에 큰 이슈가 발생하지 않았지만 이에 대한 해결책은

npm install --legacy-peer-deps

이 옵션은 peerDependencies 충돌을 무시하고 설치해준다. 무시라는 단어가 자극적이긴 하지만 제일 .. 간단하고 안전한 해결법이다.

이게 불안하면 버전을 다운그레이드해서 버전을 맞춘다음 하는 법이 있긴 하다 .

그렇지만 그렇게 하기 위해서는 삭제하고 다시 설치하고의 복잡한 해결이기에. 위와 같은 방법으로 되지 않는 다면,, 해보시길

나는 또 하나의 에러가 났다.

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /Users/jiyujin/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/jiyujin/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm install --legacy-peer-deps를 실행했지만, 현재 경로 (/Users/jiyujin/)에 package.json이 없어서 에러가 발생했다.
즉, 프로젝트 폴더가 아닌 홈 디렉터리 (~ 또는 /Users/jiyujin/)에서 명령어를 실행한 것 이다.

cd ~/내_프로젝트_폴더
ls

꼭 내가 생성한 프로젝트 폴더 안에서

npm install --legacy-peer-deps

설치를 해주어야 한다.

설치를 해주고 났을 때

removed 5 packages, and audited 1473 packages in 1s

272 packages are looking for funding
  run npm fund for details

9 vulnerabilities (3 moderate, 6 high)

Some issues need review, and may require choosing
a different dependency.

Run npm audit for details.

이와 같은 에러가 난다면.. 설치는 성공했으나 몇가지의 경고 warning 사항을 알려준다.

272 packages are looking for funding → 무시해도 됨 (오픈소스 후원 관련 메시지)
9 vulnerabilities (3 moderate, 6 high) → 보안 취약점이 있는 패키지가 있음

보안은 그래도 중요하니까..

보안 취약점 자동 수정 명령어를 실행

npm audit fix

그 다음

npm start

로 잘 실행되는 지 확인하자!!!

잘 실행된다면 문제 해결 완료!!!

[React] State 맘대로 변경하는 법

yujenius — Tue, 11 Feb 2025 02:12:27 +0900

React에서는 useState를 사용하여 상태를 관리한다. 하지만 직접 state를 변경하면 React의 상태 관리 흐름을 깨트려 버린다. 난 이 부분이 React를 공부하면서 헷갈리고 어려웠던 개념이기에 정리를 통한 완벽 학습을 목적으로 글을 써보려한다.

❌ 직접 변경하면 안 되는 이유

React에서는 state가 변경될 대마다 컴포넌트를 다시 렌더링한다. 하지만 state를 직접 수정하면 이를 감지하지 못해 렌더링이 일어나지 않거나, 예상치 못한 동작이 발생할 수 있다.

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

// ❌ 이렇게 하면 안 됨!
count = count + 1; // 상태 직접 변경 (React가 감지하지 못함)

그냥 쉽게 이해하도록 설명한다면.. 자료형이 const 인 상태라고 생각했을 때 그 값을 바꾸려고 한다고 생각하면 좀 더 이해하기 쉽다. 그럼 어떻게 변경해줘야 할까?

✅ 올바르게 변경하는 방법

React에서 state를 변경할 때는 항상 setState 함수를 사용한다. 물론 요즘은 아니다. 그치만 소개하겠다.

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

const handleClick = () => {
  setCount(count + 1); // ✅ 올바른 방법
};

쉽게 기초 내용을 코드로 살펴 보게 되면,

let [데이터, 데이터변경] = useState(['모시기','모시기1', '모시기2']);

function 데이터바꾸기(){
	데이터변경(['1','2','3']); //state를 아예 대체해주는 함수
}

데이터변경에 해당하는 함수로만 state 값을 변경해줄 수 있다고 생각하는 것이 이해하기 편할 것이다.

그러나, 이런식으로 배열일 경우에 하드코딩 하는 법 말고 좀 더 개발자 스럽게 한다면

let [데이터, 데이터변경] = useState(['모시기','모시기1', '모시기2']);

function 데이터바꾸기(){
	var newArray = 데이터;
    	newArray[0] = '1';
	데이터변경(newArray);
}

수정된[데이터]를 만드는데, state의 복사복을 만들어서 수정하는 법으로 가능하다.

그러나 이렇게 하면 안되고, deep copy 를 해야한다. 위와 같은 경우는 복사가 아니라 값 공유를 하게된다.

따라서,

let [데이터, 데이터변경] = useState(['모시기','모시기1', '모시기2']);

function 데이터바꾸기(){
	var newArray = [...데이터];
    	newArray[0] = '1';
	데이터변경(newArray);
}

object 의 경우 []를 {}로 바꿔주고 똑같이 spread operator(...)을 사용해주면 된다.

마무리

state를 변경하려면 변경함수를 써야한다, 변경함수(대체할 데이터)

state는 직접 건들지말자.

deep copy를 하고 그것을 건들자!

[React] JSX 란?!

yujenius — Tue, 11 Feb 2025 01:50:27 +0900

얼마 전까지 Vanila JS 만을 고수하던 나이기에 React를 시작할 때 JSX 언어는 너무 생소했다

새로운 개념을 다시 적립한다는 것이 받아들이기 힘든 현실이지만 JSX 는 React 를 하기 위해서 필수적인 개념이기에 이번 글에서 다뤄보려한다.

JSX는 Javascript 내에서 XML 과 유사한 문법을 사용할 수 있도록 도와준다. 그렇지만 사용하다 보니 생소한 문법과 사용법이 미묘하게 다르기에 이 글에서는 React 비기너들을 위해 !!

JSX의 기본 개념과 꼭 지켜야 하는 주요 문법에 대해서 정리해보도록 하겠다.

JSX의 기본 개념

JSX는 JavaScript 코드 내에서 HTML과 유사한 구조를 작성할 수 있는 문법 확장이다.

1. UI를 선언적으로 표현할 수 있다.

const element = <h1>Hello, JSX!</h1>;

2. JSX 코드는 Babel에 의해 JavaScript 코드로 변환된다.

const element = React.createElement("h1", null, "Hello, JSX!");

JSX의 주요 문법

1. 반드시 하나의 부모 요소로 감싸야 함

JSX에서는 여러 요소를 반환할 경우 반드시 하나의 부모 요소를 감싸야 한다.

❌ 오류 발생 코드:

return (
    <h1>Hello</h1>
    <p>JSX</p>
);

✅ 올바른 코드:

return (
    <div>
        <h1>Hello</h1>
        <p>JSX</p>
    </div>
);

또는 React의 Fragment를 사용할 수도 있다.

return (
    <>
        <h1>Hello</h1>
        <p>JSX</p>
    </>
);

2.JavaScript 표현식 사용

중괄호 {} 를 사용하여 JavaScript 표현식을 JSX 내부에 삽입할 수 있다.

const name = "React";
const element = <h1>Hello, {name}! </h1>;

보통 데이터 바인딩의 경우 {} 를 꼭 사용해주어야 한다.

여기서 데이터 바인딩(Data Binding)이란?

데이터 바인딩(Data Binding) 은 프로그래밍에서 UI(사용자 인터페이스)와 데이터(모델)를 연결하는 기술이다. 이를 통해 데이터가 변경되면 UI도 자동으로 업데이트되도록 만들 수 있다.

3. 속성(Attribute) 적용

JSX에서는 HTML 속성과 유사하지만, camelCase 표기법을 사용해야 한다.

const element = <button onClick={handleClick}>Click me</button>;

class -> className

for -> htmlFor

그리고 JSX 문법에서는 JavaScript와 다른 점이 class 는 className , for 는 htmlFor 로 써줘야만 한다.

4. 조건부 렌더링 **

JSX 에서는 조건부 렌더링을 위해 삼항 연산자 또는 && 연산자를 사용할 수 있다.

cont isLoggedIn = true;
const element = isLoggedIn ? <h1>Welcome</h1> : <h1>Please log in</h1>;

&& 연산자를 사용하면 조건이 true 일 때만 특정 요소를 렌더링할 수 있다.

const message = isLoggedIn && <h1>Welcome</h1>;

5. 리스트 렌더링

배열의 map()을 사용하여 리스트를 동적으로 생성할 수 있다.

const items = ["Apple", "Banana", "Cherry"];
const list = (
    <ul>
        {items.map((item, index) => <li key={index}>{item}</li>)}
    </ul>
);

여기서 주의해야 할 점은 key 속성을 부여하여 React가 각 항목을 고유하게 식별할 수 있도록 해야한다.

6.인라인 스타일 적용

JSX에서는 스타일을 객체 형태로 작성하며, CamelCase를 사용한다.

const style = {
    color: "blue",
    fontSize: "20px"
};

const element = <h1 style={style}>Styled Text</h1>;

본래의 JavaScript에서는 font-size 였던 것이 fontSize가 된 것을 확인해 볼 수 있다.

7. 이벤트 처리

React에서 이벤트 핸들러는 onClick, onChange 등의 속성을 사용하며, 함수 참조를 전달해야 한다.

function handleClick() {
    alert("Button clicked!");
}

const button = <button onClick={handleClick}>Click me</button>;

마무리

이번 글에서는 JSX 의 문법에 대해서 자세하게 알아보았다. JSX는 React의 핵심적인 요소이며, 이를 잘 활용하면 가독성이 좋은 UI 코드를 작성할 수 있으니 개념부터 잘 다지고 문법들을 하나 둘 공부하고 React에서 활용할 수 있는 개념들을 학습해나가면 좀 더 편하게 멋있는 프로그램들을 개발할 수 있을 것이다. React 마스터 까지. 화이팅.

[Python] Code up 4060: 전광판 전구 조작

yujenius — Sat, 8 Feb 2025 16:14:50 +0900

https://codeup.kr/problem.php?id=4060

전광판 전구 조작

첫째 줄에 전광판의 크기를 나타내는 세로 길이 $M$과 가로 길이 $N$이 입력된다. ($2<=M,N<=100$인 자연수) 둘째줄 부터 $M$줄에 걸쳐 $N$열 만큼의 전구들의 상태가 주어진다. 이때 켜진 상태는 $1$, 꺼

codeup.kr

문제 설명

전광판에는 켜져 있는 전구(1)와 꺼져 있는 전구(0)가 있습니다. 전구를 조작하면 해당 전구와 상하좌우로 연결된 같은 상태의 전구들이 모두 바뀌는 특징이 있습니다. 이러한 규칙을 따라 모든 전구를 켜는 최소 조작 횟수와 끄는 최소 조작 횟수를 구하는 문제입니다.

입력

첫째 줄: 전광판의 크기 M N (2 ≤ M, N ≤ 100)
둘째 줄부터 M개의 줄에 걸쳐 N개의 전구 상태가 주어짐 (켜진 상태: 1, 꺼진 상태: 0)

출력

모든 전구를 켜기 위한 최소 조작 횟수와 모두 끄기 위한 최소 조작 횟수를 공백으로 구분하여 출력

해결 접근법

이 문제는 DFS(깊이 우선 탐색)을 활용하여 해결할 수 있었습니다.

연결된 그룹 찾기
- 같은 상태(0 또는 1)로 연결된 전구 그룹을 찾습니다.
- DFS 를 사용하여 전구 그룹을 탐색합니다.
- 한 그룹을 한 번의 조작으로 변환할 수 있으므로 그룹의 개수가 최소 조작 횟수가 됩니다.
모든 전구를 켜기 위한 최소 조작 횟수
- 0으로 이루어진 연결 요소(그룹)의 개수를 셉니다.
모든 전구를 끄기 위한 최소 조작 횟수
- 1으로 이루어진 연결 요소(그룹)의 개수를 셉니다.

소스 코드

def dfs(y,x):
    if y < 0 or y >= m or x < 0 or x>=n:
        return
    if grid[y][x]== "0":
        return   
    grid[y][x] = "0" #방문한 1을 0으로 변경하여 중복 방문 방지
    for d in range(4): # 상하좌우 탐색 
        dfs(y+dy[d],x+dx[d])

def dfs1(y,x):
    if y < 0 or y >= m or x < 0 or x>=n:
        return
    if grid2[y][x]== "1":
        return
    grid2[y][x] = "1" # 방문한 0을 1로 변경하여 중복 방문 방지
    for d in range(4):
        dfs1(y+dy[d],x+dx[d])


m,n = map(int, input().split()) 
grid = []
grid2 = []
for i in range(m):
    row = list(input().split())
    grid.append(row)
    grid2.append(row.copy()) #grid2는 grid의 복사본 (독립적 사용)
    #print(' '.join(map[i]))

dy = [1, -1, 0, 0] #상, 하, 좌, 우 4방향
dx = [0, 0, 1, -1]

cnt = 0 
cnt2 = 0
for i in range(m):
    for j in range(n):
        if grid[i][j] == "1": #1인 경우 DFS 실행 (꺼지는 그룹 찾기)
            dfs(i,j)
            cnt += 1
for i in range(m):
    for j in range(n):
        if grid2[i][j] == "0": #0인 경우 DFS 실행(켜지는 그룹 찾기)
            dfs1(i,j)
            cnt2 += 1
            
print(f'%d %d'%(cnt2,cnt))

저번에 소개한 DFS 기반 알고리즘과 비슷한 개념이지만, 이번 문제는 두 가지 개수를 찾아 출력해야 한다는 점에서 차이가 있습니다. 이를 독립적으로 해결하기 위해 두 개의 DFS 함수를 만들어 각각의 경우를 탐색하도록 구현했습니다. 다만, BFS를 활용하면 탐색을 더욱 효율적으로 진행할 수 있어 해결이 더 쉬워질 것 같습니다

마무리

DFS로 그룹을 찾고 조작 횟수를 계산하는 개념을 익힐 수 있는 좋은 문제!
BFS 공부를 통해 좀 더 개선된 코드 짜보기

[Python] Code up 4024: 호수의 수 구하기

yujenius — Sat, 8 Feb 2025 03:22:35 +0900

https://codeup.kr/problem.php?id=4024&rid=0

호수의 수 구하기

첫째 줄에 두 정수 W, H가 주어진다. (단, 4 <= W, H <= 100) 지도는 직사각형으로 이루어지며, W는 지도의 너비를 의미하고, H는 지도의 높이를 의미한다. 두 번째 줄부터 H + 1번째 줄까지 각 줄 마다 '

codeup.kr

문제 설명

CodeUp 4024번 문제는 'L' 과 '.' 으로 구성된 지도를 통해 호수의 개수를 구하는 문제입니다. 이때 'L'은 호수를 의미하고 '.'은 비호수 지역을 의미합니다. 호수는 상, 하, 좌, 우, 대각선으로 연결된 모든 'L' 을 하나의 호수로 간주합니다.

해결 접근법

일단 이 문제를 마주했을 때, DFS 알고리즘을 활용해야겠다는 생각이 들었습니다.

DFS는 한 지점에서 시작해 갈 수 있는 모든 경로를 탐색하기 때문에 호수의 모든 연결 요소를 방문하는 데 적합하다고 생각했기 때문입니다.

소스코드

import sys
sys.setrecursionlimit(10**6) #기본 재귀 깊이 제한을 늘려주기 10의 6제곱으로 

def dfs(y,x): #dfs 함수 선언
    if y < 0 or y >= h or x < 0 or x >= w: #높이 와 너비보다 크거나 0 보다 작으면
        return
    if lake[y][x]==".": #.을 만나면
        return
    if lake[y][x]=="L": # L을 만나면
        lake[y][x]="." # L을 . 으로 바꿔주고
        for d in range(8): #8방향 상, 하 , 좌 , 우 , 대각선 
            dfs(y+dy[d], x+dx[d])
        
w,h = map(int, input().split())
lake = []
for i in range(h):
    row = list(input().split()) #한 줄에 입력 받으려면 list로 
    lake.append(row)#lake 에 append(추가) 해주기

dx = [1, 1, 1, 0, 0, -1, -1, -1] #x좌표
dy = [-1, 0, 1, 1, -1, 0, 1, -1] #y좌표


cnt = 0 #호수의 개수 변수
for i in range(h):# 모든 좌표를 순회하면서 DFS 실행 
    for j in range(w):
        if lake[i][j] == "L":
            dfs(i,j)
            cnt+=1
            
print(cnt)

제 코드는 순회하면서 돌다가 'L'을 발견하면 DFS 를 시작하고 연결된 모든 'L'을 방문 처리 합니다. 재귀함수로 만들어준 DFS 함수는 다음 미방문 'L'을 찾아 위 과정을 반복하게되고 , DFS 가 끝날때마다 호수의 개수를 증가시키게 해주었습니다.

또 다른 풀이법

# 입력 받기
W, H = map(int, input().split())
map_data = [input().split() for _ in range(H)]

# 방향 벡터 (상, 하, 좌, 우, 대각선)
directions = [(-1, -1), (-1, 0), (-1, 1), (0, -1), (0, 1), (1, -1), (1, 0), (1, 1)]

# DFS 함수 정의
def dfs(x, y):
    # 현재 위치를 방문 처리
    map_data[x][y] = '.'
    for dx, dy in directions:
        nx, ny = x + dx, y + dy
        if 0 <= nx < H and 0 <= ny < W and map_data[nx][ny] == 'L':
            dfs(nx, ny)

lake_count = 0

# 모든 좌표를 순회하며 DFS 실행
for i in range(H):
    for j in range(W):
        if map_data[i][j] == 'L':
            dfs(i, j)
            lake_count += 1

print(lake_count)

추가학습

BFS 개념 공부 및 관련 알고리즘 문제 풀이
연결 요소 문제: 백준 4963 (섬의 개수), 2667(단지 번호 붙이기) 등의 문제 풀기

깊이 우선 탐색 (DFS)

yujenius — Sat, 8 Feb 2025 03:02:03 +0900

DFS는 알고리즘 문제를 풀다 보면 꼭 마주하는 개념인 거 같은데요

Code up 문제들을 풀면서 마주한 그래프 문제들을 DFS 문제들로 많이 해결해 왔기에

오늘은 깊이 우선 탐색(DFS)에 대해 알아보고 어떤 상황에 활용하는 게 좋은지 정리해보려 합니다.

DFS란 무엇인가?

DFS(Depth-First Search) 는 그래프 탐색 알고리즘 중 하나로, 특정 경로를 끝까지 탐색한 후 다른 경로를 탐색하는 방식입니다. 스택 자료구조를 기반으로 동작하며, 재귀(Recursion) 또는 명시적 스택(Stack)을 사용하여 두 가지 방법으로 구현할 수 있습니다.

DFS를 알아야 하는 이유

1. 그래프 탐색의 기본!!

DFS는 그래프 탐색의 기본적인 방법 중 하나로, 여러 가지 문제에서 응용 됩니다. 미로 탐색, 네트워크 연결확인, 퍼즐 문제 등 다양한 곳에서 사용됩니다

2. 백트래킹(Backtraking)의 핵심

DFS는 백트래킹 기법을 사용할 때 기본적으로 활용됩니다. 백트래킹을 이해하려면 DFS를 숙지하는 것이 필수적입니다.

3. 효율적인 탐색

BFS(너비 우선 탐색)와 함께 DFS는 탐색 문제 해결의 핵심 도구로 활용되며, 문제의 특성에 따라 DFS를 선택하는 것이 효율적인 경우가 많습니다.

DFS의 동작 방식

1. 시작 노드를 방문하고 방문처리

2. 방문한 노드와 연결된 노드 중 방문하지 않은 노드로 이동

3. 더 이상 방문할 노드가 없다면 이전 노드로 되돌아가기

4. 모든 노드를 방문할 때까지 이 과정을 반복

DFS 활용 예시

1. 미로 탐색

DFS를 이용하면 미로에서 출구를 찾거나 특정 경로를 탐색할 수 있다.

2. 백트래킹

N - Queen 문제, 순열 생성, 조합 문제 등 경우의 수를 모두 탐색해야 하는 문제에서 DFS를 활용할 수 있다.

3. 위상 정렬

방향 그래프에서 선행 관계가 있는 작업을 정렬하는 데 사용된다.

4. 연결 요소 찾기

그래프에서 서로 연결된 그룹을 찾을 때 DFS를 활용할 수 있다.

마무리

DFS는 그래프 탐색에서 가장 기본적이고 중요한 알고리즘이다. 다양한 문제 해결에 활용되므로, 재귀와 스택을 활용한 구현 방법을 숙달하는 것이 중요하다. 앞으로 백트래킹, 위상 정렬, 경로 탐색 문제를 풀 때 DFS를 적극적으로 활용해 볼 계획이다.

다음 포스트에서는 DFS를 활용한 문제들 어떻게 풀었는지 소개하도록 하겠습니다.

HTTP란?

yujenius — Fri, 7 Feb 2025 03:00:33 +0900

프론트엔드를 해오고 있는 나도 웹 개발을 하다 보면 브라우저가 어떻게 웹사이트를 가져오는지

또는 API 요청이 어떻게 이루어지는 궁금할 때가 있다.

이 모든 과정의 핵심에는 HTTP가 있다.

오늘은 웹 개발의 기본이 되는 HTTP란 무엇인지, 그리고 어떤 원리로 동작하는지에 대해 알아보겠다.

HTTP의 개념과 특징

HTTP 란 HyperText Transfer Protocol 의 약자로 클라이언트와 서버 간의 통신 프로토콜을 의미한다.

즉, 클라이언트와 서버가 데이터를 주고받는 통신 규약이다.

HTTP 는 WWW(World Wide Web) 상에서 데이터를 주고 받기 위한 프로토콜로

서버 간의 요청(request) 과 응답(response)을 통해 작동한다.

클라이언트는 서버에 요청을 , 서버는 이에 대한 응답을 돌려 주는 방식으로 동작한다.

HTTP의 특징에는 비연결, 무상태 두가지가 존재한다.

1. 비연결

HTTP는 비연결 방식이기 때문에 요청 , 응답 과정이 끝나면 서버와의 연결을 종료한다

즉, 클라이언트가 요청을 보내고 서버가 응답을 보내면, 그 즉시 연결이 끊긴다.

이는 리소스를 효율적으로 관리할 수 있지만, 매번 새로운 연결을 맺어야 하기 때문에 성능 저하가 발생할 수도 있다.

이를 Keep-Alive 옵션 추가로 하나의 연결을 유지하면서 여러 개의 요청을 처리할 수 있도록 개선되었다.

2. 무상태

HTTP는 무상태 방식이므로, 서버는 클라이언트의 이전 요청 정보를 저장하지 않는다.

즉, 요청이 독립적으로 처리되고, 서버는 클라이언트가 누구인지 기억하지 않는다.

이 방식은 서버의 부담을 줄일 수 있지만 , 로그인 상태 유지나 장바구니 같은 기능을 구현하기 어렵다.

이 상태 유지를 위해 아래 방법들을 활용한다.

쿠키(Cookie): 클라이언트에 저장된 데이터(자동 전송됨)
세션(Session): 서버에 저장된 데이터 (세션 ID를 쿠키로 관리)
JWT(JSON Web Token): 토큰 기반 인증 방식 (서버 부담을 줄이면서 보안 유지 가능)

다음에 더 자세히 소개하도록 하겠다.

HTTP의 단점

이러한 HTTP는 단점이 있다 .

기본적으로 데이터를 평문으로 전송하기 때문에 도청이나 데이터 변조의 위험이 있고

중간에 패킷을 가로채어 내용을 엿볼 수 있어서 보안에 취약하다.

물론 이를 해결하기 위해 나온 것이 HTTPS(Hypertext Transfer Protocol Secure)다

HTTP에 SSL(Secure Socket Layer) 와 TLS(Transport Layer Security) 프로토콜을 통해 암호화된 상태로 전송이 가능하다.

HTTP 요청 메서드

메서드들은 api 통신을 위해 반드시 알아둬야 하는 개념들이다.

GET : 정보를 요청하기 위한 (조회)
POST : 서버에 데이터를 전송할 떄 사용 (등록)
PUT: 정보를 업데이트(갱신)하기 위해 사용, 정보 변경(수정)
DELETE: 정보를 삭제하기 위해 사용 (삭제)
PATCH: 리소스의 일부분을 수정
OPTIONS: 서버에서 지원하는 HTTP 메서드의 목록을 요청할 때 사용

기본적으로 가장 많이 사용하는 메서드는 GET, POST, PUT, DELETE 가 있다.

다음 포스트에서 이어서 자세하게 소개하도록 하겠다.

React에서 API 통신: fetch API vs axios 무엇을 선택할까?

yujenius — Thu, 6 Feb 2025 15:56:41 +0900

React 개발을 하면서 서버와 데이터를 주고 받는 기능은 필수적이다

API 요청을 보낼 때 대표적으로 사용되는 방법으로는 fetch API 와 axios 가 있다.

나는 개발을 하면서 두 방법 중 어떤 것이 더 나을까? 라는 고민이 있었다.

이 글에서는 fetch API 와 axios를 비교하고,

React 프로젝트에서 어떤 상황에서

어떤 방법을 선택해야 하는지 알아보도록 하겠다.

fetch API vs axios 비교

1. fetch API

const fetchData = async () => {
  try {
    const response = await fetch('https://example.com/api', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ key: 'value' })
    });

    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);

    const data = await response.json();
    console.log('Fetch API Response:', data);
  } catch (error) {
    console.error('Fetch API Error:', error);
  }
};

2. axios

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.post('https://example.com/api', {
      key: 'value'
    });
    console.log('Axios Response:', response.data);
  } catch (error) {
    console.error('Axios Error:', error);
  }
};

두 가지 방법의 장점을 비교해 보았을 때,

fetch API 의 장점

추가 라이브러리 없이 사용 가능: 브라우저에 내장된 API로 가볍게 사용 가능
Promise 기반: async/await을 활용하여 비동기 처리 가능
최신 웹 표준: 브라우저에서 최적화되어 동작

axios 의 장점

자동 JSON 변환: 응답 데이터를 JSON으로 자동 변환
타임아웃 설정 가능: fetch는 기본 타임아웃이 없지만, axios는 timeout 옵션 제공
요청 및 응답 인터셉터 지원: 요청 및 응답을 가로채서 변형할 수 있음
더 나은 오류 처리: HTTP 오류(404, 500 등)를 예외로 처리 가능

각각의 장점에 맞게

fetch API 의 경우에는 추가 라이브러리 없이 가볍게 사용하거나

브라우저 내장 기능을 활용하여 최소한의 의존성으로 개발하고 싶을 때 사용하는 것이 좋고

axios 의 경우에는 JSON 자동 변환, 타임아웃, 인터셉터 등 추가 기능이 필요하거나

async/await 기반의 간결한 코드 작성을 원할 때

React 프로젝트에서 API 호출을 많이 사용해야 할 때 사용하는 것이 좋을 것이다.

결론

React에서 API 호출을 할 때 fetch API 와 axios 는 각각의 장점이 있다

React 프로젝트에서 API 통신을 효율적으로 관리하고 싶다면, 두 방법의 활용도 그리고 장단점을 잘 이해하여 프로젝트에 맞게 선택하여 개발하는 것이 가장 좋은 방법 같다

돔(DOM) 과 가상돔(Virtual DOM)

yujenius — Thu, 6 Feb 2025 02:54:02 +0900

프론트 엔드 공부를 시작하면 가장 많이 마주하게 되는 게 DOM 이라고 생각한다.

특히, 리액트 와 같은 라이브러리를 사용할 때,

가장 큰 차이점은 Virtual DOM 을 사용한다는 것이다.

이번 글에서는 DOM 과 가상 DOM의 차이점, 그리고 실제 개발에서 이를 어떻게 활용하면 좋을지 살펴보겠다.

DOM (Document Object Model) 이란?

DOM 은 HTML 문서를 브라우저가 해석하여 생성하는 트리 구조의 객체 모델이다.

즉 웹페이지의 요소들을 JavaScript를 통해 조작할 수 있도록 해주는 역할을 해준다.

그러나 본래의 DOM 은 몇가지의 단점이 존재한다.

DOM의 경우 변경이 많아질수록 브라우저의 렌더링 성능이 떨어진다.

이는 비효율적인 업데이트를 하기 떄문인데,

요소 하나를 변경할 때마다 전체 레이아웃이 다시 계산되기 때문에 성능이 현저히 떨어진다.

특히 이러한 단점들이 큰 규모의 프로그램을 개발하게 된다면 그만큼 업데이트가 잦아지기 때문에

효율적이지 못하게 된다.

바로 이러한 문제를 해결하기 위해 등장한 개념이 바로 가상 DOM(Virtual DOM) 이다.

가상 DOM(Virtual DOM) 이란?

가상 DOM은 실제 DOM을 조작하기 전에, 메모리상에 존재하는 가상의 DOM을 먼저 변경하고, 최적화된 변경 사항만 실제 DOM에 반영하는 방식을 의미한다.

React 로 예를 든다면,

React는 상태가 변경될 때마다 가상 DOM을 생성하고,

기존 가상 DOM과 비교하여 변경된 부분만 실제 DOM에 적용한다.

이러한 방식은 DOM을 죄소한으로 조작 하여 처리 횟수를 최소화한다.

그래서 리액트에서는 상태가 변경되면,

1. 새로운 가상 DOM 을 생성하고

2. 이전 가상 DOM 과 새로운 가상 DOM 을 비교하여 변경된 부분을 찾고

3. 변경된 부분만 실제 DOM에 반영한다.

이 과정을 거치게 되면 불필요한 DOM 조작을 줄이고, 성능을 향상시킬 수 있다.

DOM 과 가상 DOM 을 이해하는 것은 단순히 개념을 아는 것을 넘어서, 실제 프로젝트에서 최적화된 성능을 내기 위해 필수적이다. 가상 DOM 을 사용헀다고 하여서 성능이 좋아지는 것은 아니지만 작은 규모의 프로젝트에서는 직접 DOM을 조작하는 것이 더 빠를 수도 있고, React 와 같은 라이브러리를 사용할 때도 불필요한 렌더링을 줄이는 것이 중요하다.

yujenius 님의 블로그

[UMC] 나의 두번째 React Hook (useContext)

Props drilling 문제 이해하기

props drilling 해결하기 (useContext 사용하기)

마무리

[React]React 의존성 충돌 해결

[React] State 맘대로 변경하는 법

❌ 직접 변경하면 안 되는 이유

✅ 올바르게 변경하는 방법

마무리

[React] JSX 란?!

JSX의 기본 개념

JSX의 주요 문법

마무리

[Python] Code up 4060: 전광판 전구 조작

문제 설명

입력

출력

해결 접근법

소스 코드

마무리

[Python] Code up 4024: 호수의 수 구하기

문제 설명

해결 접근법

소스코드

또 다른 풀이법

추가학습

깊이 우선 탐색 (DFS)

DFS란 무엇인가?

DFS를 알아야 하는 이유

DFS의 동작 방식

DFS 활용 예시

마무리

HTTP란?

HTTP의 개념과 특징

HTTP의 단점

**HTTP 요청 메서드**

React에서 API 통신: fetch API vs axios 무엇을 선택할까?

fetch API vs axios 비교

결론

돔(DOM) 과 가상돔(Virtual DOM)

DOM (Document Object Model) 이란?

가상 DOM(Virtual DOM) 이란?

HTTP 요청 메서드