# Vargen

okko8522

전편에서 얘기했던 것처럼 클릭 시 복사가 되도록 만들어보겠다. 다양한 방법이 있다. Clipboard API의 navigator 인터페이스를 이용한 복사, document.execCommand("copy") 등의 방법들이 있고, 그렇게 사용했었는데 이번엔 외부 라이브러리를 사용해 보도록 하겠다. 바로 react-copy-to-clipboard라는 라이브러리다. react-copy-to-clipboard >Copy to clipboard React component 카피 가능한 리액트 컴포넌트를 사용할 수 있게 만드는 라이브러리다. 각설하고 사용법을 보자. 사용법 1. 설치 npm install react-copy-to-clipboard

okko8522

베타 서비스를 열고, 디자인 수정이 들어와서 그걸로 글을 써보겠다. 문제 발생 이걸 보면 저렇게 글씨가 겹쳐 나오는 경우가 있다. 아마 ChatResponse 컴포넌트에서 글씨 크기 기준이 아닌 각 칸의 폭 기준으로 나열하기 때문에 생긴 문제였다. 그렇게 했던 것이 변수 나오는 것이 통일 돼서 심미성을 좀 높인 것이었는데 저렇게 돼버렸다. 고쳐보자. 해결법 탐색 다양한 해결법을 모색해보자. 줄바꿈 whitespace-normal, break-words 속성같은 걸 넣어서 줄바꿈 하게 만들었다. 심미적으

okko8522

일단 먼저 로딩이 되긴 하지만 로딩이 Loading... 이 모양 이따구라 바꿔야된다..! 진짜다!! 그래서 바꾸고 netlify로 배포하겠다. 로딩 컴포넌트 구현 일단 나는 그냥 아무런 애니메이션 없으면 로딩 컴포넌트 자체가 보이는 게 꼴보기 싫다. 그래서 애니메이션이라도 취해서 최면을 통해 그 기다리는 시간 마저도심심하지 않게 기다리게 만들어야한다. 그래서 애니메이션을 가져올 거시다. 그 중 json으로 애니메이션을 구현하는 Lottie 애니메이션 라이브러리를 이용할 거시다! Lottie json을 가지고 이미지로 구현해주는 라이브러리다. 이걸 왜 쓰냐면 png, jpg보다 압도적으로 파일 크기가 작아서 가볍고, 벡터에 기반하기 때문에 자유로운 크기 조정이 가능하고, 깨지지 않는다. 또 json 형태라 우리도 읽을 수 있는 형태로 관리도 가능하다. 제작도 쉽다고 하는데 제작은 내 영역이 아니라 패쓰. 하겠다!

okko8522

