yujenius 님의 블로그

최근에 umc 활동을 하면서 React의 여러 가지 개념을 배우고 있는데, 이번에는 useContext에 대해 공부했다. 처음에는 props drilling 이 왜 문제인지 정확히 와닿지 않았는데, 직접 코드를 작성하고 나니 useContext의 필요성을 확실히 깨달을 수 있었다. 이 글에서는 props drilling의 문제를 알아보고, 이를 해결하는 방법으로 useContext를 사용하는 방법을 정리해보려고 한다. Props drilling 문제 이해하기React에서 부모 → 자식 → 손자로 데이터를 전달하려면 props를 계속 내려줘야 한다.이 과정에서 중간에 위치한 컴포넌트가 실제로는 데이터를 사용하지 않지만,단순히 props를 전달하기 위해 존재해야 하는 문제가 발생한다.이런 현상을 props ..

React 프로젝트 생성 중에 에러가 발생했다.!!!!!!!!!!!!!!!!Installing template dependencies using npm...npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR! npm ERR! While resolving: reactstudy@0.1.0npm ERR! Found: react@19.0.0npm ERR! node_modules/reactnpm ERR! react@"^19.0.0" from the root projectnpm ERR! npm ERR! Could not resolve dependency:npm ERR! peer react@"^18.0.0" from @t..

React에서는 useState를 사용하여 상태를 관리한다. 하지만 직접 state를 변경하면 React의 상태 관리 흐름을 깨트려 버린다. 난 이 부분이 React를 공부하면서 헷갈리고 어려웠던 개념이기에 정리를 통한 완벽 학습을 목적으로 글을 써보려한다.   ❌ 직접 변경하면 안 되는 이유React에서는 state가 변경될 대마다 컴포넌트를 다시 렌더링한다. 하지만 state를 직접 수정하면 이를 감지하지 못해 렌더링이 일어나지 않거나, 예상치 못한 동작이 발생할 수 있다. const [count, setCount] = useState(0);// ❌ 이렇게 하면 안 됨!count = count + 1; // 상태 직접 변경 (React가 감지하지 못함)그냥 쉽게 이해하도록 설명한다면.. 자료형이 co..

얼마 전까지 Vanila JS 만을 고수하던 나이기에 React를 시작할 때 JSX 언어는 너무 생소했다새로운 개념을 다시 적립한다는 것이 받아들이기 힘든 현실이지만 JSX 는 React 를 하기 위해서 필수적인 개념이기에 이번 글에서 다뤄보려한다.JSX는 Javascript 내에서 XML 과 유사한 문법을 사용할 수 있도록 도와준다. 그렇지만 사용하다 보니 생소한 문법과 사용법이 미묘하게 다르기에 이 글에서는 React 비기너들을 위해 !!JSX의 기본 개념과 꼭 지켜야 하는 주요 문법에 대해서 정리해보도록 하겠다.  JSX의 기본 개념 JSX는 JavaScript 코드 내에서 HTML과 유사한 구조를 작성할 수 있는 문법 확장이다.1. UI를 선언적으로 표현할 수 있다. const element = ..

https://codeup.kr/problem.php?id=4060 전광판 전구 조작첫째 줄에 전광판의 크기를 나타내는 세로 길이 $M$과 가로 길이 $N$이 입력된다. ($2codeup.kr문제 설명전광판에는 켜져 있는 전구(1)와 꺼져 있는 전구(0)가 있습니다. 전구를 조작하면 해당 전구와 상하좌우로 연결된 같은 상태의 전구들이 모두 바뀌는 특징이 있습니다. 이러한 규칙을 따라 모든 전구를 켜는 최소 조작 횟수와 끄는 최소 조작 횟수를 구하는 문제입니다.입력첫째 줄: 전광판의 크기 M N (2 ≤ M, N ≤ 100)둘째 줄부터 M개의 줄에 걸쳐 N개의 전구 상태가 주어짐 (켜진 상태: 1, 꺼진 상태: 0)출력모든 전구를 켜기 위한 최소 조작 횟수와 모두 끄기 위한 최소 조작 횟수를 공백으로 구분..

