즐겁게, 코드

자바스크립트의 .forEach, .map 등 메서드를 활용하면 현재 순회중인 요소와 인덱스를 함께 얻을 수 있습니다. const array = [a, b, c]; array.forEach((item, index) => { console.log(`item: ${item} / index: ${index}`); } // item: a / index : 0 // item: b / index : 1 // item: c / index : 2 이는 배열의 요소에 접근할 때 인덱스로 접근할 것이냐, 요소 자체에 접근할 것이냐를 고민하지 않게 해주어 코드 퀄리티와 생산성을 높여주기도 하는데요, 파이썬에서는 항상 이런 고민을 해야만 했습니다. string = "Hello, World!" # 순회중인 요소에 직접 접근할 것..

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

구글에서 제작한 컴파일 언어인 Go(Golang)는 그 빠르다는 C++에도 밀리지 않는 성능과 간단히 CLI를 개발할 수 있다는 등의 장점을 살려 백엔드 개발과 데브옵스 개발자들에게 큰 인기를 얻고 있습니다. ✅ Go의 주요 사용 분야는 이곳 에서 확인해볼 수 있습니다! Go 설치하기 Go는 컴파일 언어이자 강타입 언어로, 설치 링크 에서 Go 컴파일러를 간단히 설치할 수 있습니다. 시작하기 전에 : 모듈에 대해 본격적으로 Hello, world! 출력에 도전하기 전에, Go의 중요한 개념인 모듈에 대해 다뤄보도록 하겠습니다. 간결한 문법도 Go의 빠른 속도의 원인 중 하나겠지만, 구글에서는 최적화된 종속성 관리 를 가장 큰 요인으로 뽑고 있는데요, Go에서는 모듈 을 통해 의존성 변경을 추적하고 효율적..

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

개발자를 콜백 지옥에서 구하기 위해 등장한 자바스크립트의 Promise를 기억하시나요? 구글의 차세대 언어로 주목받는 언어인 다트에도 비동기 처리를 위한 클래스가 존재하는데요, 바로 Future 입니다. 오늘은 프라미스와 다트를 비교해보며 다트의 퓨처 클래스 사용법을 간단히 알아보도록 하겠습니다. 자바스크립트의 프라미스 자바스크립트를 배워보신 분들이라면 비동기 동작이 무엇인지 대략적으로라도 알고 계실 것입니다. const waitOneSecond = () => { return new Promise((resolve, reject) => { setTimeout(() => { console.log("Task 1 : finished after one second.") }, 1000) }) } const wait..

오늘은 자바스크립트의 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 을 사용하는 것만이 언제나 답이 되지는 않는데요, ..