swh01007/study
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[modern-react] 리액트 스터디 파일 추가

Browse Source
This commit is contained in:
안준영
2025-09-30 23:55:13 +09:00
parent 31bcb2efe1
commit 75ec02d506
546 changed files with 141345 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
modern-react/my-react-ts/README.md Normal file
View File

@@ -0,0 +1,46 @@
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).

18797
modern-react/my-react-ts/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

48
modern-react/my-react-ts/package.json Normal file
View File

@@ -0,0 +1,48 @@
{
"name": "my-react-ts",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.15.15",
"@mui/material": "^5.15.15",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.96",
"@types/react": "^18.2.79",
"@types/react-dom": "^18.2.25",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-query": "^3.39.3",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

BIN
modern-react/my-react-ts/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

43
modern-react/my-react-ts/public/index.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

BIN
modern-react/my-react-ts/public/logo192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
modern-react/my-react-ts/public/logo512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

25
modern-react/my-react-ts/public/manifest.json Normal file
View File

@@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

3
modern-react/my-react-ts/public/robots.txt Normal file
View File

@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

38
modern-react/my-react-ts/src/App.css Normal file
View File

@@ -0,0 +1,38 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

9
modern-react/my-react-ts/src/App.test.tsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

26
modern-react/my-react-ts/src/App.tsx Normal file
View File

@@ -0,0 +1,26 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;

7
modern-react/my-react-ts/src/Book.ts Normal file
View File

@@ -0,0 +1,7 @@
export type Book = {
isbn: string,
title: string,
price: number,
summary: string,
download: boolean
};

56
modern-react/my-react-ts/src/HookReducerUp.tsx Normal file
View File

@@ -0,0 +1,56 @@
import { useReducer } from 'react';
// Props 유형 정의
type HookReducerUpProps = {
init: number
};
// State 타입 정의
type StateType = {
count: number;
};
// Action의 타입 정의
type ActionType = {
type: 'update',
step: number
} | {
type: 'reset',
init: number
};
// Reducer 유형 정의
type CountReducerType = (state: StateType, action: ActionType) => StateType;
export default function HookReducerUp({ init }: HookReducerUpProps) {
// Reducer 타입 정의
const [state, dispatch] = useReducer<CountReducerType>(
// Reducer의 실체
(state, action) => {
switch (action.type) {
case 'update':
return { count: state.count + action.step };
case 'reset' :
return { count: action.init };
default:
return state;
}
},
// State의 초깃값
{
count: init
}
);
const handleUp = () => dispatch({ type: 'update', step: 1 });
const handleDown = () => dispatch({ type: 'update', step: -1 });
const handleReset = () => dispatch({ type: 'reset', init: 0 });
return (
<>
<button onClick={handleUp}>카운트업</button>
<button onClick={handleDown}>카운트다운</button>
<button onClick={handleReset}>리셋</button>
<p>{state.count}번 클릭되었습니다.</p>
</>
);
}

13
modern-react/my-react-ts/src/HookThemeButton.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { useContext } from 'react';
import { Button } from '@mui/material';
import ThemeContext, { ThemeContextType } from './ThemeContext';
export default function HookThemeButton() {
// const { mode, toggleMode } = useContext<ThemeContextType>(ThemeContext);
const { mode, toggleMode } = useContext<Partial<ThemeContextType>>(ThemeContext);
return (
<Button variant="contained" onClick={toggleMode}>
Mode {mode}
</Button>
);
}

49
modern-react/my-react-ts/src/ListTemplate.tsx Normal file
View File

@@ -0,0 +1,49 @@
// import React, { FC, ReactNode } from 'react';
// import type { Book } from './Book';
// // Props 타입 선언
// type ListTemplateProps = {
// src: Array<Book>,
// children: (b: Book) => ReactNode
// };
// export default function ListTemplate({ src, children }: ListTemplateProps) {
// return (
// <dl>
// {
// src.map((elem, index) => (
// <React.Fragment key={elem.isbn}>
// {children(elem)}
// </React.Fragment>
// ))
// }
// </dl>
// );
// }
// Code 10-2-16
import React, { FC, ReactNode } from 'react';
import type { Book } from './Book';
type ListTemplateProps = {
src: Array<Book>,
children: (b: Book) => ReactNode
};
const ListTemplate: FC<ListTemplateProps> = ({ src, children }) => {
return (
<dl>
{
src.map((elem, index) => (
<React.Fragment key={index}>
{children(elem)}
</React.Fragment>
))
}
</dl>
);
};
export default ListTemplate;

50
modern-react/my-react-ts/src/MyThemeProvider.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { ReactNode, useState } from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { amber, grey } from '@mui/material/colors';
import { CssBaseline, PaletteMode } from '@mui/material';
import ThemeContext, { ThemeContextType } from './ThemeContext';
// Props 타입 선언
type MyThemeProviderProps = {
children: ReactNode
};
export default function MyThemeProvider({ children }: MyThemeProviderProps) {
const [mode, setMode] = useState<PaletteMode>('light');
const themeConfig: ThemeContextType = {
mode,
toggleMode: () => {
setMode(prev =>
prev === 'light' ? 'dark' : 'light'
)}
};
const theme = createTheme({
palette: {
mode,
...(mode === 'light'
? {
primary: amber,
}
: {
primary: {
main: grey[500],
contrastText: '#fff'
},
background: {
default: grey[900],
paper: grey[900],
},
}),
},
});
return (
<ThemeContext.Provider value={themeConfig}>
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
</ThemeContext.Provider>
);
}

39
modern-react/my-react-ts/src/QueryBasic.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { useQuery } from 'react-query';
type WeatherType = {
weather: Array<{
id: number
main: string
description: string
icon: string
}>
}
// 날씨 정보를 얻기 위한 함수
const fetchWeather = async () => {
const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=Seoul&lang=kr&appid=ef23a61e94f59784b8451d12c0d07da8`);
if (res.ok) {
return await res.json() as WeatherType;
}
throw new Error(res.statusText);
};
export default function QuerBasic() {
// fetchWeather 함수로 데이터 가져오기
const { data, isLoading, isError, error } = useQuery<WeatherType, Error>('weather', fetchWeather);
if (isLoading) {
return <p>Loading...</p>
}
if (isError) {
return <p>Error: {error.message}</p>
}
return (
<figure>
<img
src={`https://openweathermap.org/img/wn/${data?.weather?.[0]?.icon}.png`}
alt={data?.weather?.[0]?.main} />
<figcaption>{data?.weather?.[0]?.description}</figcaption>
</figure>
);
}

