[React]Error: Uncaught ReferenceError: React is not defined

Uncaught ReferenceError: React is not defined 해당 메세지는 프로젝트에서 React 라이브러리를 올바르게 가져오지 못했거나 참조 하지 못했을 때 나타나는 버그이다 잘 사용하던 프로젝트 코드였는데 안 된다고 해서 개발자프롬프트로 확인을 했는데 다음과 같이 떠있었다 이 프로젝트는 Class 를 만드는 프로젝트였는데 프로젝트 파일을 생성하면서 React.Componet 에서 뭔가 문제가 생긴거 같다 뭔가 프로젝트가 충돌이 일어나면 react 를 업데이트를 한번 시켜주면 되는 경우가 있길래 이번에도 업데이트를 시켜주었다 npx update 그래도 리액트는 실행이 되는데 랜더링이 되지 않는... 이번에는 'React is not defined' 라서 리액트를 새로 설치해 보았다..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2023. 11. 22.
• textsms

[React] useState([배열]) 요소 값 변경하기

useState([배열]) 요소 값 변경하기 let [Blog1, setBlog1] = useState([ "최저가 마우스", "당근 직거래", "일본 여행 패스", ]); let [Date, setDate] = useState(["2023-11-13", "2023-11-14", "2023-11-15"]); {Blog1[0]} {Date[0]} {Blog1[1]} {Date[1]} {Blog1[2]} {Date[2]} 위 UI는 useState([배열])를 사용해서 각 요소들 그려주고있다 이제 여기에서 [다음 페이지] 버튼을 누르면 Blog1의 값과 Date 값을 동시에 변경해주려고 한다 { 어떻게 동작할 것 인가 }} >새로고침 다음 onClick={ 이벤트 함수} 버튼안에 Blog1(state 객체)..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2023. 11. 15.
• textsms

리액트(React) 터미널 경고 메시지안보이게 하는 방법

리액트(React) 터미널(TERMINAL) 경고 메시지 안보이게 하는 방법 리액트를 사용하다보면 프로젝트를 실행하거나 했을때 오류는 아니지만 다음과 같이 WARNING 이라는 경고가 뜬다 이 경고 메시지를 안뜨게 하는 코드가 있는데 Line 1:8: 'logo' is defined but never used no-unused-vars logo가 선언되었지만 사용된지 않고 있어서 나오는 경고 메시지이다 /*eslint-disable*/ 이 코드를 상단에 작성해주면 경고가 사라지는 것을 볼 수있다 WARNING 문제 코드보다 아래에 있는 코드에만 적용이 되기 때문에 상단에 적어주는 것이 좋다

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2023. 11. 15.
• textsms

[React]훅/상태(state)/useState() 사용해서 상태 값 변경하는 법

훅(Hook) 훅(Hook)은 함수형 컴포넌트에서 상태(state : 컴포넌트의 상태를 나타내는 객체)와 다양한 리액트 기능을 사용할 수 있게 해주는 함수로 컴포넌트의 상태 관리, 생명주기 메서드 호출, 컨텍스트 사용 등과 같은 리액트의 핵심 기능을 함수형 컴포넌트에서 사용할 수 있게 해준다 상태(State) 상태(state)는 컴포넌트가 렌더링 될 때 변할 수 있는 값들을 말한다 useState 함수는 이런 상태(state)를 선언하고 업데이트 할 수있게 도와준다 useState() 사용해서 자료 보관/변경하기 상태 선언하기 useState()를 사용하기 위해서는 import React, { useState } from 'react'; 위의 코드를 선언이 되어있어야지 useState를 사용할 수있다 /..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2023. 11. 15.
• textsms

[React]리액트 'JSX 문법' 사용하기

