말은 쉽지, 코드를 보여줘!

정리하면 어떠한 비동기 함수의 후처리에서 이전 함수의 데이터가 필요한 상황이라면 인자로 해당 데이터 또는 미리정의된 함수를 받을 수 밖에 없다. 그런데 후처리는 호출한 쪽의 책임이기 때문에 미리정의된 함수를 전달하는 것이 적절하고 이렇게 인자로 전달받는 후처리함수를 콜백함수라 한다. 그런데 콜백함수로 후처리를 정의하다보면 여러 비동기함수를 연결해서 사용할 경우 행의 길이가 길어지는 것은 불가피하다. 예를 들어 jquery ajax 를 비동기로 호출하는 함수가 5개가 있고 이를 연결해서 사용해야 하는 상황을 가정해보면 될 것 같다. 이를 개선하기 위해 promise 의 jquery 버전인 Deferred 가 사용된다. 후처리를 호출한 쪽에 정의하는 구조로 콜백함수가 필요없다. 호출한 쪽에서 후처리를 하기 ..

가로로 슬라이딩 되는 화면을 만들고 싶을 때 사용하면 된다. 자동으로 슬라이딩되게 하거나 수동으로 슬라이딩 되게 만들 수 있다. 구현 방법은 아래와 같다. 자동 슬라이드 말고 수동으로 슬라이드 하고 싶다면 autoplay 옵션 자체를 주지 않으면 된다. Slide 1 Slide 2 Slide 3 위 코드를 .html 파일로 만들어서 브라우저로 실행하면 Slide1, Slide2, Slide3 이 2초에 한번씩 자동으로 슬라이드 되는 것을 확인할 수 있다. 한가지 주의할 점은 new Swiper('.swiper-container' ... 와 같이 실제 슬라이드 설정할 때 타겟에 해당하는 .swiper-container 가 반드시 display:block 상태여야 한다. 난 이것 때문에 반나절을 허비함.. ..

객체리터럴 선언시 만약에 key 이름으로 선언된 값이 존재하다면 value 를 생략해도 자동으로 매칭시켜준다. let name = "이름"; let languages = "언어"; let value = "벨류"; const extracted = { name, languages, value } //이 코드는 다음 코드와 같다. const extracted = { name: "이름", languages: "언어", value: "벨류" }

const {done, children, onToggle, onRemove} = this.props; //이는 아래와 같다. const done = this.props.done; const children = this.props.children; const onToggle = this.props.onToggle; const onRemove = this.props.onRemove; //아래와 같이 하면 키값을 변환해서 가져올 수 있다. const {done: convertName} = this.props; console.log(convertName); // == this.props.done

객체는 뭐고 객체는 뭐고 인스턴스는 뭔가? 그리고 클래스는 또 뭘까? 흔히들 클래스를 객체화한다거나 클래스를 인스턴스화 한다는 표현을 사용한다. 클래스는 말그대로 프로그래밍상 정의되어 있는 데이터와 메소드의 집합을 의미한다. 해당 코드 자체가 클래스가 된다. 이것을 사용하기 위해서는 객체화 또는 인스턴스화 작업이 필요하다. 자바도 그렇고 자바스크립트도 그렇고 new 지시어를 통한 작업이 바로 그것이다. 여기에서 객체란 인스턴스화를 위해 리턴된 값을 의미하고 인스턴스란 이를 통해 생성된 결과물을 의미한다. 아래 코드를 보자. function Test(){ this.name = '인스턴스'; return { name: '객체', getInstance: () => { console.log(this.name);..

나는 백엔드 개발자다. 최근에는 프론트엔드에도 많은 관심을 가지고 학습을 이어가고 있지만 정작 자바스크립트에 흥미를 느꼈던 시기에는 SI업체에 있었기 때문에 주어진 백엔드 작업을 쳐내는 것도 바빴고 게임에도 빠져 있어서 출퇴근 길에 구글링으로 지적호기심을 채우는 것이 고작이었다. 그때가 약 5년 전 이었던 것 같은데 Node가 등장하고 지금의 라인플러스에서 자바스크립트 고급 개발자를 공격적으로 모집하던 시기였던 것 같다. 자바스크립트의 발전을 넋놓고 지켜볼 수 밖에 없었다. 아무튼 지금에 와서 리액트를 학습하며 자바스크립트를 다시 들여다보게 되었고 과거 완전히 이해하지 못하고 넘어갔던 클로저에 대해 확실히 정리를 해두려 한다. 클로저가 대체 뭘까? 자바스크립트의 특정 함수를 가리키는 건가? 아니면 특정 ..

script 태그에 src 자원이 존재할때만 지정할 수 있는 옵션으로 아래와 같이 정의할 수 있다. 모두 페이지 렌더링을 막지 않으면서 스크립트 코드를 다운로드 하는 점은 동일한데 아래와 같은 차이가 있다. defer를 지정할 경우 다운로드는 백그라운드에서 독립적으로 수행되지만 스크립트 실행은 페이지 구성이 끝난 뒤에 수행된다. defer 이 지정된 script 태그가 여러개일 경우 다운로드는 각각 수행되지만 실행은 페이지 구성이 끝나고 문서에 추가한 순서대로 진행된다. async 를 지정할 경우 해당 스크립트는 다운로드와 실행 모두 독립적으로 수행된다. async 가 지정된 script 태그가 여러개일 경우에도 각각 독립적으로 수행된다. 다만 스크립트 실행 중에는 페이지 렌더링이 멈춘다. 아래와 같은 ..

콜백함수는 비동기 작업에서 많이 사용되는데 결과에 따라 추가 작업을 해야 하는데 시간이 오래 걸리는 A라는 함수를 호출해야 할 경우 작업이 끝나면 호출할 B함수를 인자에 할당해서 비동기 호출을 해놓고 결과를 기다리지 않고 다른 일을 한다. 그럼 A함수는 작업이 끝나면 인자로 받은 B함수를 실행해서 작업이 끝났음을 알린다. ​ 여기에서 B함수가 바로 콜백함수이다. call back 은 "전화를 해왔던 사람에게 다시 전화하다" 라는 뜻인데 위 상황만 보면 콜백함수의 "콜백"도 이대로 해석해도 무리는 없다. 하지만 실제로 콜백함수는 위와 같이 단순히 작업이 끝났음을 알리기 보다 작업결과를 이용해서 추가작업을 수행하기 때문에 콜에프터(call after) 함수라고도 불린다. ​ 어쨌든 너무 복잡하게 생각하지 말..

특정 js 파일의 클래스나 함수를 다른 곳에서 import 받아서 사용하려면 기본적으로 가장 하단에 export 처리가 되어 있어야 한다. export는 아래와 같이 하면 된다. export default counter; export const increase = () => ({type: INCREASE); ./counter.js 파일을 import 받는다고 가정하면 아래와 같이 하면 된다. 보면 알겠지만 export default 로 내보낸 것들은 그냥 명시하면 되지만 export 로 내보낸 것들은 {}로 묶어줘야 한다. import counter, { increase } from './counter'; 만약 import 받으려는 파일명이 index.js 이고 modules 디렉토리 하위에 있다면 아래..

기존방식 //함수선언식 function func(arg) { ... } //함수표현식 const func = function(arg) { ... } ES6 화살표 함수 const func = (arg) => { ... } 기존의 함수표현식과 비슷한 형태로 사용되지만 this의 기준이 다르기 때문에 화살표함수가 완전히 기존 방식을 대체할 순 없다. 기존 함수에서의 this는 자신이 종속된 객체를 가리키고 화살표함수의 this는 자신이 종속된 인스턴스를 가리킨다. 클래스, 객체, 인스턴스 대한 구분은 아래를 참고하자. findmypiece.tistory.com/35 클래스, 객체, 인스턴스 객체는 뭐고 객체는 뭐고 인스턴스는 뭔가? 그리고 클래스는 또 뭘까? 흔히들 클래스를 객체화한다거나 클래스를 인스턴스화..