이안의 평일코딩

npm run dev(리액트 서버와 노드 서버를 한 번에 실행)로 서버를 가동 중일 때 ^C로 서버를 해제하고 난 뒤 다시 npm run dev을 실행했을 때 이미 5000번(노드 서버 주소)가 사용되고 있다는 오류가 뜬다. 해결방법 터미널에서 노드 서버를 아래와 같이 입력하여 꺼주면 된다. pkill node 그리고 다시 npm run dev로 서버를 가동해주면 오류없이 실행된다.

해결방법 '해당라이브러리' is not defined no-undef 오류가 났을 때는 import를 해주면 간단히 해결된다. import Axios from 'axios';

위와 같은 오류가 뜨기 시작. Attempted import error: '@ant-design/icons' does not contain a default export (imported as 'Icon'). 해결방법 기존으로 import 해오던 방식이 아닌 import Icon from '@ant-design/icons'; 로 바꿔준다. 그리고 터미널에서 npm install @ant-design/icons --save-dev 를 입력해서 설치해주면 오류가 사라진다. 간단하쥬?

요즘 공부용으로 진행 중인 리액트 프로젝트를 push한 뒤 갑자기 Dependabot alerts이 메일로 와서 깜짝 놀랐다. We found potential security vulnerabilities in your dependencies. 보안이 취약하므로 package.json이나 yarn.lock의 패키지를 최신 버젼으로 업데이트 해주면 된다. 해결방법은 의외로 간단했다. 해결방법 먼저, 터미널을 열어 하기와 같이 입력한다. 그럼 보안 취약성을 확인해준다. npm audit 그리고 업데이트를 해준다. npm audit fix 가끔 업데이트가 안될때가 있는데 그럴땐 강제로 해주면 처리가 되었다. npm audit fix --force 그리고 깃허브에 변동된 사항을 다시 푸쉬해주면 해결된다. + 만..

01. 2557 / Hello World Hello World!를 출력하시오. 답 print("Hello World!") 02. 10718 / We love kriii ACM-ICPC 인터넷 예선, Regional, 그리고 World Finals까지 이미 2회씩 진출해버린 kriii는 미련을 버리지 못하고 왠지 모르게 올 해에도 파주 World Finals 준비 캠프에 참여했다. 대회를 뜰 줄 모르는 지박령 kriii를 위해서 격려의 문구를 출력해주자. 강한친구 대한육군 강한친구 대한육군 답 print("강한친구 대한육군") print("강한친구 대한육군") 또는 print("강한친구 대한육군\n강한친구 대한육군") 03. 10171 / 고양이 \ /\ ) ( ') ( / ) \(__)| 답 \\는 \로..

client/src index.js import 'react-app-polyfill/ie9'; import 'react-app-polyfill/ie11'; import 'core-js'; import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App'; import * as serviceWorker from './serviceWorker'; import { BrowserRouter } from "react-router-dom"; import Reducer from './_reducers'; import { Provider } from 'react-redux';..

지난 블로깅에서는 state를 저장하고 사용하는 방법만 알아보았고, 이번시간에는 데이터 수정하는 방법에 대해서 알아보도록 하자. reducer 함수 state 데이터의 수정방법을 미리 정의하는 함수이다. state 초기값과 데이터 수정방법을 넣는다. function reducer(state = 초기값, 액션) 1. '수량증가'라는 데이터 수정방법 이름을 작명해서 넣어준다. (액션.type === 수정방법이름) 2. if문 안에 '수량증가'라는 요청이 들어올 경우 else if문에는 '수량감소'라는 요청이 들어올 경우 수정방법 정의. 3. else문 안에는 둘 다 안들어온 경우 기본 state를 결과값으로 가져올 것을 수정방법 정의. index.js let 초기값 = [ {id: 0, name: '멋진신발..

Redux란? Redux라는 라이브러리는 모든 컴포넌트 파일들이 같은 값을 공유할 수 있는 저장공간을 생성가능케 해주고 state 데이터를 관리하는 기능을 가지고 있다. Redux를 쓰는 여러가지 이유 중 하나는 props 전송없이 모든 컴포넌트가 state를 가져다 쓰는 것이 가능하기 때문에 컴포넌트가 매우 깊숙히 있다면 state를 전달하기 위해 props를 수십번 써야하고 귀찮은데 redux를 세팅하면 Context API와 같이 props를 수십번 쓸 필요없이 바로 꺼내쓸 수 있게 해준다. 설치방법 터미널에 yarn add redux react-redux 를 쳐서 2개의 라이브러리를 설치한다. (또는 npm install redux react-redux) 세팅하기 index.js에 를 import..