구조 분해 할당 Destructuring Assignment구조 분해 할당은 객체나 배열의 내부 구조를 분해하여 그 내부의 값을 쉽게 변수로 할당할 수 있는 기능이다.// 배열 구조 분해 할당const numbers = [1, 2, 3];const [one, two, three] = numbers;console.log(one); // 1console.log(two); // 2console.log(three); // 3// 객체 구조 분해 할당const person = { name: "Alice", age: 25};const { name, age } = person;console.log(name); // "Alice"console.log(age); // 25 비구조화 할당 Unstru..
React 파일 구조를 보면 Index.js와 App.js가 나누어져 있는데 그 쓰임의 차이가 무엇인지 궁금해져 정리하고자 한다. Index.jsReact의 Entry point이며, React 애플리케이션이 브라우저에서 실행될 때 가장 먼저 호출되는 파일이다.React DOM을 초기화하고 애플리케이션의 루트 컴포넌트(App.js)를 렌더링하는 역할을 담당한다.일반적으로 Router, GlobalStyled, react-query와 같은 전역적인 구성 요소를 이곳에서 관리한다. import React from 'react';import ReactDOM from 'react-dom';import App from './App'; // App 컴포넌트를 가져옴import './index.css'; // 애..
css 연습을 하려고 한 프로젝트에 여러 ui 컴포넌트를 모아두었는데 컴포넌트를 하나씩 import하니까 너무 지저분해서 한번에 모아서 import 해보려 한다!index.js 파일을 사용하여 re-export 해주면 한 줄로 import 해올 수 있다. 폴더를 구분하여 컴포넌트를 나누어 놓았다.// App.jsximport DigitalClock from "./pages/digital-clock/DigitalClock";import PageScroll from "./pages/page-scroll/PageScroll";import NavIndicator from "./pages/nav-indicator/NavIndicator"; index.jspages 폴더에 export를 모아놓은 index.js 파..
쇼핑몰 프로젝트에서 메인 화면에 보여질 슬라이드쇼를 만들어 볼 것이다.carousel 라이브러리를 사용하면 간편하게 슬라이더를 만들 수 있지만 직접 만들어보자!css는 tailwind css를 사용했다. 주요 기능1. 자동으로 넘어가는 이미지2. 이미지 인디케이터3. 다음 이미지를 볼 수 있는 Next 버튼 1. 사진 나열객체에 보여줄 이미지 정보를 저장해놓는다. {slideShowProducts.map((product, index) => ( ))}map 함수를 이용하여 객체의 이미지를 생성한다.css에서 inline-block을 추가해야 이미지가 가로로 나열된다. 이제 이 나열된 이미지를 div로 감싸준다.slider 안에 이미지를 나열하고 slideshow 영역 안에 있는 이미지만 보일 ..
