Enjoy Programming

react에서 컴포넌트에 prop을 보내는 것 까지는 해봤는데 이게 부모 컴포넌트로부터 전달 받은 prop이 내가 예상한 prop인지 확인할 수 있어야 한다. 항상 보이지 않는 에러를 방지하기 위해서는 꼼꼼한 체크가 필수 이다. 이제 체크하는 방법을 알아보자. 이전 포스팅 코드를 그대로 쓰면서 체크해 보겠다. 먼저 list에 객체들에 각각 rating을 추가하자. rating은 모든 것을 평가한다. rating: 5.1 이런식으로 임의의 숫자를 추가한다 그리고 prop-types를 설치해준다. prop-types 라이브러리는 내가 전달 받은 props가 내가 원하는 props인지 확인 해주는 라이브러리이다. 설치가 끝났으면 import PropTypes from "prop-types"; 임포트 해주고 F..

react 에서 component는 HTML을 반환하는 함수이다. 위 react.StrictMode라고 되어있는 태그형태안의 가 컴포넌트의 형태이다. App은 다른 자바스크립트 파일에서 만든 export된 function형태의 html을 반환하는 함수인 것이다. 반드시 HTML처럼 작성해야한다. 이렇게 처럼 자바스크립트와 html사이의 조합을 jsx라고 한다. react에서 나온 매우 custom한 유일한 개념이다. 자 새로운 컴포넌트를 한번 만들어보자. src 폴더에 BlueBerry라는 자바스크립트 파일을 하나 만들고 중요한 건 컴포넌트에는 반드시 react를 import해줘야 리액트가 인식 할 수있다. 안에 블루베리 함수를 하나 만들어 리턴해준다. 그리고 모듈을 export해주면 사용가능한 comp..

자바스크립트로 키보드 드럼만들기를 하던중 data-key속성을 접하게 되었다. 이를 알아보려고 mdn을 뒤지니 아에 data-로 시작하는 속성이 있어서 포스팅한다. HTML5는 특정 요소와 연관되어 있지만 확정된 의미를 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인 되었다. data-*속성은 표준이 아닌 속성이나 추가적인 DOM속성, Node.setUserData()와 같은 다른 조작을 하지 않고도 의미론적인 표준 HTML요소에 추가 정보를 저장할 수 있도록 해준다. 문법은 간단하다. 어느 element에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다. 화면에 안보이게 글이나 추가정보를 element에 담아 놓을 수 있다. 이런식으로 추가정보를 저장한다. 이것을 자바스크립트에서 접..