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

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

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

오늘의 ES 마지막 포스팅이다. 화이팅! https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled Promise.allSettled() - JavaScript | MDN Promise.allSettled() 메소드는 배열이나 별도의 나열 가능한 객체를 통해 나열된 Promise모음이 모두 이행하거나 거부했을 때에 대한 대응을 할 수 있는 Promise 객체를 반환한다. developer.mozilla.org promise.allSettled() 메서드는 배열이나 별도의 나열 가능한 객체를 통해 나열된 Promise모음이 모두 이행하거나 거부했을 때에 대한 대응할 수 있는 Promise객체를..

padStart 와 padEnd에 대해 알아보자. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart String.prototype.padStart() - JavaScript | MDN padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다. developer.mozilla.org padStart()메소드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다. 채워넣기는 대상 문자열의 시작부터 적용된다. padEnd()는 반대로 생각..