Dog foot print

엄청난양의 보일러 플레이트 코드. redux는 flux-pattern을 이용한 전역 상태관리 라이브러리이다. [React, 라이브러리] react-redux . redux를 사용하기 위해서는 action , reducer, store 의 관리를 위해 반복적인 코드 작성이 필요하다. 새로운 액션을 추가할때 마다, 액션 타입을 정의하고, 액션 생성자 함수를 만들어야 하며, 리듀서에서 해당 액션을 처리해야한다. 아래는 간단한 카운터를 구현한 “리듀서”이다. // Actions const INCREASE = "INCREASE"; const DECREASE = "DECREASE"; const UPDATE = "UPDATE"; const genAction = (action: string, f?: (arg?: T1)..

Memoization이란 ? useCallback, useMemo, React.memo 와 같은 기능에서 사용되는 memo 라는 개념은 파라메터를 기준으로 이전에 리턴한 해당 함수의 결과값을 리턴하는 개념이다. 순수함수는 파라메터가 동일할 때, 리턴값은 언제나 같다”라는 특징이 있다. 이런 특징을 이용해 연산이 오래걸리는 함수가 이전에 동일한 파라메터로 연산한 결과가 있다면 이전 리턴값을 줌으로써 연산에 필요한 시간을 단축할 수 있게 된다. 아래는 버튼을 클릭 할 때 마다 input값을 숫자로 변경해 O(2^n) 의 시간 복잡도를 가지는 fivo 함수의 결과가 출력되는 코드이다. function fivo(n : number) : number{ console.log("FivoStart") function ..

기본 폴더 구조 및 파일 구조 Note : /src/Components/Header.jsx , /src/Utils/Math.ts, /src/style/main.css , /src/Utils/index.ts , /src/UI/Button.tsx 를 제외한 파일들은 이전 포스팅에서 내용을 확인해주세요 Note : 이 포스팅은 webpack-dev-server 사용 할 수 있도록 webpack.config.js와 의존성이 일부 설치되어 있습니다. 이전 포스팅에서 내용을 확인해주세요. 폴더 구조 . ├── babel.config.js ├── dist │ ├── bundle.js │ └── index.html ├── package.json ├── public │ └── index.html ├── src │ ├──..

CRA의 문제점 Tip : Jest는 테스팅 도구이다. Tip : Parcel, Webpack, Rollup은 여러 파일들을 필요한 소수의 파일로만 다시 묶어주는 번들러이다. Tip : Babel은 브라우저에서 지원하지 않는 최신문법이나 JSX문법을 브라우저가 읽을 수 있도록 변환해주는 트랜스파일러이다. Tip : 이 시점에서 위 3개의 Tip을 이해하지 않아도 된다. CRA로 시작하기 : 설치 - React 설치 - React A JavaScript library for building user interfaces reactjs-kr.firebaseapp.com Create React App(이하 CRA)는 공식 홈페이지에서도 React를 시작 할 때, 추천하는 개발 환경에 필요한 라이브러리를 설치해주..

서론 App의 컴포넌트 트리가 혹시 길어지는 것을 경험 해본 적이 있는가 ? 짧은 토이 프로젝트의 경우 컴포넌트 노드의 레벨이 3정도 될 것이다. 이런 경우 root component에서 최 하위 컴포넌트 노드에게 정보를 전달 해주기 위해, props를 각 레벨의 컴포넌트 노드에게 전달 해준 경험이 존재 할 것이다. 그렇게 어려운 일도 아니고, props를 각 컴포넌트에게 전달 하면 장땡이다 ! 이처럼 짧은 거리의 컴포넌트에게는 props로 데이터를 전달해주는 것은 충분하다. 그러나 트리의 높이가 4이상을 넘어가게 되면, props로 상위 컴포넌트의데이터를 전달해주는 것은 매우 힘들다 . 불가능하다는 이야기가 아니다. 코드가 지저분해지고, 이를 하위 프롭스로 전달하는 과정에서, 개발자의 실수로 유지하지 ..

서론 : 나는 React를 학원에서 처음 배울 당시 클래스 형 컴포넌트를 이용하여, web app을 작성하였다.그 당시에도 Hook이 존재는 하였지만, CRA에서는 Hook을 지원하기 전이였고, 함수형 컴포넌트는 아직 보완할 점이 많아 React 사용자들에게는 뜨거운 감자 같은 것 이었다. 시간이 흘러 CRA에서 Hook을 공식지원하게 될 때, 나 또한 Hook에 발을 담가 보았지만, class형으로 만든 내 코드는 여전히 잘 동작 하였기에 나의 주목을 끌지 못하였다. 2020년 하반기 많은 것들이 변화하였다. Class형으로 작성한 내 코드는 규모가 커질 수록 관리하기 매우 어려웠으며, 빌드 속도가 증가하는 등 많은 이슈가 내 앞으로 다가왔다. 또한 Typescript 공부 할 수록, 함수형 컴포넌트와..

서론 이번 주 목요일 드디어 계명대학교에서 마지막 시험을 치뤘다. 후련한 마음이 앞서며 나를 괴롭혔던 많은 비효율적인 학교 행정과 수업에서 벗어난다 생각하니 춤이라도 추고 싶은 심정이다. 대학교 수업과 개발 일을 병행하면서 지내다 보니 너무 자기계발에 소홀했다는 생각도 들고, 개발 도중에 웹소켓이라는 놈의 정체에 대해서 늦게 알기도 해서 웹소켓을 응용하여, 병원 홈페이지나 중고차 사이트에서 사용하는 1:N 채팅을 만들어 볼까 싶어 기획하였다. 1 : N 채팅은 고객은 사이트 관리자와만 채팅이 가능하지만, 사이트 관리자는 대화를 시도한 모든 사용자들과 소통이 가능하다. 여기에 조금 덧 붙여 기존 1:N 채팅 프로그램은 종료시에 더 이상의 소통이 불가능 하지만, 이 프로그램은 종료하여도 다시 접속 할 수 있..

React로 만드는 calendar app만들기 Calendar 날짜 표현하기 금일 만들어 볼 것은 calendar에 날짜를 표시하는 부분입니다. 날짜를 표시하고 최초 마운트 시 오늘에 해당하는 날짜가 검게 표현되어야 합니다. 또한 토요일과 일요일은 평일과 다르게 색상을 표현해야 합니다. 마지막으로 이번 달이 아닌 날이 달력에 표시되게 되면 흰색으로 표현되게 끔 해야합니다. Issue 발생 ! 평소 달력은 이렇게 5주가 보통 정상적이지만 달에 따라서는 6주인 경우가 존재하고 2월의 경우 4주가 존재하는 경우가 있습니다. 달력이 만약 5주에서 6주 그리고 4주로 계속해서 레이아웃이 변경 되는 경우 사용자가 불편함을 느낄 가능성이 매우 높습니다. 그렇기에 우리는 5주를 기본 주로 두고, 6주인 경우 23일과..