💡 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를 사용하여 사용..
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의 잠재적 위험성 프론트엔드에서의 에러는 사용자가 보는 뷰를 해칠 수는 있어도, 웹 페이지를 이용하는데 전반적인 동작에 피해를 끼치는 경우는 많지 않다 하지만 백엔드에서의 에러의 경우, 에러에 대한 예외 처리가 제대로 되지 않으면 단..