https://codeup.kr/problem.php?id=4024&rid=0 호수의 수 구하기첫째 줄에 두 정수 W, H가 주어진다. (단, 4 codeup.kr 문제 설명 CodeUp 4024번 문제는 'L' 과 '.' 으로 구성된 지도를 통해 호수의 개수를 구하는 문제입니다. 이때 'L'은 호수를 의미하고 '.'은 비호수 지역을 의미합니다. 호수는 상, 하, 좌, 우, 대각선으로 연결된 모든 'L' 을 하나의 호수로 간주합니다. 해결 접근법일단 이 문제를 마주했을 때, DFS 알고리즘을 활용해야겠다는 생각이 들었습니다.DFS는 한 지점에서 시작해 갈 수 있는 모든 경로를 탐색하기 때문에 호수의 모든 연결 요소를 방문하는 데 적합하다고 생각했기 때문입니다. 소스코드import syssys.setrec..

DFS는 알고리즘 문제를 풀다 보면 꼭 마주하는 개념인 거 같은데요Code up 문제들을 풀면서 마주한 그래프 문제들을 DFS 문제들로 많이 해결해 왔기에 오늘은 깊이 우선 탐색(DFS)에 대해 알아보고 어떤 상황에 활용하는 게 좋은지 정리해보려 합니다. DFS란 무엇인가?DFS(Depth-First Search) 는 그래프 탐색 알고리즘 중 하나로, 특정 경로를 끝까지 탐색한 후 다른 경로를 탐색하는 방식입니다. 스택 자료구조를 기반으로 동작하며, 재귀(Recursion) 또는 명시적 스택(Stack)을 사용하여 두 가지 방법으로 구현할 수 있습니다. DFS를 알아야 하는 이유1. 그래프 탐색의 기본!!DFS는 그래프 탐색의 기본적인 방법 중 하나로, 여러 가지 문제에서 응용 됩니다. 미로 탐색, 네트..

프론트엔드를 해오고 있는 나도 웹 개발을 하다 보면 브라우저가 어떻게 웹사이트를 가져오는지또는 API 요청이 어떻게 이루어지는 궁금할 때가 있다. 이 모든 과정의 핵심에는 HTTP가 있다.오늘은 웹 개발의 기본이 되는 HTTP란 무엇인지, 그리고 어떤 원리로 동작하는지에 대해 알아보겠다. HTTP의 개념과 특징HTTP 란 HyperText Transfer Protocol 의 약자로 클라이언트와 서버 간의 통신 프로토콜을 의미한다. 즉, 클라이언트와 서버가 데이터를 주고받는 통신 규약이다.HTTP 는 WWW(World Wide Web) 상에서 데이터를 주고 받기 위한 프로토콜로서버 간의 요청(request) 과 응답(response)을 통해 작동한다.클라이언트는 서버에 요청을 , 서버는 이에 대한 응답을 ..

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..

프론트 엔드 공부를 시작하면 가장 많이 마주하게 되는 게 DOM 이라고 생각한다.특히, 리액트 와 같은 라이브러리를 사용할 때,가장 큰 차이점은 Virtual DOM 을 사용한다는 것이다. 이번 글에서는 DOM 과 가상 DOM의 차이점, 그리고 실제 개발에서 이를 어떻게 활용하면 좋을지 살펴보겠다.DOM (Document Object Model) 이란?DOM 은 HTML 문서를 브라우저가 해석하여 생성하는 트리 구조의 객체 모델이다. 즉 웹페이지의 요소들을 JavaScript를 통해 조작할 수 있도록 해주는 역할을 해준다. 그러나 본래의 DOM 은 몇가지의 단점이 존재한다. DOM의 경우 변경이 많아질수록 브라우저의 렌더링 성능이 떨어진다.이는 비효율적인 업데이트를 하기 떄문인데, 요소 하나를 변경할 때..