✅ 자바스크립트는 싱글 스레드 언어다이 말은 곧, 자바스크립트 코드의 실행은 하나의 메인 스레드에서 순차적으로 이루어진다는 것을 의미한다.자바스크립트의 모든 코드가 동기식으로 처리된다면 하나의 작업이 끝나기 전까지는 다른 작업이 실행되지 않으므로어떤 작업이 오래 걸린다면 웹 페이지가 멈춘듯한 느낌을 받을것이다.그런데 실제로 우리는 `setTimeout`, `fetch`, `Promise`와 같은 비동기 함수를 자주 사용하고 있고,이로 인해 여러 작업을 동시에 수행할 수 있게 된다. 그렇다면 싱글 스레드인 자바스크립트는어떻게 비동기 작업을 다른 코드와 함께 동시에 처리되는 것처럼 보이게 만들까?이를 이해하기 위해선 먼저 자바스크립트가 어떻게 실행되는지,즉 자바스크립트 런타임이 어떤 구조로 되어있는지를 이해..

코인원이 제공하는 OpenAPI를 활용하여 암호화폐의 시세를 조회하고 차트를 표시하는 UI를 만들어보고 있었다.위 사진의 UI는 아래의 사진처럼 세 개의 컴포넌트로 나뉘어지는데1. 코인의 실시간 정보를 보여주는 2. 차트 데이터를 조회하기 위한 검색 필터인 3. 코인의 차트와 함께 줌 기능을 제공하는  이렇게 세 개의 컴포넌트로 나뉜다. 이 중에서 `` 컴포넌트에는 wheel 이벤트를 달아서마우스 휠을 위아래로 움직이면 차트의 줌인/줌아웃이 가능하도록 했고,그에 따라 화면에 표시되는 bar의 갯수도 동적으로 변경된다.⚠️ 발생한 문제여기서 문제가 하나 발생했는데, `` 컴포넌트에서 줌인/줌아웃을 하는 과정에서브라우저의 body에 스크롤바가 있을 경우,휠 이벤트가 BarChart의 줌 기능 뿐만 아니라 b..

`useState`는 React에서 상태를 관리하는 가장 기본적인 훅(Hook)이다.React는 컴포넌트의 상태가 변경되면 리렌더링을 트리거 하고, 함수형 컴포넌트에서 상태를 유지하는 역할을 하는데,함수형 컴포넌트는 원래 단순히 입력을 받아 출력을 반환하기 때문에 상태를 갖고있지 않는다.그러면 React에서는 어떻게 useState를 이용하여 상태를 가지고 관리할 수 있는걸까? 이러한 useState의 동작 원리를 이해하기 위해서 클로저의 개념을 알아야 한다.(리액트의 함수형 컴포넌트에 대한 이해는 클로저에 달려있다)함수 컴포넌트의 동작 원리와, 여러가지 훅의 원리, 의존성 배열 등 함수 컴포넌트의 대부분 기술이 모두 클로저에 의존하고 있다. 🔍 클로저란?클로저의 사전적 정의는 아래와 같다.클로저는 함..

오늘은 텍스트에 배경 이미지를 넣어보는 방법에 대해 알아보자. 사계절 사진을 이용해 각 계절 텍스트에 계절의 분위기를 그대로 담아볼 것이다. 1. 사계절 사진 준비각 계절과 어울리는 사진을 준비한다.(사진 출처: Pixabay) 2. 사계절 이미지 불러오기// App.jsximport "./styles.css";import spring from "/src/assets/image/spring.jpg";import summer from "/src/assets/image/summer.jpg";import fall from "/src/assets/image/fall.jpg";import winter from "/src/assets/image/winter.jpg";const seasons = [ { label:..

웹 개발을 하다보면 사용자의 입력이나 스크롤 같은 이벤트가 너무 자주 발생해 성능이 떨어질 수 있다.이때 등장하는 두 가지 해결 방법이 바로 디바운스(Debounce)와 쓰로틀(Throttle)인데이는 성능 최적화에 사용되는 기법이다. 얼핏 보면 이 둘은 되게 비슷해 보이는데, 각각의 사용 목적과 동작 방식을 알면각 상황에 맞는 최적의 기법을 찾아서 적용할 수 있다. 복잡한 코드를 작성하지 않고도 lodash라는 JavaScript 라이브러리에서 디바운스와 쓰로틀을 간편하게 사용할 수 있지만이번 글에선 순수 JavaScript로 작성된 코드를 기반으로 동작 원리를 살펴보자.🔍 디바운스(Debounce)란?"일정 시간이 지난 후 마지막 이벤트만 실행하는 방법"예를 들어, 사용자가 입력을 멈춘 후 일정 시..

