💡 WIL 20230807-20230811 : TypeScript React - 챗봇, private route, 마이 페이지 구현한 기능 동작원리 및 트러블슈팅 정리 1. 맡은 기능 openai API 사용하여 챗봇 UI 기능 구현 auth 여부에 따라 접근 불가능하도록 private route 설정 마이페이지 프로필 수정 및 내가 쓴 글 모아보기 페이지네이션 2. 사용 라이브러리 react-route-dom, redux-toolkit, react-query, supabase, openai, react-hook-form, styled-components 3. 구현한 기능 동작 원리 1) 🤖💬 챗봇 기능 - openai API, UI 상태관리 (1) openai API openai API를 사용하여 사용..
💡 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. 리액트 앱 생성 // 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. 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 클라이언트를 어떻게 구성했느냐에 따라 해당 캐시의 데이터를 유지 관리 하는..
firebase를 이용해서 프로젝트를 하는 중인데, firebase에서 사용하는 API key를 .env 파일에 따로 관리하는 방법을 알게 되었다. 그래서 .env 파일에 대해 간단히 정리해보려고 한다. 1. 환경변수(.env) 1) 환경변수란? 운영 체제(Operating System)나 애플리케이션에서 사용되는 변수 이 변수들은 시스템 설정, 애플리케이션 구성 및 동작에 영향을 미칠 수 있는 값들을 포함 2) 환경변수 파일 (.env) .env 파일은 주로 프로젝트의 환경 변수를 설정하기 위해 사용되는 파일 "env"는 "environment"의 줄임말로, 환경에 따라 다른 설정 값을 제공하는 데 사용됨 일반적으로 .env 파일은 프로젝트의 루트 디렉토리에 위치 환경 변수를 키-값 쌍으로 정의 2. ..
🚨 발생 문제 ERROR in ./node_modules/react-router-dom/dist/index.js 13:0-810 export 'AbortedDeferredError' (reexported as 'AbortedDeferredError') was not found in 'react-router' (possible exports: Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, ..
🚨 발생 문제 Firebase: Error (auth/account-exists-with-different-credential) 현재 상황 1. 이전부터 GitHub 계정에서 Google 아이디를 사용하고 있었던 상황 2. 내가 만든 웹앱에서 Google 계정으로 로그인 후 로그아웃 ➡ GitHub 로그인을 시도하는 과정에서 GitHub 로그인이 되지 않고 위의 에러 발생 🤔 문제 원인 같은 이메일 주소가 다른 인증 방법으로 접속되었기 때문에 발생 // 예시 GitHub : myemail@gmail.com Google : myemail@gmail.com // 위와 같이 같은 gmail 아이디를 공유하고 있는 상황에서 발생 💊 해결 방법 Authentication 설정 변경 콘솔 ➡ 해당 프로젝트 ..
1. Redux란? 상태관리 라이브러리, 중앙 state 관리소를 사용할 수 있도록 도와주는 패키지 컴포넌트 간에 state 데이터들을 부모-자식 관계로 설정하여 props를 통해 한정적으로 전달하지 않고, 중앙에서 관리하여 어떤 컴포넌트에서든 쉽게 접근하고 제어할 수 있도록 해준다. 1) Redux의 흐름 View에서 액션이 일어난다. dispatch에서 action이 일어나게 된다. action에 의한 reducer함수가 실행되기 전에 middleware가 작동한다. middleware에서 명령내린 일을 수행하고 난 뒤, reducer함수를 실행한다. reducer의 실행결과 store에 새로운 값을 저장한다. store의 state에 subscribe하고 있던 UI에 변경된 값을 준다. 2) Pro..
