14버전이 되면서 라우팅 방식이 바뀐 Next.js 14 의 페이지 라우팅와 동적 라우팅, 404페이지 변경방법을 알아보고자 한다. 라우팅의 경로에 해당하는 파일들은 page.* 가 파일이름이 되어야 한다. 루트경로( / ) 가장 루트 경로는 src/app/page.tsx 폴더이름경로 ( /about ) /about 경로에 해당하는 페이지를 만들고 싶다면, src/app/about/page.tsx 동적라우팅 (/about/:id) about/ 뒤에 아이디가 오는 페이지를 만들고 싶다면, src/app/about/[id]/page.tsx 타입스크립트에서는 params의 타입을 지정해주지 않으면 에러가 난다. 바인딩 요소 'params'에 암시적으로 'any' 형식이 있습니다.ts(7031) 아래처럼 타입을..

인프런 '박용주 지식 공유자님' 의 [Next.js 시작하기] 강의를 수강하고 작성한 게시글입니다. Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의 Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., - 강의 소개 | 인프런... www.inflearn.com DetailSection detailSection 추가하기 ▼ myapp/components/home/MapSection.tsx 더보기 더보기 import styles from '../../styles/detail.module.scss'; import { IoIosArrowUp } from 'react-icons/io'; const DetailSection = () =>..

인프런 '박용주 지식 공유자님' 의 [Next.js 시작하기] 강의를 수강하고 작성한 게시글입니다. Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., - 강의 소개 | 인프런...www.inflearn.com네이버지도 API를 위한 타입 정의 패키지 설치 npm install --save @types/navermaps네이버지도 API 불러오기▼ components/MapSection.tsx  ▽ Map 컴포넌트를 호출 import Map from './Map';const MapSection = () => { return ( { con..

인프런 '박용주 지식 공유자님' 의 [Next.js 시작하기] 강의를 수강하고 작성한 게시글입니다. Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의 Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., - 강의 소개 | 인프런... www.inflearn.com Header 컴포넌트 작성하기 ▼ components/Header.tsx import Link from 'next/link'; import styles from '../src/styles/header.module.scss'; interface Props {} const HeaderComponent = ({}: Props) => { return ( ); }; export ..

인프런 '박용주 지식 공유자님' 의 [Next.js 시작하기] 강의를 수강하고 작성한 게시글입니다. Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의 Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., - 강의 소개 | 인프런... www.inflearn.com getStaticProps gatStaticProps 함수에서 리턴된 props를 받아서 pre-rendering할 수 있다 ▼ src/pages/section1/getStaticProps.tsx ▽ 2초 대기 후 랜덤한 값을 data로 리턴하고 그 값을 받아 화면에 출력하는 기능을 한다. import type { NextPage } from 'next'; interfa..

인프런 '박용주 지식 공유자님' 의 [Next.js 시작하기] 강의를 수강하고 작성한 게시글입니다. Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의 Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., - 강의 소개 | 인프런... www.inflearn.com 프로젝트 생성 $ npx create-next-app@latest --typescript ESLint # ESLint : 코드에 대한 룰 $ npm rin lint - .eslintrc.json 파일이 자동 생성되며, 권장 사항인 next/core-web-vitals 라는 룰로 설정된다. Prettier # Prettier : 코드를 좀 더 깔끔하게 만들어주는 code ..

[노마드 코더 - NextJS 시작하기] 강의를 수강하고 강의 내용을 바탕으로 작성한 글입니다. NextJS 시작하기 – 노마드 코더 Nomad Coders The React Framework for Production nomadcoders.co getServerSideProps - SSR를 선택할 수 있게 한다. ▼ myapp/src/pages/index.tsx import { GetServerSideProps } from "next"; /* ... */ const Home = ({ results }: { results: movie[] }) => { return ( {results?.map((movie) => ( /* ... */ export const getServerSideProps: GetServ..

[노마드 코더 - NextJS 시작하기] 강의를 수강하고 강의 내용을 바탕으로 작성한 글입니다. NextJS 시작하기 – 노마드 코더 Nomad Coders The React Framework for Production nomadcoders.co Layout - 모든 페이지에서 공통으로 사용하는 header, footer 등을 공통 레이아웃으로 설정하여 반복된 코드를 줄일 수 있다. ▼ myapp/components/layout.tsx import NavBar from "./NavBar"; const Layout = ({ children }) => { return ( {children} ); }; export default Layout; - 공통으로 들어가는 NavBar를 레이아웃 안에 넣어줌 - pro..

[노마드 코더 - NextJS 시작하기] 강의를 수강하고 강의 내용을 바탕으로 작성한 글입니다. NextJS 시작하기 – 노마드 코더 Nomad Coders The React Framework for Production nomadcoders.co 페이지 라우팅하기 ▼ myapp/src.index.tsx const Home = () => { return ( Home ); }; export default Home; ▼ myapp/src.about.tsx const About = () => { return ( About ); }; export default About; NavBar 컴포넌트 ▼ myapp/components/NavBar.tsx import Link from "next/link"; const N..

노마드 코더 NextJS 시작하기 강의를 수강하고 강의 내용을 바탕으로 작성한 글입니다. NextJS 시작하기 – 노마드 코더 Nomad Coders The React Framework for Production nomadcoders.co 라이브러리 vs. 프레임워크 # 라이브러리 : 개발자로서 사용하는 것 - 개발자가 라이브러리를 불러와서 라이브러리를 사용해서 무언가를 함 # 프레임워크 : 개발자의 코드를 불러옴 - 코드를 적절한 위치에 넣기만하면 코드를 불러와서 동작하게 함 CSR vs. SSR # CSR (Client Server Rendering) : 브라우저가 자바스크립트를 가져와서 클라이언트의 자바스크립트가 모든 UI를 생성함 - 브라우저가 HTML을 가져올 때는 빈 div를 가져옴 - 네트워..