[Next.js] Sidebar 만들기 + code review
라이브러리 설치 # 여러 추가 hook을 사용할 수 있다. npm install usehooks-ts 작성 코드 "use client"; import Link from "next/link"; import { Plus } from "lucide-react"; import { useLocalStorage }...
[Next.js] Auth 관리 라이브러리 Clerk
회원가입을 쉽게 만들어주는 라이브러리 Clerk 이 라이브러리를 사용하면 쉽게 회원가입 페이지를 생성할 수 있다. 설치 npm install @clerk/nextjs env key발급 및 설정 clerk.com을 회원가입하고 프로젝트용 key를 발급받자 root경로에 `.env’파일 생성...
[Next.js] 폰트 설정 방법 정리
Local Font 설정방법 localfont설정 및 tailwind css와 결합 하는 방법 import localFont from "next/font/local" import { cn } from "@/lib/utils" // shadcn 설치시 사용가능 shadcn설치를 하지않았으면 twMerge를 쓰거나 링크 참조...
[Next.js] Metadata 설정 방법 정리
Metadata 설정 방법 (title, description, logo 등) //root 경로의 layout.tsx export const metadata: Metadata = { title: { default: siteConfig.name, // %s는 현재 페이지 제목을 노출 만약 사이트 내 About...
[Next.js] Shadcn을 사용해보자
Shadcn 사용 방법 디자인 편의성을 위해 shadcn 컴포넌트를 사용해보자 npx shadcn-ui@latest init 생성옵션 설명 Typescript 사용 유무 style 설정 Default/Newyork (디자인에 약간의 차이가 있다.) global CSS 파일 위치 프로젝트 생성시에는...
[Next.js] Nextjs의 라우팅방식
폴더명이 url Path로 자동으로 설정된다. 폴더 구조로 자동으로 route를 해준다. app/ 안에 폴더를 생성하고 그 안에 page.tsx를 만들어 페이지를 구성하는 기본 함수를 설정하면 url({domain}/{path}) 의 path가 폴더 명으로 자동으로 설정된다....
[Next.js] 프로젝트 초기설정
Next.js를 왜 쓰는가? SSR (Server Side Rendering) 구현 가능 CSR대비 첫 페이지 로딩속도 개선 검색 노출 최적화 가능 (SEO) 풀스텍 프레임워크 (Front+ Back) 리엑트 문법을 그대로 사용할 수 있다. 이외에도...
[React]ESLint Prettier 세팅방법
목적 Typescript기반 react admin page생성하면서 배운 TIL을 기록하기 위한 페이지 Typescript 기반 프로젝트 생성하기 npx create-react-app my-app --template typescript ## ESLint, Prettier 세팅 우선 vscode에 익스텐션을 설치해준다. 다음으로는 생성한 프로젝트에서...
[React]Node+Express서버와의 연동 해보기
Node.js란? 크롬의 자바스크립트 실행 엔진인 V8을 기반으로 작성된 런타임 환경이다. 웹사이트를 구성하는 기본적인 요소인 JS는 오랜 세월 동안 발전해오면서 브라우저의 자바스크립트 실행 엔진이 발전되어왔다. 그리고 이러한 엔진의 성능으로 Js로 작성된...
[React]PWA를 만들어보자
PWA란? PWA(Progressive Web App)은 모바일 기기에서 웹엡을 네이티브 앱처럼 사용할 수 있도록 제공하는 웹앱이다. 네이티브 앱과 유사한 사용자 경험을 제공하기 때문에 여러 장점을 가지고있다. PWA의 장점 설치 마케팅 비용이 적다...