생각보다 어렵지 않았던 IDE에 Continue 플러그인 설치 과정을 간단하게 작성한다.Continue에서는 Anthropic, Azure OpenAI, Amazon Bedrock, Gemini 등 많은 Provider를 제공하고 있다. 난 여기서 OpenAI랑 Anthropic을 가지고 적용해 볼 것이고 지금 쓰고 있는 IDE는 vscode이다. VSCode Extension에서 Continue를 먼저 인스톨해준다. 인스톨하면 Continue를 오른쪽 탭으로 옮기라고 하는데 고분고분하게 시키는 대로 해줬다.  Open AI API Key  먼저 Open AI 플랫폼에 들어가서 로그인하고 설정에 들어간다.  이제 Billing 들어가서 크레딧을 설정해줄건데, 무료 플랜으로 기본 5달러? 지원한다고 했던..

당시 폼의 UI 디자인이 다 같은 작은 모달이었고, 전역에서 상태를 관리할 수 있는 플로우여서 redux-toolkit을 경험해보고자 도입하려고 했었다. 아래까지 작성 후에 UI 디자인이 전면적으로 바뀌어서 페이지 관리하는 방향으로 변경하게 되었는데 당시 작성한 내용을 기록하고 이후 써먹기 위해 저장한다~ 사용하고 있던 Next.js 스펙은 v14 app router, 루트 디렉토리는 src이다.src 내에 다음과 같은 폴더, 파일을 만들고 그 안에 필요한 slice를 조각조각 작성했다.// src/lib/slices/modalSlice.jsimport { createSlice } from "@reduxjs/toolkit";const initialState = { isOpen: false, modal..

box-shadow로 주변을 밝혔다 어둡게 했다 반복하는 것으로 반짝이는 것처럼 연출한 방식을 보고 참고해서 작성했다. 클래스명으로 사용할 배열로 각각 별의 사이즈, 투명도, **애니메이션** (아래에서 내가 정의해서 사용할 것, 이 클래스명에서 이슈가 있었다.... 하단에서 설명할 것)을 선언하고getRandomValue 함수로 별이 뿌려질 랜덤한 갯수를 리턴했다.  페이지의 기본 배경으로 사용할 예정이었기에 사용자가 쓰는 브라우저 창의 크기를 기준으로 별을 뿌려주려고 했는데, window를 참조하려고 하니 window is not defined 에러가 떴다. 찾아보니 nextjs가 ssr로 서버에서 먼저  HTML을 그려놓는데 클라이언트가 window에 접근하기 전에 그려지기 때문에 참조 에러가 나오..

편하게 라이브러리 쓰고싶었는데 내가 원하지 않는 모양 쓰기 싫어서 ㄱ- 일단 utils/calendar/getCalendarDate.ts 를 만들고 그 안에 날짜 계산하는 함수를 작성한다. @date-fns 라이브러리를 사용한 건 처음이라 많은 코드를 구경했고.. 그중에 한 달의 날짜를 주별로 나누어 배열로 반환하는 함수를 작성 한 걸 분석해서 타입을 추가해서 작성했다. 기억이 잘 안나는데 벨로그 글이었던 듯? 제일 이해하기 편하게 작성하셔서 참고해 작성했다.@date-fns 메서드는 공식 문서랑 구글링 번갈아가면서 찾아 사용함 !! // 주를 반환function takeWeek(selectedDate: Date = new Date()): () => Date[] { let date: Date = sta..