JudithHopps JudithHopps

next.js 이미지 Next.js는 이미지와 같은 정적 자산을 최상위 public디렉토리 아래에 제공할 수 있습니다 . 최적화되지 않은 이미지 일반 HTML을 사용하면 다음과 같이 프로필 사진을 추가합니다. 그러나 이는 다음을 수동으로 처리해야 함을 의미합니다. 다양한 화면 크기에서 이미지가 반응하는지 확인 타사 도구 또는 라이브러리로 이미지 최적화 뷰포트에 들어갈 때만 이미지를 로드합니다. Next.js는 Image이를 처리하기 위해 즉시 사용 가능한 구성 요소를 제공합니다. Next.js는 기본적으로 이미지 최적화도 지원합니다. 이를 통해 브라우저에서 지원하는 경우 WebP 와 같은 최신 형식으로 이미지 크기 조정, 최적화 및 제공이 가능합니다 . 이렇게 하면 뷰포트가 더 작은 장치에 큰 이미지가 ..

next.js 메뉴얼은 다음과 같다. Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 설치 및 세팅 npx create-next-app@latest 프로젝트_이름 create-next-app내부적으로는 Next.js 앱을 부트스트랩하는 이라는 도구를 사용합니다 . 플래그를 통해 이 템플릿을 사용합니다 --example. Next.js의 페이지 pages 폴더 안에 파일을 저장하면 자동으로 페이지가 작동된다. expor..

Next.js에 적용되는 방식 Next.js는 애플리케이션의 개발 및 생산 단계 모두에 대한 기능을 제공합니다. 예를 들어: 개발 단계에서 Next.js는 개발자와 애플리케이션 구축 경험을 최적화합니다. TypeScript 및 ESLint 통합 , 빠른 새로 고침 등과 같은 개발자 경험을 개선하기 위한 기능이 함께 제공됩니다 . 프로덕션 단계에서 Next.js는 최종 사용자와 애플리케이션 사용 경험을 최적화합니다. 성능과 접근성을 높이기 위해 코드를 변환하는 것을 목표로 합니다. 환경마다 고려 사항과 목표가 다르기 때문에 응용 프로그램을 개발에서 프로덕션으로 이동하려면 수행해야 할 작업이 많습니다. 예를 들어 애플리케이션 코드는 컴파일 , 번들 , 축소 및 코드 분할이 필요합니다 . 컴파일이란 ? 개발자..

Next.js Next.js의 정의 Next.js는 빠른 웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 유연한 React 프레임워크 입니다 . 웹 애플리케이션의 빌딩 블록 최신 애플리케이션을 구축할 때 고려해야 할 몇 가지 사항이 있습니다. 와 같은: 사용자 인터페이스 - 사용자가 애플리케이션을 소비하고 상호 작용하는 방법. 라우팅 - 사용자가 애플리케이션의 여러 부분 사이를 탐색하는 방법입니다. 데이터 가져오기 - 데이터가 있는 위치와 데이터를 가져오는 방법. 렌더링 - 정적 또는 동적 콘텐츠를 렌더링하는 시기와 위치. 통합 - 귀하가 사용하는 제3자 서비스(CMS, 인증, 결제 등) 및 연결 방법. 인프라 - 애플리케이션 코드(서버리스, CDN, Edge 등)를 배포, 저장 및 실행하는 곳입니다..

리덕스 라이브러리란? 1. 상태를 체계적으로 관리할 수 있다. >> 프로젝트 규모가 클 때 적합하다. 2. 개발자 도구 지원해준다. 3. 미들웨어를 지원해준다. >> 비동기 작업이 용이하다. react-redux 사용하기 방법 1. 임시함수를 생성한다. import React from 'react'; import Counter from '../components/Counter'; import { connect } from 'react-redux'; import { increase, decrease } from '../modules/counter'; const CounterContainer = ({number,increase,decrease}) => { return ( ); }; const mapState..

immer 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트해 줄 수 있다. immer 사용하지 않고 불변성 유지하기 import React,{useRef,useCallback,useState} from 'react'; const App = () => { const nextId = useRef(1); const [form,setForm] = useState({name: '',userName: ''}) const [data,setData] = useState({array:[], uselessValue:null}) const onChange = useCallback( e => { const {name,value} = e.target; setForm({ ...form, [nam..

npm install gh-page가 다운이 되지 않고 아래와 같이 에러창이 뜨기도 한다. 이럴 땐 -g 명령어를 추가로 적어준다. npm install -g gh-pages --save-dev 그러면 성공적으로 패키지를 다운받을 수 있다. 그 다음 과정은 아래 링크를 참고하길 바란다. https://velog.io/@nemo/github-page-deploy-%EB%B0%B0%ED%8F%AC [React] 깃허브 페이지에 리액트 프로젝트 배포하기 자, 이제 제작한 앱을 깃허브 페이지에 배포해보자.메인 디렉토리 URL : https://{본인아이디}.github.io/서브 디렉토리 URL : https://{본인아이디}.github.io/movie-app우리는 메인이 아닌 서브 디렉토리에 배 velog.io

프로젝트 마무리 파일 정리 1. 컴포넌트 폴더 생성 컴포넌트는 Component 폴더로, Scss는 Scss 폴더로 이동하기 2. App.js 수정 - bulk 데이터 수정 - useReducer => useState로 수정 import React , {useCallback, useRef, useState} from "react"; import TodoTemplate from "./Component/TodoTemplate"; import TodoInsert from "./Component/TodoInsert"; import TodoList from "./Component/TodoList"; const App = () => { const [todos,setTodos] = useState([ { id :1,..