혼자 적어보는 노트

부모요소와 자식요소가 각각의 클릭이벤트를 가지고 있을 때 자식요소 클릭시에 부모 요소의 해당 이벤트가 실행된다. e.target 과 e.currentTarget을 이용한 방법 function parantClick(e) { if (e.target !== e.currentTarget) return; console.log("부모클릭"); } function childClick(e) { console.log("자식클릭"); } parent.addEventListener("click", parantClick); child.addEventListener("click", childClick); if (e.target !== e.currentTarget) return; 위의 코드처럼 진행 시 자식요소 클릭 시 부모요소..

http-server / live-server node.js가 아닌 상태에서 간단하게 웹을 테스트 할수 있는 두가지의 패키지이다 http-server npm install --global http-server 글로벌로 다운을 받는다 http-server 설치 후 실행창에 위와 같이 입력만 하면 바로 실행된다. https://www.npmjs.com/package/http-server live-server npm install live-server live-server은 수정시에 자동으로 반영이 된다. 말그대로 라이브로 확인이 가능하다. live-server 이것도 http-server과 같이 설치 후 위와같은 간단한 입력으로 실행할 수 있다. 개인적으로 live-server이 좀 더 나은 것 같다. 여러..

자바스크립트의 데이터 타입에는 기본형(원시형)과 참조형이 있다. 기본형: 숫자(number), 문자(string), 불린(boolean), 심볼(symbol), bigint, null, undefind 참조형: 객체(object), 배열(array), 함수(function), 날짜(date), 정규표현식(RegExp) 불변값 기본형의 값은 불변의 값이다. var a = 10; 위의 코드에서의 변수는 변할 수 있는 수(값)인 10을 의미하며 식별자는 데이터를 식별하는데 사용되는 이름, 즉 변수명인 a를 칭한다. 변수에 값을 할당할 때 단순하게 값을 할당한다고 생각할 수 있겠지만 변수와 데이터는 각각 다른 공간에 저장이 된다. [변수 영역]에서 빈 공간을 확보하고 그 공간에 식별자 (a)를 지정한 후 [데이..

장바구니 기능 작업을 하면서 체크박스를 이용해 상품을 체크하고 체크한 상품의 데이터를 담는 코드를 짜야 했다. 체크박스를 구현하기 위해 필요한 것은 무엇일까? 1. 체크가 되어있는 input이 무엇인지 알아야 한다. ( 체크가 된 input클릭 시 체크 해제 / 체크 해제가 된 input 클릭 시 체크) 2. 체크가 될 경우 해당 데이터를 checkedItems라는 state에 추가 / 반대 시 해당 데이터 제거 input의 checked속성 위와 같이 checkbox input은 cheched속성을 가지고 있으며 true와 false로 조작이 가능하다. 일단 체크된 item의 데이터를 추가하는 함수를 만들어보자 Cart.js의 일부 const [checkedItems, setCheckedItems] =..

onChange를 이용하여 입력한 value를 state에 저장하여 그 내용을 출력하는 코드를 작성하는 중 숫자만 입력받게 해야했다. const handleKeyDown = (event) => { if (!Number(event.key) || !event.key == "Backspace") { event.preventDefault(); } }; onKeyDown을 사용하여 위의 코드랑 비슷한 식으로 작성했는데 이상하게 한글의 자음, 모음은 입력되는 현상이 발생했다. 함수실행은 분명히 keyDown먼저 되는데 말이다.. input type을 number로 해보는 등등 여러가지를 해보고 keyCode나 key전부 해봤는데 또 어쩌다 한글입력이 안되다가도 또 다음날 같은코드에 실행을 시켜보면 한글입력이 된다던..

link to로 페이지를 이동하니 이전의 스크롤 위치 그대로 유지되어 이동되는 이슈가 생긴다. 클래스 컴포넌트로 만드는 방법도 있었지만 hooks를 이용하여 처리하는 방법이 더 편한 것 같아서 정리해 놓는다. [ScrollToTop.js] import { useEffect } from 'react'; import { withRouter } from 'react-router-dom'; function ScrollToTop({ history }) { useEffect(() => { const unlisten = history.listen(() => { window.scrollTo(0, 0); }); return () => { unlisten(); } }, []); return (null); } export ..

줄 간격과 행을 정렬시켜주는 편한 기능 Prettier 설치까지 완료했는데 적용이 안된다면? VSC의 setting으로 들어가서 설정을 확인해보자 setting 단축키는 ctrl+, or cmd+, Format On Save Search settings창에서 format on save를 검색하여 체크 Default Formatter Search settings창에서 default formatter를 검색해서 기본 formatter을 설정할 수 있다. 해당 란이 None 혹은 null로 설정되어 있다면 설치한 formatter으로 변경을 해준다.

CSS를 이용하여 비율에 맞게 이미지를 조정해 본 적이 있을 것이다. 보통 background-image로 받아서 size를 조정하거나 자체 이미지를 수정했었던 기억이 있는데 CSS3 object-fit 속성을 이용하여 좀 더 편하게 수정을 할 수 있다는 것을 알게되었다. 이미지 뿐만 아니라 각각의 다양한 크기를 가진 object들(, , , 등)을 비율에 맞게 재 설정하는데에 유용하다. *IE에서는 지원이 되지 않음 object-fit의 사용 img{ width: 200px; height: 200px; object-fit: fill; } object-fit: none; object의 원본사이즈로 가운데 정렬을 해준다. object-fit: fill; 지정된 너비와 높이에 따라 이미지가 확대,축소 되어 ..