일상을 디자인하는 개발자

대시보드 관련 작업하여 유용항 템플릿 7가지를 소개 하고자 한다 . 1. ariframe React https://github.com/0wczar/airframe-react GitHub - 0wczar/airframe-react: Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webko Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webkom.co/react/airframe - GitHub - 0wczar/airframe-react: Free Open Source High ..

회사에서 일을 하다가 에너지 관련된 업무를 주된 업무로 하다보니 차트를 사용해야 하는 경우가 많았다. 운 좋게 차트관련 라이브러리를 사용할 기회가 생겼고 이번 기회를 통해 사용해보고 정리를 해보았다. 1 ) React-chartjs-2 https://www.npmjs.com/package/react-chartjs-2 react-chartjs-2 React components for Chart.js. Latest version: 4.0.1, last published: a month ago. Start using react-chartjs-2 in your project by running `npm i react-chartjs-2`. There are 603 other projects in the npm r..

1_ node. js 란? node.js는 간단히 말하면 자바스크립트를 실행 할 수 있는 환경이다. node.js를 사용하여 운영체제, 웹브라우저 밖등 환경만 갖추어져 있다면 JS로 코드 작성 및 실행을 가능하게 해준다. 즉 운영체제에서 내 파일을 읽고 수정이 가능하며 저장하는 일이 가능하게 도와주는 프레임 워크라고 할 수 있다. 2._ npm이란? node.js를 설치하다보면 딸려오는게 있는데 npm이 같이 설치 되어진다. npm의 경우 패키지 매니저라 불린다. 우리가 프로젝트를 하다보면 외부 라이브러리가 필요한 경우 소스코드를 다운받아서 사용해야 하는 경우가 많은데 npm의 경우 일일이 찾아 import해서 사용하는 번거로움을 없애 주었으며 project build를 하면 pakage.json의 형태..

▶ Redux란? 리덕스는 프로젝트시 자주 그리고 가장 많이 사용하는 상태 관리 라이브러리입니다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리 시켜 효율적 관리가 가능합니다. ▶ Redux 왜 쓰지? 리덕스는 기본적으로 전역 상태를 관리하는데 있어서 매우 효율적으로 사용이 가능합니다. 근데 꼭 리덕스가 정답이자 유일한 해결책이라고 말할 수 없습니다. Context API를 통해서도 충분히 같은 작업을 진행 할 수 있기 때문이죠 단순 전역 상태 관리라면 Context API를 사용한것도 괜찮습니다. 다만 프로젝트의 규모가 커질 경우 Redux를 좀 더 추천하는 편이라고 합니다. 장점으로는 -> 1. 코드 유지관리 및 보수성에 도움이 됩니다. 2. 아주 좋은 개발자 도구 지원하며..

1. context Api란 ?? ▶ 기본적으로 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용하게 사용되는 기술이다. (ex. 환경설정, 로그인정보, 테마) 또한 자주 사용되어 지는 리덕스 styled-components, 리액트 라우터등 은 contextApi로 기반 되어 구현되어 있음을 알 수 있다 2. context API 전역상태에 대한 이해 기본적으로 reactsms 컴포넌트 간에 데이터를 props로 전달 한다. 보통 필요한 데이터가 있을 경우 최상의 컴포넌트 위의 사례의 경우 App에 state를 넣거나 수정해서 관리를 해야한다. 예를 들면 G 컴포넌트는 전역상태 업데이트 시킨다 가정 했을 때 APP 컴포넌트에서 정의를 해야 APP -> A -> B-> E -> G와 같은 복잡..

▶ async와 await이란? Prosmise를 쉽고 효율적으로 사용 가능하게 만들어 주는 ES8의 문법이다. async 함수에는 await식이 포함될 수 있고, 이 식은 async 함수의 실행을 일시 중지하고 전달 된 Promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환하는 구조입니다. ▶사용 방법. 이 문법을 사용하려면 함수의 앞부분에 async를 쓰고 , 해당 함수 내부에 Promise 앞부분에 await 키워드를 사용하면 된다. 작성을 하면 Promise가 끝날 때 까지 기다리고 결과값을 변수에 담을 수 있다. ▶ 예시 function increase(number) { const promise = new Promise((success, fail) => { ..

★ Promise란? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이며, 특히 앞서 언급한 콜백 지옥 같은 코드가 형성되지 않게 하는 방법으로 많이 사용 되어 지고 있습니다. ▶ 예제 function increase(number) { const promise = new Promise((success, fail) => { //success는 성공 fail은 실패 setTimeout(() => { const add1 = number + 5; if (add1 > 30) { // 30보다 높으면 에러 발생 const error = new Error("30을 초과했습니다."); return fail(error); } success(add1); // number값에 +5 성공 처리 }, 2000); }); r..

★ 콜백함수란 무엇일까? 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다. 특히 자바스크립트에서는 비동기 작업을 할때 가장 흔히 사용 되는 방법중 하나로 콜백함수를 사용한다. 예시를 통해서 콜백함수가 무엇인지 살펴 보자 ▶ 파라미터 값 number가 주어지고 거기에 +5를 더해서 add1 반환하는 함수를 만들어 보았다. 해당 함수가 처리된 직후 어떤 작업을 하고 싶으면 이와같이 콜백 함수를 활용해서 작업을 진행하면 된다. import React from "react"; function increase(number, callback) { setTimeout(() => { const add1 = number + 5; if (callback) { callback(add1);..

instanceOf(MyClass): 특정 클래스의 인스턴스 (ex instanceOf(Myclass) oneOf(['Male', 'Female']): 주어진 배열 요소 중 값 하나 oneOfType([React.PropTypes.string, React.PropTypes.number]): 주어진 배열 안의 종류 중 하나 arrayOf(React.PropTypes.number): 주어진 종류의 구성된 배열 objectOf(React.PropTypes.number): 주어진 종류의 값을 가진 객체 shape({name: React.PropTypes.string, age: React.PropTypes.number}): 주어진 스키마를 가진 객체 등 array: 배열 bool: 참/거짓 func: 함수 num..

propTypes이 지정하지 않았을 경우 오류가 발생합니다. 저는 isRequired를 활용하여 예시를 들어 볼까 합니다. PropsTypes 할때 뒤에 isRequired 붙이면 됩니다. 예시를 통해 확인해 보겠습니다. ProjectNumber를 필수 props로 지정 하고 App.js에 projectNumber를 설정하지 않고 console창을 확인해 보겠습니다 오류내용을 확인해보면 ProjectNumber 필수로 지정한 props 값이 undefined 되었다고 표기 되어 집니다 오류를 해결 하기 위해서 App.js에서 Mycomponent를 불러온 값에 ProjectNumber={1}을 넣고 결과값을 확인해 보겠습니다. 경고가 사라지고 옳바르게 메세지가 출력된것이 보이시죠? 마지막으로 PropTy..