인프런 '박용주 지식 공유자님' 의 [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 페이지 라우팅하기 ▼ 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를 가져옴 - 네트워..