분류 전체보기

NEXT.js 앱 생성하기📌 Getting Started: Installation | Next.jsCreate a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.nextjs.org 프로젝트 생성npx create-next-app@latest . 프로젝트 설정프로젝트 설정은 자신의 원하는 형식에 맞춰서 생성해주면 된다.  NEXT.js 기능 살펴보기경로설정import { useRouter } from "next/router";const router = useRouter();router.push(/경로);리액트에서 사용하던 useNavigate 대..

NEXT.js는 기본적으로 다양한 렌더링 전략을 제공한다. 클라이언트 사이드 렌더링 서버 사이드 렌더링 정적 사이트 생성 증분 정적 재 생성 서버 사이드 렌더링(Server Side Rendering,SSR) 서버 사이드 렌더링이란? 서버 측에서 페이지를 렌더링 하는 것 이처럼 브라우저에 해당 페이지를 요청하면 서버에서 페이지에 필요한 데이터를 불러와서 완성된 HTML 파일을 응답한다. 💡 그 후, 렌더링이 완료된 페이지를 화면에 렌더링 시키는건데 여기서 두 렌더링은 다른 뜻을 가진다. 1) "렌더링"이 완료된 리액트 컴포넌트와 같이 자바스크립트로 작성되어 있는 페이지를 실제 HTML 코드로 변환하는 과정 2) 페이지를 화면에 "렌더링" HTML을 화면(브라우저)에 실제로 그려내는 것 서버 사이드 렌더링..

NEXT.js의 Router 넥스트는 2개의 페이지 라우팅 기능을 제공한다. 두 가지를 동시에 이용할 수는 없고 두 라우터 중 하나만 선택해서 사용할 수 있다. Page Router 기존 버전 모두 제공 기존에 제공되어 오던 기능 대다수의 프로젝트가 사용 배우기 쉬움 향후 App Router 학습 시 도움이 됨 App Roter Next 13 버전부터 제공 새롭게 출시된 기능으로 아직 불안정한 부분이 존재함 미 반영 프로젝트가 아직 많음 입문자가 배우기 힘듦 🚨 넥스트를 처음 배우는 단계에서 들은 강의라서 몰랐는데 현재는 14버전이 나온 상태이고 page router 보다는 거의 app router를 많이 사용한다고 하네요! 페이지 라우터 부분은 기존 개념을 이해한다고 생각하고 공부하면 좋을 것 같습니다..

NEXT.js 란? Vercel이 개발한 오픈소스 자바스크립트 프레임워크로 리액트를 더 편리하게 이용할 수 있도록 기존에 제공하지 않던 추가적인 기능을 제공한다. 즉, 리액트의 확장판이라고 할 수 있다. 둘의 차이점을 꼽자면 넥스트는 프레임워크이고 리액트는 라이브러리 라는 점이다. 💡 프레임워크 vs 라이브러리는 무슨 차이가 있을까? 기능 구현의 주도권이 누구에게 있는가? 프레임워크 : 프레임워크 자신이 주도권을 가짐 예를들어 페이지 라우팅을 구현해야 한다고 할 때 프레임워크가 정해 놓은 기능을 이용해서 정해 놓은 방법대로 구현해야함. 자유도 낮음 많은 기능이 미리 제공됨 쉽게 말해 자동차처럼 특화된 기능이 있고 해당 기능과 연관된 기능도 함께 제공되어 정해진 용도로만 활용이 가능함 라이브러리 : 프로그..

🚨 문제 상황 위에 사진과 같이 필터값은 제대로 받아와서 해당 필터값에 따른 데이터를 받아오지만 해당 카테고리를 눌렀을 때 상태값이 초기값으로 돌아가서 제대로 동작하지 않는 문제가 발생함 카테고리 코드 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react"; import { Navigation } from "swiper/modules"; import "swiper/css"; import { FaArrowLeft, FaArrowRight } from "react-icons/fa"; import { useState } from "react"; type FiltersArray = { filters: string[]; onFilterChange: (fi..

숙박예약 사이트를 진행하는 프로젝트에서 필수적으로 필요했던 체크인 - 체크아웃 달력! 달력을 직접 만들어서 구현해보는게 좋을 지 라이브러리를 사용할 지 고민 많이 했는데 직접 구현하는 건 사실 상 조금 비효율적인거 같아서 라이브러리를 활용하기로 했다! 내가 필요한 기능은 체크인 - 체크아웃 기간을 선택할 수 있을 것 날짜를 상태값으로 받을 수 있을 것 달력을 커스텀 할 수 있을 것 달력에 년도와 월을 표시할 수 있을 것 지난 날짜는 선택할 수 없게 막을 수 있을 것 달력 라이브러리는 생각 보다 많았는데 그 중 내가 구현하고 싶은 기능에 맞는 라이브러리 인 react-date-range 를 선택했다! react-date-range hypeserver.github.io 그리고 날짜를 받으면서 원하는 형식으로..