Programming Language 검색 결과

해당 글 113건

바닐라 JS로 Carousel Slider 만들기

Carousel(캐러셀)의 본 의미는 회전목마, 수화물 컨베이어 벨트를 말한다. 무슨 슬라이더를 의미하는지 감이 올 것이다. 캐러셀 슬라이더를 구현하는 jQuery가 존재하지만 (Slick을 추천) 아주 가벼운 웹을 만들거나 간단한 웹을 만든다면 바닐라 JS로 구현해보는 것도 나쁘지 않을 것이다. 🧷 기본 HTML/CSS/JS 기본 아이디어는, 해당 리스트 중에서 보이고 싶은 리스트에 showing 클래스를 줘서 z-index로 튀어나오게 만드는 것이다. 일정 시간이 지나거나 버튼을 누르면 기존 showing 클래스를 지우고 다른 곳에 showing 클래스를 생성하는 방식으로 이동한다. 1 2 3 4 5 🧷 React + Slick 다음 게시물에 slick pakage를 이용하여 슬라이더를 구현하는 방법..
Programming Language/🟨 Javascript 2020. 4. 18. 03:53

콜백 함수와 비동기제어

⚡ 콜백함수 콜백 함수는 다른 코드의 인자로 넘겨주는 함수입니다. 콜백 함수를 넘겨받은 코드는 적절한 시점에 콜백 함수를 실행합니다. 굳이 콜백 함수라고 말해서 어렵게 느껴질 수도 있지만 그냥 특정한 시점이나 이벤트에 반응해서 실행하는 함수를 말합니다. 콜백이라고 이름 붙인 이유는 callback 즉, 특정 이벤트나 시점에 자신을 불러달라고 하는 데에서 왔습니다. 그러니까 어렵게 생각하지 맙시다. 콜백 함수는 그냥 함수입니다. setTimeout(() => console.log("test"), 3000)) el.addEventListener("click", () => setCount(count + 1)) 콜백 함수가 중요한 이유는 위와 같이 setTimeout, setInterval과 같이 대놓고 콜백 ..
Programming Language/🟨 Javascript (Core) 2020. 4. 17. 22:02

this(2) : 명시적으로 this를 바인딩하기

앞서 살펴본 this의 규칙을 깨고 this에 다른 대상을 바인딩할 수도 있습니다. call, apply, bind 메서드를 주로 사용하지만, 이러한 메서드를 사용하기보다 (가능하다면) 화살표 함수를 이용하는 것이 더 깔끔합니다. 일단 무엇이 있는지만 알아두도록 합시다. 요새 화살표 함수가 일반 함수를 대체할 수 없다는 것을 통감하고 있습니다. 때에 따라 적절한 방식의 함수를 사용합시다. ㅜㅜ * 함수에 call, apply, bind와 같은 메서드를 정의한 적이 없음에도 사용할 수 있는 이유는 이 메서드들이 prototype에 정의된 메서드들이기 때문입니다. 프로토타입에 대해서는 이후에 다루도록 하겠습니다. call 메서드 call 메서드는 호출하는 함수의 첫 인자를 this로 바인딩합니다. 이후의 인..
Programming Language/🟨 Javascript (Core) 2020. 4. 15. 20:37

this(1) : this에 대한 모든 것

