경북대 FE_안희정 6주차 과제 Step3, 4

.eslintrc.js

@@ -0,0 +1,59 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'airbnb/hooks',
+    'airbnb-typescript',
+    'prettier',
+    'plugin:storybook/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: [
+    'react',
+    '@typescript-eslint',
+    'react-hooks',
+    'json-format',
+    'simple-import-sort',
+    '@emotion',
+    'prettier',
+  ],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
+    '@typescript-eslint/consistent-type-imports': 'warn',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+      },
+    ],
+    'import/extensions': ['off'],
+    'import/no-extraneous-dependencies': ['off'],
+    'react/jsx-filename-extension': [
+      'warn',
+      {
+        extensions: ['.tsx', '.js', '.jsx'],
+      },
+    ],
+    '@typescript-eslint/no-use-before-define': ['off'],
+  },
+  ignorePatterns: ['**/build/**/*', '.eslintrc.js', 'craco.config.js'],
+  settings: {
+    '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*
+
+.yaml

.prettierignore

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

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "arrowParens": "always"
+}

.storybook/main.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  webpackFinal: async (config) => {
+    config.resolve?.plugins?.push(
+      new TsconfigPathsPlugin({
+        configFile: path.resolve(__dirname, '../tsconfig.json'),
+      }),
+    );
+
+    return config;
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react';
+import '@/styles';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -1 +1,71 @@
-# react-deploy
+# react-deploy
+
+
+🚀 Q&A
+
+
+> 1. SPA 페이지를 정적 배포를 하려고 할 때 Vercel을 사용하지 않고 한다면 어떻게 할 수 있을까요?
+
+
+- Github Page
+- CloudFlare Page
+- AWS S3 + CloudFront + Route53
+- Netlify
+- Heroku
+
+
+> 2. CSRF나 XSS 공격을 막는 방법은 무엇일까요?
+
+
+**CSRF 방지 방법**
+
+
+1. CSRF 토큰 사용: 각 사용자가 요청을 보낼 때 서버가 생성한 CSRF 토큰을 함께 전송하게 합니다. 서버는 요청 시 제공된 토큰과 저장된 토큰을 비교하여 요청이 유효한지 확인합니다. 이 토큰은 예측 불가능하며 각 세션마다 다르기 때문에, 공격자가 CSRF 공격을 성공시키기 어렵습니다.
+
+
+2. 참조자 헤더 검사: 요청의 Referer 또는 Origin 헤더를 검사하여 요청이 신뢰할 수 있는 출처에서 왔는지 확인합니다. 공격자는 자신의 사이트에서 Referer 헤더를 조작할 수 없기 때문에 유효성 검사로 사용할 수 있습니다.
+
+
+3. SameSite 쿠키 속성 사용: SameSite 쿠키 속성을 'Strict' 또는 'Lax'로 설정하면, 사용자의 브라우저가 크로스 사이트 요청에서 쿠키를 전송하지 않습니다. 이를 통해 CSRF 공격을 방지할 수 있습니다.
+
+
+4. CORS 정책 설정: 적절한 CORS (Cross-Origin Resource Sharing) 설정을 통해 신뢰할 수 있는 출처만 요청을 보낼 수 있도록 제한합니다.
+
+
+**XSS 방지 방법**
+
+
+1. 입력 값 검증 및 정화: 사용자 입력을 받기 전에 철저하게 검증하고, 예상치 못한 입력이 포함되지 않도록 정화합니다. 예를 들어, HTML 태그나 스크립트 태그가 포함되지 않도록 합니다.
+
+
+2. 출력 인코딩: 사용자 입력 데이터를 HTML 콘텐츠로 출력할 때, 반드시 해당 데이터를 HTML 엔티티로 인코딩합니다. 예를 들어, <는 &lt;, >는 &gt;로 변환합니다. 이를 통해 악성 스크립트가 실행되지 않도록 합니다.
+
+
+3. Content Security Policy (CSP): CSP를 사용하여 서버가 브라우저에 자바스크립트 실행을 허용할 소스와 위치를 명시적으로 지시합니다. 이를 통해 허용되지 않은 소스의 스크립트 실행을 차단할 수 있습니다.
+
+
+4. HTTP 전송 보안 강화: 모든 데이터를 HTTPS로 전송하여 중간에서 데이터가 조작되지 않도록 합니다.
+
+
+5. 쿠키 속성 설정: 쿠키에 대해 HttpOnly 속성을 설정하여 자바스크립트에서 접근할 수 없도록 하고, Secure 속성을 설정하여 HTTPS 연결에서만 전송되도록 합니다.
+
+
+> 3. 브라우저 렌더링 원리에대해 설명해주세요.
+
+
+1. HTML 파싱과 DOM 트리 생성 : 브라우저가 서버로부터 HTML 문서를 수신하면, 이를 파싱하여 DOM(Document Object Model) 트리를 생성합니다. 이 트리는 HTML 문서의 구조를 나타내며, 각 HTML 요소는 DOM 트리의 노드로 표현됩니다.
+
+
+2. CSS 파싱과 CSSOM 트리 생성 : 브라우저는 HTML 문서 내에 포함된 <style> 태그나 외부 링크된 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다. CSSOM 트리는 CSS 규칙을 포함하며, 각 규칙은 선택자와 스타일 속성으로 이루어져 있습니다.
+
+
+3. 렌더 트리 생성 : 브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성합니다. 렌더 트리는 화면에 표시되어야 하는 모든 노드와 해당 스타일 정보를 포함합니다. DOM 트리의 일부 요소, 예를 들어 <head> 태그나 display: none 스타일이 적용된 요소들은 렌더 트리에서 제외됩니다.
+
+
+4. 레이아웃 계산 (Reflow) : 렌더 트리가 생성되면 브라우저는 각 렌더 트리 노드의 크기와 위치를 계산합니다. 이 과정을 레이아웃 또는 리플로우(Reflow) 라고 합니다. 여기서는 뷰포트의 크기와 각 요소의 스타일 규칙을 고려하여 요소들이 화면에 어떻게 배치될지 결정합니다.
+
+
+5. 페인팅 (Painting) : 레이아웃 계산이 완료되면 브라우저는 각 렌더 트리 노드를 화면에 그립니다. 이 과정은 페인팅이라고 하며, 여기서 요소의 색상, 그림자, 테두리 등 스타일이 적용됩니다. 이 과정은 레스터화라고도 불리며, 픽셀 데이터를 생성하여 화면에 표시합니다.
+
+
+6. 컴포지팅 (Compositing) : 페인팅 단계 이후, 브라우저는 여러 레이어로 분리된 요소들을 하나의 화면 이미지로 합치는 컴포지팅 단계를 수행합니다. 레이어를 사용하면 브라우저는 페이지의 일부분만 업데이트해야 하는 경우 전체 페이지를 다시 렌더링하지 않고, 특정 레이어만 다시 그려 성능을 최적화할 수 있습니다.

craco.config.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  webpack: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+};