일상을 디자인하는 개발자

회사에서 일을 하다가 에너지 관련된 업무를 주된 업무로 하다보니 차트를 사용해야 하는 경우가 많았다. 운 좋게 차트관련 라이브러리를 사용할 기회가 생겼고 이번 기회를 통해 사용해보고 정리를 해보았다. 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의 형태..

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

JSX 내부의 자바 스크립트 표현에서는 if문 사용이 불가능합니다. 조건에 따라서 내용을 렌더링 해야할 경우 JSX밖에서 if문을 사용하여 사전에 값을 설정하거나 , {} 안에 조건부 연산자를 사용하면 됩니다. 캡처된 화면과 같이 소스코드를 작성할 경우 name 값이 == '리액트' ? true : false 가 작동 하게 설정이 되어있습니다. 위의 예시의 경우 const name 으로 선언된 name 값이 = 'd' 이므로 false에 해당되며 아래 캡처와 같은 결과문이 출력이 되어야 할 것입니다. 만약 name 값이 = '리액트' 일 경우 데이터가 일치 하므로 true값을 반환하고 이는. '리액트 입니다'라는 결과로 출력되어 질 것입니다.

React를 공부하기 전에 정보들을 찾아보니 ES6문법을 알아야 React를 사용하기에 수월하다는 글을 보았다. React는 ES6 피처를 사용해 만들어졌기 때문에 ES6를 학습하면 React 코드를 잘 이해할 수 있다고 한다. 간략하게 공부하고 있는 기초 문법에 대해 이야기 해보고자 한다. For in vs for of 차이점. 위에 예시를 보자. for in을 썼을 경우 . var obj = { a: 1, b: 2, c: 3 }; for (var item in obj) { console.log(item) // a, b, c } //위에 사진의 경우 abc가 출력이됨. 반면 for of를 사용했을 경우 var obj = { a: 1, b: 2, c: 3 }; for (var item of obj) { ..