쇼핑몰 프로젝트에서 메인 화면에 보여질 슬라이드쇼를 만들어 볼 것이다.carousel 라이브러리를 사용하면 간편하게 슬라이더를 만들 수 있지만 직접 만들어보자!css는 tailwind css를 사용했다. 주요 기능1. 자동으로 넘어가는 이미지2. 이미지 인디케이터3. 다음 이미지를 볼 수 있는 Next 버튼 1. 사진 나열객체에 보여줄 이미지 정보를 저장해놓는다. {slideShowProducts.map((product, index) => ( ))}map 함수를 이용하여 객체의 이미지를 생성한다.css에서 inline-block을 추가해야 이미지가 가로로 나열된다. 이제 이 나열된 이미지를 div로 감싸준다.slider 안에 이미지를 나열하고 slideshow 영역 안에 있는 이미지만 보일 ..
preventDefault() HTML 요소의 기본 동작을 중지하고 사용자 정의 동작을 수행하고자 할 때 사용한다. 1. 폼 제출 방지 사용자가 form에서 제출을 하기위해 submit 버튼을 누르면 기본적으로 페이지가 새로고침 된다. 이 때 폼 데이터를 서버로 전송하지 않고 JS를 사용하여 데이터를 처리하고자 할 때 preventDefault()로 폼 제출 이벤트를 중지하고 데이터를 처리할 수 있다. document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); // 폼 제출 이벤트의 기본 동작 중지 // 데이터를 수집하고 처리하는 작업 수행 }); * 서버로 전송하는 경우 이처럼 for..
Array.Reduce() 배열의 요소를 줄이고 단일 값을 반환하기 위해 사용. 지정된 콜백 함수를 호출하고 누적 값을 반환한다. array.reduce(function( accumulator, currentValue, currentIndex, array ) { // 누적값을 업데이트하는 로직 }, initialValue); accumulator: 현재까지의 누적값을 나타내며 initialValue로 시작한다. currentValue: 배열에서 처리 중인 현재 요소 currentIndex: 배열에서 처리 중인 현재 요소의 인덱스 array: reduce()가 호출된 원본 배열 자체 const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce(function(..
Routing 웹 어플리케이션에서 클라이언트의 요청 URL을 특정한 로직 또는 처리기(Route Handler)와 연결하는 과정 or 매커니즘 Route Handler 미들웨어로써 라우팅을 통해 요청된 URL에 대한 실제 로직 또는 코드 블록을 나타냄 특정 URL 경로와 HTTP method(GET, POST, PUT, DELETE)가 연결되어 클라이언트의 HTTP 요청을 처리한다. Path parameter 웹 앱에서 URL 경로 내에 변수 값을 포함하는 데 사용되는 매커니즘 일반적인 미들웨어와는 다르게 route hander는 path parameter를 사용할 수 있다. path parameter를 사용하여 주소의 일부를 변수처럼 사용할 수 있음 // EXAMPLE const express = re..
