💡 20230807 TIL : OpenAI api 리액트 프로젝트에 세팅한 과정 정리 이번 프로젝트에서 챗봇 기능을 담당하였다. 챗봇은 웹 사이트 어디에서든 모달창으로 접근할 수 있으며, 모달에서 OpenAI api를 이용하여 함수명, 변수명을 지어달라고 요청할 수 있는 챗봇을 만드는게 목표이다. OpenAI api는 처음 사용해보는거라, 공식 문서와 블로그들을 참고하여 일단은 어설프게 구현에 성공하여 그 과정을 정리해보려고 한다. 참고로 진행 중인 리액트 프로젝트는 타입스크립트 기반으로 진행 중이다. 1. 세팅 API 사용 전, API키 발급 및 라이브러리 설치 세팅을 완료하여야 한다. 1) React 프로젝트에 openai 라이브러리 설치 // npm 설치 npm install openai // ya..
react-router-dom 6 이상 버전에서 nested routes를 구현하는 방법에는 두 가지가 있다. 참고 사이트 - The Guide to Nested Routes with React Router 1. 부모 Route path에 `/*` 부모 route의 path 마지막에 /*를 적어 명시적으로 이 route의 내부에서 nested route가 렌더링될 수 있음을 표시하고, 자식 route를 부모 route의 element 내부에 작성하는 방법 // Router.tsx // Coin.tsx Routes가 상대경로도 지원하기 때문에 path="chart"와 같이 써도 동작한다. 2. 자식 Route를 Route 내부에 작성 자식 route를 부모 element의 내부가 아닌 route 내부에 작..
1. global.d.ts Todo List를 만들 때, Todo 객체는 여러 컴포넌트에서 쓰일 것이므로 Todo 객체의 타입은 전역적으로 설정해주면 효율적일 것이다. `global.d.ts` 파일은 TypeScript에서 전역으로 사용할 타입들을 선언하는 파일이다. 일반적으로 `.d.ts` 확장자를 가진 파일들은 TypeScript 타입 선언 파일로서, 프로젝트 전체에서 사용되는 타입들을 정의하기 위해 사용된다. 1) 내가 작성한 global.d.ts 파일 // global.d.ts import { Dispatch, SetStateAction } from "react"; export interface Todo { id: string; title: string; content: string; isDone..
1. Redux란? 상태관리 라이브러리, 중앙 state 관리소를 사용할 수 있도록 도와주는 패키지 컴포넌트 간에 state 데이터들을 부모-자식 관계로 설정하여 props를 통해 한정적으로 전달하지 않고, 중앙에서 관리하여 어떤 컴포넌트에서든 쉽게 접근하고 제어할 수 있도록 해준다. 1) Redux의 흐름 View에서 액션이 일어난다. dispatch에서 action이 일어나게 된다. action에 의한 reducer함수가 실행되기 전에 middleware가 작동한다. middleware에서 명령내린 일을 수행하고 난 뒤, reducer함수를 실행한다. reducer의 실행결과 store에 새로운 값을 저장한다. store의 state에 subscribe하고 있던 UI에 변경된 값을 준다. 2) Pro..
