Dog foot print

React로 Calendar App 만들기 – 2. 헤더 만들기 헤더에 나타나는 표시사항으로는 현재 표시하고 있는 달, 오늘 날짜, 월 이동 입니다. 위의 모든 내용들은 App component에서 관리되고 Header component로 props로 전달할 겁니다. 앞서 말했듯이 이 프로젝트는 Date객체가 아닌 외부 라이브러리인 moment.js를 사용해서 더욱 빠르게 project를 향상 시키는 방법을 사용하도록 할겁니다. Moment.js의 설명은 git의 moment.js 페이지를 참조 해주시기 바랍니다. Yarn add moment 명령어를 통하여 해당 프로젝트 폴더에 moment 라이브러리를 설치하도록 합니다. 이후 app.js에서 moment를 import하고 header component..

React로 Calendar app만들기 기본 세팅 Yarn create react-app calendar로 적당한 위치에 react-project를 만든다. 기본 세팅을 위해서 필요 없는 것들을 src폴더에서 삭제하고 App.js를 Calendar.js 로 변경 한다. Calendar는 Class형 컴포넌트로 변경하고 테스트를 위해 Hello Calendar를 입력한다. import React, { Component } from 'react' export default class Calendar extends Component { render() { return ( Hello Calendar ) } } export default Calendar; index.js도 아직 붙어 있는 service work..

React를 이용한 Calendar Application 만들기 서문 생각 보다 바닐라 JS를 이용한 calendar 만들기가 인기 있어 REACT를 활용한 Calendar app을 만들기를 구상하게 되었습니다. 올 해 2020년 생각지도 못한 국가근로 및 코로나 사태로 많은 스트레스를 받아 포스팅을 중지 했었습니다. 그렇지만 Jasmin 회원들과 무럭 무럭 커가는 대한민국의 프로그래머 꿈나무에게 좀 더 도움이 되고자, 다시 포스팅을 시작 하도록 마음 먹었습니다. 개요 해당 Calendar Application은 사용자에게 달력을 제공 해줌으로써, 주말과 공휴일 그리고 현재 날짜를 구분하고 이번 달의 끝과 시작을 구분 할 수 있도록한다. 사용하는 lib Moment Moment는 날짜와 시간에 관련된 라..

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모듈에서 오류를 일으켰고, 스택오버플로우에 해당 오류를 검색하게 되니, 대부분의 사용자가 겪는 ..

컴포넌트의 LIFE 3단계 컴포넌트의 생애를 크게 3단계로 구분짓자면 Mount,Update, Unmount로 나눌 수 있다. Mount는 컴포넌트가 처음 연결이 될 때 한번 일어난다. Update는 컴포넌트가 마운트되고 모델에 변화가 생겨 컴포넌트가 뷰를 다시 렌더하는 경우이다. 마지막 Unmount는 컴포넌트가 해제되어 더 이상 뷰를 보여주지 않게 될때 일어난다. Life-Cycle method 리액트에서는 위의 3단계를 더욱 잘개 쪼개어 생태주기 함수라는 것들을 만들어 컴포넌트에서 state와 props를 효과적으로 관리할 수 있고 각 단계에서 API를 호출하는 등 다양한 일을 할 수 있다. Constructor(props) 생성자는 컴포넌트가 최초 마운트 될 때 만나는 생태주기 함수로 컴포넌트의 ..

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

React-router가 v4,v5로 업데이트되면서 기존 react-router-redux 에서 connected-react-router로 변경되었다. Connected React Router란 리덕스에서 주소를 변경 및 확인하기 위해 history객체를 관리하며 필요에 의해 꺼내쓸 수 있는 유용한 라이브러리이다. 깃헙 readme를 읽어 보니 기능은 다음과 같다. 단방향 흐름을 통해 리덕스에서 router상태를 동기화 할 수 있다. (history객체 -> store-> router-> component) react Router 버전 v4, v5를 지원한다. 함수형 컴포넌트를 지원한다. redux-thunk나 redux-saga를 통해 히스토리 객체를 디스패치할 수 있다. immutable.js를 지원..