프로그래밍/Next.js
-
[Next.js] Jest + Typescript + Next.js프로그래밍/Next.js 2023. 12. 7. 11:37
개요 설치 및 적용 Get Started install) pnpm create next-app add dependencies) pnpm add -D @testing-library/jest-dom @testing-library/react @testing-library/user-event jest jest-environment-jsdom ts-jest script) // package.json "scripts": { ... "test": "jest", "test:watch": "jest --watchAll" }, jset config) // jest.config.js const nextJest = require('next/jest') const createJestConfig = nextJest({ dir: ..
-
[Next.js] 패키지 가져오기 최적화프로그래밍/Next.js 2023. 12. 5. 08:40
개요 배럴(barrel) 파일의 활용 modularizeImports optimizePackageImport Next.js(3.5) 업데이트 내용 (원본) 22% 더 빠른 로컬 서버 시작: 앱 및 페이지 라우터로 더 빠르게 반복 29% 더 빠른 HMR(Fast Refresh): 변경 사항을 저장할 때 더 빠른 반복을 위해 40% 적은 메모리 사용량: 실행 시 측정next start 최적화된 패키지 가져오기: 인기 있는 아이콘 및 구성 요소 라이브러리를 사용할 때 더 빠른 업데이트 next/image개선 사항: , 아트 디렉션 및 다크 모드 지원 그리고 438개 이상의 버그가 패치 배럴(barrel) 파일의 활용 자바스크립트에서 배럴 파일이란 단일 파일에서 여러 모듈을 그룹화하여 내보내는 방법 예시) ui..
-
[드림코딩엘리] Next.js 환경설정프로그래밍/Next.js 2023. 8. 1. 11:25
개발환경 Set Up 리액트 개발 환경과 동일하다 vscode(코드에디터) + node.js + git + yarn or npm 공식사이트도 한번보고 꼭 북마크 해야할 페이지를 봅시다 공식사이트 가서 홍보하고 있는 글도 한번 읽어보면서 메리트가 뭔지 알아보고 어떻게 접근하면 좋을지 알아보자 리액트를 기반으로 풀스택 웹앱을 만들기 위해 사용할 수 있는 프레임워크임 강력한 라우팅과 레이아웃고 제공해주고 복잡한 인터페이스를 만들어도 사용자에게 전달하는 자바스크립트의 양은 최소화 할 수 있고 폰트와 이미지에 대한 최적화 지원 리액트 최신버전에 추가된 서버컴포넌트를 이용해서 서버위주로 만들 수 있고 동적으로 html을 스트리밍할 수도 있다?? 어쨋든 풀스택하는데 간편하다 빠르게 강력한 웹을 만들 수 있고 사용자가..
-
[드림코딩엘리] Next.js 주요개념 (2강)프로그래밍/Next.js 2023. 8. 1. 10:01
개념정리 Next.js와 React 의 차이점 라이브러리와 프레임워크의 차이라고 볼 수있다 프레임워크는 큰 단위의 솔루션을 제공해준다. 골격이 정해져있다 반면에 라이브러리는 큰 골격이 정해져 있지는 않지만 여러기능에 따라서 사용자가 원하는대로 사용하면 된다는 느낌 프레임워크인 Next.js는 리액트로 웹앱을 개발하는데 리액트 만으로는 힘든 정말 많은 것들을 가능하게 해주기 때문에 필요성이 강조된다. 프레임 워크의 이점 : 서버사이드 랜더링(+하이브리드 랜더링), 풀스택 파일을 베이스로 한 라우팅, seo솔루션 제공 Next.js의 철학과 잡고가야 할 포인트 버셀에서 2016년 최초공개 pass(cloud flatform as at service) : 클라우드에서 서비스를 배포하려면 알아야 할 갖은 기능들..