kakao-tech-campus-2nd-step2 · userjmmm · Jul 31, 2024 · Jul 31, 2024 · Jul 31, 2024 · Jul 31, 2024
diff --git a/README.md b/README.md
@@ -1 +1,40 @@
-# react-deploy
+# react-deploy
+## 4단계 - 질문의 답변을 README에 작성
+
+### 6주차 질문
+- 질문 1. SPA 페이지를 정적 배포를 하려고 할 때 Vercel을 사용하지 않고 한다면 어떻게 할 수 있을까요?
+  - Vercel로 정적 배포를 하는 경우엔 웹 서버의 기능을 추상화하여 제공해서 서버리스 함수와 같은 기능을 통해 사용자가 직접 웹 서버를 설정할 필요가 없습니다.
+  - 하지만 저는 네이버 클라우드 서버를 이용해서 정적 배포를 진행했습니다. 이 서비스는 가상 머신과 유사하게 작동하기 때문에 웹 서버 설치, 프론트엔드 코드 배포, 웹 서버 설정 등의 추가적인 작업이 필요했습니다.
+  - 해당 배포 과정에 대한 자세한 설명은 [여기](https://garbagetime.notion.site/0000b1da7eb34bba924d109b68ed972b)에서 확인하실 수 있습니다!  
+
+- 질문 2. CSRF나 XSS 공격을 막는 방법은 무엇일까요?
+  - CSRF를 막기 위해선 서버에서 고유한 토큰을 생성해서 요청 시 서버에서 토큰의 유효성을 검증하는 로직을 추가하는 방법이 있을 것 같습니다.
+  - XSS 공격을 막기 위해선 사용자 입력을 받을 때 유효성을 검사하고 특수 문자를 escaping 처리하거나, textContent를 사용하여 텍스트 삽입 시 XSS를 방지할 수 있다고 생각합니다.  
+
+- 질문 3. 브라우저 렌더링 원리에대해 설명해주세요.
+  - 브라우저 렌더링은 다음과 같은 4가지 과정을 거쳐서 진행됩니다.  
+
+1. DOM Tree와 CSSOM Tree의 생성
+
+    <HTML을 DOM Tree로 만드는 과정>
+
+    : 토큰화 → 브라우저의 렉싱 과정(토큰이 해당 속성과 규칙을 정의하는 노드 객체로 변환됨) → DOM 트리 생성(각 노드가 서로 연관성을 가질 수 있도록)
+
+    <CSS를 CSSOM Tree로 만드는 과정>
+
+    - DOM이 화면에 어떻게 표시될지 알려주는 역할을 함
+    - CSS도 위→아래로 스타일 규칙이 정해짐 : tree 구조 가짐
+2. Render Tree 생성
+
+    : 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하는 트리
+
+    - document 객체부터 각 노드 순회하며 그에 맞는 CSSOM 찾아 규칙 적용
+    - meta 태그, `display: none;` 속성 - 렌더와 관련 없어 포함X
+3. Layout (= Reflow)
+
+    : 뷰포트 내에서 요소들의 정확한 위치와 크기를 계산하는 과정
+
+    - css에서 상대적 단위(%, em 등) 사용 시, 뷰포트에 맞춰 픽셀 단위로 변환됨
+
+4. 페인트 과정  
+: 화면에 실제 픽셀로 그려지도록 변환하는 과정
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@emotion/styled": "^11.11.0",
     "@tanstack/react-query": "^5.24.1",
     "axios": "^1.6.7",
+    "base-64": "^1.0.0",
     "framer-motion": "^11.0.6",
     "glob": "^11.0.0",
     "react": "^18.2.0",
@@ -54,6 +55,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/base-64": "^1.0.2",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.82",
     "@types/react": "^18.2.57",
@@ -87,4 +89,4 @@
   "overrides": {
     "react-refresh": "0.11.0"
   }
-}
+}
diff --git a/public/token.html b/public/token.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OAuth Callback</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      text-align: center;
+      margin-top: 50px;
+    }
+  </style>
+</head>
+<body>
+  <h1>OAuth Callback</h1>
+  <p id="tokenDisplay">토큰을 기다리고 있습니다...</p>
+  <script>
+    const params = new URLSearchParams(window.location.search);
+    const token = params.get('tokenValue');
+
+    if (token) {
+      // 토큰이 존재하면 로컬 스토리지에 저장
+      console.log('Received token:', token);
+      localStorage.setItem('authToken', token);
+      window.location.href = '/';
+    } else {
+      console.error('Token not found in query parameters.');
+      tokenDisplay.textContent = 'Token not found in query parameters.';
+    }
+  </script>
+</body>
+</html>
diff --git a/src/api/hooks/categories.mock.ts b/src/api/hooks/categories.mock.ts
@@ -8,21 +8,48 @@ export const categoriesMockHandler = [
   }),
 ];
 
