124 |
125 | 
132 |
133 |
13 |
14 | 로딩중...
}>
15 | -
16 |
- 17 | 홈으로 18 | 19 |
- 20 | 테스트 21 | 22 |
프론트엔드 개발 환경 커스텀 구축
25 | 26 |{value}
16 | 17 |
18 |
21 |
22 | SVG as React Component Test
19 |
23 | 
25 |
26 |
27 | asset svg url Test
24 |
28 |
31 |
32 | big size SVG as React Component Test
29 |
33 | 
35 |
36 |
37 | asset big size SVG url Test
34 |
38 | 
40 |
41 |
42 | );
43 | };
44 |
45 | export default Example;
46 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import * as ReactDOM from 'react-dom/client';
3 | import App from './App';
4 | import { BrowserRouter } from 'react-router-dom';
5 |
6 | const rootNode = document.getElementById('root');
7 |
8 | ReactDOM.createRoot(rootNode as HTMLElement).render(
9 | webp Image Test
39 |
10 |
13 | 14 |
33 | );
34 | };
35 |
36 | export default Home;
37 |
--------------------------------------------------------------------------------
/src/pages/Test/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 |
3 | interface List {
4 | body: string;
5 | id: number;
6 | title: string;
7 | userId: number;
8 | }
9 |
10 | const Test = () => {
11 | const [list, setList] = useState13 | 14 |
15 |
19 |
20 | 환경 변수 테스트
16 |{process.env.NODE_ENV}
17 |{process.env.REACT_APP_EXAMPLE}
18 |
21 | 
23 |
24 |
25 | 일반적인 jpg 이미지 테스트
22 |
26 |
32 | video 테스트
27 | 31 |
20 |
27 | );
28 | };
29 |
30 | export default Test;
31 |
--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Pretendard;
3 | background-color: rgb(192, 249, 230);
4 | }
5 |
6 | @font-face {
7 | font-family: 'Pretendard';
8 | font-style: normal;
9 | font-display: block;
10 | font-weight: 500;
11 | src: url(./assets/fonts/Pretendard-Medium.subset.woff2) format('woff2'),
12 | url(./assets/fonts/Pretendard-Medium.subset.woff) format('woff');
13 | unicode-range: U+AC00-D7A3, U+0041-005A, U+0061-007A, U+0030-0039;
14 | }
--------------------------------------------------------------------------------
/src/types/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.jpg' {
2 | const content: string;
3 | export default content;
4 | }
5 |
6 | declare module '*.jpeg' {
7 | const content: string;
8 | export default content;
9 | }
10 |
11 | declare module '*.png' {
12 | const content: string;
13 | export default content;
14 | }
15 |
16 | declare module '*.gif' {
17 | const content: string;
18 | export default content;
19 | }
20 |
21 | declare module '*.webp' {
22 | const content: string;
23 | export default content;
24 | }
25 |
26 | declare module '*.svg' {
27 | const content: React.ReactComponentAPI Fetch Test
21 |-
22 | {list.map((el) => (
23 |
- {el.title} 24 | ))} 25 |