오늘은 TailwindCSS를 활용하여 귀여운 포켓몬 캐릭터들을 무한으로 보여주는 무한 슬라이드를 구현해보자.(하단에 Tailwind가 익숙치 않은 분들을 위한 순수 CSS 코드 버전도 있음) ❌ 우선 무한 슬라이드를 구현하기 위해 슬라이드 갯수를 무한으로 넣어줄 순 없다.✅ 따라서 우린 일종의 트릭을 사용해서 마치 무한인 것 처럼 보이는 눈속임 방식을 사용해야 한다. 내가 만들고 싶은 무한 슬라이드는 화면을 가득 채운 포켓몬들이 왼쪽으로 무한히 슬라이딩 되는 형태이다.(사진은 포켓몬 공식 홈페이지에서 눈에 보이는 귀여운 8마리로 골랐다)이제 이 8마리의 묶음을 포켓몬 부대라고 하자.🎬 무한 슬라이드 동작 원리 ❌ 무한 슬라이드를 구현하기 위해 애니메이션을 만들 때 단순히 하나의 포켓몬 부대를 tran..

✅ dangerouslySetInnerHTML이란? dangerouslySetInnerHTML은 React에서 HTML 문자열을 직접 렌더링해야할 때 사용된다.이는 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법이다. 활용 사례- 서버에서 받은 HTML 콘텐츠를 그대로 표시해야 하는 경우- 위지위그(WYSIWYG) 에디터에서 생성된 HTML을 렌더링할 때 코드 예시function createMarkup() { return {__html: 'First · Second'};}function MyComponent() { return ;} 🚨 dangerouslySetInnerHTML의 위험성 일반적으로 코드에서 HTML을 설정하는 것은 XSS(사이트 간 스크립팅)..

지난 시간에는 npm에 대해 알아보았다. 2025.01.11 - [Language/JavaScript] - [JavaScript] 자바스크립트 패키지 매니저 #01 - 패키지 매니저란? [JavaScript] 자바스크립트 패키지 매니저 #01 - 패키지 매니저란?패키지 매니저가 없던 시절자바스크립트의 애플리케이션이 점점 더 복잡해지면서, 모듈과 라이브러리를 조합하여 개발하는 방식이 일반화되었다.이에 따라 CommonJS(CJS), ECMAScript Modules(ESM) 같은devadventure.tistory.com2025.01.19 - [Language/JavaScript] - [JavaScript] 자바스크립트 패키지 매니저 #02 - npm의 특징 및 워크플로우 분석 [JavaScript] 자바..

Prettier가 필요한 이유"여기 줄바꿈좀 맞춰주세요.""들여쓰기 간격이 왜 이렇게 되어 있죠?""세미콜론을 붙이는 게 좋지 않을까요?" 한 팀원은 탭(Tab)을 사용하고, 다른 팀원은 공백(Space)을 사용하거나어떤 사람은 세미콜론(;)을 붙이고, 어떤 사람은 생략하거나 등개개인의 코드 스타일은 제각각일 수 밖에 없다. 팀 단위로 작업을 해야하는데 발생하는 이런 문제들은 프로젝트의 규모가 커질수록 더 심각해지고,코드 스타일의 불일치로 인해 생산성과 협업 효율성이 떨어질 수 있다. 이건 나의 경험담인데, 1줄만 수정했을 뿐인데 스타일 차이로 인해 모든 큰따옴표가 작은따옴표로 바뀌었다.이렇게 되면 발생하는 문제점이 커밋 히스토리를 확인해도 내가 어디를 변경했는지 금방 찾을 수 없다.뿐만 아니라 병합(M..

지난 시간에는 패키지 매니저의 등장 배경과 개념에 대해 알아보았다.[Language/JavaScript] - [JavaScript] 자바스크립트 패키지 매니저 #01 - 패키지 매니저란? 이번 글에서는 JavaScript 생태계에서 널리 사용되는 주요 패키지 매니저들에 대해 살펴보도록 하자.현재 JavaScript 개발 환경에서 대표적인 패키지 매니저로는 npm, yarn, pnpm이 있다.이 글에서는 그중에서도 가장 널리 사용되는 npm의 등장 배경, 주요 특징, 그리고 동작 원리에 대해 파헤쳐보자.npm (Node Package Manager)npm은 Node.js와 함께 2010년에 등장했다. 당시 JavaScript 애플리케이션은 점점 복잡해졌고,외부 라이브러리에 대한 의존성이 증가하면서 이를 효..