즐겁게, 코드

TL;DR esbuild는 정말 빠른 도구지만, 실제 환경에서 웹팩을 대체하기에는 아직은 시간이 더 필요할 것 같다. 웹 프론트엔드 분야를 학습해보신 분들이라면 한번쯤은 "이제 웹팩이 뭔지 공부해볼까?" 했다가, 복잡한 웹팩 설정과 플러그인들로 인해 좌절된 적이 있을 것입니다. 이번 글에서는 웹팩을 언젠가는 대체할 가능성이 있는 차세대 번들러, esbuild를 알아보며 느낀 점을 가볍게 적어보려 합니다. 이게 가능하다고? : esbuild의 번들링 속도 esbuild는 go로 만들어진 차세대 번들러로, 공식 홈페이지 의 대문에서부터 기존의 도구들과는 차원이 다른 번들링 속도를 어필합니다. esbuild의 큰 장점은 기존의 주류 번들러인 Webpack 5와 비교했을 때 압도적인 퍼포먼스를 보여준다는 점과,..

TL;DR "인터섹션" 이란 요소가 화면(뷰포트) 상에 위치하고 있는지를 의미합니다. 인터섹션 옵저버를 사용하면 이 인터섹션을 감지하고 수행할 콜백을 지정할 수 있습니다. threshold 옵션을 사용하면 감지 비율을 설정할 수 있습니다. 인스타그램과 페이스북은 어떻게 스크롤을 할 때마다 새로운 피드를 불러올까요? 흔히 “무한 스크롤” 이라고 부르는 이 기법은 자바스크립트의 intersection observer(인터섹션 옵저버) 라는 API를 사용해 간단히 구현할 수 있는데요, 오늘은 AOS(Animate-On-Scroll) 효과와 무한 스크롤을 구현해보며 인터섹션 옵저버를 간단히 알아보도록 하겠습니다! 실습을 위해, 먼저 아래 마크업을 복사해 주세요! /* styles.css */ .container..

오늘은 자바스크립트의 AND(&&) 연산자의 동작 방식에 대해 간단히 정리해보려 합니다. 시작하기 전에, 한번 간단한 OX 퀴즈를 풀어 볼까요? "&& 연산자는 조건을 검사하고, 해당 조건이 참일 때 다음에 오는 식을 실행합니다." (O / X) 조건문 && (조건이 참일 경우) 실행할 식 이런걸 퀴즈로 냈다는건 분명 어딘가 틀렸다는 건데, 과연 어디서 틀린 걸까요? && 연산자와 조건부 렌더링 리액트에서는 컴포넌트의 조건부 렌더링을 위해 && 연산자를 사용할 때가 종종 있습니다. const menuList = ["홈", "주문 내역", "결제 정보"] const Menu = () => { return ( {/* menuList.length는 0이 아니므로 참이 됩니다. */} {menuList?.len..

아주 오랜 옛날부터, 전설로 내려오는 코드가 있습니다. (3학년 1학기에 수행했던 산학프로젝트 코드입니다.) 이 코드는 간단한 그룹 매칭 서비스에서 그룹을 생성하는 역할인데요, 여러 비동기 로직이 async-await 을 통해 순차적으로 실행되는 무시무시한 모습입니다. 얼핏 보면 비동기 로직 제어에 성공한 것처럼 보이지만 순차적으로 실행되는 약 7회의 POST 요청으로 인해 당시 그룹을 생성하는 데에만 약 20~30초 가량의 시간이 소요되었고, UX 개선을 위해 로딩 애니메이션을 별도로 제작하는 등의 수고를 더해야만 했습니다. 콜백, 프라미스, async-await 문법을 거쳐오며 비동기 로직 제어는 점점 쉬워졌지만 진화의 최종형인 async-await 을 사용하는 것만이 언제나 답이 되지는 않는데요, ..

바닐라 자바스크립트를 활용해 DOM에 접근할 때는 HTMLCollection, NodeList 등의 DOM 요소들의 컬렉션을 다루게 될 때가 있는데요, 이번 글을 통해 두 컬렉션의 성질을 간단히 알아보도록 하겠습니다. HTMLCollection 먼저 HTMLCollection은 getElementsByClassName 과 getElementsByTagName 메서드를 통해 얻을 수 있는 객체인데요, 한번 간단한 예제를 작성해 보겠습니다. Apple Banana Orange document.getElementsByClassName 함수를 통해 class="red" 속성을 갖는 요소들을 획득한 모습인데요, 자세히 보면 이 컬렉션은 일반적인 배열이 아닌 HTMLCollection 이라는 프로토타입을 기반으로 ..

본 글은 TOAST UI Weekly Pick - "당신이 모르는 자바스크립트의 메모리 누수의 비밀" 을 정리한 내용입니다. 웹 페이지가 버벅이거나 동작을 멈추는 경우에는 여러 원인이 있을 수 있습니다. 그 중 한 가지 원인은 바로 메모리 누수 로, 메모리를 신경쓰지 않고 코드를 작성하면 결국 사용자 경험에 나쁜 영향을 미치게 됩니다. 오늘은 메모리 누수란 무엇이고, 어떤 상황에서 메모리 누수가 발생할 수 있는지 알아보도록 하겠습니다. 가비지 컬렉션 변수 또는 데이터가 더이상 필요하지 않다면 이들은 '가비지 변수' 또는 '가비지 데이터' 라는 미사용 값으로 분류됩니다. 만약 이 데이터가 계속 쌓이면 메모리 사용량을 초과하게 될 것이므로, 그러기 전에 가비지 컬렉션을 꾸준히 실행해야만 합니다. 자바스크립트..

오늘은 객체에 담긴 값을 불변으로 만드는 방법에 대해 알아보도록 하겠습니다. const person = { name: "chanmin", age: 25, }; 먼저 const 키워드로 선언한 변수에 객체 리터럴을 할당한 모습입니다. 이러면 객체가 불변 상태가 된 걸까요? 물론 아닙니다. 이렇게 const 변수에 객체를 할당하면 해당 객체의 참조 만이 불변값이 되어 새로운 객체를 할당하는 것이 불가능하고, 내부 프로퍼티를 변경하는 것은 여전히 자유롭게 가능합니다. const person = { name: "chanmin", age: 25, }; person.age = 100; person.school = "KAU"; console.log(person); // age 프로퍼티의 값은 변경이 가능합니다. //..