목록devCamp(NextJs) (3)
개발일기

개요토스페이먼츠에서 제공하는 결제위젯을 사용하여 결제페이지를 만들었다. 근데 결제페이지만 만들기에는 뭔가 부족한거같아서 추가하고, 추가하고, 추가하다보니 처음 생각했던 것보다 커진것 같다. 그래도 최대한 간단하게 구현해보고자 했다. 배포도 완료 했으니 사용하고자 하는 사람은 아래 링크를 통해서 사용해보면 될것같다. 결제하고자 하는 데이터는 의류로 정했고, 어떠한 db를 사용하지 않고, 대부분 목업 데이터를 사용하였으며, 클라이언트쪽에서 해결하고자 했다. 그래서 새로고침시 데이터가 날아가는 부분도 많이 보여진다. 하지만 나의 실력의 최선을 다해 다른 쪽으로 해결 하려고 노력 했다. 또한 토스페이먼츠에서 제공하는 결제기능은 개발서버에서는 테스트 결제가 가능하지만, 배포 이후에는 테스트 결제가 불가능하다. 내..

1. 다크모드 적용@/components/theme-provider.tsx 파일 추가 하기"use client" import * as React from "react"import { ThemeProvider as NextThemesProvider } from "next-themes"import { type ThemeProviderProps } from "next-themes/dist/types" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children}} @/components/mode-toggle.tsx 파일 추가 하기"use client" import * as React from "react..

개요취업 준비를 하면서 공부도 할 겸 부트캠프에서 운영하는 devCamp에 참여했다. 오전 9 - 12시 까지 진행 하길래 그래도 간단한 프로젝트 될 줄 알았지만, 생각보다 생각할게 너무 많다. 아직도 적응중인 NextJs부터 Shandcn/ui, React-Hook-Form, Zod 까지,, 알아야 할게 투성이었다. 하지만 어쩌겠는가. 해야지. 1. Shadcn/ui Shadcn/ui의 소개를 한번 보자.공식문서의 소개를 직역하자면 디자인 컴포넌트를 자신의 앱에 아름답게 복사하고, 커스터마이징이 가능하고, 오픈소스이다. 대충 이렇게 적혀 있다. 한마디로 디자인 컴포넌트를 간단하게 사용할 수 있다라고 적혀 있는 거 같다. 또한 지원하는 프레임워크(Next.js/Vite/Remix...)가 많아서 다양한 ..