devsn

스타일드 컴포넌트와 className을 통한 스타일 적용의 차이에 대해 궁금합니다

답변 감사합니다 해결했습니다

안녕하세요 ssr 관련 질문드립니다

답변 감사합니다 시도해보겟습니당

<img src="https://cdn.inflearn.com/public/comments/35ce588b-33dd-45f9-b354-75167606e78d/blob" alt="" />
음영 처리 되 있는 부분이 문제가 되는 컴포넌트들입니다. category/[number] 는 게시판이고, 숫자에 따라 게시판 종류가 달라지게 해 놨습니다. 게시판의 게시글들은 posts/[id] 로 향하게 했습니다.&nbsp;
이 때, 게시판(category/number)에서는 ssr을 하지 않고 컴포넌트 안의 useEffect 안에서 dispatch를 통해서 게시판(게시글들을 전부)을 불러옵니다. 아래는 이에 해당하는 사진입니다
<img src="https://cdn.inflearn.com/public/comments/d54ba0bb-cc76-44a4-9df8-004e05c69369/blob" alt="" />(category/[number])

그 다음은 posts/[id]인데요, 여기서 ssr을 사용합니다. 해당 url을 포스트맨에 돌려보면 ,html이 정상적으로 출력됩니다
<img src="https://cdn.inflearn.com/public/comments/a5972888-0596-4afe-b778-a1abb0a113bc/blob" alt="" />

안녕하세요 withRedux관련 질문드립니다

9.5.3 버전을 씁니다
ssr 사용합니다
우선 주신 자료 읽어보겠습니다 감사합니다
ㅠㅠ

<span style="color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px; background-color: #ffffff;">next-redux-wrapper@6와 next@9)의 버전입니다.
<span style="color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px; background-color: #ffffff;">예상했던 주소와 실제 주소는 같습니다
<span style="color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px; background-color: #ffffff;">해당 문제는, 뒤로가기 했을 때 (게시판으로 왔을 때),
<span style="color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px; background-color: #ffffff;">router.query로 주소의 쿼리 스트링을 가져와서 useEffect 안에서 게시글 리스트를 다시 호출하는 식으로 해결은 했습니다.
<span style="color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px; background-color: #ffffff;">근데 이런 문제가 왜 발생하는지 궁금하네요 ㅜㅠ

<div style="background-color: #fffffe; font-family: Consolas, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div>알려주신대로 확인을 해 봤습니다. 헤더나 사이더쪽은 뭔가 정상적으로 html로 나오는 거 같은데, 정작 서버사이드 렌더링으로 데이터를 가져오는 </div>
<div>본문이  주석처리가 되어있네요</div>
<div>이거는 ssr 이 안 된건가요?</div>
<div> <section&nbsp;class="ant-layout"&nbsp;style="padding:0&nbsp;24px&nbsp;24px"></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <main&nbsp;class="ant-layout-content&nbsp;site-layout-background"</div>
<div>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style="padding:24px;margin:0;min-height:280px"></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div><button>modify</button><button>delete</button></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </main></div>
<div></section></div>
<div> ...</div>
<div>
<div style="line-height: 18px;">
<div><script&nbsp;id="__NEXT_DATA__"&nbsp;type="application/json"></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{"props":{"pageProps":{"data":{"id":8,"category":"1","title":"test","content":"\u003cp\u003e568678678\u003c/p\u003e\n","createdAt":"2020-09-22T13:59:22.000Z","updatedAt":"2020-09-22T13:59:22.000Z","deletedAt":null}},"__N_SSP":true},"page":"/posts/[id]","query":{"id":"8"},"buildId":"development","isFallback":false,"gssp":true}</div>
<div></script></div>
</div>
</div>
</div>

안녕하세요 라우팅 관련 질문드립니다

1. 네 말씀하신대로 해봤지만 undefined가 떴습니다
2. context에 query가 {id: 3 (제가 클릭한 글의 id) } 나와서 mobx로 보내서 요청을 보냈습니다.
mobx에 콘솔로 찍은, result에는 data의 프로퍼티로 제가 원하는 db의 값이 나왔습니다.
이를, eRPrender에 넣었습니다.
getServersideProps에서 postData라는 변수에 넣고 보니 아래와 같은 값이 나왔습니다
getter/setter가 뭔지 몰라서...찾아보겠습니다
<img src="https://cdn.inflearn.com/public/comments/68c897b2-ea81-475c-a401-b897381dda96/blob" alt="" />

아래는 전체 코드입니다
<img src="https://cdn.inflearn.com/public/comments/72d37d94-15a7-4d33-aa63-00e37b21cf17/blob" alt="" />

안녕하세요 동적 라우팅 관련 질문드립니다

<pre style="background-color: #ffffff; color: #080808; font-family: 'JetBrains Mono',monospace; font-size: 10.5pt;">export async function getServerSideProps(context) { console.log('in getserverside, context,; ', context) return { props: {data: 7} // will be passed to the page component as props } } 이렇게만 했을 때도, context는 찍히는데, 시험 삼아 리턴 값에 data를 주고 Post컴포넌트에서 넘어 온 값이 있는 지 확인햿지만, 똑같이 undefined입니다 </pre>
<pre style="font-family: 'JetBrains Mono', monospace; font-size: 10.5pt;">const Post = ({props}) => { console.log('in f post, props;', props); // undefined return ( <AppLayout> <div> article</div> </AppLayout> ); };</pre>

devsn

投稿