쥰뎁

반응형 웹과 모바일 감지의 중요성웹 개발에서 반응형 웹 디자인은 이제 필수입니다. 데스크톱, 태블릿, 모바일 등 다양한 디바이스에 맞춘 최적화된 UI는 사용자 경험을 크게 향상하는 중요한 요소입니다.특히 모바일 사용자의 비율이 증가함에 따라, 화면 크기에 따라 레이아웃과 스타일을 동적으로 변경하는 기능은 더욱 필수적입니다.이 글에서는 React에서 미디어 쿼리를 활용해 Custom Hook을 만들어 모바일 디바이스를 감지하고, 스타일을 효율적으로 변경하는 useIsMobile 훅을 소개합니다.모바일을 감지하는 useIsMobile 훅먼저, 미디어 쿼리를 이용해 모바일 화면을 감지할 수 있습니다.이걸 React에서 쉽게 사용할 수 있도록 useIsMobile 훅을 만들겠습니다. 이 훅은 컨텍스트 API를 ..

개요React를 사용하여 개발을 했던 사람이라면 element 요소 내 className을 사용하는 것을 알 것이다.본인은 React에서는 class 대신에 className을 사용하는구나 정도로 이해했지만, 문득 "왜 그럴까?" 라는 의문이 생겨 찾아 공부하고 글을 남기려고 한다. JavaScript 예약어 충돌 회피'class'는 자바스크립트에서 예약어로 사용된다.클래스 정의에 사용되며, 이를 속성명으로 사용할 경우 혼란이 발생할 수 있다.따라서, JSX에서는 혼동을 피하기 위해 'class' 대신 'className'을 사용하여 CSS 클래스를 지정한다.React의 JSX 문법JSX는 자바스크립트 코드 안에서 XML을 사용하는 문법으로, XML과 자바스크립트가 혼합된 형태이다.JSX는 자바스크립트로..

생명주기(Lifecycle)생명주기(Lifecycle)는 특정 개체나 시스템이 존재하는 동안 거치는 여러 단계와 각 단계에서 수행되는 작업들을 말한다.소프트웨어 개발에서는 다양한 컴포넌트나 객체의 생명주기를 정의하여, 각 단계에서 어떤 작업이 수행되는지 명확히 함으로써 관리와 유지보수를 용이하게 한다.컴포넌트 생명주기특히 프론트엔드 개발에서, 컴포넌트 생명주기는 중요한 개념이다.대표적으로 React와 같은 라이브러리에서는 컴포넌트가 생성, 업데이트, 소멸되는 과정을 명확히 정의하여, 개발자가 적절한 타이밍에 필요한 작업을 수행할 수 있도록 한다.React 컴포넌트 생명주기React에서는 컴포넌트가 마운트, 업데이트, 언마운트되는 과정에서 다양한 생명주기 메서드를 제공한다.마운트(Mount): 컴포넌트가 ..

Virtual Dom(Virtual Document Object Model)Virtual Dom은 자바스크립트 객체로 메모리에 가상으로 존재하는 DOM 트리의 일종이다.실제 DOM의 경량화된 복사본이며, DOM 조작의 효율성을 높이기 위해 사용된다.이는 특히 React와 같은 현대적인 프런트엔드 라이브러리에서 널리 사용된다.실제 DOMDOM은 HTML 문서의 구조를 계층적(Tree)으로 표현한 모델이다.각 HTML 태그에는 DOM 트리의 노드로 표현되며, 웹 페이지의 내용을 변경하거나 조작하는 작업은 DOM을 통해 이루어진다.단점실제 DOM 조작은 비용이 많이 든다.DOM을 변경할 때마다 브라우저는 레이아웃, 페인트, 리플로우 등의 작업을 수행하며, 이는 성능에 큰 영향을 미칠 수 있다.Virtual D..

개요 사이드 프로젝트로 웹 디자인&개발을 하면서 Audio를 사용할 기회가 생겼다. 이번에는 "음악 스트리밍"을 주제로 웹 디자인을 하고, React로 개발까지 진행하였다. 본론 const [audio] = useState(new Audio(src)); 먼저, useState를 활용하여 React 컴포넌트의 상태로 오디오 요소를 관리하면 추가되는 기능 또는 초기화에 대해서 유지보수가 편할 것이라 생각한다. src에 들어가는 주소는 mp3파일이 프로젝트 폴더의 public 내에 위치한다면 '/song.mp3'를 넣으면 음악 파일을 불러올 수 있다. 본인은 src도 상태로 관리하고자 useState를 활용했다. // 본 개발에서 사용될 음악 목록 const song = ["Cruel Summer", "Sha..