51
modern-react/my-react-ts/src/QueryPre.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { useEffect, useState } from 'react';
// fetch를 통해 취득한 날씨 정보 유형 정의
type WeatherType = {
weather: Array<{
id: number
main: string
description: string
icon: string
}>
}
// 날씨 정보를 얻기 위한 함수
const fetchWeather = async () => {
const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=Seoul&lang=kr&appid=ef23a61e94f59784b8451d12c0d07da8`);
if (res.ok) {
return await res.json() as WeatherType;
}
throw new Error(res.statusText);
};
export default function QueryPre() {
// State 선언
const [data, setData] = useState<WeatherType>();
const [isLoading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string>('');
useEffect(() => {
setLoading(true);
fetchWeather()
.then(result => setData(result))
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, []);
if (isLoading) {
return <p>Loading...</p>
}
if (error) {
return <p>Error: {error}</p>
}
return (
<figure>
<img
src={`https://openweathermap.org/img/wn/${data?.weather?.[0]?.icon}.png`}
alt={data?.weather?.[0]?.main} />
<figcaption>{data?.weather?.[0]?.description}</figcaption>
</figure>
);
}

19
modern-react/my-react-ts/src/StateBasic.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { useState } from 'react';
// Props 타입 선언
type StateBasicProps = {
init: number
};
export default function StateBasic({ init }: StateBasicProps) {
const [count, setCount] = useState<number>(init);
const handleClick = () => setCount(count + 1);
return (
<>
<button onClick={handleClick}>카운트</button>
<p>{count}번 클릭했습니다.</p>
</>
);
}

28
modern-react/my-react-ts/src/StateFormUC.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { useRef } from 'react';
export default function StateFormUC() {
const name = useRef<HTMLInputElement>(null);
const age = useRef<HTMLInputElement>(null);
const show = () => {
console.log(`안녕하세요, ${name.current?.value}（${age.current?.value}세） 님！`);
};
return (
<form>
<div>
<label htmlFor="name">이름: </label>
<input id="name" name="name" type="text"
ref={name} defaultValue="홍길동" />
</div>
<div>
<label htmlFor="age">나이: </label>
<input id="age" name="age" type="number"
ref={age} defaultValue="18" />
</div>
<div>
<button type="button" onClick={show}>
보내기</button>
</div>
</form>
);
}

21
modern-react/my-react-ts/src/StyledPanel.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { ReactNode } from 'react';
// Props 타입 선언
type StyledPanelProps = {
children: ReactNode
};
export default function StyledPanel({ children }: StyledPanelProps) {
return (
<div style={{
margin: 50,
padding: 20,
border: '1px solid #000',
width: 'fit-content',
boxShadow: '10px 5px 5px #999',
backgroundColor: '#fff'
}}>
{children}
</div>
);
}

