JNarin Development Story

이전에 조금 어렵게 느껴졌던 React hook를 좀 더 쉽게 설명이 된 자료가 있어서 참고하여 작성을 해보았다. class Components function Components class component의 경우 라이프사이클을 사용을 할 수 있어 성능적인 면은 좋으나, 속도가 느려진다. 반대로 function component의 경우 라이프사이클의 성능은 못쓰지만, 속도는 빠르고 간결한 코드작성이 용이하다. 이를 업그레이드 하기 위해 hook이 탄생하게 된 것이다. React 16.8이 업그레이드 된 후 Hook이 탄생하게 되었다. class Components function Components 여기서 constructor = useState, componentDidMount = useEffect라..

오늘은 리액트의 핵심이라고 할 수도 있는 리덕스를 정리해보았다. 1. 라이브러리 설치 yarn add redux react-redux redux-promise redux-thunk 여러 개를 한 번에 설치하고 싶을 때는 스페이스로 구분을 하여 명령어를 한 번에 할 수 있다. 여기서 redux-promise, redux-thunk는 redux를 오류를 최소화하기 위해 추가적으로 설치하는 middleware다. 2. 리덕스와 어플리케이션을 감싸줄 provider 개선하기 // client > src > index.js // 생략 import {Provider} from 'react-redux'; import 'antd/dist/antd.css'; import { applyMiddleware, createSt..

오늘은 서버와 클라이언트를 매번 두 번 다 실행을 하기 위해서는 매번 실행을 각각 해야 하는데 그 방법을 한 번에 할 수 있는 방법을 알아보려고 한다. 1. concurrently 설치하기 yarn add concurrently 2. package.json명령어 추가하기 { // 생략 "scripts": { "start": "node index.js", "backend": "nodemon index.js", "test": "echo \"Error: no test specified\" && exit 1", "dev": "concurrently \"npm run start\" \"cd ../client && npm run start\"" }, // 생략 } 여기서 주목해야 하는 부분은 dev다. "dev":..

오늘은 axios에 대한 공부를 진행해보았다. 1. axios 설치하기 axios는 벡앤드와 프론트앤드 통신을 쉽게 하기 위한 비동기 통신 라이브러리다. axios를 설치하는 명령어는 다음과 같다. npm install axios --save yarn add axios 2. axios 사용해보기 axios를 한번 사용해는데 방법은 다음과 같다. // client > src > components > views > LandgingPage > LAndingPage.js import React, { useEffect } from 'react'; import axios from 'axios'; function LandingPage() { useEffect(() => { axios.get('/api/hello')..