🔐 Archive/ReactJS 7

[React Native error] '/파일' cannot be loaded because running scripts is disabled on this system

에러 visual code에서 다음과 같은 에러 발생 '/파일' cannot be loaded because running scripts is disabled on this system 라는 메세지와 알수없는 에러가 발생했다. 해결 PowerShell에 Set-ExecutionPolicy -ExecutionPolicy Unrestricted command 입력 (Set-Execution: 윈도우 컴퓨터에서 파워셀 실행 정책을 설정하는 한다.) a 답변 solved

[ReactJS error] event로 호출되는 함수 내의 함수가 안불러지는 이유?

문제 이 코드는 class component의 render함수의 리턴값 안에 있다. 나는 이렇게 select태그를 바꾸면 selectCountry를 호출하고자 했는데, selectCountry 안에서 selectCountry(){ var selectedCountry = document.getElementById("country").value; document.getElementById("countrytxt").innerHTML = "country: " + selectedCountry; this.makeCityList(selectedCountry); } 이렇게 class의 메소드 makeCityList를 호출하려고 하면 아래와 같이 "TypeError: Cannot read property '함수이름' o..

[ReactJS: 삽질로 얻은 것들] local json파일 불러오기, State에 Props값을 저장하고 싶은 경우 등

local json파일 불러오기 import data from '../json/city.list.json'; data는 변수 이름과 같은것, data가 배열과 같이 쓰인다. 따라서 data를 콘솔로 찍어보면 객체들이 들어있고 5번째 객체의 id 속성값을 가져오려면 그냥 data[5].id 이렇게 하면 됨 react에서 jquery 사용 설치: npm install jquery --save import $ from 'jquery'; 컴포넌트 클래스의 constuctor에서 setState할 때 오류 -> constuctor안에서는 'this.state.변수이름 = 값'으로 직접 지정해주어야 오류가 안난다. State에 Props값을 저장하고 싶은 경우 절대 this.setState로 props값을 stat..

[weather API] 날씨 API 사용해서 ReactJS로 웹페이지 만들기: 날씨 API 사용하는 방법

먼저 결과부터! : 노마드 코더의 ReactJS 기초 강의를 듣고 응용해서 만든 간단한 날씨 어플로, 나라와 도시를 선택하면 날씨 API에서 해당하는 최근 날씨를 불러와 보여준다 날씨 API사용하는 방법? https://openweathermap.org/ 에 회원가입한다. Сurrent weather and forecast - OpenWeatherMap Dashboard and Agro API We provide satellite imagery, weather data and other agricultural services that are based on geodata. By using Agro API , you can easily power your solution based on this infor..

ReactJS로 웹서비스 만들기 4: Movie app 만들기

[1] API에서 데이터 가져오기 (fetch) fetch를 하기 위해 axios를 설치한다. 참고: https://www.npmjs.com/package/axios 설치: npm i axios (i는 install의 약자) YTS에서 API를 사용하기로 결정 https://yts.mx/api API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts.mx 첫번째 Endpoint를 확인해보면 이와같이 json으로 된 데이터들을 확인할 수 있다. 하지만 이 url을 사용하면 url이 계속 바뀌기 때문에 프로그램을 만들어..

ReactJS로 웹서비스 만들기 3: State

Class component 지난 시간 코드인 function component를 class component로 바꿨다. class component에서는 return이 없고 render메소드에서 화면에 출력한다. 또, class component를 쓰는 가장 큰 이유는 state라는 object가 있기 때문이다. [코드] import React from 'react'; import PropTypes from 'prop-types'; class App extends React.Component { state = { count: 0 }; add = () => { console.log("add"); }; minus = () => { console.log("minus"); }; render() { return..

ReactJS로 웹서비스 만들기 2: Component

What is Component? 리액트에서 새롭게 알게된 개념 component! 리액트에서는 모든것을 component라고 한다 ex) 컴포넌트를 만들고, 컴포넌트가 데이터를 보여주게 하고, 컴포넌트를 보기 좋게 만들고.. Component란? HTML을 반환하는 함수 [Component의 형태] // App.js import React from 'react'; function App() { return Helloddd!!; } export default App; // index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(, document.getElemen..