context.query.tag 가 안잡힙니다.

React로 NodeBird SNS 만들기

6-3. getInitialProps로 서버 데이터 받기

작성

255

안녕하세요 강의 잘 듣다가 질문이 생겼는데요!

server.js에서 이런 식으로 query 값을 넣어주는데요.

컴포넌트에서 context.query 를 찍어보면 빈값이 들어와요ㅜㅜ

어느 파일을 살펴봐야할 지 모르겠어요.

server.get('/user/:id', (req, res) => {
        return app.render(req, res, '/users', { id: req.params.id });  
});

react javascript

답변 8

제로초(조현영)

지식공유자

server.get('*')을 다른 라우터보다 더 아래로 내리세요. 다른 라우터들보다 이게 위에 있으면 이게 먼저 실행되고 다른 라우터는 실행되지 않습니다.

KY lee

죄송한데.. 저도 같은 에러가 나오는데 코드를 몇 번이나 봐도 undfined가 나오는데 sh님은 어느쪽 부분이 문제였나요?

질문자

네 바쁘실텐데 확인 감사합니다!

지금은 시간이 없어서 카피했지만 시간 날 때 다시 보고

원인을 찾는다면 저같은 분들을 위해 댓글 남기겠습니다.!

제로초(조현영)

지식공유자

단편적인 코드만으로는 파악이 안 됩니다. 코드에는 문제가 없어보이거든요. 제 깃헙 코드를 베이스로 옮겨보시는 게 좋을 것 가틉니다.

질문자

서버를 껐다 켜도 동일합니다ㅠ,,

routes/user.js

router.get('/', (req, res) => {

  if (!req.user) {
    return res.status(401).send('로그인이 필요합니다.');
  }
  const user = Object.assign({}, req.user.toJSON());
  delete user.password;
  console.log('user? ', user);
  return res.json(user);
});

routes/user.js에서 콘솔로 user값은 잘 받아오고있는데요,

여기서 리턴을 하면 pages/user.js에서 받아서 데이터를 보여주는 거죠?

동적 주소로 접근 시 페이지를 못 찾는걸까요?ㅠㅠ next와 express 연결은 해줬는데 뭐가 문제인지...

server.js 에 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, 
         },
    }));

제로초(조현영)

지식공유자

코드 에러보다는 404에러가 뜨는게 문제인 것 같습니다. 서버 껐다켜보시겠어요?

질문자

네네 그 부분이 맞습니다.

http://localhost:3060/user/1

이 url로 접속을 하게 되면 넘겨주는 것 아닌가요?ㅜㅜ 근데 여기에 접속하면 404에러가 뜹니다.

user 및 hashtag 컴포넌트에서는 props로 전달받도록 추가했구요.

관련 코드를 첨부하니 확인해주시면 정말 감사하겠습니다 !

server.js

    server.get('*', (req, res) => {
        return handle(req, res);
   }); 
     
    server.get('/hashtag/:tag', (req, res) => {
        return app.render(req, res, '/hashtag', { tag: req.params.tag }); 

    server.get('/user/:id', (req, res) => { 
        return app.render(req, res, '/users', { id: req.params.id });
    });

_app.js

const NodeBird = ({ Component, store, pageProps }) => { 
  return (
    <Provider store={store}>
      <Head>
        <title>NodeBird</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.16.2/antd.css" />
      </Head>
      <AppLayout>
        <Component {...pageProps}/> 
      </AppLayout>
    </Provider>
  );
};

NodeBird.propTypes = {
    Component: PropTypes.node.isRequired,
    store: PropTypes.object.isRequired,
    pageProps: PropTypes.object.isRequired,
}
NodeBird.getInitialProps = async (context) => {

  const { ctx, Component } = context;
  let pageProps = {};
  
  if(Component.getInitialProps){
    pageProps = await Component.getInitialProps(ctx); 
  }
  return { pageProps };
};

pages/user.js

import React from 'react';
import PropTypes from 'prop-types';

const User = ({ id }) => {
    return (
        <div>
            user { id }
        </div>
    );
};

User.propTypes = {
    id: PropTypes.number.isRequired,
};

User.getInitialProps = async (context) => { 
    User.log('user getInitialProps : ',context.query.id);
    return { id: parseInt(context.query.id, 10)}
};

export default User;

제로초(조현영)

지식공유자

pages/users 컴포넌트의 getInitialProps 내부에서 context 접근하시는 것 말씀하시는 건가요? 그냥 컴포넌트에서는 따로 넘겨주지 않는 한 기본적으로는 접근할 수 없습니다.

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

context.query.tag 가 안잡힙니다.