코드메모장

흔히 Redux 와 Vuex 에서 사용하는 디자인패턴이다. 등장배경 MVC (Model, View, Controller) 패턴의 단점을 보완하고 대규모 애플리케이션에서 데이터 흐름을 일관성 있게 관리함으로써 프로그램의 예측가능성을 높이기위함 구조 Action 사용자 측에서 Action의 Type 과 새로운 데이터 payload 를 묶어서 dispatcher 에 전달하는 역할 Dispatcher 데이터들의 중앙허브 라고 할 수있다. Dispatcher는 들어오는 Action 객체 정보를 받아 실제로 어떤 행동을 할지 결정하는 곳이다. React Hook 중 useReducer 로 간단하게 dispatcher 를 사용할 수 있다. Store Store는 애플리케이션의 모든 상태와 관련 로직을 가지고 있다. ..

javascript 를 공부하다가 문득 드는 생각이 있었다. addEventListener 와 onclick 이다. 비교대상을 onclick 으로해서 click 이벤트만 해당되는 궁금증은 아니다. 나는 인라인 형식으로 onclick 을 자주 사용해 왔다. 드림코딩 엘리님의 강의를 보다보니 onclick 은 사용하지않고 addEventListener 만 사용하시길래 궁금증이 생겼다. 그리하여 찾아본 스택오버플로우.. https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick addEventListener vs onclick What's the difference between addEventListener and onclick? var ..

VUE 프로젝트 진행중 build 후 배포하고 나서 잘 동작되는걸 확인했다. 그런데. 이후 또 배포를 하게되면 다른페이지로 클릭을해도 안넘어가고 콘솔로그에는 위와같은 청크에러가 난다.. (새로고침하면 잘 동작한다) 명확한 이유는 모르겠으나 build 할때 이전배포와 다른이름으로 js 파일들이 번들링 되다보니 신규 배포후에 남아있는 세션은 이전 배포버전 js를 호출하다 보니 나는 에러인것같다. 그리하여 열심히 구글링을 하여서 나온 결론. 청크 에러가 날때 라우터를 통해서 페이지 새로고침을 시켜주는것이다. router.onError(error =>{ if (/loading chunk \d* failed./i.test(error.message) && navigator.onLine) { window.locati..

배포를 위한 빌드시 수정한 js 파일이 캐시가 남아 변경이 안되는 경우가 발생하였다. (이러한 경우를 cache busting 이라고한다 맞나?) 구글링을 해본결과 다양한 방법중 webPack 을 이용한 js 버저닝 하는 방법이 있었다. vue.config.js 에서 아래와 같이 설정해주면 된다 module.exports = { configureWebpack: config => { if ( process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development' ) { config.output.filename = 'js/[name].[hash].js'; config.output.chunkFilename = 'js/[name].[hash..

VUE 2 를 이용해서 다중 파일 업로드 기능을 구현하려고 한다. 먼저 만들려는 UI 는 이렇다 파일찾기 버튼을 클릭시 다중으로 파일 리스트를 테이블 안에 뿌려줄 예정이다. 먼저 파일찾기 버튼부터 구현해보자 label 태그와 input 태그를 연결시키고 label 태그에 버튼모양 클래스를 주었다 input 태그의 type 은 file 로 지정하고 multiple 속성을 주었다. on-change 로 파일을 선택해서 input 의 value 가 변화될때마다 호출할 handleFileChange 이란 function 을 만들어주었다 선택된 파일들의 정보를 e 라는 변수에 담아와서 상위 data 안에 fileData 라는 변수안에 넣어준다. 넣어준 데이터를 뿌려주면...! 기가막히게 잘 나오는것을 볼수있다....

개발서적 리팩토링 개정판 (2판) 을 읽다보니 반복문 안에 조건문을 넣어 반복문을 작성할때 filter 와 map 을 사용해서 파이프라인 연산으로 바꿔서 반복문을 작성 하면 좋다고 한다. names 라는 배열 안에 특정한 조건을 거친 값만 넣는다고 한다면 기존 반복문 + 조건문은 이러한식으로 names 에 push 했었다면.. filter 와 map 으로 names 에 값을 넣는 방법을 사용하도록하자 확실히 가시성이 좋아진것같다 .. 끝.. Tip ) 각 반복문들의 성능 을 알고싶다면 https://daesuni.github.io/Loop-performance/

1. Shorthand property names 기존의 객체를 변수로 정의할때 key 와 value 형식으로 정의하던것을 key name 과 value name 이 같을시엔 위와같이 하나의 이름으로 축약가능하다 2. Destructuring assignment 객체안의 프로퍼티 값을 변수로 각각 지정해야할때 각각 변수로 지정해서 사용하던 기존 문법을 es6 에선 하나의 중괄호로 묶어서 객체자체를 넣는것처럼 보이는 방식으로 객체안의 프로퍼티값을 할당할수 있다.. 단 객체안의 key 값과 변수값이 동일할때는 동일한 이름으로, 만약 다른이름으로 사용하고 싶다면 맨 마지막 줄처럼 : 를 이용해서 사용하면된다..Good.. ( 객체 뿐만 아니라 배열도 마찬가지로 가능하다 ) 3. Spread Syntax 스프레..