강원대 FE_김정윤_1주차 과제 Step2, 3

.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  extends: [
+    'airbnb',
+    'plugin:storybook/recommended',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    'prettier/prettier': ['error', { endOfLine: 'auto' }],
+    'operator-linebreak': ['error', 'before'],
+    'max-depth': ['error', 2],
+    'react/jsx-filename-extension': [1, { extensions: ['.tsx'] }],
+  },
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    'import/resolver': {
+      typescript: {},
+    },
+  },
+};

.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

.prettierignore

@@ -0,0 +1,2 @@
+node_modules/
+.vscode/

.prettierrc.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  arrowParens: 'avoid',
+  proseWrap: 'never',
+  endOfLine: 'auto',
+};

.storybook/main.ts

@@ -0,0 +1,37 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+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'],
+  webpackFinal: async config => {
+    if (!config) {
+      throw new Error('webpackFinal received an undefined config.');
+    }
+
+    return {
+      ...config,
+      plugins:
+        config.plugins?.filter(plugin => {
+          // ESLintWebpackPlugin 플러그인을 필터링하여 제거
+          if (plugin?.constructor?.name === 'ESLintWebpackPlugin') {
+            return false;
+          }
+          return true;
+        }) || [],
+    };
+  },
+};
+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,65 @@
 # react-gift-react-foundation
+
 FE 카카오 선물하기 1주차 과제: React 기초
+
+## ✔️ 기능 구현 목록
+
+### 프로젝트 초기화
+
+- [x] Create React App 기반 프로젝트 생성
+
+- [x] Typescript 세팅
+
+### 프로젝트 관리
+
+- [x] .gitignore 추가
+
+- [x] 폴더 구조 관리
+  ```
+  assets      : 이미지, 폰트 관리
+  components  : 컴포넌트 관리
+  pages       : 페이지 컴포넌트 관리
+  styles      : css 파일 관리
+  utils       : 재사용 가능한 유틸리티 함수 관리
+  ```
+- [x] 불필요한 코드 정리
+
+- [x] 절대 경로로 Import 할 수 있도록 alias를 설정
+
+- [x] tsconfig 구성 확인 후 자유롭게 설정
+
+### 코드 스타일
+
+- [x] ESLint 추가
+
+- [x] Prettier 추가
+
+- [x] Lint 룰 세팅
+
+### 스타일
+
+- [x] emotion 스타일 라이브러리 추가
+
+- [x] reset.css 적용
+
+## ✔️ 유념해야 할 사항
+
+1. 본인만의 폴더 구조 기준을 세우고 반영
+
+2. 본인만의 기준으로 일관된 코드를 작성
+
+3. 기능 단위로 나누어 커밋
+
+## 1주차 질문 - STEP 3 과제
+
+### 질문 1. webpack은 무엇이고 어떤 역할을 하고 있나요?
+
+오픈소스 자바스크립트 모듈 번들러로, 여러개로 나누어져 있는 파일들(JS, CSS, 이미지 등)을 하나의 자바스크립트 코드로 압축하고 최적화 하는 역할을 한다.
+
+### 질문 2. 브라우저는 어떻게 JSX 파일을 읽을 수 있나요?
+
+Babel을 통해 JSX파일이 JS파일로 변환되고, 브라우저가 읽을 수 있게 된다.
+
+### 질문 3. React에서 상태 변화가 생겼을 때 어떻게 변화를 알아챌 수 있나요?
+
+setState와 Hooks를 통해 상태 변화를 감지한다. setState는 상태를 변경하고 해당 컴포넌트의 리렌더링(re-render)을 발생시키도록 스케줄링한다. useEffect Hooks은 상태나 props가 변경될 때 특정 작업을 수행할 수 있도록 한다.

craco.config.js

@@ -0,0 +1,19 @@
+const { CracoAliasPlugin } = require('react-app-alias');
+const path = require('path');
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoAliasPlugin,
+      options: {
+        aliases: {
+          '@components': path.resolve(__dirname, 'src/components'),
+          '@assets': path.resolve(__dirname, 'src/assets'),
+          '@pages': path.resolve(__dirname, 'src/pages'),
+          '@styles': path.resolve(__dirname, 'src/styles'),
+          '@utils': path.resolve(__dirname, 'src/utils'),
+        },
+      },
+    },
+  ],
+};