릴리코더의 골방 릴리코더의 골방

NextJS

• [ORM] Prisma Schema 작성하여 DB 세팅하기 (with. NextJS)

  프레임워크/NodeJs 2024. 8. 7. 23:42

  ORMObject Relational Mapping 객체 관계 매핑은 데이터베이스와 객체 지향 프로그래밍 언어 간의 호환되지 않는 데이터를 변환하는 프로그래밍 기법이다.  객체 관계 매핑 - 위키백과, 우리 모두의 백과사전위키백과, 우리 모두의 백과사전. 객체 관계 매핑(Object-relational mapping; ORM)은 데이터베이스와 객체 지향 프로그래밍 언어 간의 호환되지 않는 데이터를 변환하는 프로그래밍 기법이다. 객체 지향ko.wikipedia.org  해당 글은 개인 프로젝트를 만들면서 공부하고 적용한 내용을 작성한 글입니다. 그러므로 Prisma의 Schema 모든 기능이 작성되어 있지 않습니다. 모든 기능에 대한 내용은 아래 공식문서 링크에서 확인해 주세요.https://www.pri..

  Read More
• [NextJs] Vercel로 SSG 프로젝트 배포하기

  프레임워크/React(NextJs) 2022. 10. 14. 21:33

  Vercel로 프로젝트 배포하기 일정 조건 이내에서 무료로 프로젝트를 배포할 수 있는 Vercel로 이번에 만든 SSG 블로그 프로젝트를 배포해보기로 했다. Vercle 배포 사이트 Develop. Preview. Ship. For the best frontend teams – Vercel Deploy web projects with the best frontend developer experience and highest end-user performance. vercel.com 우선은 vercel을 사용하기 위해 github 계정을 연결해서 회원가입을 했다. Project 만들기 1. Add New에서 Project를 선택 2. GitHub 프로젝트를 연결해서 가져오기 3. 프로젝트의 이름을 변경하고..

  Read More
• [NextJs] Markdown 포스팅을 정적 페이지(SSG)로 배포하기

  프레임워크/React(NextJs) 2022. 10. 8. 20:36

  원티드 프리온보딩 챌린지 10월 2일차 과제 이번 과제는 마크다운으로 작성한 파일을 Nextjs를 통해 정적 페이지로 배포하는 것이다. 과제 주요 내용 ✏️ 사용자는 root 경로의 `/__posts` 폴더에 작성된 마크다운 파일(.md)를 작성할 수 있어야 한다. ✏️ 해당 파일은 마크다운 본문과 게시물에 대한 meta data를 담을 수 있어야 한다. ✏️ 블로그에 작성된 게시물을 렌더링하는 `목록 페이지`와 개별 게시물을 렌더링하는 `상세 페이지`로 나누어 작성한다. : `/` - 목록 페이지 : `/[id]` - 상세 페이지 진행 과정 이번에는 과제를 하는 과정을 적어보려고 한다. 해결해 나가는 과정의 프로세스가 중요하다고 하심 우선 과제를 받았을 때 가장 먼저 떠올랐던 것은 root 경로에 있는..

  Read More
• CSR/SSR (with Next.js)

  프레임워크/React(NextJs) 2022. 10. 8. 01:54

  원티드 프리온보딩 챌린지 10월 과제 1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. 2. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요. 3.Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요. - https://nextjs.org/docs/getting-started (Next.js 세팅 가이드) - https://github.com/vercel/next.js/ (Next.js Github 레포지토리)..

  Read More
• [Recoil] Next.js + Recoil + typescript 적용하기

  프레임워크/React(NextJs) 2022. 5. 29. 22:13

  Next.js를 typescript로 설치해줍니다 $ npx create-next-app@latest --typescript recoil 모듈 설치 $ npm install recoil pages/_app.tsx 파일에서 RecoilRoot를 불러와 Component를 감싸줍니다 import type { AppProps } from 'next/app'; import { RecoilRoot } from 'recoil'; import '../views/styles/globals.css'; const MyApp = ({ Component, pageProps }: AppProps) => { return ( ); }; export default MyApp; recoil 상태 관리 파일 생성해서 아래 내용을 입력합..

  Read More