개발자의 정보/JS & framework13 axios.js 배열 파라미터 전송시 [] 빼고 보내기 문제 제기 axios.get 을 통해 배열을 파라미터로 전송하면 아래와 같은 형태로 전송되게 된다. url?key[]=value1&key[]=value2 스프링 controller를 사용하는 경우 이런 경우 `@RequestParam("key[]")` 와 같은 형태로 지정을 해 주어야 데이터를 정상적으로 받을 수 있다. 하지만 매번 이렇게 선언하기는 불편하다. 그렇다면 Axios 에서 파라미터를 key[]=value 형태가 아닌 key=value와 같은 형태로 보낼 수는 없을 까? url?key=value1&key=value2 해결 방법 axios 에서는 옵션에 paramsSerializer function을 등록해 사용할 수 있다. 우선 1회용 사용방법은 아래와 같다. jquery, 와 같은 라이브러리.. 2020. 9. 23. Javascript 에서 Object를 해시맵처럼 사용하지 마세요 Map은 우리가 가장 많이 사용하는 key&value 형태의 데이터 구조중 하나입니다. 그리고 javascript를 사용할 때 좀더 편리하게 사용하기 위해서 다음과 같은 코드를 사용하고는 합니다. const map = {}; // insert key-value-pair map['key1'] = 'value1'; map['key2'] = 'value2'; map['key3'] = 'value3'; // check if map contians key if (map['key1']) { console.log('Map contains key1'); } // get value with specific key console.log(map['key1']); 하지만 자바스크립트에는 이미 이러한 목적을 가진 map 데이터.. 2020. 4. 25. 에러 해결법: directories in the root is deprecated, please specify in the build 왜 이런 오류를 만나게 되는가 electron-builder를 이용한 프로젝트 제작시 가끔 만나게 되는 문제들이 좀 있다. 그것은 버전과도 관련된 문제인데 나처럼 생각없이 업데이트 하는 것을 좋아하는 사람들은 그런 경우가 더욱 많을 것으로 생각된다. "directories" in the root is deprecated, please specify in the "build" 이 문구의 내용은 directories는 더이상 package.json의 최상위에서 사용할 수 없으니 build 안에 정의하라는 내용이다. 이런 문구를 만났다면 아마 당신도 나와 같이 아무런 생각없이 업데이트를 하는 사람일 확률이 높다. 혹은 다른사람이 만든 프로젝트를 활용하려고 했는데 버전이 달랐을 수도 있겠다. 이번에 내가 만난 .. 2020. 4. 14. Expected a conditional expression and instead saw an assignment (no-cond-assign) javascript 사용중 위와 같은 메시지를 보게 된다면 그것은 조건식이 들어가야 할 자리에 대입식을 사용했다는 이야기이다. 예를 들어 아래와 같은 코드가 있다고 해 보자. while(match = regex.exec(a.search)) { if(param != match[1]) { str.push(match[1] + (match[2] ? '=' + match[2] : '')); } } 이 코드는 정규식의 매치되는 부분을 찾아 반복실행하게 하는 코드이다. 하지만 `while` 구문이나 `if` 구문의 경우 `a = something` 이라는 코드를 사용하면 안된다고 하는 이야기 이다. 하지만 이와 같은 코드는 예전부터 많이 사용되어 오는 코드 이기 때문에 많이 발견할 수 있는 코드이다. 이것을 고쳐서 .. 2020. 4. 12. vue-moment 적용 및 사용 방법 VueMoment는 VueJS 프레임 워크에서 사용하는 날짜 시간과 관련된 라이브러리다. 본래 moment라는 라이브러리가 있고 이를 Vue에서 사용하기 쉽도록 수정 배포된 버전이고 이를 이용하면 날짜와 시간을 매우 편리하게 사용할 수 있기 때문에 많은 이용자들이 있다. 이제부터 Vue 에서 이를 사용하기 위한 매우 쉬운 방법을 이야기 해 보려고 한다. vue-moment를 설치한다. $ npm install vue-moment 그리고 require를 사용한다면 이렇게 쉽게 적용할 수가 있다. Vue.use(require('vue-moment')); require를 사용하지 않는다면 이렇게 적용하자. import VueMoment from 'vue-moment' Vue.use(VueMoment); vue.. 2020. 2. 16. Path mapping (routing) - Vue Router Router는 웹 페이지에서 자신이 원하는 어떤 지점에 페이지를 바꿔치기 하는 기능입니다. 예를 들자면, 웹 페이지의 상단 네비게이션 바는 그대로인 상태로 네비게이션 바 아래 있는 콘텐츠 영역만 사용자의 행동에 따라 변화 하는 기능 입니다. VueJS를 사용중이라면 router.js 모듈에 관해 관심이 생길 것입니다. nuxt.js를 사용하는 분도 계시겠지만 VueJS에서 추천하고 있기도 하고 기본 공식 라우터가 Router로 되어 있기 때문에 더더욱 그러하죠. 저도 VueJS를 이용할 때는 router.js를 함께 이용합니다. Vue router 가 가진 기능 중첩된 라우트/뷰 매핑 모듈화된, 컴포넌트 기반의 라우터 설정 라우터 파라미터, 쿼리, 와일드카드 Vue.js의 트랜지션 시스템을 이용한 트랜지.. 2020. 2. 1. 이전 1 2 3 다음
