경북대 FE 이은경_1주차 과제 Step1

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,2 +1,41 @@
 # react-gift-react-foundation
 FE 카카오 선물하기 1주차 과제: React 기초
+
+## Requirements
+- Create React App을 기반으로 프로젝트를 생성
+- Typescript로 프로젝트가 동작되게 세팅하고, 절대 경로로 Import 할 수 있게 alias를 설정
+- tsconfig에 어떤 항목들로 구성되어 있는지 살펴보고, 필요하다 생각되는 설정들이 있다면 자유롭게 작성
+- ESLint, Prettier를 추가하고 본인만의 Lint 룰을 세팅하기 ( 가장 대표적인 룰은 eslint-config-airbnb이지만 꼭 적용할 필요는 없다)
+- emotion 스타일 라이브러리를 추가하고, reset css를 적용
+- gitignore를 추가하고, 프로젝트에 불필요한 코드들은 정리 (ex. 사용하지 않는 icon 등)
+- 본인만의 폴더 구조 기준을 세우고 반영하기
+- 본인만의 기준으로 일관된 코드를 작성
+- 기능 단위로 나누어 커밋
+
+### 폴더구조
+ src/  
+├── assets/			   //로컬 환경의 이미지들  
+├── components/		//공용으로 쓰이는 react 컴포넌트  
+├── hooks/			   //React hooks  
+├── interfaces/		//typescript 의  type  
+├── pages/			   //각 페이지별 컴포넌트들  
+├── services/			//api관련, 통신관련  
+├── stores/			   //상태관리  
+├── styles/			   //공용으로 쓰이는 스타일  
+├── utils/				//유틸리티 함수들  
+├── App.tsx  
+└── index.tsx  
+
+## 1주차 질문
+1. webpack은 무엇이고 어떤 역할을 하고 있나요?
+JavaScript 애플리케이션을 위한 정정 모듈 번들러 입니다.
+-> 정적 모듈 번들러 : HTML, CSS, Javascript 등 웹 애플리케이션을 지원하는 각각의 모듈을 병합된 하나의 결과물로 만드는 도구
+
+2. 브라우저는 어떻게 JSX 파일을 읽을 수 있나요?
+JSX는 자바스크립트의 JS와 XML의 X를 합친 말이며 자바스크립트 코드 안에서 바로 태그 기반의 구문을 써서 리액트 엘리먼트를 정의할 수 있게 해주는 자바스크립트 확장입니다.
+브라우저는 JSX를 해석하지 못하기 때문에 바벨이라는 도구를 사용하여 JSX를 변환 컴파일링 해주어야 합니다.
+
+3. React에서 상태 변화가 생겼을 때 어떻게 변화를 알아챌 수 있나요?
+useState, useEffect 등을 이용해서 State를 관리합니다.
+- 컴포넌트에서 상태는 useState를 사용하여 관리하고, 상태를 여러 형태로 변경해서 사용해야하면 useReducer를 사용하여 관리합니다.
+이처럼 여러방법을 이용해서 상태변화를 체크해줍니다.

my-app/.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "react-app",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
+    "prettier",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["@typescript-eslint", "react", "react-hooks", "jsx-a11y", "prettier"],
+  "rules": {
+    "prettier/prettier": ["error"],
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+    "react/react-in-jsx-scope": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

my-app/.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

my-app/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "auto"
+}

my-app/.storybook/main.js

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  staticDirs: ['..\\public'],
+};
+export default config;

my-app/.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

my-app/README.md

@@ -0,0 +1,70 @@
+# 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 your browser.
+
+The page will reload when you make changes.\
+You may 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/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

my-app/craco.config.js

@@ -0,0 +1,22 @@
+const path = require('path');
+const { CracoAliasPlugin } = require('react-app-alias');
+
+module.exports = {
+  webpack: {
+    alias: {
+      '@components': path.resolve(__dirname, 'src/components'),
+      '@styles': path.resolve(__dirname, 'src/styles'),
+      '@utils': path.resolve(__dirname, 'src/utils'),
+    },
+  },
+  plugins: [
+    {
+      plugin: CracoAliasPlugin,
+      options: { 
+        source: "tsconfig",
+        baseUrl: "./src",
+        tsConfigPath: "./tsconfig.paths.json"
+      }
+    }
+  ]
+};