인프런 커뮤니티 질문&답변

express 파일까지 설치하고 server.js에 코드를 작성해 주었습니다.

그런데 웹을 새로고침한 경우

Cannot GET /penguin

이런 에러가 계속 발생합니다. 이 에러를 해결하기 위해서 express를 설치한 것 같은데..무엇이 문제인 걸까요?

혹시 몰라 깃의 코드를 확인해 봤는데, 코드상 문제는 없었습니다.

import Content from "./components/Content.js";
import TabBar from "./components/TabBar.js";
import { request } from "./components/api.js";

export default function App($app) {
 
  this.state = {
    currentTab: window.location.pathname.replace("/", "") || "all",
    photos: [],
  };

  //tab
  const tab = new TabBar({
    $app,
    initialState: this.state.currentTab,
    onClick: async (name) => {
      history.pushState(null, null, `/${name}`);
      this.updateContent(name);
    },
  });
  const content = new Content({
    $app,
    initialState: [],
  });

  // 상태 업데이트 함수
  this.setState = (newState) => {

    this.state = newState;
    tab.setState(this.state.currentTab);
    content.setState(this.state.photos);
  };

 
  this.updateContent = async (tabName) => {

    try {
      const currentTab = tabName === "all" ? '' : tabName;
      const photos = await request(currentTab);
      this.setState({
        ...this.state,
        currentTab: tabName,
        photos:photos,
      })
    } catch (error) {
      console.log(error)
    }
  };

  window.addEventListener("popstate", () => {
  
    this.updateContent(window.location.pathname.replace("/", "") || "all");
  });


  const init = async () => {
    this.updateContent(this.state.currentTab);
  };
  init();
}

 const express = require('express');


const path = require("path");


const app = express();


const PORT = 3000;


app.use(express.static(path.join(__dirname, "..")));


app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname, "..", 'index.html'));
});

app.listen(PORT, () => {
  console.log('START SERVER')
})

++추가질문

port주소를 3000으로 변경하면 해당 오류가 발생하지 않는 것을 확인했습니다. 라이브서버를 자동으로 실행하면 port가 5500이어서 오류가 발생한 것 같습니다.

1) port는 자동으로 3000으로 변경이 안되나요?

2)server.js에서 port를 새로 지정해준 이유가 궁금합니다. 그대로 5500을 하면 안되나요?