14
modern-react/my-react-ts/src/ThemeContext.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { PaletteMode } from '@mui/material';
import { createContext } from 'react';
export type ThemeContextType = {
mode: PaletteMode,
toggleMode: () => void
};
// export default createContext<ThemeContextType>({
// mode: 'light',
// toggleMode: () => {}
// });
export default createContext<Partial<ThemeContextType>>({});

43
modern-react/my-react-ts/src/books.ts Normal file
View File

@@ -0,0 +1,43 @@
const books = [
{
isbn: '9791158395124',
title: '게임 개발을 위한 미드저니, 스테이블 디퓨전 완벽 활용법',
slug: 'genai-game',
price: 28000,
summary: '생성형 AI를 활용한 게임 캐릭터, 배경, 아이템 제작부터 유니티 실전 프로젝트까지',
download: true,
},
{
isbn: '9791158395117',
title: '디자인을 위한 미드저니 완벽 활용법',
slug: 'midjourney-design',
price: 24000,
summary: '광고부터 캐릭터, 로고, 일러스트레이션, 표지, 포스터, 타이포까지 독창적인 디자인 만들기',
download: false,
},
{
isbn: '9791158395032',
title: '만들면서 배우는 블렌더 3D 입문',
slug: 'blender-basic',
price: 28000,
summary: '블렌더 기초, 모델링, 머티리얼, 애니메이션, 렌더링까지',
download: true,
},
{
isbn: '9791158395018',
title: '모던 그로스 마케팅',
slug: 'mgm',
price: 24000,
summary: '비용은 최소화하고 매출은 극대화하는 생존 마케팅 전략',
download: false,
},
{
isbn: '9791158395025',
title: '도메인 스토리텔링',
slug: 'domain-storytelling',
price: 28000,
summary: '도메인 주도 소프트웨어 구축을 위한 스토리텔링과 스토리 시각화 기법',
download: true,
},
];
export default books;

13
modern-react/my-react-ts/src/index.css Normal file
View File

@@ -0,0 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

111
modern-react/my-react-ts/src/index.tsx Normal file
View File

@@ -0,0 +1,111 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import StateBasic from './StateBasic';
import StyledPanel from './StyledPanel';
import ListTemplate from './ListTemplate';
import books from './books';
import type { Book } from './Book';
import MyThemeProvider from './MyThemeProvider';
import HookThemeButton from './HookThemeButton';
import HookReducerUp from './HookReducerUp';
import StateFormUC from './StateFormUC';
import QueryPre from './QueryPre';
import { QueryClient, QueryClientProvider } from 'react-query';
import QueryBasic from './QueryBasic';
/* eslint-enable @typescript-eslint/no-unused-vars */
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
// root.render(
// <React.StrictMode>
// <App />
// </React.StrictMode>
// );
// Code 10-2-3
// root.render(
// <StateBasic init={0} />
// );
// Code 10-2-4
// root.render(
// <StyledPanel>
// <p>회원 모집 중!</p>
// <p>위키북스 프로젝트에 오신 것을 환영합니다！!</p>
// </StyledPanel>
// );
// Code 10-2-7
// root.render(
// <ListTemplate src={books}>
// {(elem: Book) => (
// <>
// <dt>
// <a href={`https://wikibook.co.kr/images/cover/s/${elem.isbn}.jpg`}>
// {elem.title}（{elem.price}원）
// </a>
// </dt>
// <dd>{elem.summary}</dd>
// </>
// )}
// </ListTemplate>
// );
// Code 10-2-11
// root.render(
// <MyThemeProvider>
// <HookThemeButton />
// </MyThemeProvider>
// );
// Code 10-2-12
// root.render(
// <HookReducerUp init={0} />
// );
// Code 10-2-13
// root.render(
// <StateFormUC />
// );
// Code 10-2-14
root.render(
<QueryPre />
);
// Code 10-2-15
const cli = new QueryClient();
root.render(
<QueryClientProvider client={cli}>
<QueryBasic />
</QueryClientProvider>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

1
modern-react/my-react-ts/src/logo.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

1
modern-react/my-react-ts/src/react-app-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="react-scripts" />

15
modern-react/my-react-ts/src/reportWebVitals.ts Normal file
View File

@@ -0,0 +1,15 @@
import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

5
modern-react/my-react-ts/src/setupTests.ts Normal file
View File

@@ -0,0 +1,5 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

28
modern-react/my-react-ts/tsconfig.json Normal file
View File

@@ -0,0 +1,28 @@
{
// 트랜스파일 시 동작 옵션
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
// 트랜스파일 대상 지정
"include": [
"src"
]
}