JNarin Development Story

오늘은 리액트의 핵심이라고 할 수도 있는 리덕스를 정리해보았다. 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..

오늘은 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')..

이 내용은 이미 필자가 많이 알고 있어서 조금 간략하게 정리하고 넘어가려고 한다. 자세한 내용은 다른 블로그를 참고하시길 바라며 추가적으로 또 무언가 알게 될 경우 업데이트를 할 예정이다. 라우터 관리를 좀 더 편리하기 위해 라이브러리를 설치한다. yarn add react-router-dom react-router-dom을 import를 한 후 다음과 같은 코드를 작성한다. // client > src > App.js import React from 'react'; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; import LandingPage from './components/views/LandingPa..

리액트를 사용하면 경로는 일반적으로 상대 경로를 사용하게 된다. 상대 경로의 최대의 단점은 코드 길이가 길어질 뿐만 아니라, 코드 경로가 헷갈리는 경우가 많이 발생하여 쓸데없는 시간소비가 있을 수 있다. 그렇기 때문에 절대 경로도 꽤 편리한 기능이어서 그 사용방법에 대해 적어보려고 한다. 먼저, 원하는 위치에 absolute-path라는 앱을 설치한다. (여기서 앱이름은 본인이 원하는 이름으로 하여도 큰 문제는 없다. 단, 대문자는 안된다.) yarn create react-app absolute-path 추가적으로 원하는 폴더가 현재 위치일 경우(즉, absolute-path폴더가 있고 터미널로 현재 그 위치일 경우)에는 다음과 같은 명령어로 입력을 한다. TMI yarn create react-app..

오늘은 스터디 하다가 알게 된 한 라이브러리에 대한 내용을 적으려 한다. 1. classNames란? 다중 className을 편하게 관리하기 위한 라이브러리이다. 2. 사용방법 import React from 'react'; import classNames from 'classnames/bind'; import styles from './CSSModule.module.css'; const cx = classNames.bind(styles); // 미리 styles에서 클래스를 받아 오도록 설정하고 const CSSModule = () => { return ( 안녕하세요, 저는 CSS Module! ); }; export default CSSModule;

라이브러리(library) 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다. 비휘발성 메모리(non-volatile memory, non-volatile storage, NVM, NVRAM) 전원이 공급되지 않아도 저장된 정보를 계속 유지하는 컴퓨터 메모리이다. 처음에 접한 react UI library는 Material-UI로 학원 동기생들은 전부 이 라이브러리를 통해 디자인을 진행하였다. Material-UI 리액트 기반 UI 라이브러리 중에서 가장 인기 있는 라이브러리다. 주변에서 가장 많이 사용되고 있었기에 이 라이브러리를 선택하기도 하였다. 여기서 직접 해보고 느낀 장점은 역시 자바스크립트, 타입 스크립트 지원인 거 같다. 장점 - 간격, 정렬, 구조 등 다양하게 확인..

데이터를 임시로 뿌려주면서 화면에 팝업창 형식으로 한번 더 보여주는 기능이 있다. 근데 문제점은 같은 데이터만 화면으로 보이는 문제가 발생하였다. 결론부터 말하자면 일단 해결은 되었다. 하지만 왜인지는 모르겠다. 수정전 코드 import React, {useState} from "react"; import { MainLayout, SliderStyle, ButtonStyle, HrCenter, DivisionLine } from "./Main.style"; import "antd/dist/antd.css"; import { Row, Carousel, Col, Modal } from "antd"; import { SearchOutlined } from "@ant-design/icons"; import ma..