Next.js 12 버전의 _document.js와 _app.js 알아보기

안녕하세요? 요즘은 React 개발을 무조건 Next.js로 하는 추세인데요. 제가 다른 블로그에 쓴 좋은 글이 있어 소개하려고 합니다. Next.js에서 _document.js와 _app.js의 차이점 파헤치기 Next.js에서 _document.js와 _app.js의 차이점 파헤치기 Next.js에서 _document.js와 _app.js의 차이점 파헤치기 mycodings.fly.dev Next.js에서 _app.js 파일의 역할은? Next.js에서 _app.js 파일의 역할은? Next.js에서 _app.js 파일의 역할은? mycodings.fly.dev Next.js에서 _document.js 파일의 중요성과 역할 Next.js에서 _document.js 파일의 중요성 Next.js에서 _d..

• format_list_bulleted 코딩/React
• · 2022. 11. 15.
• textsms

Remix Framework Dynamic Routing 살펴보기

Remix Framework Dynamic Routing, 리믹스 프레임워크 다이내믹 라우팅 안녕하세요? 이번 시간에는 Remix 프레임워크의 다이내믹 라우팅에 대해 살펴보겠습니다. 지난 시간까지 배운 Nested Routing에 더해서 웹 앱에서는 라우팅으로 정보를 교환해야 할 때가 있습니다. 예를 들어 페이지 넘버나, 제품 ID, 포스트 목록 번호가 대표적이죠. Next.JS에서는 어떻게 했는지 비교해서 살펴보는 것도 좋을 듯싶습니다. 먼저, Next.JS의 예를 살펴보겠습니다. 아래 예를 보시면 prisma를 이용해서 id에 해당하는 포스트를 얻는 함수인데요. /post/[id]. tsx export const getServerSideProps: GetServerSideProps = async ({..

• format_list_bulleted 코딩/React
• · 2022. 3. 19.
• textsms

Remix 프레임워크 Nested Routing 파헤치기

Remix Framework File-base Routing and Nested Routing ( 리믹스 프레임워크 파일 베이스 라우팅, 네스티드 중첩 라우팅) 안녕하세요? 오늘은 지난번에 간단하게 알아봤던 Remix 프레임워크에 대해 좀 더 심도 있게 들어가 보도록 하겠습니다. NextJS가 처음 나왔을 때 리액트쪽에서는 굉장한 반향이 일어났었는데요. 바로 NextJS의 파일 베이스 라우팅이 그 주인공이었습니다. 물론 Static Site Generating과 Server Side Rendering도 중요한 기능이었지만요. 일반적으로 리액트 라우터를 쓰는 SPA 수준의 리액트에서는 라우팅 하는데 꾀나 고달팠는데요. NextJS의 파일 베이스 라우팅의 소개로 그 수고스러움이 싹 사라졌다고 생각합니다. 리..

• format_list_bulleted 코딩/React
• · 2022. 3. 17.
• textsms

Supabase와 NextJS로 블로그 만들기 - Search

안녕하세요? 이번 시간에는 Supabase 블로그 마지막 시간이 Search 기능 추가 시간입니다. 블로그 포스트의 생성, 조회, 업데이트, 삭제 기능을 완성했는데요. 남은 건 바로 검색 기능입니다. /pages/post/search.tsx 파일로 진행할 예정입니다. 일단 User-Authenticated 템플릿을 아래와 같이 준비합시다. import React, { useState } from "react"; import Link from "next/link"; import { GetServerSideProps } from "next"; import { useMessage } from "../../lib/message"; import { useFormFields } from "../../lib/util..

• format_list_bulleted 코딩/React
• · 2022. 3. 1.
• textsms

TailwindCSS 3.0과 Next.JS에서 Dark 모드 적용하기

안녕하세요? 오늘은 TailwindCSS 3.0과 Next.JS에서 다크 모드(Dark Mode) 적용하는 방법에 대해 알아보겠습니다. 먼저, 빈 템플릿을 설치해 볼까요? npx create-next-app tailwind-dark-mode 열심히 설치하고 있네요. 이제 TailwindCSS 최신판을 설치해 봅시다. cd tailwind-dark-mode npm i -D tailwindcss@latest postcss@latest autoprefixer@latest TailwindCSS는 postcss와 autoprefixer 패키지가 필요합니다. 같이 설치해주셔야 합니다. 그다음에 TainwindCSS 초기화 명령을 실행시킵시다. npx tailwindcss init -p TailwindCSS 초기화 ..

• format_list_bulleted 코딩/React
• · 2022. 2. 25.
• textsms

Supabase와 NextJS로 블로그 만들기 - Search

안녕하세요? 이번 시간에는 Supabase 블로그 마지막 시간이 Search 기능 추가 시간입니다. 블로그 포스트의 생성, 조회, 업데이트, 삭제 기능을 완성했는데요. 남은 건 바로 검색 기능입니다. /pages/post/search.tsx 파일로 진행할 예정입니다. 일단 User-Authenticated 템플릿을 아래와 같이 준비합시다.import React, { useState } from "react";import Link from "next/link";import { GetServerSideProps } from "next";import { useMessage } from "../../lib/message";import { useFormFields } from "../../lib/utils";im..

• format_list_bulleted 코딩/React
• · 2022. 2. 21.
• textsms