-const CATEGORIES_RESPONSE_DATA = [
-  {
-    id: 2920,
-    name: '생일',
-    description: '감동을 높여줄 생일 선물 리스트',
-    color: '#5949a3',
-    imageUrl:
-      'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+const CATEGORIES_RESPONSE_DATA = {
+  totalElements: 2,
+  totalPages: 1,
+  first: true,
+  last: true,
+  size: 10,
+  content: [
+    {
+      id: 2920,
+      name: '생일',
+      description: '감동을 높여줄 생일 선물 리스트',
+      color: '#5949a3',
+      imageUrl:
+        'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+    },
+    {
+      id: 2930,
+      name: '교환권',
+      description: '놓치면 후회할 교환권 특가',
+      color: '#9290C3',
+      imageUrl:
+        'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Fst.kakaocdn.net%2Fproduct%2Fgift%2Fproduct%2F20240131153049_5a22b137a8d346e9beb020a7a7f4254a.jpg',
+    },
+  ],
+  number: 0,
+  sort: {
+    empty: true,
+    sorted: false,
+    unsorted: true,
   },
-  {
-    id: 2930,
-    name: '교환권',
-    description: '놓치면 후회할 교환권 특가',
-    color: '#9290C3',
-    imageUrl:
-      'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Fst.kakaocdn.net%2Fproduct%2Fgift%2Fproduct%2F20240131153049_5a22b137a8d346e9beb020a7a7f4254a.jpg',
+  numberOfElements: 2,
+  pageable: {
+    pageNumber: 0,
+    pageSize: 10,
+    sort: {
+      empty: true,
+      sorted: false,
+      unsorted: true,
+    },
+    offset: 0,
+    paged: true,
+    unpaged: false,
   },
-];
+  empty: false,
+};
diff --git a/src/api/hooks/useGetCategories.ts b/src/api/hooks/useGetCategories.ts
@@ -2,20 +2,58 @@ import { useQuery } from '@tanstack/react-query';
 
 import type { CategoryData } from '@/types';
 
-import { BASE_URL, fetchInstance } from '../instance';
+import { getBaseUrl, fetchInstance } from '../instance';
 
-export type CategoryResponseData = CategoryData[];
+export type CategoryResponseData = {
+  totalElements: number;
+  totalPages: number;
+  first: boolean;
+  last: boolean;
+  size: number;
+  content: CategoryData[];
+  number: number;
+  sort: {
+    empty: boolean;
+    sorted: boolean;
+    unsorted: boolean;
+  };
+  numberOfElements: number;
+  pageable: {
+    pageNumber: number;
+    pageSize: number;
+    sort: {
+      empty: boolean;
+      sorted: boolean;
+      unsorted: boolean;
+    };
+    offset: number;
+    paged: boolean;
+    unpaged: boolean;
+  };
+  empty: boolean;
+};
+
+export const getCategoriesPath = () => `${getBaseUrl()}/api/categories`;
+
+export const getCategories = async (): Promise<CategoryData[]> => {
+  let allCategories: CategoryData[] = [];
+  let currentPage = 0;
+  let hasNextPage = true;
 
-export const getCategoriesPath = () => `${BASE_URL}/api/categories`;
-const categoriesQueryKey = [getCategoriesPath()];
+  while (hasNextPage) {
+    const response = await fetchInstance.get<CategoryResponseData>(
+      `${getCategoriesPath()}?page=${currentPage}&size=100`
+    );
+    allCategories = [...allCategories, ...response.data.content];
+    hasNextPage = !response.data.last;
+    currentPage++;
+  }
 
-export const getCategories = async () => {
-  const response = await fetchInstance.get<CategoryResponseData>(getCategoriesPath());
-  return response.data;
+  return allCategories;
 };
 
 export const useGetCategories = () =>
   useQuery({
-    queryKey: categoriesQueryKey,
+    queryKey: ['categories'],
     queryFn: getCategories,
   });
diff --git a/src/api/hooks/useGetProductDetail.ts b/src/api/hooks/useGetProductDetail.ts
@@ -2,7 +2,7 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { ProductData } from '@/types';
 
-import { BASE_URL, fetchInstance } from '../instance';
+import { getBaseUrl, fetchInstance } from '../instance';
 
 export type ProductDetailRequestParams = {
   productId: string;
@@ -12,7 +12,7 @@ type Props = ProductDetailRequestParams;
 
 export type GoodsDetailResponseData = ProductData;
 
-export const getProductDetailPath = (productId: string) => `${BASE_URL}/api/products/${productId}`;
+export const getProductDetailPath = (productId: string) => `${getBaseUrl()}/api/products/${productId}`;
 
 export const getProductDetail = async (params: ProductDetailRequestParams) => {
   const response = await fetchInstance.get<GoodsDetailResponseData>(

diff --git a/src/api/hooks/useGetProductOptions.ts b/src/api/hooks/useGetProductOptions.ts
@@ -2,15 +2,15 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { ProductOptionsData } from '@/types';
 
-import { BASE_URL, fetchInstance } from '../instance';
+import {getBaseUrl, fetchInstance } from '../instance';
 import type { ProductDetailRequestParams } from './useGetProductDetail';
 
 type Props = ProductDetailRequestParams;
 
 export type ProductOptionsResponseData = ProductOptionsData[];
 
 export const getProductOptionsPath = (productId: string) =>
-  `${BASE_URL}/api/products/${productId}/options`;
+  `${getBaseUrl()}/api/products/${productId}/options`;
 
 export const getProductOptions = async (params: ProductDetailRequestParams) => {
   const response = await fetchInstance.get<ProductOptionsResponseData>(

diff --git a/src/api/hooks/useGetProducts.ts b/src/api/hooks/useGetProducts.ts
@@ -6,7 +6,7 @@ import {
 
 import type { ProductData } from '@/types';
 
-import { BASE_URL } from '../instance';
+import { getBaseUrl } from '../instance';
 import { fetchInstance } from './../instance/index';
 
 type RequestParams = {
@@ -35,12 +35,14 @@ type ProductsResponseRawData = {
 export const getProductsPath = ({ categoryId, pageToken, maxResults }: RequestParams) => {
   const params = new URLSearchParams();
 
-  params.append('categoryId', categoryId);
+  if (pageToken)
+    params.append('page', pageToken);
+  if (maxResults)
+    params.append('size', maxResults.toString());
   params.append('sort', 'name,asc');
-  if (pageToken) params.append('page', pageToken);
-  if (maxResults) params.append('size', maxResults.toString());
+  params.append('categoryId', categoryId);
 
-  return `${BASE_URL}/api/products?${params.toString()}`;
+  return `${getBaseUrl()}/api/products?${params.toString()}`;
 };
 
 export const getProducts = async (params: RequestParams): Promise<ProductsResponseData> => {
@@ -58,6 +60,7 @@ export const getProducts = async (params: RequestParams): Promise<ProductsRespon
 };
 
 type Params = Pick<RequestParams, 'maxResults' | 'categoryId'> & { initPageToken?: string };
+
 export const useGetProducts = ({
   categoryId,
   maxResults = 20,
@@ -71,4 +74,4 @@ export const useGetProducts = ({
     initialPageParam: initPageToken,
     getNextPageParam: (lastPage) => lastPage.nextPageToken,
   });
-};
+};
diff --git a/src/api/instance/index.ts b/src/api/instance/index.ts
@@ -2,6 +2,8 @@ import { QueryClient } from '@tanstack/react-query';
 import type { AxiosInstance, AxiosRequestConfig } from 'axios';
 import axios from 'axios';
 
+let BASE_URL = localStorage.getItem('baseURL') || 'https://api.example.com';
+
 const initInstance = (config: AxiosRequestConfig): AxiosInstance => {
   const instance = axios.create({
     timeout: 5000,
@@ -16,10 +18,8 @@ const initInstance = (config: AxiosRequestConfig): AxiosInstance => {
   return instance;
 };
 
-export const BASE_URL = 'https://api.example.com';
-// TODO: 추후 서버 API 주소 변경 필요
-export const fetchInstance = initInstance({
-  baseURL: 'https://api.example.com',
+export let fetchInstance = initInstance({
+  baseURL: BASE_URL,
 });
 
 export const queryClient = new QueryClient({
@@ -32,3 +32,17 @@ export const queryClient = new QueryClient({
     },
   },
 });
+
+export const updateBaseUrl = (newBaseUrl: string) => {
+  BASE_URL = newBaseUrl;
+  localStorage.setItem('baseURL', newBaseUrl);
+  fetchInstance = initInstance({
+    baseURL: BASE_URL,
+  });
+  // 선택한 이름마다 잘 받아오는지 확인용, 추후 삭제 예정
+  console.log('Updated fetchInstance:', fetchInstance.defaults.baseURL);
+};
+
+export const getBaseUrl = () => {
+  return localStorage.getItem('baseURL') || 'https://api.example.com';
+};