if(life){code();}

전통적인 웹 개발 (HTML, CSS, JavaScript + jQuery) 기존의 웹 개발 방식→ HTML, CSS, JavaScript를 직접 사용해서 웹사이트를 제작특히 jQuery 같은 라이브러리를 사용해서 DOM을 조작하는 방식이 일반적 HTML, CSS, JS가 분리된 상태로 개발됨DOM을 직접 조작페이지 새로고침이 많음 (서버 렌더링 중심)복잡한 UI에서는 유지보수가 어려움재사용성 부족함 동작 원리서버 → 클라이언트(브라우저)로 HTML 파일 전송브라우저 :  HTML을 렌더링하고, CSS를 적용JavaScript가 실행되면서 동적인 UI 추가 (이벤트 리스너, 애니메이션 등)특정 이벤트 발생 시 document.querySelector() 같은 방법으로 DOM을 직접 수정새로운 데이터를 불..

Component 리액트(React)에서 UI를 구성하는 기본 단위→ 레고 블록처럼, 여러 개의 작은 컴포넌트를 조합하여 복잡한 UI를 만들 수 있음→ 컴포넌트는 재사용 가능해야 함 (한 번 만든 컴포넌트는 다양한 곳에서 반복적으로 사용할 수 있어야 함) 재사용성 : 동일한 UI 요소를 여러 곳에서 사용할 수 있어 코드 중복을 줄임유지보수 용이 : 코드가 잘 조직되어 있어 변경 및 수정 용이가독성 증가 : 역할별로 컴포너트를 분리하면 전체 코드의 가독성이 높아짐  컴포넌트의 유형 함수형 컴포넌트 (Functional Component)ES6 함수 형태로 작성되며, 간결하고 가독성이 좋음React Hooks(useState, useEffect 등)를 사용하여 상태 및 생명주기 기능을 관리 가능최근 리액트 ..

GUI(Graphical User Interface) Controller 사용자가 소프트웨어의 기능을 시각적으로 조작할 수 있도록 도와주는 인터페이스예 : 게임에서 클릭할 수 있는 메뉴 버튼/ 설정 패널   Leva 라이브러리 활용 LevaReact 애플리케이션에서 사용 가능한 경량화된 GUI 컨트롤러 라이브러리실시간으로 장면 속성을 조정할 수 있는 인터페이스를 제공 npm i leva useControls 훅을 사용하여 다양한 입력 컨트롤을 쉽게 생성하고 관리할 수 있음장면 내 요소의 속성을 실시간으로 조정 가능코드 몇 줄의 추가로 GUI 패널을 추가할 수 있어 편리  Leva를 활용한 3D 객체 컨트롤 useControls를 이용한 속성 조정const options = useMemo(() => { ..