미미 공부/취미방

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

Redux 1. Redux는 전역 데이터를 효과적인 관리를 위한 라이브러리. 2. drilling, bubbling 없이 'store'라는 공간과 통신해서 state를 변경, 전달 한다. 3. '액션(Action)'* 정의 > 액션을 받아서 결과를 만드는 '리듀서(Reducer)'** > 리듀서를 합쳐서 'store' 만들기 (*리듀서를 합친다는 개념이 잘 이해되지 않음) *액션(Action)은, 객체(Object)형태로 type이라는 key를 필수로 가지고 있어야 한다. type은 문자열이다. 액션 객체는 함수로 만든다. 해당 함수는 스토어(Store)에 전달해 상태 변경 용도로 사용된다. function 액션생성자명 (...args) {return 액션}; **리듀서(Reducer)는, 액션을 받아서..

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

이중 모달 Modal(nested modal) Bootstrap Modal을 사용하는데, 공식 사이트에서도 UX 측면으로 좋다고 판단하지 않아서 모달 내부에 모달(Nested Modal)이 동작되는 기능은 지원은 하고 있지 않다. 그래도 내부 모달을 사용해야 하는 경우가 있다... 문제점 두 번째 모달(모달B)을 끄면 첫 번째 모달(모달A)은 켜져 있지만 스크롤이 되고 모달A가 중앙에 정렬되지 않는다. 문제1) body에서 'modal-open' 클래스가 사라진다. 문제2) body에서 'padding-right: 17px'이 사라진다. 해결방법 1 모달B가 열릴 때, 모달A를 닫는 방법 그러기 위해서, 모달B를 켜는 버튼에 data-dismiss="modal" aria-label="Close" 코드를 ..

캡쳐링(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:..