개발일기

개요알고리즘을 풀면서 split, slice, splice를 사용하면 금방 풀릴거 같을 문제가 있다. 근데 뭐가 어떤 기능을 하는지 까먹는다. 이런 내가 싫다. 그래서 기록하면서 기억할 수 있도록 적어보려고 한다. split split() 메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눕니다. 공식문서에 나온 설명이다. 한번 하나씩 사용해 보도록 하자. 1. 구분자 사용하지 않기const string = "i like banana"console.log(string.split())// Expected output: [ 'i like banana' ] 어떠한 구분자를 사용하지 않고, split 자체를 사용할 시 string을 담은 배열이 나온다. 그렇다면 구분자를 사용해보자. 2..

개요토스페이먼츠에서 제공하는 결제위젯을 사용하여 결제페이지를 만들었다. 근데 결제페이지만 만들기에는 뭔가 부족한거같아서 추가하고, 추가하고, 추가하다보니 처음 생각했던 것보다 커진것 같다. 그래도 최대한 간단하게 구현해보고자 했다. 배포도 완료 했으니 사용하고자 하는 사람은 아래 링크를 통해서 사용해보면 될것같다. 결제하고자 하는 데이터는 의류로 정했고, 어떠한 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...)가 많아서 다양한 ..

1. 개요 전에 만들었을 때에는 pages를 포함한 주소가 만들어져 마음이 불편 했지만, 찾았다. 최적의 폴더구조를... 현재 만들고 있는 로그인/회원가입 폼이다. shadcn과 react-hook-form, zod를 사용할 예정이고, 차차 블로그에도 올릴 예정이다. 폴더 구조는 이렇다. 2.폴더 구조 전과 다르게 app폴더가 없고 src > pages로 들어간다. 여기에 custom app과 custom document를 만들어서 전역으로 관리해야 되는 것들을 추가할 때 효과적으로 사용하면 되고, src > pages > index.tsx를 만들면 기본 경로가 된다. 3.페이지 라우팅 페이지 라우팅을 하려면 pages폴더안에 라우팅할 폴더를 만들면 가능하다. 나는 signUp 폴더를 생성했고, inde..

react를 사용하면서 나는 보통 라우터 사용 시 파라미터 정보를 가져오기 위해 useParams를 사용했다. 아이디와 매칭 되는 데이터를 불러오기 위해서. 그러면 NextJs에서는 어떻게 아이디를 받을까? 1. useParams 다행히도 next/navigation의 useParams를 사용하여 id값을 받아 올 수 있었다. import { useParams } from "next/navigation"; const page = () => { const param = useParams() console.log(param) 2. params props로 아이디 값을 받아올 수 있다. 똑같은 결과를 얻을 수 있다. const page = ({ params }) => { const id = params;

대부분 알겠지만 NextJs는 폴더명이 라우팅 주소가 된다. app 이라는 폴더의 하위 요소부터 주소명이 될 수 있다. 이것이 페이지 라우팅 이다. 먼저 pages폴더를 생성하고, 그 안에 detail 폴더를 만들었다. 그리고 클릭한 todo의 id에 맞는 정보를 불러와야하기 때문에 [id] 라는 폴더를 만들었다. 이것이 동적 라우팅이다. NextJs 사용하기로 들어가면 http://localhost:3000/pages/detail/1의 주소가 되야하고, SWR 사용하기로 들어가면 http://localhost:3000/pages/detail/2의 주소가 되야되기 때문에 주소가 계속 변동된다. 그렇기 때문에 동적 라우팅을 사용한다. 그러면 디테일 페이지는 무엇으로 이동하는가, 바로 NextJs에서 제공하..

예비군을 갔다와도 알고리즘은 풀어야지,,, 이번 문제는 그렇게 필요없을 수도 있지만 ! 내가 그렇게 까먹고 까먹던 for in, for of 중 for of 를 활용한 문제이다. 그냥 문제를 보고 for of가 생각난게 반가워서 작성한다. 문제 풀이 function solution(arr) { var answer = []; for(const item of arr){ console.log(item) // Expected output: 5 // Expected output: 1 // Expected output: 4 for(let i = 0; i