⭐ React (리액트) (21) 썸네일형 리스트형 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(.. 11. props (변수, 함수 passing 하기) # props로 데이터를 전달한다. # props에서 데이터를 넘겨줄때 부모에서 자식으로 데이터를 넘겨준다. 자식에서 부모로 데이터를 전달해 줄수 없다. # 그래서 넘기는 데이터는 항상 상위 파일에서 데이터를 받게 하고, 상위 파일에서 데이터를 자식에게 넘겨주는 형태를 취해야 한다. # 추후에 Redux를 사용하여 관리하면 부모 자식의 데이터 연계 문제를 해결 할 수 있다. Redux는 Spring의 IoC 컨테이너 같은 존재로 모든 데이터를 일단 저장 후 다른 곳에서 요청을 하면 전달해 주는 개념이다. 1. Hompage.js 아래의 코드를 보면 중간에 // DB에서 다운로드 받았다고 가정한 데이터들이 존재 한다. 이 데이터들을 아래의 return 문으로 전달하고 전달된 데이터는 Home.js 파일로 .. 이전 1 2 3 다음
