둥지

소스 맵이란?자바스크립트는 배포용으로 빌드할 경우 성능을 최적화하기 위해서 원본 파일을 압축하거나 번들링하게 됩니다.이처럼 압축되거나 번들링된 결과물과 원본 파일간의 관계를 기록한 파일을 소스 맵(Source Map)이라고 합니다.소스 맵은 어떤 구성을 가지고 있을까?소스 맵은 JSON 형식으로 작성되며 아래와 같은 요소를 포함하게 됩니다.version : 소스 맵의 기반이 되는 버전 번호file : 변환된 소스 코드의 파일명sources : 원본 소스 코드의 경로sourcesContent : 원본 소스 코드의 내용names : 변환된 소스 코드에서 사용된 식별자의 이름mappings: 원본 소스 코드와 변환된 코드 간의 매핑 정보소스 맵은 언제 필요할까?과연 소스 맵은 언제 필요할까요?소스 맵은 성능 ..

이전글: https://orashelter.tistory.com/933.  리스코프 치환 원칙 (LSP, Liskov Substitution Principle)서브 타입은 언제나 자신의 기반(부모) 타입으로 교체할 수 있어야 함을 의미합니다.이를 리액트로 설명하자면 컴포넌트를 상속할때 부모 컴포넌트의 Props를 그대로 사용할 수 있어야 함을 의미합니다.특정 컴포넌트에서 파생된 다른 컴포넌트가 부모 컴포넌트의 기능을 변경하게 되면 해당 컴포넌트를 사용할 때마다 추가적인 문서화가 필요해져서 프로젝트의 유지보수가 복잡해질 수 있습니다.반면 LSP를 준수하면 동작을 예측할 수 있어 유지보수가 더 용이해집니다.버튼 컴포넌트를 예시로 LSP를 준수하는 IconButton과 LoadingButton을 만들어보겠습니..

SOLID란?SOLID 원칙은 객체 지향 프로그래밍에서 소프트웨어 설계를 개선하기 위한 다섯 가지 원칙을 의미.주로 객체 지향 언어에 많이 사용되지만 언어에 상관 없이 적용할 수 있으며, 이러한 원칙을 적용하면 코드의 유지보수성과 확장성을 높일 수 있음. 1.  단일 책임 원칙 (SRP, Single Responsibility Principle)각 모듈은 하나의 책임만을 가져야 하며, 그 책임은 완전히 캡슐화되어야 함을 의미합니다.여기서 "책임"이란 해당 모듈이 수행해야 하는 기능이나 역할을 의미하며, 그 기능이 변경될 경우에만 해당 클래스나 모듈을 수정해야 함을 의미합니다. 책임의 예시는 다음과 같습니다.- UI 책임: 사용자 인터페이스 렌더링.- 비즈니스 로직 책임: 데이터 처리나 비즈니스 규칙을 적..

웹 애플리케이션을 개발할 때, 부드러운 애니메이션을 구현하기 위해 다양한 기술을 사용합니다.그 중 하나가 바로 requestAnimationFrame입니다.이 함수는 브라우저가 다음 리페인트를 수행하기 전에 특정 애니메이션 함수를 호출하도록 예약할 수 있게 해줍니다.requestAnimationFrame은 웹 API로, 브라우저의 리페인트 주기에 맞춰 애니메이션 함수를 실행합니다.이를 통해 개발자는 부드럽고 효율적인 애니메이션을 구현할 수 있습니다.예를 들어, 요소의 위치를 변경하거나 크기를 조절하는 애니메이션을 만들 때 이 함수를 사용하면 화면 주사율에 최적화된 애니메이션을 구현할 수 있습니다. requestAnimationFrame 작동 원리이 함수는 브라우저의 렌더링 주기와 밀접하게 연관되어 있습니..

웹 애플리케이션을 개발할 때, 사용자 경험을 향상시키기 위해 다양한 최적화 기법을 사용합니다.그 중 하나가 바로 requestIdleCallback입니다.이 함수는 브라우저가 대기 상태일 때 특정 작업을 수행하도록 예약할 수 있게 해줍니다.requestIdleCallback은 웹 API로, 브라우저가 대기 상태일 때 호출할 함수를 대기열에 넣습니다.이를 통해 개발자는 애니메이션이나 입력 응답과 같은 중요한 작업이 아닌 부수적인 작업을 효율적으로 처리할 수 있습니다.예를 들어, 페이지 로딩 후 사용자에게 보이지 않는 데이터 로딩이나 DOM 업데이트 등을 이 시점에 수행함으로써 사용자 경험을 저해하지 않도록 할 수 있습니다. requestIdleCallback 작동 원리이 함수는 브라우저의 이벤트 루프와 밀..

