🌈 기술스택/JavaScript
Slick 같은 무한 루프 슬라이드 만들기
Slick 같은 무한 루프 슬라이드 만들기
2022.01.09Carousel 캐러셀은 사전적으로 회전목마라는 뜻을 가지고 있으며, 웹에서는 슬라이드 형태로 순환하면서 사용자에게 콘텐츠를 보여주는 UI를 말합니다. 일전에 카카오 이모티콘샵 클론 프로젝트를 진행하면서 메인 배너에 슬라이드 라이브러리인 Slick을 사용했었는데, 직접 구현해보면 어땠을까 하는 아쉬움이 계속 남았습니다. 그래서 이번 기회에 Slick 같은 느낌으로 무한 루프 슬라이드를 만들어 봤습니다. 구현하고자 하는 체크리스트는 다음과 같습니다. n초 간격으로 슬라이드를 자동으로 넘긴다. 이전 · 다음 버튼을 눌러 슬라이드를 앞뒤로 넘긴다. 페이지네이션 버튼을 누르면 특정 슬라이드로 이동한다. 버튼은 슬라이드 개수에 맞춰 동적으로 생성한다. (슬라이드가 1개라면 버튼 불필요) 그리고 이번에는 제가 즐겨..
간단한 페이지네이션 구현하기
간단한 페이지네이션 구현하기
2022.01.07Pagination 페이지네이션은 다수의 콘텐츠를 여러 페이지로 나누고, 이전 또는 다음 페이지로 넘어가거나 특정 페이지로 이동할 수 있는 버튼을 제공하는 기술입니다. 페이지네이션은 공통된 주제로 묶은 글의 목록을 보여주는 게시판과 같은 곳에서 많이 사용되고 있습니다. 비슷한 목적의 기술로 무한 스크롤도 있는데, 이에 대한 장단점은 이전 포스트에서 다루었으니 본문에서는 페이지네이션의 장단점을 살펴보겠습니다. 페이지네이션의 장점 사용자 의도에 맞게 페이지를 넘길 수 있습니다. 특정 항목의 위치를 간편하게 확인할 수 있습니다. 페이지네이션의 단점 사용자 입장에서 페이지 이동이라는 추가적인 행동이 발생합니다. 한 페이지에 나타나는 정보량이 제한적입니다. 페이지네이션과 무한 스크롤 모두 장단점이 존재하기 때문에..
Intersection Observer API로 무한 스크롤 구현하기
Intersection Observer API로 무한 스크롤 구현하기
2022.01.04Infinite Scroll 무한 스크롤은 말 그대로 스크롤을 무한으로 할 수 있는 기능을 말하며, 페이지의 최하단에 도달했을 때 신규 콘텐츠를 로드하는 식으로 동작합니다. 페이지네이션(Pagination)과 함께 많은 콘텐츠를 사용자에게 제공하는 사용자 경험(UX) 방식으로 무엇이 더 나은 방식이다라기 보다는 서로가 장단점을 가지고 있습니다. 이번에는 무한 스크롤을 만들어 보는 시간이니, 무한 스크롤에 대해서만 장단점을 살펴보겠습니다. 무한 스크롤의 장점 콘텐츠 탐색이 간단하며, 별도의 추가 동작(페이지 버튼 클릭 등)이 필요 없습니다. 모바일 환경(터치 스크린) 또는 세로로 긴 화면을 보유한 디바이스에서 강점을 갖습니다. 무한 스크롤의 단점 한 페이지 내에 많은 콘텐츠가 로드 되므로, 페이지 성능이 ..
마우스로 터치 스크롤 구현하기
마우스로 터치 스크롤 구현하기
2022.01.04Touch Scroll 모바일에서는 스크롤 가능한 요소를 터치 제스처를 통해 스크롤하면서 읽을 수 있습니다. 이를 데스크톱 환경에서도 마우스를 가지고 동일하게 동작할 수 있도록 만들 수 있는데, 웨이브나 카카오 이모티콘샵과 같은 서비스를 방문해 보면 이 기능이 어떤 것인지 확인할 수 있습니다. 모바일에서는 기본적으로 터치를 이용한 스크롤이 가능하지만, 데스크톱에서는 불가능하기 때문에 마우스, 터치, 클릭 이벤트에 대해 기능을 구현해야 합니다. 처음에는 크게 헤맸지만 만들고 보니 크게 어렵지 않더라고요. 그럼 함께 만들어 볼까요? 😆 구현할 내용은 모두 자바스크립트이기 때문에, HTML과 CSS 코드는 자유롭게 작성하셔도 됩니다. 리스트 요소를 수평 일렬로 표현하기만 하면 되는데, 만약 제가 만든 코드를 ..
비동기 처리를 위한 문법 (Promise)
비동기 처리를 위한 문법 (Promise)
2021.10.08Synchronous 자바스크립트 엔진은 기본적으로 동기(Synchronous)로 동작합니다. console.log(1); console.log(2); console.log(3); 런타임 시 코드를 위에서부터 아래로 읽으며 실행하기 때문에, 우리는 [ 1 2 3 ]이라는 결과를 얻을 수 있습니다. 만약 비동기로 동작하기를 원한다 하면 중간에 setTimeout, setInterval과 같은 Host API의 도움을 받아야 합니다. 그렇게 되면 태스크 큐와 이벤트 루프에 의해 비동기로 동작하는 것을 확인할 수 있습니다. 태스크 큐와 이벤트 루프에 대해 익숙하지 않으시면, 이전 글인 자바스크립트에 동시성을 부여하는 이벤트 루프를 확인해 주세요! Host API란 웹 브라우저 또는 Node 환경에서 추가적으로..
자바스크립트에 동시성을 부여하는 이벤트 루프
자바스크립트에 동시성을 부여하는 이벤트 루프
2021.10.07Single Thread 자바스크립트 엔진은 한 번에 단 한 가지의 일만 수행 가능한 싱글 스레드(Single thread) 방식으로 동작합니다. 그렇다면 setTimeout과 같은 비동기 함수들은 어떻게 논블로킹 방식으로 처리되는 걸까요? 만약 싱글 스레드로 처리된다 하면, 비동기 함수가 실행을 마칠 때까지 블로킹되면서 프로그램이 멈췄을 텐데 말이죠. 이런 자바스크립트 엔진에 동시성(Concurrency)을 지원하기 위해 웹 브라우저는 이벤트 루프(Event Loop)라는 것을 지원합니다. 우리가 비동기 작업을 위해 사용했던 setTimeout과 setInterval 함수는 ECMA Script의 기본 사양이 아닌 웹 브라우저에서 별도로 제공하는 Web API입니다. 물론 기본적으로 소스 평가 과정을 ..
연속으로 발생하는 이벤트를 제어하는 방법
연속으로 발생하는 이벤트를 제어하는 방법
2021.10.07Event Controls HTML의 DOM 요소를 조작하면서 발생하는 이벤트 중 input, mousemove, resize, scroll 등의 이벤트는 짧은 시간 간격으로 연속해서 발생합니다. 이러한 이벤트들에 함수를 등록해서 사용하는 경우, 너무나 잦은 호출로 인해 성능 저하를 불러올 수 있습니다. 그렇기 때문에 연속적으로 발생하는 이벤트들을 그룹화하여, 원하는 순간에만 호출될 수 있도록 하는 기법을 소개하려 합니다. 본문에서는 간단한 예제만 소개하기에, 프로젝트에서는 Lodash와 같은 라이브러리 사용을 추천합니다. 디바운스 디바운스(Debounce)는 연속으로 발생하는 이벤트의 마지막 이벤트만 호출할 수 있도록 하는 기법입니다. 만약 우리가 외부의 API를 호출해서 사용한다 하면 보통 요청 제한..
코드 실행에 필요한 정보를 담은 실행 컨텍스트
코드 실행에 필요한 정보를 담은 실행 컨텍스트
2021.10.05Execution Context : EC 실행 컨텍스트(Execution Context)는 자바스크립트 코드를 실행하기 위해 필요한 정보를 저장하고 제공하는 환경입니다. 기본적으로 스코프의 정보를 담은 환경을 말하며, 새로운 스코프가 생성될 때마다 실행 컨텍스트도 생성되면서 스택 메모리에 쌓이게 됩니다. 그리고 스택이 쌓일 때마다 새로운 컨텍스트에게 코드 실행에 대한 제어권을 넘기며, 실행이 종료된 이후에는 소멸됨과 동시에 제어권을 다시 상위 컨텍스트에게 돌려줍니다. 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이기 때문에 정말 중요합니다. 실행 컨텍스트를 잘 이해하면, 스코프, 호이스팅, 클로저 등의 원리도 모두 이해할 수 있습니다. 😱 다음의 코드와 그림을 통해 실행 컨텍스트가 스택..
자기 자신을 가리키는 값 this
자기 자신을 가리키는 값 this
2021.10.03This Binding 자바스크립트의 함수는 자기 자신을 가리키는 특별한 값인 this를 사용할 수 있으며, 이를 자기 참조 변수(Self-referencing variable)라 부릅니다. this가 가리키는 값은 함수를 호출하는 방식에 따라 동적으로 결정되는데, 이렇게 this의 값이 정해지는 것을 this 바인딩이라 합니다. 호출 방식에 따라 this가 어떻게 달라지는지 확인해 보도록 합시다. 일반 함수 호출 전역 실행 컨텍스트에서의 this는 항상 전역 객체를 가리킵니다. 실행 컨텍스트는 자바스크립트 코드 실행을 위한 정보가 담긴 메모리이며, 함수가 호출될 때마다 해당 함수를 실행하기 위한 정보를 담은 컨텍스트가 생성됩니다. 자바스크립트의 전역 객체는 실행 환경에 따라 달라지며 웹 브라우저에서는 ..
자바스크립트 코드의 유효 범위 Scope
자바스크립트 코드의 유효 범위 Scope
2021.10.03Scope 스코프는 변수에 접근 가능한 범위를 의미합니다. 자바스크립트에서 스코프는 함수 레벨 스코프와 블록 레벨 스코프 두 가지로 나뉘며, 함수나 블록을 선언한 위치에 따라 스코프가 중첩될 수 있습니다. 스코프는 정말 중요한 개념 중 하나이며, 클로저와 같은 문법들의 동작을 이해할 때 도움이 되니 알아두면 좋습니다. 함수 레벨 스코프 함수 레벨 스코프는 자바스크립트에서 흔히 만날 수 있는 스코프입니다. function foo() { var a = 1; function bar(b) { if (true) { var c = 5; } // 8 console.log(a + b + c); } bar(2); } foo(); 함수를 정의하면 그에 맞춰 함수 단위로 스코프가 결정됩니다. 그리고 var 키워드로 선언한 ..
얕은 복사 & 깊은 복사
얕은 복사 & 깊은 복사
2021.10.03Data Types 자바스크립트의 데이터는 원시형(Primitive Type)과 참조형(Object Type)이라는 두 가지 종류의 타입으로 나뉩니다. 원시형에는 정수, 문자열, 심볼 등이 해당되고, 참조형에는 배열, 객체 등이 해당됩니다. 데이터 타입을 먼저 얘기하는 이유는 특정 변수의 데이터를 다른 변수에 복사하고자 할 때, 원본 변수가 담고 있는 데이터의 타입에 따라 복사 방식이 다르기 때문입니다. 각 방식을 얕은 복사(Shallow copy)와 깊은 복사(Deep Copy)라 말합니다. 👏 얕은 복사 다음 코드의 결과를 예상해 보세요. let num1 = 123; let num2 = num1; console.log(num1 === num2); num2 = 456; console.log(num1 =..
유사 배열 객체 만들기
유사 배열 객체 만들기
2021.10.02Array-like Object 유사 배열 객체는 말 그대로 배열과 유사한 객체이며, 배열처럼 인덱스를 통해 요소에 접근할 수 있습니다. 유사 배열 객체 만들기 유사 배열 객체를 만드는 방법은 간단합니다. 객체 리터럴인 {} 안에 인덱스를 프로퍼티로 하여 값을 적어주고, 이러한 값의 개수만큼 length 프로퍼티만 추가하면 됩니다. 바로 다음과 같이 말이죠. const arrlike = { 0: 1, 1: 2, 2: 3, 3: 4, 4: 5, length: 5, }; for (let i = 0; i < arrlike.length; i++) { // 1 2 3 4 5 console.log(arrlike[i]); } 몇 안 되는 프로퍼티만으로 유사 배열 객체를 만들어 봤는데 어떤가요? 정말 간단하죠? 이처럼..