+
+
+ );
+};
+
+export default LoadingSpinner;
diff --git a/week10/dongyeol02/mission1/src/component/MovidDetail/MovieDetailCard.tsx b/week10/dongyeol02/mission1/src/component/MovidDetail/MovieDetailCard.tsx
new file mode 100644
index 00000000..7e63fb2f
--- /dev/null
+++ b/week10/dongyeol02/mission1/src/component/MovidDetail/MovieDetailCard.tsx
@@ -0,0 +1,31 @@
+import type { moviedetail } from "../../types/movieDetail";
+
+interface MovieDetailCardProps {
+ movieDetail: moviedetail; // 🎯 props 타입 정의
+}
+
+const MovieDetailCard = ({ movieDetail }: MovieDetailCardProps) => {
+ return (
+ {message}
+
+ 
+
+ );
+};
+
+export default MovieDetailCard;
diff --git a/week10/dongyeol02/mission1/src/component/MovidDetail/ProfileCard.tsx b/week10/dongyeol02/mission1/src/component/MovidDetail/ProfileCard.tsx
new file mode 100644
index 00000000..51a794cf
--- /dev/null
+++ b/week10/dongyeol02/mission1/src/component/MovidDetail/ProfileCard.tsx
@@ -0,0 +1,45 @@
+interface ProfileCardProps {
+ id: number;
+ name: string;
+ character?: string;
+ profilePath: string | null;
+ job?: string;
+}
+
+const ProfileCard = ({
+ name,
+ character,
+ profilePath,
+ job,
+}: ProfileCardProps) => {
+ return (
+
+
+
+ {movieDetail?.title}
+
+ 평균 {movieDetail?.vote_average}
+ {movieDetail?.release_date}
+ {movieDetail?.runtime}분
+
+
+ {movieDetail?.tagline}
+
+ {movieDetail?.overview}
+
+
+ );
+};
+
+export default ProfileCard;
diff --git a/week10/dongyeol02/mission1/src/component/MovieCard.tsx b/week10/dongyeol02/mission1/src/component/MovieCard.tsx
new file mode 100644
index 00000000..6181e509
--- /dev/null
+++ b/week10/dongyeol02/mission1/src/component/MovieCard.tsx
@@ -0,0 +1,46 @@
+import { useNavigate } from "react-router-dom";
+import type { Movie } from "../types/movie";
+
+interface MovieCardProps {
+ movie: Movie;
+}
+
+const MovieCard = ({ movie }: MovieCardProps) => {
+ const navigate = useNavigate();
+
+ const handleOnclick = () => {
+ navigate(`/movies/${movie.id}`);
+ };
+
+ return (
+
+ {profilePath ? (
+ 
+ ) : (
+
+
+
+ ) : (
+
+ 사진없음
+
+ )}
+
+
+
+ {name}
+
+ {(character || job) && (
+
+ {character || job}
+
+ )}
+
+
+ );
+};
+
+export default MovieCard;
diff --git a/week10/dongyeol02/mission1/src/component/MovieCardInModal.tsx b/week10/dongyeol02/mission1/src/component/MovieCardInModal.tsx
new file mode 100644
index 00000000..5a3d26f7
--- /dev/null
+++ b/week10/dongyeol02/mission1/src/component/MovieCardInModal.tsx
@@ -0,0 +1,41 @@
+// components/MovieCard.tsx
+import { memo } from "react";
+import type { Movie } from "../types/movie";
+
+interface MovieCardProps {
+ movie: Movie;
+ onClick?: (movie: Movie) => void;
+}
+
+const MovieCardInModal = ({ movie, onClick }: MovieCardProps) => {
+ const handleClick = () => {
+ if (onClick) onClick(movie);
+ };
+
+ return (
+
+ 
+
+
+
+
+ {movie.title}
+{movie.overview}
+
+
+ );
+};
+
+export default memo(MovieCardInModal);
diff --git a/week10/dongyeol02/mission1/src/component/MovieModal.tsx b/week10/dongyeol02/mission1/src/component/MovieModal.tsx
new file mode 100644
index 00000000..145e40e5
--- /dev/null
+++ b/week10/dongyeol02/mission1/src/component/MovieModal.tsx
@@ -0,0 +1,76 @@
+// components/MovieModal.tsx
+import type { Movie } from "../types/movie";
+
+interface MovieModalProps {
+ movie: Movie;
+ onClose: () => void;
+}
+
+const MovieModal = ({ movie, onClose }: MovieModalProps) => {
+ const imdbSearchUrl = `https://www.imdb.com/find?q=${encodeURIComponent(
+ movie.title
+ )}`;
+
+ return (
+
+
+
+
+
+
+ {movie.title}
+{movie.overview}
+
+ {/* 모달 카드 */}
+
+ );
+};
+
+export default MovieModal;
diff --git a/week10/dongyeol02/mission1/src/component/NavBar.tsx b/week10/dongyeol02/mission1/src/component/NavBar.tsx
new file mode 100644
index 00000000..4ac21757
--- /dev/null
+++ b/week10/dongyeol02/mission1/src/component/NavBar.tsx
@@ -0,0 +1,16 @@
+import { Link } from "react-router-dom";
+
+const NavBar = () => {
+ return (
+
+ );
+};
+export default NavBar;
diff --git a/week10/dongyeol02/mission1/src/component/Pagination.tsx b/week10/dongyeol02/mission1/src/component/Pagination.tsx
new file mode 100644
index 00000000..70a460b1
--- /dev/null
+++ b/week10/dongyeol02/mission1/src/component/Pagination.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+
+interface PaginationProps {
+ currentPage: number;
+ totalPages: number;
+ onPrev: () => void;
+ onNext: () => void;
+ hasNextPage: boolean;
+ hasPrevPage: boolean;
+}
+
+const Pagination: React.FC e.stopPropagation()} // 내부 클릭 시 전파 방지
+ >
+ {/* 상단 포스터 */}
+
+
+ 
+
+
+ {/* 내용 */}
+
+
+ {/* 제목 + 기본 정보 */}
+
+
+
+
+ {/* 줄거리 */}
+ {movie.title}
+
+ 평점 ⭐ {movie.vote_average.toFixed(1)}
+ 개봉일 {movie.release_date}
+
+ + {movie.overview || "줄거리 정보가 없습니다."} +
+ + {/* 버튼 영역 */} +
+ {/* IMDb에서 검색하기 */}
+
+ IMDb에서 검색하기
+
+
+ {/* 닫기 버튼 */}
+
+
+
+ {/* 이전 버튼 */}
+
+
+ {/* 현재 페이지*/}
+ {currentPage} 페이지
+
+ {/* 다음 버튼 */}
+
+
+ );
+};
+
+export default Pagination;
diff --git a/week10/dongyeol02/mission1/src/hook/useCredit.ts b/week10/dongyeol02/mission1/src/hook/useCredit.ts
new file mode 100644
index 00000000..b8631f9d
--- /dev/null
+++ b/week10/dongyeol02/mission1/src/hook/useCredit.ts
@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import type { credit } from "../types/movieDetail";
+import { creditApi } from "../apis/movieApis";
+
+export const useCredit = (movieId: string) => {
+ const [credits, setCredits] = useState
+
+ );
+};
+
+export default HomePage;
diff --git a/week10/dongyeol02/mission1/src/pages/MovieDetailPage.tsx b/week10/dongyeol02/mission1/src/pages/MovieDetailPage.tsx
new file mode 100644
index 00000000..2a9eae2c
--- /dev/null
+++ b/week10/dongyeol02/mission1/src/pages/MovieDetailPage.tsx
@@ -0,0 +1,74 @@
+import { useParams } from "react-router-dom";
+import { useMovieDetail } from "../hook/useMovieDetail";
+import LoadingSpinner from "../component/LoadingSpinner";
+import MovieDetailCard from "../component/MovidDetail/MovieDetailCard";
+import { useCredit } from "../hook/useCredit";
+import ProfileCard from "../component/MovidDetail/ProfileCard";
+
+const MovieDetailPage = () => {
+ const { movieId } = useParams<{ movieId: string }>();
+
+ // 영화 디테일 받아오기
+ const {
+ movieDetail,
+ loading: movieLoading,
+ error: movieError,
+ } = useMovieDetail(movieId!);
+
+ // 크레딧 받아오기
+ const {
+ credits,
+ loading: creditsLoading,
+ error: creditsError,
+ } = useCredit(movieId!);
+
+ // 로딩 처리!!!
+ if (movieLoading || creditsLoading) {
+ return
+
+
+ {/* 결과 영역 */}
+
+
+
+
+ {movies.map((movie) => (
+
+ {isModalOpen && selectedMovie && (
+ {movieError}
;
+
+ if (creditsError)
+ return {creditsError}
;
+
+ console.log(credits?.cast);
+
+ return (
+
+ {/*위쪽 절반: 포스터 영역*/}
+
+ );
+};
+
+export default MovieDetailPage;
diff --git a/week10/dongyeol02/mission1/src/pages/NotFoundPage.tsx b/week10/dongyeol02/mission1/src/pages/NotFoundPage.tsx
new file mode 100644
index 00000000..117c54b2
--- /dev/null
+++ b/week10/dongyeol02/mission1/src/pages/NotFoundPage.tsx
@@ -0,0 +1,5 @@
+const NotFoundPage = () => {
+ return
+
+
+ {/*아래쪽 절반: 감독/출연진 영역*/}
+
+
+ 감독/출연진
+ + {/*출연진 데이터가 있는지 확인 하고 map을 통해 프로필 카드 뿌리기 */} + {credits?.cast && credits.cast.length > 0 ? ( +
+ {credits.cast.slice(0, 20).map((actor, index) => (
+
+ ) : (
+ // 출연진 정보가 없을 때 표시
+
+
+ )}
+ 출연진 정보가 없습니다.
+NotFoundPage
;
+};
+
+export default NotFoundPage;
diff --git a/week10/dongyeol02/mission1/src/pages/NowPlayingPage.tsx b/week10/dongyeol02/mission1/src/pages/NowPlayingPage.tsx
new file mode 100644
index 00000000..a0767a28
--- /dev/null
+++ b/week10/dongyeol02/mission1/src/pages/NowPlayingPage.tsx
@@ -0,0 +1,52 @@
+import LoadingSpinner from "../component/LoadingSpinner";
+import MovieCard from "../component/MovieCard";
+import Pagination from "../component/Pagination";
+import { useMovies } from "../hook/useMovie";
+
+const NowPlayingPage = () => {
+ const {
+ movies,
+ loading,
+ error,
+ currentPage,
+ totalPages,
+ nextPage,
+ prevPage,
+ hasNextPage,
+ hasPrevPage,
+ } = useMovies("now_playing", 1);
+
+ if (loading) {
+ return (
+ {error}
;
+
+ return (
+ <>
+
+
+
+ );
+};
+export default NowPlayingPage;
diff --git a/week10/dongyeol02/mission1/src/pages/PopularMoviePage.tsx b/week10/dongyeol02/mission1/src/pages/PopularMoviePage.tsx
new file mode 100644
index 00000000..f3d78c31
--- /dev/null
+++ b/week10/dongyeol02/mission1/src/pages/PopularMoviePage.tsx
@@ -0,0 +1,46 @@
+import LoadingSpinner from "../component/LoadingSpinner";
+import MovieCard from "../component/MovieCard";
+import Pagination from "../component/Pagination";
+import { useMovies } from "../hook/useMovie";
+const MoviePage = () => {
+ const {
+ movies,
+ loading,
+ error,
+ currentPage,
+ totalPages,
+ nextPage,
+ prevPage,
+ hasNextPage,
+ hasPrevPage,
+ } = useMovies("popular", 1);
+
+ if (loading) {
+ return + {" "} + 상영중인 영화 목록 +
+ +
+ {movies.map((movie) => (
+
+ {error}
;
+
+ return (
+ <>
+
+
+
+ );
+};
+export default MoviePage;
diff --git a/week10/dongyeol02/mission1/src/pages/TopLatedPage.tsx b/week10/dongyeol02/mission1/src/pages/TopLatedPage.tsx
new file mode 100644
index 00000000..45c2cd3c
--- /dev/null
+++ b/week10/dongyeol02/mission1/src/pages/TopLatedPage.tsx
@@ -0,0 +1,48 @@
+import LoadingSpinner from "../component/LoadingSpinner";
+import MovieCard from "../component/MovieCard";
+import Pagination from "../component/Pagination";
+import { useMovies } from "../hook/useMovie";
+const TopLatedPage = () => {
+ const {
+ movies,
+ loading,
+ error,
+ currentPage,
+ totalPages,
+ nextPage,
+ prevPage,
+ hasNextPage,
+ hasPrevPage,
+ } = useMovies("top_rated", 1);
+ if (loading) {
+ return 인기 영화 목록
+ +
+ {movies.map((movie) => (
+
+ {error}
;
+
+ return (
+ <>
+
+
+
+ );
+};
+export default TopLatedPage;
diff --git a/week10/dongyeol02/mission1/src/pages/UpcommingPage.tsx b/week10/dongyeol02/mission1/src/pages/UpcommingPage.tsx
new file mode 100644
index 00000000..e75c465d
--- /dev/null
+++ b/week10/dongyeol02/mission1/src/pages/UpcommingPage.tsx
@@ -0,0 +1,49 @@
+import LoadingSpinner from "../component/LoadingSpinner";
+import MovieCard from "../component/MovieCard";
+import Pagination from "../component/Pagination";
+import { useMovies } from "../hook/useMovie";
+const UpcommingPage = () => {
+ const {
+ movies,
+ loading,
+ error,
+ currentPage,
+ totalPages,
+ nextPage,
+ prevPage,
+ hasNextPage,
+ hasPrevPage,
+ } = useMovies("upcoming", 1);
+
+ if (loading) {
+ return + {" "} + 최고 평점 영화 목록 +
+ +
+ {movies.map((movie) => (
+
+ {error}
;
+
+ return (
+ <>
+
+
+
+ );
+};
+export default UpcommingPage;
diff --git a/week10/dongyeol02/mission1/src/route/router.tsx b/week10/dongyeol02/mission1/src/route/router.tsx
new file mode 100644
index 00000000..b1f128a5
--- /dev/null
+++ b/week10/dongyeol02/mission1/src/route/router.tsx
@@ -0,0 +1,44 @@
+import { createBrowserRouter } from "react-router-dom";
+import NotFoundPage from "../pages/NotFoundPage";
+import PopularMoviePage from "../pages/PopularMoviePage";
+import RootLayout from "../layout/RootLayout";
+import HomePage from "../pages/HomPage";
+import NowPlayingPage from "../pages/NowPlayingPage";
+import TopLatedPage from "../pages/TopLatedPage";
+import UpcommingPage from "../pages/UpcommingPage";
+import MovieDetailPage from "../pages/MovieDetailPage";
+const router = createBrowserRouter([
+ {
+ path: "/",
+ // element: + {" "} + 개봉예정 영화 목록 +
+ +
+ {movies.map((movie) => (
+
+
+
+ );
+}
diff --git a/week10/dongyeol02/prac1/tsconfig.app.json b/week10/dongyeol02/prac1/tsconfig.app.json
new file mode 100644
index 00000000..a9b5a59c
--- /dev/null
+++ b/week10/dongyeol02/prac1/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2022",
+ "useDefineForClassFields": true,
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/week10/dongyeol02/prac1/tsconfig.json b/week10/dongyeol02/prac1/tsconfig.json
new file mode 100644
index 00000000..1ffef600
--- /dev/null
+++ b/week10/dongyeol02/prac1/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/week10/dongyeol02/prac1/tsconfig.node.json b/week10/dongyeol02/prac1/tsconfig.node.json
new file mode 100644
index 00000000..8a67f62f
--- /dev/null
+++ b/week10/dongyeol02/prac1/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2023",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/week10/dongyeol02/prac1/vite.config.ts b/week10/dongyeol02/prac1/vite.config.ts
new file mode 100644
index 00000000..011a9d87
--- /dev/null
+++ b/week10/dongyeol02/prac1/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+ plugins: [tailwindcss()],
+});
diff --git a/week10/dongyeol02/prac2/.gitignore b/week10/dongyeol02/prac2/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/week10/dongyeol02/prac2/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/week10/dongyeol02/prac2/README.md b/week10/dongyeol02/prac2/README.md
new file mode 100644
index 00000000..d2e77611
--- /dev/null
+++ b/week10/dongyeol02/prac2/README.md
@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ // Other configs...
+
+ // Remove tseslint.configs.recommended and replace with this
+ tseslint.configs.recommendedTypeChecked,
+ // Alternatively, use this for stricter rules
+ tseslint.configs.strictTypeChecked,
+ // Optionally, add this for stylistic rules
+ tseslint.configs.stylisticTypeChecked,
+
+ // Other configs...
+ ],
+ languageOptions: {
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ // other options...
+ },
+ },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ // Other configs...
+ // Enable lint rules for React
+ reactX.configs['recommended-typescript'],
+ // Enable lint rules for React DOM
+ reactDom.configs.recommended,
+ ],
+ languageOptions: {
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ // other options...
+ },
+ },
+])
+```
diff --git a/week10/dongyeol02/prac2/eslint.config.js b/week10/dongyeol02/prac2/eslint.config.js
new file mode 100644
index 00000000..5e6b472f
--- /dev/null
+++ b/week10/dongyeol02/prac2/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ js.configs.recommended,
+ tseslint.configs.recommended,
+ reactHooks.configs.flat.recommended,
+ reactRefresh.configs.vite,
+ ],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ },
+ },
+])
diff --git a/week10/dongyeol02/prac2/index.html b/week10/dongyeol02/prac2/index.html
new file mode 100644
index 00000000..784aa820
--- /dev/null
+++ b/week10/dongyeol02/prac2/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ 같이 배우는 리액트 useCallbackㅑ편
+Count: {count}
+Text
+
+ {text}
+
+
+
+ );
+}
diff --git a/week10/dongyeol02/prac2/tsconfig.app.json b/week10/dongyeol02/prac2/tsconfig.app.json
new file mode 100644
index 00000000..a9b5a59c
--- /dev/null
+++ b/week10/dongyeol02/prac2/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2022",
+ "useDefineForClassFields": true,
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/week10/dongyeol02/prac2/tsconfig.json b/week10/dongyeol02/prac2/tsconfig.json
new file mode 100644
index 00000000..1ffef600
--- /dev/null
+++ b/week10/dongyeol02/prac2/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/week10/dongyeol02/prac2/tsconfig.node.json b/week10/dongyeol02/prac2/tsconfig.node.json
new file mode 100644
index 00000000..8a67f62f
--- /dev/null
+++ b/week10/dongyeol02/prac2/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2023",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/week10/dongyeol02/prac2/vite.config.ts b/week10/dongyeol02/prac2/vite.config.ts
new file mode 100644
index 00000000..011a9d87
--- /dev/null
+++ b/week10/dongyeol02/prac2/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+ plugins: [tailwindcss()],
+});
같이 배우는 리액트: useMemo편!!
+ + +소수 리스트:
+
+ {primes.map((prime) => (
+
+
+
+ {prime}
+ ))}
+