4주차 월요일 프론트엔드 오피스 아워

[jhYun505]

In GitLab by @woomin77 on Oct 21, 2024, 11:07

질문을 댓글로 남겨주세요

[jhYun505]

In GitLab by @woomin77 on Oct 21, 2024, 11:14

클라이언트에서 서버에 보내는 요청 횟수가 너무 많은 문제

• 전체적으로 API 요청이 두 번씩 나가는 문제가 발생 합니다.

상품 목록 페이지 로딩 시

카테고리 별 상품 목록 페이지 로딩 시

• 카테고리별로 상품 목록을 조회할시에는 최대 4번까지 서버에 요청을 보냅니다.

코드

 return (
    <ThemeProvider theme={theme}>
      <Router>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            minHeight: "100vh",
          }}
        >
          <Header
            isAdmin={true}
            categories={categories}
            refreshCategories={fetchCategoriesHeader}
          />
          <div style={{ flex: 1, paddingBottom: "60px" }}>
            {" "}
            {/* Footer 높이만큼 여백 추가 */}
            <Routes>
              <Route path="/" element={<Main />} />
              <Route path="products" element={<ProductList />} />
              <Route path="products/:productId" element={<ProductDetails />} />
              <Route path="products/category/:categoryId" element={<ProductList />} />
              <Route path="/mypage" element={<MyPage />} />
              <Route path="/admin" element={<AdminPage />}>
                <Route index element={<AdminDashboard />} />
                <Route
                  path="categories"
                  element={
                    <CategoryManagementPage
                      refreshCategories={fetchCategoriesHeader}
                    />
                  }
                />
                <Route path="members" element={<Home />} />
                <Route path="orders" element={<Home />} />
                <Route path="products" element={<ProductManagementPage />} />
              </Route>
              <Route path="/about" element={<About />} />
              <Route path="/signin" element={<SignInPage />} />
              <Route path="/signup" element={<SignUpPage />} />
              <Route path="/memberupdate" element={<MemberUpdatePage />} />
            </Routes>
          </div>
          <Footer />
        </div>
      </Router>
    </ThemeProvider>
  );
}

 const fetchProducts = async (page, size) => {
        const response = await axios.get('api/products', {
            params: {
                page: page,
                size: size,
            },
        });
        return response.data;
    }

    const [products, setProducts] = useState([]);
    const [page, setPage] = useState(1);
    const [totalPages, setTotalPages] = useState(0);
    const [currentImages, setCurrentImages] = useState({}); // 각 제품의 현재 이미지를 저장할 객체
    const [zoomedIn, setZoomedIn] = useState(null); // 줌인 상태 관리

    useEffect(() => {
        const loadProducts = async () => {
            const data = await fetchProducts(page - 1, 8);
            setProducts(data.content);
            setTotalPages(data.totalPages);
            // 초기 이미지 설정
            const initialImages = {};
            data.content.forEach(product => {
                initialImages[product.productId] = product.thumbNailImage[0]?.storeName || '';
            });
            setCurrentImages(initialImages);
        };
        loadProducts();
    }, [page]);

• 메인화면 로딩시 axios.get('api/products') 가 한번만 호출된다고 예상했는데 두 번이 호출되는 문제가 있습니다.

  // API 호출 함수
    const fetchProducts = () => {
        axios.get(`/api/products/category/${categoryId}`, {
            params: {
                productName: productSearchCond,
                sortBy: sortBy,
                page: page - 1,
                size: pageSize,
            }
        })
            .then(response => {
                setProducts(response.data.content);
                setTotalPages(response.data.totalPages);

                // 초기 이미지 설정
                const initialImages = {};
                response.data.content.forEach(product => {
                    initialImages[product.productId] = product.thumbNailImage[0]?.storeName || '';
                });
                setCurrentImages(initialImages);
            })
            .catch(error => {
                console.error("Error fetching products", error);
            });
    };

		
		 useEffect(() => {
        resetProductListState(); // 상태 초기화
        fetchProducts();
    }, [categoryId]); // 카테고리 ID가 변경될 때마다 상태 초기화

    useEffect(() => {
        fetchProducts();
    }, [sortBy, page, pageSize]); // 정렬 기준, 페이지, 페이지 크기 변경 시 데이터 로드

• 카테고리 별 상품 목록 화면 로딩시에는 최대 4번까지 서버에 요청을 보냅니다.
• 상태 변경(useEffect) 에 따라서 fetchProducts()가 호출?

[jhYun505]

In GitLab by @Byesol on Oct 21, 2024, 11:27

백엔드에서 jwt 토큰을 설정할 때 보안상의 이유를 생각해 httponly 로 설정해 쿠키를 프론트에서 javascript 로 조작할 수 없게해 프론트에서는 백엔드로 쿠키의 값을 넘겨야만 jwt 토큰 관련 내용들을 현재 알 수 있는 상태입니다.

따라서 로그인 여부, 관리자 여부도 백엔드와의 api 통신을 통해서만 확인이 되는데 이 방식을 수정하는게 좋을까요? 만일 보안은 유지하면서 빠르게 로그인여부 등을 확인할 수 있는 방법이 잇다면 어떤게 있을까요

[jhYun505]

#26 Netlify - EC2 통신 이후 쿠키에 JWT Token 저장 안됨
관련해서 이슈와 질문 남겨두었습니다!

[jhYun505]

In GitLab by @seohyun06 on Oct 21, 2024, 11:34

장바구니 페이지가 로컬스토리지에서 값을 불러오면 상품 이름 가격 이미지가 불러와져야 하는데 불러오지못합니다

[jhYun505]

카테고리를 너무 자주 불러오는 문제

헤더에 카테고리를 가져오는 코드를 추가를 해놓다 보니 페이지를 이동할 때마다 카테고리를 불러오는 것 같습니다.
너무 요청이 잦은 것 같은데 서버에서 카테고리가 업데이트 된 것을 반영 하려면 필요한 부분인 것 같기도 해서 다른 방법이 있는지 궁금합니다.

function App() {
  const [categories, setCategories] = useState([]);

  const fetchCategoriesHeader = useCallback(() => {
    axios
      .get("/api/categories")
      .then((response) => {
        setCategories(response.data);
      })
      .catch((error) => console.error("Error fetching categories:", error));
  }, []);

  useEffect(() => {
    fetchCategoriesHeader();
  }, [fetchCategoriesHeader]);

[jhYun505]

fetch와 axios의 경우 취향의 차이인가요?
팀원들끼리도 무엇을 사용할 지 맞춰야 하는 지 궁금합니다.
아니면 자유롭게 사용하되 하나의 파일 안에서는 fetch/axios 를 통일해주는 것도 괜찮나요?