안녕하세요.
[배경]
실습을 react :3000 번 포트와 서버 :8080 번 포트로 진행하고 있습니다.
프론트에서는 react-router-dom 으로 다음 경로에 대해서
/
/add
/list
/search
각각 다른 컴포넌트를 노출시키고, 필요 시 useEffect 로 axios 요청을 서버로 보내도록 하고,
백에서는
app.use(express.static(path.join(__dirname, "client/build")));
app.get("/", ...)
app.get("/add", ...)
app.get("/list", ...)
app.get("/search", ...)
app.get("*", (req, res, next) => {
console.log("router section");
if (req.path.split("/")[1] === "static") return next();
res.sendFile("index.html", { root });
});
이렇게 API 들을 관리하고 있었습니다.
:3000 와 :8080 포트를 개별적으로 사용했을 때는 (react build 를 하지 않았을 때)
브라우저에서 화면을 이동이 잘 되고, 컴포넌트가 렌더링 됐을때 axios 호출이 되어 API 도 실행이 잘 됩니다.
[문제점]
빌드를 한 이후에는 브라우저에서 특정 경로로 이동 시,
app.get("/경로", ...) API 가 있을 경우, 화면이 렌더링 되지 않고 response 만 노출됩니다.
생각해보니 브라우저에서 routing 되면, 서버에 해당 경로로 get 요청을 보내게 되니, 응답이 오는 것이라 생각되어
API 경로와 react routing 경로가 중복되지 않도록 설정했더니, 잘 실행됩니다.
[질문]
원래 두 개의 경로가 중복되어도 상관 없는건데, 제가 이상한 방법으로 해결한 것인지 우려됩니다.
중복될 경우 front/back 에 각각 처리하는 로직이 있는것인지, 혹은 위 방법이 맞는건지 궁금합니다 🙂
감사합니다.
