⭐ React (리액트) (22) 썸네일형 리스트형 리액트 주요 요소 정리 React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다.React를 쉽게 이해하기 위해 다음과 같은 개념과 방법을 따라가면 도움이 됩니다.1. 컴포넌트(Component)React의 기본 단위는 컴포넌트입니다.컴포넌트는 독립적이고 재사용 가능한 UI 요소를 정의합니다.컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉩니다.함수형 컴포넌트import React from 'react';const MyComponent = () => { return Hello, World!;};export default MyComponent;클래스형 컴포넌트import React, { Component } from 'react';class MyComponent extends Component { .. React 리액트 용어정리 1. constructor 생성자(constructor)는 객체를 만드는 역할을 하는 함수다. 함수안에 생성자는 객체를 만들어 주기위해 만드는 것이고 "초기화", "초기값"이라고 이해하자. 즉, Class 안에 constructor는 보통 class의 초기값을 설정해 주는데 사용된다. 2. super - 부모 클래스(class)에서 자식 클래스(class)의 리소스를 가져다 쓸 수 있다. - super는 부모 클래스 constructor의 input값이다. 3. axios - 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 사용된다. - 단축된 axios 메서드 axios.get() axios.post() axios.put() axios.delete() 4. var, const, let - var.. 리액트 + nginx 빌드하기 추후 내용 정리 해야함 간단한 구조도는 아래와 같다. 물론 좀 더 추가 해야함. Invalid host header 에러 발생 하는 이유? React : Invalid host header proxy 설정을 들여다 봐야 한다. 예를들어 React가 Frontend 상황일때 Frontend에 Backend를 바라보는 URL을 넣어줘야 한다. 이 URL을 .env 파일을 따로 생성하여 URL을 지정 할 수도 있고, app.js 파일 등에 proxy 설정을 하여 Backend와 통신을 할 수 있도록 통로를 만든다. 하지만, Frontend에서 Backend URL을 찾지 못하거나 잘못 설정되어 있거나 중복으로 설정 되어 있을시에도 아래와 같이 Invalid host header 오류가 발생 할 수 있다. 결국에는 프론트엔드에 백엔드 URL을 호출하기 못하여 통신이 어려울때 위와 같이 Invalid host header 오류가 발생한다. 예를들어 .. (React-에러) 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 리액트를 시작하거나 git clone을 받은 후, npm install을 하고 npm start를 했음에도 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 에러가 발생 하면, 당황하지 말고 아래 명령어를 실행 한다. npm update npm start 위의 명령어를 실행해도 정상적으로 실행되지 않는다면 아래 명령어를 추가로 실행 하면 된다. npm install -g react-scripts 2. 개발환경 설정 IDE 설치 및 DB 설정 1. sts 설치 이클립스를 실행한 후 Help -> Market place -> sts검색후 설치 한다. 2. Gradle 플러그인 설치 Help -> Market place -> gradle검색후 "Buildship Gradle Integration 3.0"을 설치 한다. 3. XAMPP설치 후 MySQL설정하기 xampp란? : php, Apach, mysql등의 개발을 위한 환경을 하나의 프로그램에서 관리할수 있도록 도와주는 패키지 프로그램 4. mysql환경 변수 설정 xampp설치가 완료된 후 mysql을 바로 사용 할 수는 없다. 몇가지 설정이 필요하다. 5. XAMPP를 이용한 DB 테이블 생성 # xampp가 설치된 폴더 -> mysql폴더 -> bin폴더를 환경변수의 값으로 지정한다. .. 1. react 설치하기 2022.04.29 - [React (리액트)/리액트 기본] - 1. 리액트 개발환경 구성하기 1. 리액트 개발환경 구성하기 # 리액트를 쓰는 이유? 옵저버 패턴과 연관 되어 있다. 리액트는 데이터 변경을 감지시 UI가 자동으로 업데이트 된다. 리액트의 변경을 감지하고 UI를 자동으로 업데이트 해주기 위해서는 데몬이 may9noy.tistory.com 1. 패키지 추가하기 react와 spring boot api의 통신은 axios를 사용할 것이므로 패키지를 설치한다. npm install bootstrap --save 2. asiox 패키지 설치 각 페이지의 구분을 react-route-dom을 사용할 것이므로 패키지를 설치한다. npm install axios --save 3. VS code 유용한 .. 12. styled component props 패싱 # styled component props 패싱 관련하여... 1. HomePage.js import React, { useEffect, useState } from 'react'; import Footer from '../components/Footer'; import Header from '../components/Header'; import Home from '../components/Home/Home'; const HomePage = () => { // http 요청 (fetch, axios(다운 받아야 함)) // 데이터를 임의로 받았다고 치고 const [boards, setBoards] = useState([]); // 과제 풀기 const [user, setUser] = useState(.. 이전 1 2 3 다음
