💡 20230807 TIL : OpenAI api 리액트 프로젝트에 세팅한 과정 정리 이번 프로젝트에서 챗봇 기능을 담당하였다. 챗봇은 웹 사이트 어디에서든 모달창으로 접근할 수 있으며, 모달에서 OpenAI api를 이용하여 함수명, 변수명을 지어달라고 요청할 수 있는 챗봇을 만드는게 목표이다. OpenAI api는 처음 사용해보는거라, 공식 문서와 블로그들을 참고하여 일단은 어설프게 구현에 성공하여 그 과정을 정리해보려고 한다. 참고로 진행 중인 리액트 프로젝트는 타입스크립트 기반으로 진행 중이다. 1. 세팅 API 사용 전, API키 발급 및 라이브러리 설치 세팅을 완료하여야 한다. 1) React 프로젝트에 openai 라이브러리 설치 // npm 설치 npm install openai // ya..
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. 리액트 앱 생성 // yarn yarn create react-app my-app (--template typescript) // npx npx create-react-app my-app (--template typescript) 디렉토리 구조 package.json 프로젝트 정보와 의존성(dependencies)을 관리하는 문서 파일 안의 script 객체에서는 실행, 빌드 등의 alias를 설정하여 관리할 수 있음 tsconfig.json 디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 TypeScript 프로젝트의 루트가 됨 tsconfig.json 파일은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정 2. 절대경로 사용 // tsconfig.json { ..
map은 React.js에서는 주로 배열로 이루어진 데이터를 뿌려줄 때 많이 사용했었는데, 타입스크립트에서 사용법이 조금 특이한 것 같아 간단하게 정리해보고자 한다. 1. Map이란? 자바스크립트와 타입스크립트에서 제공되는 데이터 구조 중 하나로, Key와 Value의 쌍을 저장하는 컬렉션이다. 이 컬렉션은 값에 대한 고유한 키를 사용하여 값을 저장하고 검색하는 데 사용된다. 2. Map의 특징 1) 고유한 key값 `Map`은 key-value 쌍을 저장하는데, 각 key는 중복될 수 없으며 unique한 고유값이어야 한다. key가 중복될 경우, 가장 마지막 value가 저장된다. 2) key-value 쌍으로 저장 각 항목을 key-value의 쌍으로 저장하여, key값을 사용하여 해당 key에 연..
1. TypeScript의 탄생 배경 1) JavaScript와 Node.js 원래 JavaScript는 HTML, CSS와 함께 사용되어 웹 페이지에서 동적인 효과를 주기 위해 만들어진 스크립트 언어 시간이 지나면서 자바스크립트의 성능을 높이고자 하는 니즈 발생 구글 V8 엔진의 탄생 → Chrome 브라우저에 내장되어 있음 구글 V8 엔진의 우수한 성능을 기반으로 Node.js라는 플랫폼이 탄생하고, 이를 통해 JS 언어로도 백엔드 프로그래밍이 가능해짐 2) Node.js의 잠재적 위험성 프론트엔드에서의 에러는 사용자가 보는 뷰를 해칠 수는 있어도, 웹 페이지를 이용하는데 전반적인 동작에 피해를 끼치는 경우는 많지 않다 하지만 백엔드에서의 에러의 경우, 에러에 대한 예외 처리가 제대로 되지 않으면 단..