두 훅은 둘다 상태 관리를 위해 사용되는 훅이라는 점에서 같은 목적으로 사용됩니다. 두 훅은 각각의 특징이 있는데 아래와 같습니다.useState간단한 상태 관리를 위해 사용됨.useReducer복잡한 상태 로직을 관리하기 위해 사용됨.상태 업데이트 로직을 리듀서 함수로 분리하여 관리함.주로 여러 상태를 포함하거나 상태 변경 로직이 복잡한 경우에 사용. 간단한 토글 상태 혹은 간단한 구조의 데이터를 다루는 경우 useState를 사용하는 것이 좋습니다.하지만 특정 액션에 따라 복잡한 상태 로직 관리가 필요한 경우 예를들어 무한 스크롤에서 아이템요소들이 추가될때 아이템 요소들에 대한 갯수 및 페이지, 오프셋 등을 관리하고자 할때 useReducer가 더 적합할 수 있습니다.

리액트에서 컴포넌트는 생명 주기를 갖습니다.생명 주기란 컴포넌트가 생성되고 사용되고, 소멸되는 과정을 뜻합니다. 함수 컴포넌트에서 생명 주기는 크게 3가지 단계로 구분할 수 있습니다.렌더 (Render)커밋 (Commit)클린업 (Cleanup)이 세 단계를 각각 설명하자면 다음과 같습니다.렌더함수 컴포넌트가 호출되어 JSX가 반환됨.side effect가 호출되지 않음.커밋실제 DOM에 변화가 적용되는 단계.useEffect가 호출되는 단계.클린업컴포넌트가 언마운트되거나, useEffect가 다시 실행되기 전 정리 작업을 수행하는 단계.useEffect의 cleanup이 호출되는 단계. 이 단계를 간단히 아래의 코드로 살펴볼 수 있습니다.import React from 'react';function C..

1. Props란?Props란 컴포넌트 간에 데이터를 전달하기 위해 사용됩니다.부모 컴포넌트에서 자식 컴포넌트로 단방향으로 데이터를 전달할 때 사용되며, 자식 컴포넌트는 전달 받은 `props`를 읽기 전용으로 사용하게 됩니다. 2. State란?State란 컴포넌트 내부에서 관리되는 상태를 나타냅니다.상태가 변경되면 컴포넌트는 리렌더링이 일어나게 됩니다.컴포넌트 외부에서는 직접 접근할 수 없습니다. 3. 그렇다면 Props와 State의 차이점은 무엇이 있을까?데이터의 소유와 제어Props: 부모 컴포넌트가 소유하고 제어함.State: 해당 컴포넌트 내부에서 소유하고 제어함.변경 가능성Props: 읽기 전용.State: 컴포넌트 내에서 업데이트 가능.데이터 흐름Props: 부모에서 자식으로 단방향.St..

이번 파트는 자바스크립트의 참조와 복사에 대해서 공부하는 파트입니다. 1. const players = ['Wes', 'Sarah', 'Ryan', 'Poppy']; const team = players; console.log(players, team); team[3] = 'Lux'; console.log(players, team); 결과는 players와 team이 같이 바뀐다 이것은 얕은 복사라서 그렇습니다. 2. const team2 = players.slice(); const team3 = [].concat(players); // 아래 두 방법은 ES6부터 사용가능합니다. const team4 = [...players]; const team5 = Array.from(players); 배열은 위의 ..

이번 파트는 많이 쓰이는 스크롤을 내리면 이미지가 날아오는 것을 구현하는 파트입니다. 1. slide-in 클래스를 가진 element들을 변수로 저장. const sliderImages = document.querySelectorAll('.slide-in'); 2. 이미지 슬라이드 체크 함수 구현. function checkSlide() { sliderImages.forEach(sliderImage => { // 이미지의 절반 계산 const slideIntAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2; // 이미지의 하단 계산 const imageBottom = sliderImage.offsetTop + sliderImage...