취미부자의 취미 버리기

export vs export default export와 export default 모두 공통적으로 한 파일에 있는 변수, 함수를 다른 파일에서 가져다 쓰기 위해 "내보내기"를 해 준다. export 한 파일에서 여러번 사용해서 여러 개를 내보낼 수 있다. export const todo = '할일'; export const finished = '끝'; export function TodoList () { return todo; }; export default 한 파일에서 한 번만 사용하고 한 개만 내보낼 수 있다. export default function TodoList () { return todo; } export const todo = '할일'; export const finished = '끝..

호환성 vs 최신 자바스크립트 기능 Javascript로 코딩 할 때, 전적으로 호환성 고려해야 할까, 최신식 멋드러진 기능을 사용해야 할까? 이런 고민에 대한 가이드라인 1. 주요 브라우저에서 동작하는가 주요 브라우저는 MS Edge, Chrome, Firefox, Safari 2. 모든 모바일 브라우저에서 동작하는가 모바일 사파리, 크롬, 파이어폭스, 웹뷰 안드로이드, 삼성 인터넷 3. 주요 기능에 사용되는가 혹은 그저 있으면 좋은 정도의 기능인가 주요 기능이면 호환성을, 후자인 경우는 최신 기능으로 코딩 4. polyfills로 지원되는가 새 기능 혹은 API가 이 전 기능보다 훨씬 더 두드러지는 이점을 제공하지만 호환성에 문제가 있고, polyfills가 이 문제를 해결해 준다면 브라우저가 완벽히..

map()과 filter()의 공통점 1. foreach와 동일한 콜백함수 문법을 사용하고 반복한다. - 첫 번째 매게변수는 배열의 각각 아이템이고 두 번째 매게변수는 index 번호다. - 배열의 각 아이템으로 반복문을 실행한다. 2. 새로운 배열을 return 한다. - 콜백함수에서 return 하는 값으로 새로운 배열을 만들어낸다. map()과 filter()의 차이점 1. filter는 조건으로 새로운 배열을 반환한다. - return 뒤에 조건문만 올 수 있다. 2. 조건문으로 만들어진 배열 값이 다르다. - return 뒤에는 조건문을 넣고, true인 경우에 새로운 배열에 값이 들어가고 false는 버린다. - filter는 해당 값이, map은 boolean 값이 새로운 배열에 들어간다. ..

캡쳐링(Capturing) 부모에서 자식들에게 내림으로 이벤트가 퍼지는 것을 캡쳐링이라고 한다. 비유적으로 예를 들자면, 과자가 4겹으로 봉지에 쌓여있다고 치자. (과자봉지 = 이벤트) 제일 안쪽의 봉지를 까기 위해서, 밖에서 부터 봉지를 까야하듯이 나는 제일 안쪽 요소(증손자 요소)를 눌렀지만 부모 이벤트 실행, 자식 이벤트 실행, 손자 이벤트 실행, 증손자 이벤트 실행 이렇게 차례로 이벤트가 실행되어 내려간다. 자식 이벤트를 클릭한다면, 부모 이벤트 실행, 자식 이벤트 실행 끝 이런 식으로 이벤트 실행이 퍼져나간다. 버블링(Bubbling) 자식에서 부모들에게 올림으로 이벤트가 퍼지는 것을 버블링이라고 한다. 이벤트가 퍼지는 방향이 캡쳐링과 반대로 퍼진다. 증손자 손자 자식 부모 캡쳐링 혹은 버블링 ..

input radio 체크 기능 스크립트 구현하기 상황 input radio 디자인이 안 예뻐서 디자인을 수정하고 싶다. 디자인 구연하고 싶은 스타일 기본 세팅 HTML 사과 바나나 멜론 1. radio는 체크가 1개만 가능한 체크박스로, 체크가 1개만 됐는지 인식하기 위해서 'name'에 동일한 값을 주어서 그룹을 만들어 준다. (예시. 'fruits'라는 'name'을 갖은 그룹 중 1개) 2. input의 id는 label의 for 값과 일치해야 label과 input이 연결되고, label을 클릭하면 해당 input 에 전달이 된다. 3. label에 디자인을 위한 모든 HTML구조를 넣는다. *** input에 checked라는 속성을 넣으면 체크 박스가 체크된 상태 CSS li { width:..

객체 간의 상속 객체가 다른 객체 코드 가져오기(상속) class의 상속/확장 같지만 객체끼리 이루어지고 좀 더 작은 범위에서 행해지는 느낌이다. 객체상속 코드 2가지 알아보기 1. __proto__ : 표준이 아니지만 널리 사용되고 있어서 표준 같은 코드 var obj1 = { obj1Val : '1 val' } // __proto__ var obj2 = {}; obj2.__proto__ = obj1; console.log(obj2.obj1Val); // 결과. 1 val obj1과 obj2가 객체인 상태에서 가능하다. 2. Object.create() : 표준 코드. __proto__를 대체하기 위해 나온 코드 var obj1 = { obj1Val : '1 val' } // Object.create(..