tsconfig 환경설정

tsconfig.json 환경설정 기존 디폴트로 설정된 파일의 내용은 삭제후 아래와 같이 환경설정을 한다. {   "compilerOptions" : {     "target" : "ESNext" ,     "useDefineForClassFields" : true ,     "lib" : [ "DOM" , "DOM.Iterable" , "ESNext" ],     "allowJs" : true ,     "skipLibCheck" : true ,     "esModuleInterop" : false ,     "allowSyntheticDefaultImports" : true ,     "strict" : true ,     "forceConsistentCasingInFileNames" : false ,     "module" : "ESNext" ,     "moduleResolution" : "node" ,     "resolveJsonModule" : true ,     "isolatedModules" : true ,     "noImplicitAny" : false ,     "noEmit" : false ,     "declaration" : true ,     "declarationDir" : "./types" ,     "jsx" : "preserve" ,     "baseUrl" : ".." ,     "paths...

리액트 앱 시작 index.html

index.html /* 기존 디폴트로 생성된 public,src 폴더에 내용은 다 삭제 하고 깔끔한 상태에서 시작한다. */ 먼저 앱을 최초 진입점 index.html 파일을 작성한다. 아래는 index.html 내용이다. <! DOCTYPE html > < html lang = "en-US" >   < head >     < meta charset = "utf-8" />     < meta name = "theme-color" content = "#171717" />     < meta name = "mobile-web-app-capable" content = "yes" />     < meta name = "apple-mobile-web-app-capable" content = "yes" />     < meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" />     < meta name = "description" content = "AiChat - An open source chat application with support for multiple AI models" />     < title > AiChat </ title >     < link rel = "shortcut icon" href = "#" />     < link rel = "icon" type = "image/png" size...

jest 테스트 환경 설정

jest.config.cjs 환경설정 client 폴더에 가서 jest.config.cjs 파일을 생성합니다. module . exports = {   roots : [ '<rootDir>/src' ],   testEnvironment : 'jsdom' ,   testEnvironmentOptions : {     url : 'http://localhost:3080' ,   },   collectCoverage : true ,   collectCoverageFrom : [     'src/**/*.{js,jsx,ts,tsx}' ,     '!<rootDir>/node_modules/' ,     '!src/**/*.css.d.ts' ,     '!src/**/*.d.ts' ,   ],   coveragePathIgnorePatterns : [ '<rootDir>/node_modules/' , '<rootDir>/test/setupTests.js' ],   //  Todo: Add coverageThreshold once we have enough coverage   //  Note: eventually we want to have these values set to 80%   // coverageThreshold: {   //   global: {   //     functions: 9,   //     lines: 40,   //     statements: 40,   //     branches: 12,   //   },   // }, ...

vite 환경설정

vite.config.ts 파일 작성 client 폴더에 vite.config.ts 파일 열어서 아래와 같이 수정 import path from 'path' ; import { defineConfig } from 'vite' ; import react from '@vitejs/plugin-react' ; import { VitePWA } from 'vite-plugin-pwa' ; import { compression } from 'vite-plugin-compression2' ; import { nodePolyfills } from 'vite-plugin-node-polyfills' ; import type { Plugin } from 'vite' ; // https://vitejs.dev/config/ export default defineConfig (({ command }) => ({   server : {     host : 'localhost' ,     port : 3090 ,     strictPort : false ,     proxy : {       '/api' : {         target : 'http://localhost:3080' ,         changeOrigin : true ,       },       '/oauth' : {         target : 'http://localhost:3080' ,         changeOrigin : true ,       },     },   }, ...