yujenius 님의 블로그

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

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

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