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..

오늘은 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;

생각보다 자주 쓰이지만 또 금방 잊어버리는 paseInt에 대하여 이야기를 해보려고 한다. parseInt() 정의 문자열을 정수로 바꾸는 함수 parseInt() 문법 parseInt(string, radix); string - 분석할 값입니다. - 어떤 값을 입력해도 양의 정수, 음의 정수로만 표현이 됩니다. - 0x로 시작하면 16진법으로 처리합니다. - 문자열의 선행 공백은 무시합니다. - 첫 글자가 숫자로 변하지 않는 값일 경우, NaN으로 반환합니다. radix(진수) - 2~36까지 입력을 할 수 있습니다. - 공백일 경우 기본적으로 10진법으로 표현, 그러나 모든 브라우저가 되지 않을 수 있으니 명시하는 것이 가장 좋습니다. parseInt() 예제 parseInt에 대한 예제를 적도록 합..

오랜만에 코딩 테스트를 해보았다. 확실한 건 이전에 아무것도 모를 때 하는 시점보단, 기본기를 하고 난 후 많이 달라졌다. 일단 무엇을 해야할지 안다. 하지만 아직까진 검색능력이 많이 떨어져서 조금 찾는데 오래 걸렸다. 1. 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 한다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로..