강원대 FE _이채연 - 1주차 과제

.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
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+*storybook.log

.prettierrc

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

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  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;

.storybook/preview.ts

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

README.md

@@ -1,2 +1,70 @@
-# react-gift-react-foundation
-FE 카카오 선물하기 1주차 과제: React 기초
+# 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)

README.old.md

@@ -0,0 +1,47 @@
+# react-gift-react-foundation
+FE 카카오 선물하기 1주차 과제: React 기초
+
+## 구현할 기능 목록
+
+- **Create React App을 기반으로 프로젝트를 생성해요.**
+- **TypeScript로 프로젝트가 동작되게 세팅하고, 절대 경로로 Import 할 수 있게 alias를 설정해주세요.**
+- **tsconfig에 어떤 항목들로 구성되어 있는지 살펴보고, 필요하다 생각되는 설정들이 있다면 자유롭게 설정해주세요.**
+- **ESLint, Prettier를 추가하고 본인만의 Lint 룰을 세팅해주세요.** (가장 대표적인 룰은 eslint-config-airbnb에요. 다만, 꼭 Airbnb룰을 적용할 필요는 없어요.)
+- **Emotion 스타일 라이브러리를 추가하고, reset css를 적용해주세요.**
+- **gitignore를 추가하고, 프로젝트에 불필요한 코드들은 정리해주세요.** (ex. 사용하지 않는 icon 등)
+- **본인만의 폴더 구조 기준을 세우고 반영해주세요.**
+- **본인만의 기준으로 일관된 코드를 작성해주세요.**
+- **기능 단위로 나누어 커밋을 해주세요.**
+
+---
+
+
+## 1주차 퀴즈 답변
+
+### 질문 1. Webpack은 무엇이고 어떤 역할을 하고 있나요?
+> **Webpack**은 모듈 번들러(module bundler)로서, JavaScript 애플리케이션을 위한 모듈을 컴파일하고 번들링하는 도구이다. Webpack은 여러 가지 자원을 처리하고 효율적으로 관리하는 역할을 한다.
+ ##### 주요 역할:
+    1. **모듈 번들링**: 여러 개의 자바스크립트 파일을 하나의 파일로 번들링한다. 이렇게 하면 HTTP 요청 수를 줄이고 애플리케이션 로딩 속도를 개선할 수 있다.
+    2. **의존성 관리**: 모듈 간의 의존성을 분석하고, 필요한 모듈들을 포함시켜 애플리케이션을 올바르게 동작하게 한다.
+    3. **코드 스플리팅**: 애플리케이션을 여러 개의 청크로 나누어 필요한 부분만 로드할 수 있게 한다. 이를 통해 초기 로딩 시간을 단축하고, 필요할 때마다 필요한 자원을 로드할 수 있다.
+    4. **로더 사용**: CSS, 이미지, 폰트 등 다양한 파일 형식을 처리할 수 있도록 도와주는 로더를 사용한다. 예를 들어, css-loader, file-loader 등을 사용해 CSS 파일이나 이미지 파일을 자바스크립트 모듈처럼 다룰 수 있다.
+    5. **플러그인 사용**: 빌드 과정에서 다양한 작업을 수행할 수 있는 플러그인을 지원한다. 예를 들어, HtmlWebpackPlugin을 사용해 HTML 파일을 생성하거나, UglifyJsPlugin을 사용해 자바스크립트 파일을 압축할 수 있다.
+
+
+### 질문 2. 브라우저는 어떻게 JSX 파일을 읽을 수 있나요?
+> 브라우저는 기본적으로 JSX 파일을 직접 이해하지 못한다. JSX는 JavaScript XML의 줄임말로, 자바스크립트 내에서 HTML과 유사한 구문을 사용할 수 있게 해주는 문법이다. 브라우저가 JSX 파일을 읽을 수 있게 하려면 아래와 같은 과정이 필요하다.
+
+1. **트랜스파일링**: JSX 코드를 브라우저가 이해할 수 있는 일반 자바스크립트 코드로 변환한다. 이 작업은 보통 Babel 같은 트랜스파일러를 사용해 이루어진다. Babel은 JSX 구문을 React.createElement() 호출로 변환하여 브라우저가 이해할 수 있도록 한다.
+2. **번들링**: Webpack과 같은 도구를 사용해 트랜스파일된 자바스크립트 파일을 번들링한다. 이렇게 하면 여러 개의 자바스크립트 파일을 하나의 파일로 합칠 수 있다.
+3. **빌드 과정**: 개발 환경에서 Webpack과 Babel을 설정해 JSX 파일을 처리한다. 빌드 과정에서 Webpack이 Babel을 통해 JSX 파일을 트랜스파일링하고, 번들링하여 최종적으로 브라우저가 이해할 수 있는 형태의 파일로 만든다.
+
+이 과정 덕분에 브라우저는 JSX를 직접 읽을 필요 없이, 변환된 자바스크립트 파일을 로드하고 실행할 수 있다.
+
+
+### 질문 3. React에서 상태 변화가 생겼을 때 어떻게 변화를 알아챌 수 있나요?
+> React에서 상태 변화가 생겼을 때 변화를 알아차리는 메커니즘은 다음과 같다.
+
+1. **상태 관리**: React 컴포넌트는 상태(state)를 관리한다. 상태는 컴포넌트의 데이터와 UI를 제어하는 데 사용된다. 상태는 보통 useState 훅을 사용해 정의한다.
+2. **상태 변경 함수**: 상태를 변경하기 위해서는 상태 변경 함수(setter)를 사용한다. useState 훅을 사용할 때, React는 상태 변수와 상태 변경 함수를 반환한다. 예를 들어, const [count, setCount] = useState(0);와 같이 사용한다. setCount는 상태를 변경하는 함수이다.
+3. **상태 변경 감지**: React는 상태 변경 함수를 호출할 때마다 해당 컴포넌트의 렌더링을 다시 트리거한다. 이는 React의 "Virtual DOM" 개념에 의해 효율적으로 이루어진다. 상태가 변경되면 React는 Virtual DOM에서 이전 상태와 새로운 상태를 비교(diffing)하여 실제 DOM에 최소한의 변경만 적용한다.
+4. **렌더링 업데이트**: 상태 변경으로 인해 컴포넌트가 다시 렌더링되면, React는 변경된 부분만 실제 DOM에 업데이트한다. 이 과정은 매우 효율적으로 이루어지며, 불필요한 DOM 업데이트를 최소화한다.