다른 언어를 사용하다 자바스크립트로 넘어온 개발자는 this를 혼동하기 쉽습니다. this는 항상 메서드가 정의된 객체를 참조할 것이라고 착각하죠. 이런 개념을 'bound this'라고 합니다. 자바스크립트에서 this는 런타임에 결정됩니다. 메서드가 어디서 정의되었는지에 상관없이 this는 ‘점 앞의’ 객체가 무엇인가에 따라 ‘자유롭게’ 결정됩니다. 이렇게 this가 런타임에 결정되면 좋은 점도 있고 나쁜 점도 있습니다. 함수(메서드)를 하나만 만들어 여러 객체에서 재사용할 수 있다는 것은 장점이지만, 이런 유연함이 실수로 이어질 수 있다는 것은 단점입니다. let user = { name: "John" }; let admin = { name: "Admin" }; function sayHi() { a..
Programming Language/🟨 Javascript (Core) 2020. 4. 15. 04:28

실행 컨텍스트(2) : 스코프, 스코프체인

스코프는 식별자에 대한 유효 범위입니다. 함수 내부에서 선언한 변수는 함수 내부에서만 사용 가능합니다. 글로벌 변수와 지역 변수에 대해 공부하면서 이 개념에 대해 얼핏 감을 잡아본 경험이 있을 것입니다. 이런 스코프 개념은 JS뿐만 아니라 python, C 등 거의 모든 언어에서 해당되는 개념입니다. 이러한 스코프를 안에서 부터 바깥으로 차례대로 검색해 나가는 것을 '스코프 체인'이라고 합니다. 이를 가능케 하는 것이 LexiclaEnvironment의 두 번째 수집 자료인 outerEnvironmentReference입니다. outerEnvironmentReference은 현재 호출된 함수가 선언될 당시의 LexiclaEnvironment를 참조합니다. 앞서 실행 컨텍스트에서 살펴보았듯 LexiclaE..
Programming Language/🟨 Javascript (Core) 2020. 4. 15. 01:54

실행 컨텍스트(1) : 실행 컨텍스트와 호이스팅

(JavaScript) 실행 컨텍스트 - 클로저와 호이스팅 안녕하세요. 이번 시간에는 범위에 이어 실행 컨텍스트와 클로저에 대해서 살펴보겠습니다. 제가 지난 시간에 실행 컨텍스트가 제일 중요하다고 하면서 강좌를 마쳤습니다. lexical scoping과 이것만 이해하면 자바스크립트를 이해하는데 필수적인 개념인 호이스팅, 클로저 www.zerocho.com 실행 컨텍스트와 콜스택 실행 컨텍스트(execution context)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 동일한 환경에 있는 코드들을 호출 스택(콜 스택)에 쌓아뒀다가 가장 위에서부터 하나씩 실행하는 것입니다. 실행 컨텍스트를 구성할 수 있는 방법으론 전역 공간, eval(), 함수 등이 있습니다. 전역 공간(전역 컨텍스트)은 ..
Programming Language/🟨 Javascript (Core) 2020. 4. 14. 23:32

데이터 타입, immutable와 deep Copy, freeze, 메모리

Primitive & reference JS의 데이터 타입에는 기본형 혹은 원시형이라고 불리우는 Primitive type과 참조형 reference type이 있다. 위의 분류를 좀 더 정확하게 적자면 다음과 같습니다. 사실 Refence의 모든 타입들은 Object의 변형입니다. 편의를 위해 분리하여 적었을 뿐입니다. Primitive : number string boolean null undefined (Symbol) Reference : Object (Map, WeakMap, Set, WeakSet) Array Function Date Regex (괄호 속의 자료형은 ES6에서 추가된 것을 말합니다.) Primitive Type의 불변성 immutability 원시형과 참조형을 구별하는 가장 큰 ..
Programming Language/🟨 Javascript (Core) 2020. 4. 14. 19:53

코어 자바스크립트 : 소개

참고하면 좋습니다. 한국어 번역이 활발하게 이루어지고 있습니다. Hello, world! ko.javascript.info 간헐적으로 콜스택이나 실행 컨텍스트 등 JS라는 언어의 특성에 관한 글을 올렸었는데 아무래도 체계적이지 못하다보니 한 번 쭉 정리할 필요를 느꼈었다. 악명 높은 코뿔소 책을 봐야하나 했는데 오래되기도 했을 뿐더러 설명도 그리 친절한 편이 아니라 대안을 찾던 중 한국에서 출판한 책을 발견했다. 이 책이 아무래도 번역투도 아니고 설명도 친절하고 무엇보다 "얇기 때문에" 참고하였다. 물론 참고 뿐만 아니라 책에 없는 내용이라고 하더라도 JS 언어의 특성과 구동 원리를 다룬 내용을 자체적으로 추가할 생각이다. 왜냐하면 코어 자바스크립트라는 용어는 실행 환경에 독립적인 JS의 속성을 말하기 ..
Programming Language/🟨 Javascript (Core) 2020. 4. 14. 07:33

fetch 간단 활용법 정리

Fetch API The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set. developer.mozilla.org fetch사용시 유의 사항 (json() 함수 사용하기) · 쾌락코딩 fetch사용시 유의 사항 (json() 함수 사용하기) 25 Nov 2018 | javascript network basic js 개발자들은 network request 요청이 필요할 경우 대..
Programming Language/🟨 Javascript 2020. 4. 11. 20:19

Axios 공식 문서 정리 + cheat sheet

axios/axios Promise based HTTP client for the browser and node.js - axios/axios github.com Axios Cheat Sheet - Kapeli { // `url` is the server URL that will be used for the request url: '/user', // `method` is the request method to be used when making the request method: 'get', // default // `baseURL` will be prepended to `url` unless `url` is absolute. // It can be conve kapeli.com 백단과 프론트가 통신하..
Programming Language/🟨 Javascript 2020. 4. 11. 19:44