React Day 8~9 (Chat-GPT 만들기)

심재원·2023년 11월 15일
0

깃헙이랑 연동해 문제 풀 때마다 깃헙에 기록 남기기

https://chromewebstore.google.com/detail/%EB%B0%B1%EC%A4%80%ED%97%88%EB%B8%8Cbaekjoonhub/ccammcjdkpgjmcpijpahlehmapgmphmk?hl=ko&pli=1

git remote -v : 깃 삭제
git remove : 깃헙 연결 끊기

OPEN AI API 가져오기

https://platform.openai.com/docs/api-reference

Postman 설치

https://www.postman.com/downloads/

-1
포스트맨에
https://api.openai.com/v1/chat/completions POST 입력

-2
Body-raw에 아래코드 입력

{
    "messages": [
        {
            "role": "user",
            "content": "각자 질문"
        }
    ],
    "model": "gpt-3.5-turbo"
}

-3
body-raw 옆에 text 누르고 JSON 선택

-4
Authorization 탭 클릭 Token 입력

-5
Send

-6
Body-Pretty의 답변 확인

오늘 쓴 명령어

npm i axios
npm i react icons

버튼 스피너 돌리기 애니메이션 코드

https://tailwindcss.com/docs/animation

https://animate.style/

오전

참고 URL - UseRef란?

https://velog.io/@jinyoung985/React-useRef란

Optional chaining

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

1. {chatList && chatList.map((v, i) => <li>{v.question}</li>)}

2. {chatList?.map((v, i) => (
        <li>{v.question}</li>
        
        둘다 같은 기능. 1번을 2번으로 압축시켜주는 것

모달 창은 사용자가 창을 닫기 전까지 다른 작업을 할 수 없도록 창이 모달(매달림)되도록 설계된 창을 의미합니다. 이는 사용자의 주의를 창에 집중시키기 위해 사용됩니다. 일반적으로 모달 창은 일시적이고 중요한 정보나 작업을 담고 있으며, 사용자에게 반드시 처리해야 하는 것이 있을 때 사용될 수 있습니다. 모달 창은 주로 알림, 경고, 확인, 입력 등 다양한 상호작용을 위해 사용되며, 일반적으로 다른 창의 일시적 차단이 필요한 시나리오에서 활용됩니다.

React는 div tag로 감싸주는 게 Rule

업로드중..

스크롤을 컨트롤 하려고 할 때
html 본연에 접근해야 하는데 이걸 접근할 수 있는 hooks가
ulRef다.

배포

key값 있을 때는 vercel의 environmental variable 설정해줘야 함.

1개의 댓글

comment-user-thumbnail
2023년 11월 15일

잘 봤습니다. 좋은 글 감사합니다.

답글 달기