취미부자의 취미 버리기

Redux의 combineReducers() 여러 파일에 나눠서 작성한 리듀서즈(reducers)를 합치는 역할을 한다. export const ADD_TODO = 'ADD_TODO'; export const COMPLETE_TODO = 'COMPLETE_TODO'; export function addTodo (text) { return { type : ADD_TODO, // action에 type이 필요한 이유는, // type에 따라 Reducer에서 상태를 어떻게 변경할지, 어떤 작업을 처리할지 판단하기 위함 text, }; } // export와 export default의 차이점? export function completeTodo (index) { return { type: COMPLETE_T..

스프레드 연산자 (...) 문법 배열(array), 객체(object) 혹은 반복가능한 데이터 가진 변수인 경우 사용할 수 있다. 데이터 내부의 여러 값들을 각각 분리해서 리턴한다. (예시) See the Pen spread operator by mimi-miyeon (@mimi-miyeon) on CodePen. 함수의 인수로도 사용 가능 함수에서 매개변수(parameter)의 인자(argument)로도 사용이 가능하다. 이런 경우 마지막 매개변수로 선언해 주어야 한다. See the Pen Untitled by mimi-miyeon (@mimi-miyeon) on CodePen.

호환성 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" 코드를 ..