Next.js 14버전으로 포트폴리오를 제작하려고 한다. 이번 기회에 Next.js 14를 차근차근 익히고 싶다. 포트폴리오는 내 개인 프로젝트이니까, 궁금했거나 하고 싶었던 기능이나 기술 들을 활용할 예정이다. 그 과정에서 겪는 것들을 블로그에 정리하면 좋을 것 같아서 글을 작성해보고자 한다. 첫번째 게시글은 Notion api에 대한 글이다. Notion을 DB처럼 쓸 수 있도록, Notion api를 사용해보겠다. 평소 Notion을 항상 켜두며 작업할 정도로 자주 쓰는데 , Notion api가 있다는 것을 처음 알았다. 🙀 하드코딩으로 포트폴리오 내부 내용을 작성하기 보다는, 내가 변경하거나 추가하고 싶을 때 Notion에서만 직접 수정하면 되어서 이 방법을 선택하게 되었다. API 통합 생성하..

도서 리액트를 다루는 기술 | 김민준 을 읽고 작성한 게시글입니다. 리액트를 다루는 기술(개정판) 개발은 언제나 즐겁고 재밌어야 한다는 생각을 갖고 있는 개발자이며, IT 기술을 가르치는 것을 굉장히 좋아하는 교육자이다. 또한, 사용자를 행복하게 만드는 서비스를 만드는 것이 가장 중요 books.google.co.kr 리액트 프로젝트에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 한다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 한다. 요청이 성공하면 서버에서 받아온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 한다. 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동..

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

인프런 장기효(캡틴판교) 님의 [ 타입스크립트 입문 - 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다. 타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의 타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관 www.inflearn.com 타입 추론 (Type Inference) - 변수를 선언하거나 초기화 할 때 타입이 추론된다. - 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어난다. - 아래 코드에서 x의 타입을 지정하지 않아도 number로 간주된다. let x = 2; Best C..

인프런 장기효(캡틴판교) 님의 [ 타입스크립트 입문 - 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다. 타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의 타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관 www.inflearn.com 클래스 # 타입스크립트에서 클래스 선언하기 class Person2 { private name: string; public age: number; readonly log: string; constructor(name: string, age: number) { this.name = name; thi..