인프런 커뮤니티 질문&답변
작성한 질문수
next에서 route주소에서 새로고침 하면 404에러 질문입니다.
작성
·
870
0
comment.js
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { LOAD_POST_REQUEST, LOAD_COMMENTS_REQUEST } from "../reducers/post";
import PostCard from "../components/PostCard";
import Router from "next/router";
import CommentForm from "../components/CommentForm";
import CommentCard from "../components/CommentCard";
import styled from "styled-components";
import { LoadingOutlined } from "@ant-design/icons";
import Theme from "../styles/Theme";
const LoadingWrapper = styled.div`
position: fixed;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 2.5rem;
color: ${Theme.themeColor};
`;
const comment = ({ id }) => {
const dispatch = useDispatch();
const {
post,
comments,
isEditingComment,
isAddingComment,
isDeletingComment,
isLoadingComments,
isLoadedComments
} = useSelector(state => state.post);
const { me } = useSelector(state => state.user);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
dispatch({
type: LOAD_COMMENTS_REQUEST,
data:
id ||
(Router &&
Router.router &&
Router.router.query &&
Router.router.query.tag)
});
dispatch({
type: LOAD_POST_REQUEST,
data:
id ||
(Router &&
Router.router &&
Router.router.query &&
Router.router.query.tag)
});
}, []);
useEffect(() => {
if (isLoadedComments) {
return;
}
if (
isEditingComment ||
isAddingComment ||
isDeletingComment ||
isLoadingComments
) {
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
}, 500);
}
}, [
isEditingComment,
isAddingComment,
isDeletingComment,
isLoadingComments,
isLoadedComments
]);
return (
<>
{/* <PostCard showMenu={false} post={post} /> */}
{isLoading && (
<LoadingWrapper>
<LoadingOutlined />
</LoadingWrapper>
)}
{me && (
<CommentForm
postId={
id ||
(Router &&
Router.router &&
Router.router.query &&
Router.router.query.tag)
}
/>
)}
{comments &&
!isLoading &&
comments.map(comment => <CommentCard comment={comment} />)}
</>
);
};
comment.getInitialProps = async context => {
const id = context.query.id;
return { id };
};
export default comment;
-----------------------------------------------------------------------------------------
followers.js
import React from "react";
const followers = ({ id }) => {
return <div>followers/{id}</div>;
};
followers.getInitialProps = async context => {
const id = context.query.id;
return { id };
};
export default followers;
2개 js파일을 올려드렸습니다.
절취선 위에 있는 comment.js 파일은 http://localhost:3060/comment/9 에 접속해서 새로고침을 해도 정상적으로 동작합니다.
즉, 처음에 _app.js나 index.js 파일을 거치지 않고 바로 저 위에 주소로 접속해도 정상적으로 접속이 된다는 뜻 입니다.
하지만, 2번째로 올려드린 followers.js를 통해 http://localhost:3060/followers/2
로 _app.js나 index.js 파일을 거치지 않고 바로 접속하면( 즉, 저 위에 주소에서 새로고침) 하면, 404 에러가 나옵니다.
답변 4
0
0
0
꿈나무
질문자
프론트 서버에 아래 같이 server.js로 express 설정을 했는데, 이거 말씀하시는게 아닌가요? 다른걸 더 해야할까요?
const express = require("express");
const next = require("next");
const morgan = require("morgan");
const cookieParser = require("cookie-parser");
const expressSession = require("express-session");
const dotenv = require("dotenv");
// option 설정
const dev = process.env.NODE_ENV !== "production"; // 개발모드
const prod = process.env.NODE_ENV === "production"; // 배포모드
// express와 next를 연결하는 방법
const app = next({ dev });
const handle = app.getRequestHandler();
dotenv.config();
// 이 부분이 next에 필요한 내용
// 이렇게 하면 next랑 express가 연결됌.
app.prepare().then(() => {
const server = express();
server.use(morgan("dev"));
server.use(express.json());
server.use(express.urlencoded({ extended: true }));
server.use(cookieParser(process.env.COOKIE_SECRET));
server.use(
expressSession({
resave: false,
saveUninitialized: false,
secret: process.env.COOKIE_SECRET,
cookie: {
httpOnly: true,
secure: false // https를 사용한다면 true로 바꿔야함
}
})
);
server.get("/comment/:id", (req, res) => {
return app.render(req, res, "/comment", { tag: req.params.id });
// 이걸통해서 프론트 hashtag 페이지에 tag가 함께 내려감.
// app.render를 통해 pages에 "/hashtag"를 찾는다.
});
server.get("/hashtag/:tag", (req, res) => {
return app.render(req, res, "/hashtag", { tag: req.params.tag });
// 이걸통해서 프론트 hashtag 페이지에 tag가 함께 내려감.
// app.render를 통해 pages에 "/hashtag"를 찾는다.
});
//모든 get요청을 전부 처리함. 화면 띄우는 거 포함
server.get("*", (req, res) => {
return handle(req, res);
});
server.listen(3060, () => {
console.log("next+express running on port http://localhost:3060");
});
});
0