전남대 FE_서민지_1주차 과제

.eslintrc.json

@@ -0,0 +1,68 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "airbnb",
+    "prettier",
+    "plugin:storybook/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error",
+    "react/jsx-filename-extension": [
+      "warn",
+      {
+        "extensions": [".tsx"]
+      }
+    ],
+    "react/no-unknown-property": [
+      "error",
+      {
+        "ignore": ["css"]
+      }
+    ],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": ["**/*.stories.*", "**/.storybook/**/*.*"],
+        "peerDependencies": true
+      }
+    ],
+    "react/require-default-props": "off",
+    //함수형 컴포넌트 정의 방식 지정
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": [
+          "function-declaration",
+          "arrow-function",
+          "function-expression"
+        ]
+      }
+    ]
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      },
+      "typescript": {}
+    }
+  }
+}

.gitignore

@@ -0,0 +1,7 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+
+*storybook.log

.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,51 @@
 # react-gift-react-foundation
+
 FE 카카오 선물하기 1주차 과제: React 기초
+
+### 1주차 1단계 과제
+
+1. cra으로 react 세팅하기
+   `npx create-react-app my-app --template typescript`
+2. tsconfig.json 설정하기
+3. airbnb ESLint 설정하기
+4. emotion 라이브러리 설치 및 reset css
+
+---
+
+### 1주차 2단계 과제
+
+1. Storybook 추가하기
+2. Button 컴포넌트 만들기  
+   Button story 만들기
+3. Input 컴포넌트 만들기  
+   Input story 만들기
+4. Image 컴포넌트 만들기  
+   Image story 만들기
+5. GoodsItem 컴포넌트 만들기  
+   GoodsItem story 만들기
+6. Container 컴포넌트 만들기  
+   Container story 만들기
+7. Grid 컴포넌트 만들기  
+   Grid story 만들기
+
+---
+
+### 1주차 3단계 과제
+
+Q1. webpack은 무엇이고 어떤 역할을 하고 있나요?  
+모던 javascript 애플리케이션을 위한 정적 모듈 번들러  
+모듈번들러: HTML, CSS, JS, Image 등 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.
+
+1. 성능 최적화 & 자동화:  
+   코드 축소와 사용하지 않는 코드를 제거하는 tree shaking과 같은 최적화를 수행함으로써 HTTP 요청 수를 감소하여 웹 사이트 성능을 향상 시킨다
+2. 파일 단위의 자바스크립트 모듈 관리:  
+   파일 하나 하나 나눠서 모듈화하여, 웹 애플리케이션 구성할 수 있게 한다.
+
+Q2. 브라우저는 어떻게 JSX 파일을 읽을 수 있나요?  
+브라우저는 JSX파일을 직접 읽을 수 없기에 JSX를 Javascript로 변환하는 작업을 진행해야한다.  
+그 변환 작업은 바벨과 같은 컴파일러를 통해 이루어진다.
+
+Q3. React에서 상태 변화가 생겼을 때 어떻게 변화를 알아챌 수 있나요?  
+값이 변경 되었다는 걸 판단하기 위해 리액트는 객체로 저장된 state를 비교 연산한다.  
+객체 비교시 판단 근거는 객체의 메모리 주소인데 직접 값을 수정하면 메모리 주소가 동일하여 리액트는 변화를 감지하지 못한다.  
+상태 변경을 추적하고 변경에 따라 구성요소를 다시 렌더링 하려면 setState를 사용해야한다.

craco.config.js

@@ -0,0 +1,17 @@
+const { CracoAliasPlugin } = require('react-app-alias');
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoAliasPlugin,
+      options: {
+        source: 'tsconfig',
+        baseUrl: './src',
+        tsConfigPath: './tsconfig.paths.json',
+      },
+    },
+  ],
+  babel: {
+    presets: ['@emotion/babel-preset-css-prop'],
+  },
+};