eslint.config.mjs

@@ -0,0 +1,62 @@
+export default {
+  env: {
+      browser: true,
+      es2021: true,
+      node: true
+  },
+  extends: [
+      'eslint:recommended',
+      'plugin:react/recommended',
+      'plugin:import/errors',
+      'plugin:import/warnings',
+      'plugin:import/typescript',
+      'plugin:node/recommended',
+      'plugin:promise/recommended',
+      'prettier',
+      'plugin:prettier/recommended',
+  ],
+  parserOptions: {
+      ecmaFeatures: {
+          jsx: true,
+      },
+      ecmaVersion: 12,
+      sourceType: 'module',
+  },
+  plugins: [
+      'react',
+      'import',
+      'node',
+      'promise',
+      'prettier',
+  ],
+  rules: {
+      'prettier/prettier': 'error',
+      'react/jsx-uses-react': 'off',
+      'react/react-in-jsx-scope': 'off',
+      'no-console': 'warn',
+      'import/order': ['error', {
+          'groups': ['builtin', 'external', 'internal'],
+          'pathGroups': [
+              {
+                  'pattern': 'react',
+                  'group': 'external',
+                  'position': 'before',
+              },
+          ],
+          'pathGroupsExcludedImportTypes': ['react'],
+          'newlines-between': 'always',
+          'alphabetize': {
+              'order': 'asc',
+              'caseInsensitive': true,
+          },
+      }],
+      'node/no-unsupported-features/es-syntax': 'off',
+      'promise/always-return': 'off',
+      'promise/catch-or-return': 'off',
+  },
+  settings: {
+      react: {
+          version: 'detect',
+      },
+  },
+};