spring, nginx 페이지 접속시 api를 통해서 json데이터는 가져오지만 javascript를 인식하지 못함. 진짜 모르겠습니다..

Question

안녕하세요. javascript와 nginx를 갑자기 사용하게 되었는데 현재 지정된 페이지에 접속했을 경우 json데이터만 출력하고 front단을 아예 가져오지 못하는 문제가 발생했습니다. 접속은 다음 링크로 했습니다. "http://localhost:8080/products/category/1" 질문이 조금 잘못되었습니다. 정확히 http://localhost/products/category/1 가 접속이 안되는 것입니다. http://localhost/home으로는 되는데 위의 경우로는 안되네요. 뭔가 :8080을 js자체에서 안 붙여줘서 그런가? 라는 생각도 있습니다... 현재 이렇게 db에 저장된 json 데이터만 가져오고 프론트 파일은 아예 인식이 안됩니다. /home이나 /cart는 인식이 되는 상황입니다. 이 외에도 product-detail도 "http://localhost:8080/products/1" 이런 식으로 하면 나와야하는데 json만 출력됩니다...home에서 넘어가게 해서 하는 것도 안됩니다...front단을 담은 폴더 static은 배경화면 쪽에 존재합니다. 순서대로 nginx.conf, product-list.html, product-list.js 코드입니다. #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; location / { root C:/Users/모자이크/Desktop/static; index home.html home.html; try_files $uri/$uri.html $uri =404; } error_page 500 502 503 504 /50x.html; location = /50x.html { root C:nginx-1.24.0html; } } } Shopping Mall

import { randomId, getUrlParams, addCommas, navigate, checkUrlParams, createNavbar, } from "../../useful-functions.js"; // 요소(element), input 혹은 상수 const productItemContainer = document.querySelector("#producItemContainer"); checkUrlParams("categoryId"); addAllElements(); addAllEvents(); async function addAllElements() { createNavbar(); const categoryId = getCategoryParams(); if (categoryId) { await addProductItemsToContainer(categoryId); await addPagination(categoryId); } else { console.error("카테고리 ID가 제공되지 않았습니다."); } } // addEventListener들을 묶어주어서 코드를 깔끔하게 하는 역할임. function addAllEvents() {} // URL에서 categoryId 가져오기 function getCategoryParams() { const { categoryId } = getUrlParams(); return categoryId; } async function addProductItemsToContainer(categoryId) { try { const response = await fetch(`http://localhost:8080/products/category/${categoryId}`); if (!response.ok) { throw new Error("Failed to fetch products"); } const products = await response.json(); for (const product of products.content) { const random = randomId(); const imageUrl = await getImageUrl(product.productImageUrl); productItemContainer.insertAdjacentHTML( "beforeend", `

${product.productName}

${product.content}

${addCommas(product.price)}원

` ); const productItem = document.querySelector(`#a${random}`); productItem.addEventListener( "click", () => navigate(`/product/detail?id=${product.productId}`) ); } } catch (error) { console.error('데이터를 불러오는 중 오류가 발생했습니다:', error.message); } } async function addPagination(categoryId) { const paginationContainer = document.querySelector("#pagination"); try { const response = await fetch(`http://localhost:8080/products/category/${categoryId}?page=1&size=10`); if (!response.ok) { throw new Error("Failed to fetch pagination data"); } const data = await response.json(); const totalPages = data.totalPages; for (let i = 1; i <= totalPages; i++) { const pageLink = document.createElement("a"); pageLink.textContent = i; pageLink.href = `javascript:void(0);`; pageLink.addEventListener("click", () => loadProductsByPage(categoryId, i)); paginationContainer.appendChild(pageLink); } } catch (error) { console.error('페이지네이션을 생성하는 중 오류가 발생했습니다:', error.message); } } async function loadProductsByPage(categoryId, page) { productItemContainer.innerHTML = ""; try { const response = await fetch(`http://localhost:8080/products/category/${categoryId}?page=${page}&size=10`); if (!response.ok) { throw new Error("Failed to fetch products"); } const products = await response.json(); for (const product of products.content) { const random = randomId(); const imageUrl = await getImageUrl(product.productImageUrl); const productItem = document.createElement("div"); productItem.classList.add("message", "media", "product-item"); productItem.id = `a${random}`; productItem.innerHTML = `

${product.productName}

${product.content}

${addCommas(product.price)}원

`; productItem.addEventListener("click", () => navigate(`/product/detail?id=${product.productId}`)); productItemContainer.appendChild(productItem); } } catch (error) { console.error('데이터를 불러오는 중 오류가 발생했습니다:', error.message); } } @RestController @RequiredArgsConstructor @RequestMapping("/products") public class ProductController { @GetMapping("/category/{categoryId}") public ResponseEntity> getProductsByCategoryId( @PathVariable Long categoryId, @RequestParam(defaultValue = "0") int page, @RequestParam(defaultValue = "10") int size) { Page products = productService.getProductsByCategoryId(categoryId, page, size); return ResponseEntity.ok(products); } } public Page getProductsByCategoryId(Long categoryId, int page, int size) { PageRequest pageRequest = PageRequest.of(page, size); return productRepository.findByCategoryCategoryId(categoryId, pageRequest); } import { navigate, createNavbar } from "../useful-functions.js"; addAllElements(); addAllEvents(); // html에 요소를 추가하는 함수들을 묶어주어서 코드를 깔끔하게 하는 역할임. async function addAllElements() { createNavbar(); await addImageCardsToBlocks(); } // 여러 개의 addEventListener들을 묶어주어서 코드를 깔끔하게 하는 역할임. function addAllEvents() {} // api에서 카테고리 정보 및 사진 가져와서 블록으로 사용 async function addImageCardsToBlocks() { try { const response = await fetch("http://localhost:8080/categories"); if (!response.ok) { throw new Error("Failed to fetch categories"); } const categories = await response.json(); console.log(categories); let blockHTML = ''; // 블록의 HTML을 저장할 변수 for (let i = 0; i < categories.length; i++) { const category = categories[i]; // 객체 destructuring const { categoryId, categoryName, content, imageUrl } = category; // 각 카테고리에 대한 블록 HTML 생성 if (i % 3 === 0) { blockHTML += '

'; } blockHTML += `

${categoryName}

${content}

`; if ((i + 1) % 3 === 0 || i === categories.length - 1) { blockHTML += '

'; } } // 블록에 카드를 추가하기 위해 HTML을 블록에 직접 삽입 document.getElementById('categoryBlocks').innerHTML = blockHTML; // 카드 클릭 시 해당 카테고리의 상품 목록 페이지로 이동 const cards = document.querySelectorAll('.card'); cards.forEach(card => { card.addEventListener('click', () => { const categoryId = card.getAttribute('data-categoryId'); window.location.href = `/products/category/${categoryId}`; }); }); } catch (error) { console.error("Error fetching categories:", error); } }

개발잡부 · Answer

스프링 컨트롤러 코드는 어떻게 되나요

onepunch99 · Answer

뷰페이지 반환하는곳 없음 restcontroller가 뭔지 찾아보세요

spring, nginx 페이지 접속시 api를 통해서 json데이터는 가져오지만 javascript를 인식하지 못함. 진짜 모르겠습니다..

2개의 답변

Q&A 목록