FrontEnd83 [ Next.js ] Next.js 란？ 1. Next.js 는 무엇인가? Vercel에서 release한 오픈 소스로, (Vercel 은 미국의 클라우드 회사로, PaaS(Cloud Platform as a Service)를 제공한다.) Next.js는 풀스택 웹 개발을 위한 여러 추가 기능을 지원하는 리액트 프레임워크이다. 그렇다면 리액트는 무엇일까？ [ React ] React 란？ 간단하게 요약하면, 리액트는 컴포넌트 단위로 UI를 쉽게 만들 수 있게 하는 자바스크립트 라이브러리이다. Framework vs Library - 프레임워크와 라이브러리의 차이 Next.js는 다음의 원칙들을 기반으로 두고 있다고 한다. 1. out-of-the-box functionality requiring no setup 2. JavaScript ever.. 2023. 12. 30. [ Next.js ] next/document Head vs next/head Head Next.js로 계발을 하는 경우가 많은데, Head가 document에도 있고 head에도 있어서 둘의 차이점이 궁금해졌습니다. 그리고 어느 기준에 따라 나눠서 사용하는지도 궁금해졌습니다. 둘 다 html 의 를 가리키는 건 맞는데, next/document 의 Head 는 Custom Document를 만들 때, import 해오는 태그로, 모든 페이지에서 렌더링되기 때문에, 모든 페이지의 공통되는 정보만을 입력해야 합니다. The component used in _document is not the same as next/head. The component used here should only be used for any code that is common for all pages. For al.. 2023. 12. 24. [ Next.js ] 절대경로 설정하기 import Something from 'components/common/layout' { ... "compilerOptions":{ ... "baseUrl": "./src", } } https://velog.io/@himprover/Next.js%EC%97%90%EC%84%9C-%EC%8D%A8%EC%84%9C-import%ED%95%98%EA%B8%B0-%EB%B3%84%EC%B9%AD-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C 2023. 12. 24. [ Next.js ] Next.js v12 프로젝트 세팅하기 Setup 1. Next.js 12버전 설치하기 npx create-next-app@12.3.4 2. TypeScript 설치하기 터미널을 통해 tsconfig.json 파일 생성 후, touch tsconfig.json yarn dev 실행 yarn dev TypeScript를 사용하려고 하지만 필요한 패키지가 설치되어 있지 않은 것 같다는 메세지와 함께 typescript에 필요한 패키지를 설치 해준다. 3. eslint, prettier 설치 (eslint는 이미 설치되어 있음) yarn add -D prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-import eslint-plugin-react eslint-plugin-re.. 2023. 12. 24. [VSCode] VSCode 단축키 shortcuts 2023. 12. 24. vite 사용 시 localhost 변경 // package.json "scripts": { "dev": "vite --port 3000", }, 2023. 12. 17. 이전 1 2 3 4 5 6 ··· 14 다음
