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

Question

안녕하세요 강의 잘 듣다가 질문이 생겼는데요! server.js에서 이런 식으로 query 값을 넣어주는데요. 컴포넌트에서 context.query 를 찍어보면 빈값이 들어와요ㅜㅜ 어느 파일을 살펴봐야할 지 모르겠어요. server.get('/user/:id', (req, res) => { return app.render(req, res, '/users', { id: req.params.id }); });

zerocho · Answer

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

KY lee · Answer

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

sh · Answer

네 바쁘실텐데 확인 감사합니다! 지금은 시간이 없어서 카피했지만 시간 날 때 다시 보고 원인을 찾는다면 저같은 분들을 위해 댓글 남기겠습니다.!

zerocho · Answer

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

sh · Answer

서버를 껐다 켜도 동일합니다ㅠ,, 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 ,          },     }));

zerocho · Answer

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

sh · Answer

네네 그 부분이 맞습니다. 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 < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/antd/3.16.2/antd.css" /> < AppLayout > < Component { ... pageProps } /> ); }; 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 } ); }; 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 ;

zerocho · Answer

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