프론트엔드 개발 찔찔이

스와이퍼 UI 가져오기https://swiperjs.com/demos#navigation Swiper DemosSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com위 경로에서 CodeSandbox 중 React 선택## App.jsximport React, { useRef, useState } from 'react';// Import Swiper React componentsimport { Swiper, SwiperSlide } from 'swiper/react';// Import Swiper stylesimport 'swipe..

들어가며리액트 next.js에서 태그에 onClick을 적용하려는데 HTML 문법으로 적용하여 작동이 안되는 오류가 있었다.리액트, NEXT.JS에서 onClick을 사용하는 방법을 알아보자."use client" const number =[ { id:'1', text:'orange' },(...)] export default function Home() { function OnClick(e){ console.log(e) } return ( {number?.map((it)=>( {it.text} ))..

들어가며Next.js란?서버 사이드 렌더링(SSR)을 통해 HTML을 서버에서 마크업하여 검색 엔진에서 페이지를 더 잘 인식하고 색인화 하는데 도움이 되어 SEO 관리에 좋음기존의 리액트는 클라이언트 사이드 렌더링(CSR)으로 클라이언트 측에서 마크업이 생성되어 로딩시간이 오래걸리고 SEO 관련 적용 시간이 오래걸린다는 단점이 있음Next.js와 React의 차이1. 서버 사이드 렌더링 (SSR)React는 클라이언트 측에서만 렌더링되지만, Next.js는 서버 측에서도 렌더링할 수 있음SSR은 페이지 로딩 속도를 개선하고 검색 엔진 최적화(SEO)를 개선하는데 도움2. 정적 사이트 생성 (SSG)Next.js는 빌드 시점에 페이지를 렌더링하여 HTML 파일을 생성하고 정적 사이트를 생성할 수 있음SSG..