Enjoy Programming

노마드 코더 react hook 강의를 듣고 배포하는 것을 해봤는데 뭔가 헷갈렸다;; 다행히 잘 해결되어서 과정을 조금 적어본다. 먼저 useTabs이라는 섹션 선택시 해당 섹션의 내용을 보여주는 hook을 하나 배포해본다. 먼저 readme 파일을 간단하게 정리하고 ~ (이건 배포자가 알아서 작성하면 될 듯 .. 사용법이라던지 주요기능이라던지 설명을 적으면 좋겠다) 가장 헷갈렸던 부분인 index.js 파일의 존재... 이것부터 정리하고 순서를 적어본다. index.js 를 먼저 인식하기 때문에 이걸 이용해서 배포를 하는 걸로 생각은 들었는데.. useTabs에 만들어놓은 function을 index.js에 임포트해서 배포를 했더니;; 안된다.. 뒤에서 다루겠지만.. 이게 npm init을 해주고 pa..

이번은 타입스크립트로 react 이벤트 관리에 대해 간단하게 다뤄보겠다~ 기존 코드에 input 관련 코드 작성, 두가지 랜더링할 컴포넌트를 작성해주는데 Input 과 Form이다. 두개 다 interface로 props의 type을 결정해주고 각각의 컴포넌트가 React.FunctionComponent임을 명시해준다. 그리고 작성한 interface를 전달해준다. 음 심도있게 더 공부해야겠지만 받아들이자 ㅎㅎ;; 일단 props에서 전달받은 onChange함수와 onFormSubmit함수의 타입을 void로 선언하는데 역시 event: React.~~~~ 를 작성해서 event타입도 확인해줘야 한다. 이제 부모컴포넌트로 가보면 부모컴포넌트에서 Input과 Form을 import하고 rendering해주..

드디어 다음 포스팅을 한다..;; 이번 포스팅은 저번에 typescript를 사용한 react의 state에 대해 알아봤다면. 이번에는 props를 전달해보자. 이전에 부모컴포넌트에서 바로 카운터state를 prop으로 전달하고 Number 컴포넌트에서 전달받아 이를 출력하는 코드를 짜보면 먼저 오른쪽이 기존 부모컴포넌트이다. 자식 function 컴포넌트를 import해주고 count이름으로 counter props를 전달해준다. 이를 받은 자식 Number컴포넌트는 count를 랜더링 해주는데 이때 역시 interface로 props의 타입을 정해준다. prop-types에서 정해주는것처럼 그리고서 Number: React.FunctionComponent 로 명명해서 이 컴포넌트가 react의 fu..

자바스크립트로 클래스네임을 추가하고 싶을때는 필자는 보통 element.className = "name";을 통해 클래스 명을 삭제후 새로 설정하거나 element.className += "name", element.classList.add("name") 을 통해 추가를 해줄 수 있다. 해당 클래스 명이 있으면 삭제를 하고 없다면 추가를 해주는 메서드가 있는데 바로 toggle이다. 한가지 좋은거 알았다.~~

https://codesandbox.io/s/day-five-blueprint-forked-mfsgd

이번에는 css variable을 select해서 자바스크립트 이벤트로 변화를 줘보는 스타일을 구현해본다. 먼저 백그라운드 사이즈와 블러 그리고 컬러를 변화를 줄 수 있도록 세개의 input을 만들어서 값을 설정해주고 각각의 네임을 지정해준다. 그리고 dataset을 이용할 수 있도록 data-sizing을 지정해준다. 그리고 css variable을 만들어서 내가 적용할 부분에 각각 적용해 준다. 이제 자바스크립트로 셀렉트해서 변경만 해주면 되는데 queryselectorAll을 이용해 input을 모두 select해주고. forEach를 이용해서 이벤트 리스너를 적용해주는데 inputs는 array가 아니라서 map이 적용이 안된다. proto type을 보면 nodelist로 나온다. 뭐 sprea..