💡 20230807 TIL : OpenAI api 리액트 프로젝트에 세팅한 과정 정리 이번 프로젝트에서 챗봇 기능을 담당하였다. 챗봇은 웹 사이트 어디에서든 모달창으로 접근할 수 있으며, 모달에서 OpenAI api를 이용하여 함수명, 변수명을 지어달라고 요청할 수 있는 챗봇을 만드는게 목표이다. OpenAI api는 처음 사용해보는거라, 공식 문서와 블로그들을 참고하여 일단은 어설프게 구현에 성공하여 그 과정을 정리해보려고 한다. 참고로 진행 중인 리액트 프로젝트는 타입스크립트 기반으로 진행 중이다. 1. 세팅 API 사용 전, API키 발급 및 라이브러리 설치 세팅을 완료하여야 한다. 1) React 프로젝트에 openai 라이브러리 설치 // npm 설치 npm install openai // ya..
1. useMemo 리렌더링 사이에 연산 값(value)을 캐시할 수 있는 리액트 훅으로, 메모화된(memoized) 값을 계산하는 함수를 호출한다. import { useMemo } from "react"; const cachedValue = useMemo(calculateValue, dependencies) 1) 사용 예시 리액트 공식 문서에서 설명하고 있는 사용 예시는 다음과 같다. Skipping expensive recalculations (비용이 많이 드는 재연산 생략) Skipping re-rendering of components (컴포넌트의 리렌더링 생략) Memoizing a dependency of another Hook (다른 훅의 의존성 메모화) Memoizing a functio..
💡 20230802 TIL : AWS에 대해 공부한 내용 정리 1. On-premise vs Cloud computing 1) 🏠 On-premise 온프레미스(On-premise)란 기업이 직접 물리적 공간에 실제 하드웨어 장비를 가지고 IT 인프라를 구축하여 운영하는 방식을 말한다. 필요한 인프라 시스템을 구축하기 위해 하드웨어와 소프트웨어를 직접 구입하여, 제공 서비스나 시스템 상황에 맞게 환경을 구성한다. 서버의 유지보수 역시 해당 조직의 IT 인프라를 관리하는 팀이 직접 한다. 간혹 학교나 회사에서 봤었던 서버실 같은 곳들을 떠올리면 된다. 2) ☁️ Cloud computing 클라우드 컴퓨팅(Cloud Computing) 또는 클라우드 서비스(Cloud Service)란 제3자 서비스 공급자..
1. createAction + reducer rtk의 createAction 함수를 사용하여 action creator 정의 createAction 함수는 자동으로 action creator 함수를 생성하여 action object를 생성한다. (ex. { type: 'ADD', payload: actionPayload }) 그 후 reducer 함수를 직접 정의하여, action type과 payload를 기반으로 상태가 어떻게 업데이트되는지를 지정 state가 변화하면 state를 직접 변경하지 않고, reducer 함수에서 새로운 state를 생성하여 반환 2. createAction + createReducer rtk의 createAction 및 createReducer 함수를 모두 사용한다. ..
🚨 발생 문제 TS17004: Cannot use JSX unless the '--jsx' flag is provided. TS6142: Module './App' was resolved to 'C:/Users/user/Desktop/jiwon/redux-for-beginners/src/App.tsx', but '--jsx' is not set. 문제 상황 예전에 만들어 둔 자바스크립트 React app을 아래 블로그를 참고하여 타입스크립트로 마이그레이션을 완료한 뒤, yarn start하여 리액트 앱을 실행했는데 위와 같은 에러 메시지 발생 마이그레이션 방법 참고 블로그 - How to Migrate a React App to TypeScript 🤔 문제 원인 tsconfig.json에서 jsx 설정을..
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. 리액트 앱 생성 // 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 { ..
1. TypeScript의 탄생 배경 1) JavaScript와 Node.js 원래 JavaScript는 HTML, CSS와 함께 사용되어 웹 페이지에서 동적인 효과를 주기 위해 만들어진 스크립트 언어 시간이 지나면서 자바스크립트의 성능을 높이고자 하는 니즈 발생 구글 V8 엔진의 탄생 → Chrome 브라우저에 내장되어 있음 구글 V8 엔진의 우수한 성능을 기반으로 Node.js라는 플랫폼이 탄생하고, 이를 통해 JS 언어로도 백엔드 프로그래밍이 가능해짐 2) Node.js의 잠재적 위험성 프론트엔드에서의 에러는 사용자가 보는 뷰를 해칠 수는 있어도, 웹 페이지를 이용하는데 전반적인 동작에 피해를 끼치는 경우는 많지 않다 하지만 백엔드에서의 에러의 경우, 에러에 대한 예외 처리가 제대로 되지 않으면 단..
1. React Query란 1) Client State vs. Server State Client State : 웹 브라우저 세션과 관련된 정보 ex. 유저의 언어, 테마 등 서버에서 일어나는 일과는 아무 관련이 없는 state들 단순히 사용자의 상태를 tracking하는 것 Server State : 서버에 저장,그러나 클라이언트에게 표시하는데 필요한 데이터들 ex. 블로그 포스트 data from DB 2) React Query의 역할 서버 데이터 캐시를 관리한다. React 코드에 서버데이터가 필요할 때 fetch나 axios를 사용해 서버로 바로 이동하지 않고, React Query 캐시를 요청 즉, React Query 클라이언트를 어떻게 구성했느냐에 따라 해당 캐시의 데이터를 유지 관리 하는..
