Next.js
1.Next.js 13 배워보기
리액트의 단점을 보완해줄 수 있다는 Next.js 에 궁금증이 생겨, 강의를 통해 배운 내용을 토대로 정리한 내용입니다. 1. 설치하기 터미널에 npx create-next-app@latest 명령어를 입력해 프로젝트를 생성해 줍니다. 타입스크립트와 같이 사용하고
2.Next.js 13 - CSS 모듈
Next.js에서 css modules 방법으로 스타일을 적용하는 방법을 알아보겠습니다. 모듈로 CSS를 설정하기 위해서는 파일명을 <파일명>.module.css 패턴으로 생성해주어야 합니다.NavBar.module.css 파일 안에 nav라는 클래스명의 스타일이
3.Next.js 13 - Styled JSX
Styled JSX는 Next JS의 고유한 방법이라고 할 수 있는 스타일 적용 방법입니다. ✏️ style 작성 방법 Return 해주는 jsx 안에서 ``태그를 작성해 줍니다. 태그 안에 jsx를 prop으로 넣어줍니다. 태그 사이에 중괄호를 열어주고 백틱 기호
4.Next.js 13 - 전역 스타일 지정
Next.js 에서 font-size나 font-family 등과 같은 글로벌 스타일을 적용해 주고 싶을때 설정해주는 방법에 대해서 알아보겠습니다. ☝🏻 styled jsx에 'global' prop 추가 첫 번째 방법으로 styled jsx에 글로벌 프롭을 추가
5.Next.js 13 - 동적으로 title 변경하기
페이지 이동 시 해당 페이지마다 헤더의 타이틀 부분을 동적으로 변경해주는 방법에 대한 설명입니다. Next.js 공식문서에서는 generateMetadata 기능을 활용하여 메타 데이터를 동적으로 반환하고 설정해 줄 수 있다고 안내되어 있습니다. 공식문서에서 해당
6.Next.js 13 - Redirect & Rewrite(API key 숨기기)
API keys를 숨기지 않는 redirect가 있습니다. ✏️ Redirect Next.js는 Redirection을 허용합니다. Redirection을 설정하기 위해서 next.config.js 파일에 아래와 같은 구조로 작성해줄 수 있습니다. source를
7.Next.js 13 - 서버에서 데이터 가져오기(SSR)
Next.js 13은 애플리케이션에서 데이터를 가져오고 관리하는 새로운 방법을 도입했습니다. 아래는 서버 구성요소에서 데이터를 fetch하여 가져오는 방법을 설명한 글입니다. 업데이트되기 이전에는 getServerSideProps 함수를 사용하여 해당 함수안에서 코드
8.Next.js 13 - Dynamic Routes
동적으로 URL을 이동시켜주기 위해서 create-react-app의 react-router-dom에서는 URL을 movies/:id 이런식으로 지정해 주었습니다. 하지만 Next.js에는 router가 없기 때문에 기존 리액트와는 다른 방법으로 URL을 이동시켜 줍
9.Next.js 13 - Notion Database 사용하기(1)
노션 API를 활용하여 Next js 프로젝트에 노션 데이터베이스를 연결시켜 컨텐츠를 생성하고, 저장하는 방법을 간단하게 정리한 내용입니다.노션 아이디가 없으신 분들은 먼저 노션 계정을 만들어야 합니다. 노션 아이디를 만들었다면 로그인 후 프로젝트의 데이터베이스로 활
10.Next.js 13 - Notion Database 사용하기(2)
이전 글에서는 노션 데이터베이스를 활용하여 노션 DB에 내용을 추가하는 방법을 알아보았고, 이번에는 DB에서 데이터를 가져와서 화면에 보여줄 수 있는 방법에 대해 간단하게 정리한 글 입니다. 💁🏻♀️ 1. app / page.tsx 위의 사진은 메인 페이지에서
11.Next.js 13 - PlanetScale & Prisma 사용하기(1)
프론트엔드 개발자가 개인 프로젝트를 진행할 때 DB에 대한 고민을 덜어줄 서버리스 DB를 제공하는 PlanetScale과 프로젝트와 DB를 연결시켜 주는 ORM인 Prisma를 활용하여 CRUD를 적용할 수 있는 방법에 대해서 간략하게 정리한 글 입니다. step 0
12.Next.js 13 - PlanetScale & Prisma 사용하기(2)
💁🏻♀️ Schema 추가하기 이전 글에서 만들어 둔 products 테이블에 새로운 스키마를 추가하고 싶은 경우 아래와 같이 설정해 줄 수 있습니다. 우선 메인 브랜치에서는 설정할 수 없어 새로운 브랜치를 생성해야 합니다. Branches 탭에서 New b