여씨의 개발이야기

yyyymmdd 포맷으로 오늘날짜 구하는 방법은 아래와 같다. getCurrentDate(){ var date = new Date(); var year = date.getFullYear().toString(); var month = date.getMonth() + 1; month = month

// async & await // clear style of using promise :) // 1. async async function fetchUser() { // syntactic sugar : promise 대신 async 한 단어만 넣으면 promise 기능 완! // do network reqeust in 10 secs.... return 'jisun'; } const user = fetchUser(); user.then(console.log); console.log(user); // 2. await ✨ function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function getApple() ..

Promise is a JavaScript object for asynchronous operation. - State: pending -> fulfilled or rejected - operation이 수행중일때 pending 상태 - operation 성공시 fulfilled / 실패시 rejected - Producer vs Consumer // 1. Producer // Promise는 클래스기 때문에 new로 생성 // 성공시 resolve(), 실패시 reject() // when new Promise is created, the executor runs automatically. // promise는 생성하는 순간, executor에 의해 자동으로 돌아가게 되어있음 const promise ..

요즘 회사에서 Vue.js 기반으로 한 웹 솔루션을 제작중인데 아무래도 Vue에서 권장하는 HTTP 통신 라이브러리가 axios여서 그런 지 솔루션에서도 axios를 이용해 api 통신을 하고 있다. 그러다 오늘 문득, Ajax와 Fetch, axios 이 세가지 통신 라이브러리에 대한 개념 정리가 필요하다는 생각이 들었다. 먼저 XMLHttpRequest(XHR)로 기반으로 제작된 Ajax에 대해 알아보자. 1. Ajax ajax란? Asynchronous javascript and xml의 줄임말로 직역하자면 비동기식 자바스크립트와 xml을 말한다. 자바스크립트를 이용한 비동기 통신으로, 클라이언트와 서버 사이에서 xml형태의 데이터를 주고받는 통신방법을 의미한다. jQuery에서 제공하는 $.aja..

프로그래밍을 하면서 내가 제일 싫어하는 부분 또 또 나왔다... 일상에서도 시간 계산을 못 해서 그런 지(?) 개발을 할 때도 동기, 비동기 순서 이런 거 나오면 딱 질색이거등요... 그래도 엘리쌤 JS 강의 덕에 이전에 배웠던 동기와 비동기에 대해 복기하며 이해를 조금씩 하고 있었는데, async와 await 강의를 듣는 순간부터 멍때리는 시간이 많아졌다. promise? 그래 너. promise라는 클래스 너 이놈, asynchronous operation(: 비동기 연산자) 이라는 건 잘 알겠어... 안에서 이루어지는 작업이 성공 할 경우에 resolve, 실패할 경우에는 reject를 반환한다는 것도 okok,, 잘 알겠어. 대충 후속 처리 메서드(promise.then(...).catch(.....

요즘 여러 사이트를 보면 현재 페이지의 링크를 복사하는 버튼이 기본적으로 있는 편이다. 필자도 웹사이트를 만들면서 링크를 복사를 해야하는 상황이 생겨 어떻게 복사를 해야 할 지 고민을 해보게 되었다. textarea를 임시로 추가해 링크를 복사 및 붙여넣기를 한 뒤에 다시 body에서 삭제하는 방법을 알아내었다. 아래의 소스참고하도록 한다. const linkCopy = () => { var url = ''; var textarea = document.createElement("textarea"); document.body.appendChild(textarea); url = window.document.location.href; textarea.value = url; textarea.select(); d..

🥉 초보자 레벨로 이해하기 1-1. 정의 함수에 파라미터로 들어가는 함수. 순차적으로 실행하고 싶을 때 씀. 1-2. 예시 아래 소스에서는 addEventListener의 argument자리에 function(){...}이라는 anonymous function이 들어간 것을 볼 수 있다. 이러한 함수를 콜백함수라고 한다. 당연히 EventListener를 Add한 객체를 클릭했을 때 function(){...} 함수가 실행된다. document...addEventListener('click', function(){ // 버튼 클릭 시 이 부분에 들어가는 내용이 실행됨 }) 1-3. 특징 - 다른 곳에서 만든 함수도 콜백함수로 넣을 수 있음 - 콜백함수에 함수명을 아무렇게나 작명할 수도 있다.(무조건 an..