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 14버전으로 포트폴리오를 제작하려고 한다. 이번 기회에 Next.js 14를 차근차근 익히고 싶다. 포트폴리오는 내 개인 프로젝트이니까, 궁금했거나 하고 싶었던 기능이나 기술 들을 활용할 예정이다. 그 과정에서 겪는 것들을 블로그에 정리하면 좋을 것 같아서 글을 작성해보고자 한다. 첫번째 게시글은 Notion api에 대한 글이다. Notion을 DB처럼 쓸 수 있도록, Notion api를 사용해보겠다. 평소 Notion을 항상 켜두며 작업할 정도로 자주 쓰는데 , Notion api가 있다는 것을 처음 알았다. 🙀 하드코딩으로 포트폴리오 내부 내용을 작성하기 보다는, 내가 변경하거나 추가하고 싶을 때 Notion에서만 직접 수정하면 되어서 이 방법을 선택하게 되었다. API 통합 생성하..
인프런 '박용주 지식 공유자님' 의 [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..
[노마드 코더 - 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 라이브러리 vs. 프레임워크 # 라이브러리 : 개발자로서 사용하는 것 - 개발자가 라이브러리를 불러와서 라이브러리를 사용해서 무언가를 함 # 프레임워크 : 개발자의 코드를 불러옴 - 코드를 적절한 위치에 넣기만하면 코드를 불러와서 동작하게 함 CSR vs. SSR # CSR (Client Server Rendering) : 브라우저가 자바스크립트를 가져와서 클라이언트의 자바스크립트가 모든 UI를 생성함 - 브라우저가 HTML을 가져올 때는 빈 div를 가져옴 - 네트워..