이제 디자인을 해보자. 디자인 하기! 이제 전 결괏값을 보고, 피그마로 계획한 디자인으로 수정하겠다! 제목 및 소제목 생성 메인 제목과 소제목을 작성하고 꾸며보자! 태그 생성 수 다크모드 적용시킨 디자인을 적용해보자. globals.css hN 태그에 대한 기본적인 css를 적용해보자. PromptInput.tsx 기본적인 디자인은 적용됐으니, 크기와 위치를 조정해보자. 완성! 메뉴 디자인 하기 사실 여기는 설명이 필요 없고 자기 입맛대로 만들면 되는 거라 코드만 적겠다. ![](https:/

okko8522

여기서 기능 기획을 했던 것 처럼 Create {countVariable} {subject} related variable names with {namingConvention} 이런 식으로 변수화 시켜서 prompt변수에 할당할 것이다! 자연스레 저 변수들을 버튼으로 만들어 값을 넣을 것이다! 간편 메뉴 구현 이제 버튼 메뉴 및 주제별로 값을 받는 걸 구현하려고 한다. input 없애기 저 변수들을 상태로 만들어야겠지? 그러니 3개의 상태를 만들고 inputValue를 없애보자! input을 없애고, `Create ${countVariable} ${subject} related

okko8522

전편 보강 전편에 쓰는 걸 까먹었는데, config 작성하는 게 더 있다. 테일윈드 설정파일 tailwind.config.js에 작성할 때, darkMode라는 속성을 또 따로 써줘야한다. 다크모드를 class로 사용한다는 것! 전편과 이어서 디자인하는 하는 걸 기록하겠다. 특히 다크모드! 공통 CSS: bg-primary bg-primary라는 레이아웃에 적용할 공통 클래스를 작성할 것이다. 전 편에서 살짝 말했는데 테일윈드의 기본 작성법은 className에 테일윈드의 전문 용어에 해당하는 클래스를 작성해줬지만 재사용, 가독성 해침 등의 이유로 @apply 를 이용하여 공통 CSS를 적용할 수 있다. 봐보자! 이런 식으로 사용하고, 이렇게 사용하면 된다. 이제 hN, p 등 테일윈드 용어를 작성해 보면서 디자인해보자. 팁이 하나 있는데 [Tailwind Cheet Sheet](https://nerdcave.com/tailwind

okko8522

전편에서 봤던 것처럼 이제 다크모드를 직접 적용토록 해보자. nextjs와 가장 어울리는 테일윈드를 쓸 것이니 일단 세팅을 해주어야 한다. Tailwind CSS 세팅 next.js에 관해 설치법은 여기 공식문서에 있다. 한번 봐보자. 설치 npm을 통해 Tailwind에 필요한 설정 파일과 피어 종속 요소를 설치한다. 아래 init 명령어를 입력하면 tailwind.config.js와 postcss.config.js이 생성된다. 이제 config 파일을 건드려 적용되는 템플릿을 작성해보자. config 작성 및 설정 세팅 tailwind.config.js에 가서 작성해야하는 것이 있다. 기본적으로 생성하면 작성되어있는 내용은 다음과 같다. 여기서 content 부분에 작성하자. src 경로의 js,ts,jsx,tsx 템플릿에 테일윈드 적용해주세요~ 하는

okko8522

우선 시작하기 전에 변경사항이 있다. API 버전 3.5가 나오면서 새 url과 모델 gpt-3.5-turbo로 변경했다. 저번에 따끈뚱땅 뉴스로 다뤘던 내용인데, api 적용이 그동안 안돼서 골머리 앓고 있다가 여러번 시도 끝에 반환값을 얻는 데 성공해 공유한다. 좀 더 빨라진 듯한 느낌이 든다 ㅎㅎ 디자인 기획 어떤 식으로 할 거냐! 나는 next.js와 제일 잘 어울린다고 생각하는 테일윈드 css를 쓸 것이다. 그러면서 라이트, 다크모드도 같이 할 것이다. 포트폴리오 사이트 만들면서 했었는데 거의 까먹어서 다시 해봐야겠다. 또 전편에서 설정했던 UI도 할 것인데 약간 이런 식으로 할 것이다. 드롭다운은 큰 편이므로 좀 길게

okko8522

이제 필수 기능인 GPT 생성 기능을 useQuery로 Get해올 수 있으니 이제 내가 원하는 기능을 어떻게 가져올 지 생각하고, 디자인까지도 봐보자 메인 기능 당연히 변수 이름 생성 기능이 메인인데 이거를 어떻게 편한 기능으로서 바꿀 지 생각해봐야한다. 전에 했던 것처럼 글을 쓰고 제출하는 방식은 걍 챗봇과 다를 바가 없기 때문에 클릭 한번으로 변수가 생성토록 해야한다. 어떻게? 기본적으로 명령을 내리는 것은 API 펫칭 해오면서 넣을 수 있는 속성 prompt에 문장을 제출해 결과값을 가져온다. 그러면 먼저 명령을 내리는 문장의 컨셉을 세워야한다. 내가 쓰는 문장은 이러하다. >Create 10 bulletin related variable names with camelCase 이렇게 쓰면 매 답변마다 형태가 달라지지도 않고 편하게 가공할 수 있는 모양으로 온다. 이렇게 말이다. >resText: "\n\n1. boardTitle \n2. boardC

okko8522

전편에서는 stale, fresh 상태와 맞추어 하나의 key의 상태에 따라 재호출을 막거나 설정하는 방법에 대해서 알아봤다. 또다른 문제를 직면했으니 그걸 보자 상황 전편처럼 잘 불러와지고, refetch 되지도 않는다. 하지면 다시 제출 버튼을 눌러서 호출을 눌렀을 때 fetching이 되지 않는다. 이게 어떻게 된 일일까? 그걸 살펴보자. React-Query Devtools 리액트쿼리는 네트워크 호출 관련 상태 라이브러리라고도 불린다. 왜? '캐싱'이 가능하기 때문. 즉, 캐싱이 돼서 각 데이터가 key를 붙여 관리할 수 있다는 얘기다. 그 상태를 볼 수 있는 도구가 바로 ReactQueryDevtools다. 위 상황에서 어떤 것이 문제인지 파악할 수 없기에 라이브러리를 가져와 관찰해보자. 사용법 그냥 겁나 쉽다. react-query 라이브러리가 깔아져 있다면 그냥 불러오면된다. 어떻게? 아쉽게도 react-query 라이브러리 자체

okko8522

저번에 했던 부분에 이어서 해보겠다. 전에 했었던 것처럼 제출버튼을 누르면 결과값이 나온다. 이 결과물들이 나오는데 문제가 하나 생겼다. 이를 디버깅하는 과정을 그릴 것이다. 상황 인지 useQuery를 이용해 네트워크 코드를 호출하여 서버 데이터를 관리하지 않는가? 그 전에 이러한 코드를 썼다. 그런데 개발서버를 열어서 시도해봤는데 값은 잘 나오지만 어째선지 서버 요청을 계속 하고, 계속 값이 리프레쉬 됐다. 왜그런지 useQuery 개념을 조금 보며 살펴보자. stale, fresh 여기서 먼저 알아둬야할게 useQuery의 개념 중 stale 상태라는 개념이 있다. stale 직역하면 '오래된'이라는 뜻으로, 리액트쿼리에선 fetch해온 데이터가 어느 기준점에 의해

okko8522

저번에 이어서 이번엔 제출버튼을 누르면 그 답으로 오게 만들어보겠다. 구성요소 저번에 이어서 필요한 재료는 form-input 컴포넌트, submit 버튼, text를 담아줄 상태, 제출 핸들러가 필요하다. text를 담아줄 상태 useState를 써서 상태를 선언해주자. 이런 식으로 해서 파라미터 prompt에 인수로 넣어줄 텍스트 데이터를 만들어준다. UI 만들기 우선 텍스트의 값을 전달하는 모양새이기 때문에 form 태그를 이용해서 작성하겠다. 제출 핸들러는 이후 기술할 거지만 일단 handleSubmit으로 작성했고, promptValue 상태를 가져와 onChange를 넣어 텍스트가 입력되고 promptValue가 있다면 API 요청을 하여 목록을 가져오도록 했다. handleSubmit event에 타입 설정하고, 새로고침 방지하는 코드를 작성하려고 했다. 근데 입력하던 도중 어떻게 코드를 전개해야할지 고민했다.

okko8522

얼렁뚱땅 최신 뉴스 프로젝트에 앞서 뉴스를 들고왔다. 오픈 AI API 3.5 출시 이건 좋다! 그 전 글들을 보면 알겠지만 API가 지금 Chat GPT 모델과 무관한 3.0 davinci에서 끝났는데 이제 Chat GPT 모델의 전신인 3.5가 출시해 사용할 수 있게 됐다. 똑같은 모델은 아니지만 GPT의 기능을 이용하고 싶다면 3.5를 사용해야한다는 소리다. 참고: 공식문서 3.5 차이점 여기에도 내 프로젝트에 있는 text-davinci-003 모델이 있다. 3.5로 오면서 `gpt-3.5

okko8522

기능 구현 원래 디자인 먼저 하고 기능을 만드는데 GPT API를 사용해야해서 일단 기능 구현부터 해보고 디자인을 하겠다. 요구사항 기능 기획 기능 기획은 간단하다. 내가 원하는 언어(JS, Java, Python)을 선택하고, 어떤 변수를 생성할 지 관련 주제를 인풋창에 입력하고, 제출 버튼을 클릭하면 응답데이터를 표출하는, 아주 간단한 앱이다. 또한 기능 하나를 추가하고 싶은데 질문했던 데이터에 맘에 들지 않는다면 '더 생성하기'라는 버튼을 추가해서 그 다음 데이터를 가져오고싶다. 22/02/20 GPT가 생각보다 한글을 잘 못알아듣고, 반응도 영어보다 늦기에 네이버 파파고 API를 가져와서 번역 후 API에게 전송하게 만드는 기능을 추가할 것이다. 한글 사랑해줘.. 사용 기술 스택 이번에 Next.js를 써보고 싶어 Next.js를 써보기로 했다. Next.js Next.js를 쓰는 이유가 있다. 검색엔진최적화(Search engine

okko8522

오픈 AI의 API를 사용해서 개발자를 위한 변수 네이밍 하는 앱을 만들어보고 싶다. 기다려라 곧 만든다? 근데 기능 개발이 되는지 안되는지 지금 감이 안와서 디자인이나 그런 거 말고 일단 기능 구현부터 들어가보겠다. 기획 및 구상 나는 변수 이름을 잘 짓기 위해 항상 고민한다. 보기 편한 코드는 소통하기 쉬우니까. 즉! 코드 품질을 높이기 위해 항상 고민한다. 근데 그것도 한두번이지 솔직히 좀 귀찮을 때가 많다.. ㅋㅋㅋ 어쩌겠나 나도 사람 아닌가? 또 변수 자동 생성해주는 사이트 없을까 하고 구글링해도 쓸만한 사이트는 나오지 않았다. 복사해서 바로 쓸 수 있는 것들이 없을까? 그래서 항상 상상을 했다. 좀 누가 대신 해주면 안되나.. 하고. 그때 번뜩였다. 대신 해줄 수 있구나! 하고!! 그 답은 바로 요즘 핫한 오픈AI가 개발한 API를 사용하면 좋겠다. 싶었다! 실제로 해보고 싶기도 하고 오픈AI의 API가 엄청 싸고 편하다고 들었기 때문이다. 이 프로젝트는 여