Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. options.allowedHosts[0] should be a non-empty string https://stackoverflow.com/questions/70374005/invalid-options-object-dev-server-has-been-initialized-using-an-options-object Invalid options object. Dev Server has been initialized using an options object that does not match the A..

React 내가 다시볼 쿡북 기본설치 node.js설치 -https://nodejs.org/ko/ vscode설치 -https://code.visualstudio.com/ yarn설치 -https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable `npm install --global yarn` `yarn --version` 1.프로젝트생성 `npx create-react-app 프로젝트명` 2.프로젝트실행 `npm start` `yarn start` 3.터미널에 뜨는 warning 없애기 `*/\* eslint-disable \*/*` 상단에 넣어주기 4.useState사용 `import {useState} from 'react'` let [a,b..

Redux사용의 현재로써 최종형태 기존의 1,2,3,4의 방식도 좋지만 좀더 짧은코드를 사용해 redux store의 state를 꺼내올 수 있다. useSelector Hook에대해 알아본다. // store에있던 데이터를 가져와서 props로 변환해주는 함수 // 즉 return에 있는애들이 props 라고 볼 수 있음 // function state를props화(state){ // console.log(state) // return { // 상품명 : state.reducer[0].name, // state:state.reducer, // alert열렸니:state.reducer2 // } // } // export default connect(state를props화)(Cart) export def..

장바구니 추가기능, 이런 기능을 구현하려면 결국 reducer수정방법에 다라 dispatch를 이용해 데이터를 다시 전송해야한다. dispatch로 전송하는법과 reducer안에서 받은 데이터를 payload로 사용하는법을 알아보자 redux에서 데이터를 수정할때의 3단계 1.데이터 수정하는법 만들기 2.dispatch하기 3.dispatch에서 데이터를 함께 실어 보내기 let 초기값= [{id : 0, name : '멋진신발', quan : 2}, {id : 1, name : '멋진신발2', quan : 3}, {id : 2, name : '멋진신발3', quan : 5}, ] function reducer(state = 초기값, 액션){ //es6 신문법, 기본파라미터 문법 데이터 초기값을 그냥 넣..

Redux를 쓰면서 중요한건 state나 reducer가 여러개 있을 수 있다는거 당연히 프로젝트가 커지면 커질수록 여러개를 만들 수 있겠지 그래서 아마 이사용방식이 점점 최종형태가 될듯싶다. combineReducers()라는 함수에 만든 createStore()를 넣고, reducer도 여러고 결합해서 사용해주는 형태를 알아보자 위와같은 팝업을 닫는거는 그냥 useState를 써도되지만 Redux를 사용해서 해보자 index.js let 초기값= [{id : 0, name : '멋진신발', quan : 2}, {id : 1, name : '멋진신발2', quan : 3}, {id : 2, name : '멋진신발3', quan : 5}, ] function reducer(state = 초기값, 액션){..

reducer / dispatch 리덕스 데이터 수정하는법 리덕스에서 state데이터를 수정하는법 reducer 함수를 만들어 수정하는 '방법'을 정의해놓는다 그리고 dispatch()함수를 사용해 reducer에 수정을 요청한다. 정해져있는 방식이니 그대로 사용하자 function Cart(props){ return ( # 상품명 수량 변경 { props.state.map((a,i)=>{ return ( {a.id} {a.name} {a.quan} { ??? }}> + ) }) } ) } props.state로 리덕스에있는 state를 가져와 map반복문을 사용 a는 당연히 안의 값이고 i는 인덱스 값이다. 오류가 나지않게 key 값을 넣어주고 state안의 id,name,quan을 출력하게 만들었다...

Redux - props전송없이 모든 컴포넌트에서 state를 사용하기 위해 사용 이와같은 구성에서 App.js와 index.js를 기본으로 여러 컴포넌트들을 만들어준다. 우선 중요한건 redux설치와 세팅 redux,react-redux두개를 설치해준다. yarn add redux react-redux npm install redux react-redux cart.js라는 곳에 새로 만들고 컴포넌트로 app.js에 등록을해준다. import Cart from './Cart.js' ..... 그리고 index.js에 redux설정을 해준다. import { Provider } from 'react-redux'; import {combineReducers, createStore} from 'redux'; ..

버튼을 여러개만들어서 div를 보여줄 수 있는데 그냥 탭만들기라고 명칭, 쉽게말하면 그냥 버튼1,2,3 그리고 탭 1,2,3 이렇게 연결하는걸 말함 return ( 버튼0 버튼1 버튼2 내용0 내용1 내용2 ) 이런식으로 되어있는걸 부트스트랩을 써도되고, 그냥 버튼을 사용해도됨 방식은 useState를 사용해 어떤 버튼을 눌렀는지 state로 저장해두고 상태에 따라 div를 조건문으로 보였다 안보였다 해주면됨 on/off가 아닌 버튼 숫자를 저장하면 된다. let [누른탭, 누른탭변경] = useState(0); .......... { 스위치변경(false);누른탭변경(0)} }>Active { 스위치변경(false);누른탭변경(1)} }>Option 2 { 스위치변경(false);누른탭변경(2)} }>..