전체 글 (76) 썸네일형 리스트형 [TIL] nextJS에 이미지 url 넣기 /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: 'https', hostname: 'i.example', }, ], }, }; export default nextConfig; 이미지가 말썽.. next.config.mjs 에 찾아서 들어가보니 해결.. [TIL] Next.JS에서 제공하는 4가지 렌더링 기법 웹 렌더링(Web Rendering)이란 웹 페이지를 사용자에게 보여주는 과정을 의미한다. 이 렌더링 방식에 따라서 로딩 속도, 검색 엔진 최적화(SEO), 사용자 경험 등이 달라진다. Client - Side - Rendering (CSR) 브라우저에서 JavaScript를 사용해서 웹페이지를 렌더링 하는 방식이다. 사용자의 브라우저가 서버로부터 데이터를 받아와서 웹 페이지를 직접 생성한다. 렌더링의 주체는 클라이언트이다. build 할 때만 fetch 되기에 한번에 모두 다운로드해서 서버부하가 적고 상호작용이 높다. 하지만 TTV(Time To View)가 길어서 검색 엔진 최적화(SEO)에 좋지 않다. 좋은 비유를 봤기에 참고해서 가져와보자면 CSR은 Server로부터 빈 그릇(빈 HTML)과 요리.. [TIL] Next.js에서 Routing 설치하기 npx create-next-app@latest 터미널에 이렇게 입력하고 이렇게 다 Yes로 하면 다음과 같은 파일 구조가 보인다. 여기서 layout, page 이 두 컴포넌트를 굉장히 많이 다룬다! 1. layout.tsx 2. page.tsx 3. package.json scripts 부분에는 dev / build / start가 있다. 우리가 개발하는 중 사용하게 될 코드 npm run dev production 레벨로 배포하기 전 필요한 빌드 작업 과정을 실행! build하지 않고 start를 하는 경우 실행될 수 없다. npm run build 만들어진 build 파일을 이용하여 실행시키는 방법 npm run start dynamic routing const Router = () =>.. 이전 1 2 3 4 5 6 7 ··· 26 다음