리액트 'JSX 문법' JSX 기본 구조 HTML과 유사한 구조를 가지면서 JavaScript 코드를 통합 해서 사용할 수 있는 확장 문법이다 리액트에서는 JSX( JavaScript의 확장 문법 ) 을 사용해서 UI를 구조를 선언한다 리액트 파일을 만들면 src 안에 기본적으로 포함되어있는 App.js는 위와 같이 생겼다 리액트에서 레이아웃을 만들기 위해서는 import logo from './logo.svg'; import './App.css'; function App() { return ( //여기에 코드 작성하기! ); } export default App; function App() 안에 있는 return() 문 안에 작성을 해주어야 한다 하지만 변수 같은 경우, return() 밖에 작성 해주..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2023. 11. 15.
• textsms

[React]리액트의 핵심 특징

리액트(React)의 핵심 특징 선언적 UI 리액트는 선언적 UI를 지향하는 라이브러리로, 사용자 인터페이스를 어떻게 표현할지에 중점을 둔다 선언적 UI의 핵심 아이디어는 원하는 상태(데이터)를 정의하고, 리액트가 자동으로 UI를 업데이트하도록 하는 것이다 이는 코드를 직관적이고 예측 가능하게 만들어 유지보수와 개발을 용이하게 한다 JSX 문법 JSX는 JavaScript의 확장 문법으로, 리액트에서 UI 구조를 선언하는 데 사용한다 XML과 유사한 문법을 가지며, JavaScript 코드 안에서 UI 요소를 표현할 수 있도록 도와준다 JavaScript 코드 안에서 직관적으로 컴포넌트를 작성할 수 있어, 가독성과 유지보수성이 향상됨 가상 DOM (Virtual DOM) 가상 DOM은 리액트의 성능 최적..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2023. 11. 15.
• textsms

[React]Error: 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 해결하기

Error: 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 해결하기 며칠전에 까지만 해도 문제 없던 부분이였는데 갑자기 문제가 생기면서 해당 에러를 해결하기 위해서 찾아보던 중에 평소에 깃허브 데스크탑으로 코드를 올려두는데 다른 작업공간에서 작업을 해서 올려둔 파일을 사용하려다 보니 push 과정에서 문제가 생긴 것 같다 해당 문제가 생겼을 경우 다음과 같이 해주었다 npm을 업데이트 후(npm update) 시작하기 (npm start) npm update 명령어 입력 업데이트가 완료 되면 npm start 오류가 해결 되고 React App이 정상적으로 실행 된 것을 확인 할 수 있다 react-scripts 설치하기 업데이트를 해주어..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2023. 11. 13.
• textsms

[React: Error]no such file or directory, enoent This is related to npm not being able to find a file. 오류 해결하기

Error: no such file or directory, enoent This is related to npm not being able to find a file. 오류 해결하기 no such file or directory, lstat 'C:\Users\00\AppData\Roaming\npm'npm ERR! enoent This is related to npm not being able to find a file. 다음과 같은 오류가 발생했을 때 C:\Users\00\AppData\Roaming 이라는 폴더안에 npm이 존재하지 않아서 생기는 오류이다 해당 경로 들어가서 npm이라는 폴더를 하나 생성해 주면 문제가 해결된 것을 확인 할 수 있다

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2023. 11. 10.
• textsms

리액트(React) 프로젝트 폴더 분석하기

프로젝트 폴더 분석하기 리액트 프로젝트 폴더 구조에서 'node_modules', 'public', 'src' 디렉토리는 각자 다른 목적으로 구성된다 일반적으로 위와 같은 폴더 구조를 가지고 있고 프로젝트의 복잡성과 요구 사항에 맞추어 디렉토리 구조를 조정할 수 있다 node_modules [node_modules] 디렉토리는 npm(Node Package Manager)을 통해 프로젝트에 필요한 외부 패키지 및 의존성이 자동으로 설치된다 npm(Node Package Manager) 라이브러리 코드 보관함으로 프로젝트에서 사용하는 외부 라이브러리와 의존성이 저장된다 이 디렉토리는 npm에 의해 관리되며, 직접 수정하거나 관리할 필요가 없다 public 정적 자원과 리액트 애플리케이션을 렌더링하는 데 사..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2023. 11. 9.
• textsms

리액트(React) 설치 & 개발 환경 설정하기

리액트(React) 설치 개발 환경 설정 [ Node.js 설치하기 ] 구글에서 node js 검색하면 다운받을 수 있는 사이트가 나옵니다 https://nodejs.org/en/download Download | Node.js LTS Recommended For Most Users nodejs.org 사이트로 들어가서 LTS를 다운 받아준다 node.js 가 설치 되어있는지 확인하려면 명령 프롬프트(cmd)에서 확인을 해주어야한다 실행창(window키 + R)을 열어서 cmd를 열어준다 그리고 명령창에 node -v 를 작성해주면 현재 설치 되어있는 node.js 의 버전을 확인 할 수 있다 [ 개발 에디터(vscode) 설치하기 ] Visual Studio Code - Code Editing. Red..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2023. 11. 9.
• textsms