똑같은 삽질은 2번 하지 말자

개요URL에서는 &나 ?와 같은 특수문자들은 URL의 구조를 정의하는 데 사용되는 문자들로 Query Paramter에 값으로 보내거나 하면 잘못된 URL로 변형되어 지므로 해당 특수문자들을 보내고 싶을 땐 인코딩을 해서 보내야한다. 하지만 인코딩이 안되서 날아온 쿼리 파라미터의 값에서 특수문자가 존재하는 상황일 때 어떻게 특수문자가 섞인 값을 잘 추출해 나갈 것인지를 해결해보자. http://localhost:3000/detail?name=heewon&code=g위와 같은 URL이 있다고 가정하고 여기서 name은 상관없지만 code의 g"을 추출하려면 어떻게 해야할까? 1. window.location.href로 전체 URL을 얻기window.location.href로 URL 전체를 출력해보면 밑과 ..

https://www.ncloud.com/ NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 1. 위의 사이트에서 회원가입하고 2. 결제수단 등록을 해야 API가 쓸 수 있게됨으로 결제수단은 등록하자 (요금이 부가되는 조건을 달성하려면 지도 api경우에는 100만번? 조회 이상부터 유료가 된다고 한다.) 3. 결제수단 등록을 하고 나면 Console창에서 AI NAVER API라는 메뉴를 찾아 Application 등록을 해주면서 Web Dynamic Web 부분을 추가한다. 4. ..

개요 유저가 결제를 하는 프로세스에 들어와 있는 순간 브라우저 백 & 새로고침을 할 때 프론트에서는 어떻게 대응해야 할까? 대응책 1. 브라우저 뒤로가기 이벤트및 새로고침 이벤트를 조작해서 우리 원하는 처리를 해준다. => 이건 아쉽게도 크롬 브라우저 사양상 거의 불가능했다. 크롬에서 브라우저 이동 이벤트(popState, hashChange)에 대한 트리거 발생이 유저쪽에서의 interaction (click같은) 가 없으면 trigger되지 않는다.(javascript로 클릭이벤트 같은걸 발생시켜도 안됨) // 둘다 유저쪽에서의 움직임이 없으면 trigger 안됨 window.onPopState(() => {}) window.onHashUpdate(() => {}) 2. history를 조작한다. =..

좋은 코드란 ? 누구나 이해하기 쉽고, 직관적인 코드들이다. 그런 직관적이 코드들을 구현하기위한 과정을 적어보자 이하의 map, filter, reduce (표준 라이브러리들과 기능들은 같은데 인자로 iterable을 받는다는 점이 틀리다) const map = (f, iter) => { let res = []; for (const a of iter) { res.push(f(a)); } return res; }; const filter = (f, iter) => { let res = []; for (const a of iter) { if (f(a)) res.push(a); } return res; }; const reduce = (f, acc, iter) => { if (!iter) { iter = ac..

제너레이터 이터레이터이자 이터러블을 생성하는 함수 난생처음 보는 함수..이다 function* generator(){ yield 1; yield 2; yield 3; } let iter = gen() log(iter[Symbol.iterator]() == iter) // true => well-formed iterator이다 log(iter.next()) // value: 1 done: false log(iter.next()) // value: 2 done: false log(iter.next()) // value: 3 done: false log(iter.next()) // value: undefined done: true for(const i of iter) console.log(i) // 순회가능 ..

기존과 달라진 ES6에서의 리스트 순회 for i++ -> for of const list = [1, 2, 3]; for (var i = 0; i < list.length; i++) { console.log(list[i]); } const str = 'abc'; for (var i = 0; i < str.length; i++) { console.log(str[i]); } // ES6 + for (const a of list) { console.log(a); } for (const a of str) { console.log(a); } 상당히 간결하게 바뀌었다. 어떻게 리스트를 순회할까 명령적인 방식에서 선언적으로 바뀌었다 그냥 간결하게 바뀌었다는 것, 이상의 의미가 있는데 ES6이 개발자들에게 어떠한 규약..

평가 코드가 계산되어 값을 만드는 것 일급 값으로 다룰 수 있다. 변수에 담을 수 있다. 함수의 인자, 결과로 사용될 수 있다. const a = 10; // 변수가 되며, 값으로 다루어진다. const add10 = a => a + 10; // 함수의 인자로 사용될 수 있다. const r = add10(a); // 함수의 결과로 사용될 수 있다. 일급함수 함수를 값으로 다룰 수 있다. 조합성과 추상화의 도구 const add5 = a => a + 5; // 함수를 값으로 다룰수 있다. log(add5); // a => a + 5; log(add5(5)); // 10 const f1 = () => () => 1; // 함수를 리턴하는 함수 log(f1()); // () => 1; const f2 = f..

개요 Nuxt 의 fetch 훅을 이용해 fetch내에 복수의 비동기처리를 넣어 놓았는데, 제대로 실행이 안되는경우가 발생했다. (fetch 메소드를 비동기화 하기 위해서 Promise를 리턴합니다. ↓ 밑의 공식문서를 읽어보면 fetch 메소드는 자체로 비동기화 처리) API: fetch 메소드 - Nuxt.js fetch 메소드 fetch 메소드는 페이지가 랜더링되기 전에 데이터를 스토어에 넣기위해서 사용합니다. 컴포넌트의 데이터를 세팅하지 않는 점을 빼고는 data 메소드와 비슷합니다. fetch 메소드가 만약 develop365.gitlab.io 하지만 복수의 비동기처리가 필요한 경우? return을 한다해도 하나만 리턴? 그럼 다른 한쪽이 실행안되는 경우가 발생할 수 있으므로 Promise.al..

setTimeout(() => { window.scrollTo({ top:document.querySelector(".-account").offsetTop, left:0, behavior: 'smooth'}); }) document.querySelector(".-account").offsetTop => 해당 노드의 top 좌표를 가져온다 left: 0 -> x좌표는 0 smooth는 smooth하게 setTimeout으로 감싸준 이유는 이 코드가 실행되는 바로 전 단계에 내가 표시하고자 하는 노드가 돔에 삽입되는데, 그 코드가 확실하게 실행된 다음에 실행시키기 위해서 한번 대기 -> 큐 -> 스택으로 실행하고자 setTimeout을 걸었다. 혹시 사파리도 대응해야한다면 이하의 코드를 참조 var fnc_..

encodeURIComponent URI로 데이터를 전달하기 위해서 문자열을 인코딩해서 보내기 위해(한글이나 일본어나 감싸서 보내는게 좋을듯) (데이터 안에 특수문자 & 이나 ? 들어가는경우에서는 URI에서는 쿼리나 파람으로 인식하는걸 방지하기위해 감싸서 보내준다.) 받는 쪽에서는 decodeURIComponent