개인프로젝트: VarGen

오픈 AI의 API를 사용해서 개발자를 위한 변수 네이밍 하는 앱을 만들어보고 싶다. 기다려라 곧 만든다?근데 기능 개발이 되는지 안되는지 지금 감이 안와서 디자인이나 그런 거 말고 일단 기능 구현부터 들어가보겠다.

api 통신을 해보자!

프로젝트에 앞서 뉴스를 들고왔다. 오픈 AI API 3.5 출시이건 좋다! 그 전 글들을 보면 알겠지만 API가 지금 Chat GPT 모델과 무관한 3.0 davinci에서 끝났는데 이제 Chat GPT 모델의 전신인 3.5가 출시해 사용할 수 있게 됐다. 똑같은 모델

input으로 입력하여 결과값 가져오기

저번에 했던 부분에 이어서 해보겠다.

전편에서는 stale, fresh 상태와 맞추어 하나의 key의 상태에 따라 재호출을 막거나 설정하는 방법에 대해서 알아봤다.

이제 필수 기능인 GPT 생성 기능을 useQuery로 Get해올 수 있으니 이제 내가 원하는 기능을 어떻게 가져올 지 생각하고, 디자인까지도 봐보자당연히 변수 이름 생성 기능이 메인인데 이거를 어떻게 편한 기능으로서 바꿀 지 생각해봐야한다.전에 했던 것처럼 글을 쓰고

우선 시작하기 전에 변경사항이 있다.API 버전 3.5가 나오면서 새 url과 모델 gpt-3.5-turbo로 변경했다. 저번에 따끈뚱땅 뉴스로 다뤘던 내용인데, api 적용이 그동안 안돼서 골머리 앓고 있다가 여러번 시도 끝에 반환값을 얻는 데 성공해 공유한다.좀 더

전편에서 봤던 것처럼 이제 다크모드를 직접 적용토록 해보자.nextjs와 가장 어울리는 테일윈드를 쓸 것이니 일단 세팅을 해주어야 한다.next.js에 관해 설치법은 여기 공식문서에 있다. 한번 봐보자.npm을 통해 Tailwind에 필요한 설정 파일과 피어 종속 요소

전편에 쓰는 걸 까먹었는데, config 작성하는 게 더 있다.테일윈드 설정파일 tailwind.config.js에 작성할 때, darkMode라는 속성을 또 따로 써줘야한다. 다크모드를 class로 사용한다는 것!전편과 이어서 디자인하는 하는 걸 기록하겠다. 특히 다

여기서 기능 기획을 했던 것 처럼 Create {countVariable} {subject} related variable names with {namingConvention} 이런 식으로 변수화 시켜서 prompt변수에 할당할 것이다! 자연스레 저 변수들을 버튼으로

이제 디자인을 해보자.이제 전 결괏값을 보고, 피그마로 계획한 디자인으로 수정하겠다!메인 제목과 소제목을 작성하고 꾸며보자! 태그 생성 수 다크모드 적용시킨 디자인을 적용해보자.hN 태그에 대한 기본적인 css를 적용해보자.기본적인 디자인은 적용됐으니, 크기와 위치를

일단 먼저 로딩이 되긴 하지만 로딩이 Loading... 이 모양 이따구라 바꿔야된다..! 진짜다!! 그래서 바꾸고 netlify로 배포하겠다.일단 나는 그냥 아무런 애니메이션 없으면 로딩 컴포넌트 자체가 보이는 게 꼴보기 싫다. 그래서 애니메이션이라도 취해서 최면을

베타 서비스를 열고, 디자인 수정이 들어와서 그걸로 글을 써보겠다.이걸 보면 저렇게 글씨가 겹쳐 나오는 경우가 있다. 아마 ChatResponse 컴포넌트에서 글씨 크기 기준이 아닌 각 칸의 폭 기준으로 나열하기 때문에 생긴 문제였다.그렇게 했던 것이 변수 나오는 것이

전편에서 얘기했던 것처럼 클릭 시 복사가 되도록 만들어보겠다.다양한 방법이 있다. Clipboard API의 navigator 인터페이스를 이용한 복사, document.execCommand("copy") 등의 방법들이 있고, 그렇게 사용했었는데 이번엔 외부 라이브러리