Dog foot print

React Day Scheduler 소개 react-day-scheduler는 제 첫번째 배포 리액트 모듈이며 화면상의 컴포넌트 영역에 드래그 하는 것으로 새로운 이벤트를 생성, 프롭스로 전달한 배열의 스케쥴을 자동으로 높이,위치, 크기를 지정하는 리액트 프론트 전용 모듈입니다. 설치 npm : npm install react-day-scheuduler yarn : yarn add react-day-scheduler 사용 방법 import DaySchedulerContainer from 'react-day-scheduler/dist' Props 설정 schedules : 이 프롭스는 화면상에 배치될 이벤트의 모음입니다. 전달하는 형태는 배열이며, 배열 속 이벤트를 표현하는 객체는 4가지의 기본 프로퍼티를..

서문 현재 프로젝트를 진행 하면서 에디터는 사용하기 편한 퀼에디터를 사용하기로 했다. 모듈이 계속 관리가 잘되며, 사용하기 쉽게 다양한 기능을 퀼에디터에서 제공하며, 무엇보다 사용자가 많아 소통하기 쉬운 것이 최고의 장점이다. 그러다 에디터를 이용하여 내부에서 이미지 크기를 제어 할 수 있는 quill-image-resize 모듈을 알게 되었고, 스택오버플로우에서 추천한 방법으로 설치와 실행을 진행하였는데, TypeError: Cannot read property 'imports' of undefined 메세지를 만나게 되었다. 바벨이 알아서 imports구문을 변경해줄 것 일줄 알았는데, 이상하게 resize모듈에서 오류를 일으켰고, 스택오버플로우에 해당 오류를 검색하게 되니, 대부분의 사용자가 겪는 ..

redux라는 것을 알기 전 FLUX패턴과 FLUX패턴이 왜 필요한지에 대하여 알 필요가 있다. UNIDIRECTION-DATA-FLOW 영어로 하니 무섭지만 한국어로 번역하면 단방향 데이터 흐름이다. 리액트는 각각의 컴포넌트가 state를 가지고 있고 상위컴포넌트가 하위 컴포넌트에 데이터를 전달해줄때 props 개념을 사용해서 전달한다. 그런데 다음과 같은 구조가 있다고 가정을 해보자 ArticleList컴포넌트 하위에 있는 comment에 글을 작성하고 추가하려면 현재 접속해있는 user의 정보가 필요하다 그러나 정보가 보관되어 있는 userStatus 컴포넌트는 comment와 다른 edge에 해당하고 있어 user정보를 현재 주지 못하고 있다. 그래서 comment컴포넌트와 userStatus를 ..

state 와 props란 ? 리액트는 모든 뷰의 단위가 컴포넌트라고 하였다. 각 컴포넌트는 상위 컴포넌트에서 하위 컴포넌트를 import 하여 연결 되어 있는 구조인데 import 되어 있는 하위컴포넌트에게 상위컴포넌트가 값을 전달 하여 하위컴포넌트에서 사용 할 수 있다. 이것이 바로 props이다. 그리고 각 컴포넌트는 스스로 state라는 값을 가질 수 있는데 이는 개별적인 컴포넌트에서 각기 다르게 상태를 가질 수 있다. state란 ? state는 각 컴포넌트가 가지고 있는 개별적인 상태값이다. 클래스형 컴포넌트를 작성할때는 해당 클래스 내부 맨 위쪽에 작성하는 것이 일반적이며 state는 객체이다. import React, { Component } from 'react' export defaul..

리액트에서 컴포넌트는 뷰의 단위이다. 우리가 리액트로 모든 것은 컴포넌트로 이루어져있으며 필요에 의해서 이 컴포넌트를 화면에서 제거 혹은 연결 하여 페이지를 구성한다. 컴포넌트는 함수형 컴포넌트 , 클래스형 컴포넌트를 가지는데 react-hook 이라는 라이브러리가 나오기전까지 함수형 컴포넌트는 스스로 상태를 가지지 못하여 잘 사용되지 못했지만 최근 함수형 프로그램의 우수성과 react-hook의 등장으로 인하여 많이 사용되고 있다. 해당 포스팅에서는 클래스형 컴포넌트와 함수형 컴포넌트의 작성 형태를 설명하고 컴포넌트의 life-cycle 같은 내용들은 추후 따로 포스팅 할 예정이다. 클래스형 컴포넌트 클래스형 컴포넌트는 React.component 를 상속받아서 사용하여야 한다. component 프로..

C-R-A 란 create-react-app node module 의 약자로 리액트 프로젝트를 쉽게 만들 수 있게 필요한 모듈혹은 설정을 포함하는 보일러 플레이트이다.( C-R-A 가 없다면 우리는 바벨, eslint, 웹팩등을 직접 하나하나 설치하고 해당 파일을 일일히 설정 해주어야 할 것이다. ) 또한 C-R-A 는 페이스북에서 직접 관리하고 있으니 꾸준히 업데이트되는 장점도 있다. C-R-A의 설치 먼저 노드가 global로 설치가 되지 않았다면 노드를 먼저 설치한다. https://nodejs.org/en/ 다음 본인의 node 패키지 환경에 따라 터미널에 다음과 같이 작성 한다. npm을 사용하는 경우 npm install -g create-react-app yarn을 사용하는 경우 yarn a..

나는 리액트를 접할때 유명한 리액트 블로거인 벨로퍼트님의 책을 보면서 create-react-app 을 사용해서 손 쉽게 리액트 개발환경을 구축하는 것을 먼저 배웠다. 리액트 책을 볼 때 웹팩에 대해서 일정부분 설명이 있었으나 곧 이어 sass와 css_module을 사용을 하며 나에게는 웹팩은 sass와 css_module을 사용할때 만 건들고 더 이상은 건들지 않아도 되겠다는 개념으로 자리잡게 되었다. 그러나 오늘 채용공고에서 웹팩과 바벨의 이해가 있는 사람을 우대하는 것을 보고 집에가는 길에 웹팩에 관한 글을 읽게 되었다. 내용은 결국 여러 모듈화된 파일들을 하나의 번들파일로 만들어 이를 배포하게 해주는 것이였는데 중요한점은 "javascript외 다른 지원 파일들을 import 했을 때 사용하는 ..