안녕하세요. 제로초님의 강의에 큰 도움을 받고 있음에 감사의 말씀을 드립니다. 여러 검색결과도, 질문답변도, 해당강의 반복재생으로 찾아보았으나 해결치 못한 부분이 있어 이렇게 직접 질문을 하게 됐네요!   [ 마주한  문제점 & 상황 ] 은 다음과 같습니다. 1. (이전상황) 로그인폼(Id, Pwd)에 텍스트를 입력해 "로그인" 버튼을 누르면 정상적으로 로그인이 됐고, Redux 역시 정상작동해 개발자도구에서 확인이 가능했습니다. 2. (현재상황) 섹션3(Redux) "더미데이터와 포스트폼 만들기" 강의를 들으며 문제에 마주했습니다. 3. (더미데이터와 포스트폼 만들기 강의 후) 잘 넘어가던 로그인 화면에서 데이터는 넘어가 콘솔에 찍히지만, 화면 페이지는 게시판으로 넘어가지 않는 상황에 직면했습니다.    [ 콘솔에 찍히는 Error ] 는 다음과 같습니다.       [정상적으로 넘어가는 로그인 데이터] -> 그러나 로그인이 되지 않고 화면이 넘어가질 않습니다!     [ 소스코드 ] 1. package.json  {   "name": "react-nodebird-front",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "dev": "next -p 3060",     "build": "next build"   },   "author": "jj",   "license": "ISC",   "dependencies": {     "@ant-design/icons": "^4.7.0",     "antd": "^4.19.0",     "next": "^9.5.5",     "next-redux-wrapper": "^6.0.2",     "prop-types": "^15.8.1",     "react": "^16.14.0",     "react-dom": "^16.14.0",     "react-redux": "^7.2.8",     "redux": "^4.1.2",     "redux-devtools-extension": "^2.13.9",     "styled-components": "^5.3.3"   },   "devDependencies": {     "eslint": "^8.10.0",     "eslint-plugin-hooks": "^0.4.2",     "eslint-plugin-import": "^2.25.4",     "eslint-plugin-react": "^7.29.3"   } } 2. LoginForm.js 파일 import React, { useState, useCallback, useMemo } from 'react'; import { Form, Input, Button } from 'antd'; import Link from 'next/link'; import styled from 'styled-components'; import { useDispatch, useSelector } from 'react-redux'; import useInput from "../hooks/useInput"; import { loginAction } from '../reducers/user';   const ButtonWrapper = styled.div `     margin-top: 10px; `;   const FormWrapper = styled(Form) `     padding: 10px; `; const LoginForm = ({ setIsLoggedIn }) => {     const dispatch = useDispatch();     const [id, onChangeId] = useInput('');     const [password, onChangePassword] = useInput('');     const onSubmitForm = useCallback(() => {         console.log(id, password);         dispatch(loginAction({id, password}));     }, [id, password]);       return (         <FormWrapper onFinish={onSubmitForm}>             <div>                 <label htmlFor="user-id">아이디</label>                 <br />                 <Input name="user-id" value={id} onChange={onChangeId} required />             </div>             <div>                 <label htmlFor="user-password">비밀번호</label>                 <br />                 <Input                     name="user-password"                     type="password"                     value={password}                     onChange={onChangePassword}                     required />             </div>             <ButtonWrapper>                 <Button type="primary" htmlType="submit" loading={false}>로그인</Button>                 <Link href="/signup"><a><Button>회원가입</Button></a></Link>             </ButtonWrapper>         </FormWrapper>     ); } export default LoginForm; 3. index.js import React from 'react'; import { useSelector } from "react-redux"; import AppLayout from "../components/AppLayout"; import PostForm from '../components/PostForm'; import PostCard from '../components/PostCard'; const Home = () => {     const { isLoggedIn } = useSelector((state) => state.user);     const { mainPosts } = useSelector((state) => state.post);     return (         <AppLayout>             {isLoggedIn && <PostForm /> }             {mainPosts.map((post) => <PostCard key={post.id} post={post} />)}         </AppLayout>     ); } export default Home; 4. configureStore.js import { createWrapper } from 'next-redux-wrapper'; import { applyMiddleware, compose, createStore } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import reducer from '../reducers'; const configureStore = () => {     const middlewares = [];     const enhancer = process.env.NODE_ENV === 'production'         ? compose(applyMiddleware(...middlewares))         : composeWithDevTools(applyMiddleware(...middlewares));     const store = createStore(reducer, enhancer);     return store; }; const wrapper = createWrapper(configureStore, {     debug: process.env.NODE_ENV === 'development', }); export default wrapper; 5. post.js // [ initialState ] export const initialState = {     mainPosts: [{         id: 1,         User: {             id: 1,             nickname: 'jj',         },         content: '첫 번째 게시글 #해시태그 #익스프레스',         Images: [{             src: 'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832',         }, {             src: 'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832',         }, {             src: 'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832',         }],         Comments: [{             User: {                 nickname: 'jj4',             },             content: 'redux를 학습 중입니다.',         }, {             User: {                 nickname: 'jj3',             },             content: '다음은 sage를 학습 예정임.',         }]     }],     imagePaths: [],     postAdded: false, }   const ADD_POST = 'ADD_POST'; export const addPost = {     type: ADD_POST, } const dummyPost = {     id: 2,     content: '더미데이터입니다.',     User: {         id: 1,         nickname: 'jj1',     },     Images: [],     Comments: [], };   const reducer = (state = initialState, action) => {     switch (action.type) {         case ADD_POST:             return {                 ...state,                 mainPosts: [dummyPost, ...state.mainPosts],                 postAdded: true,             };         default:             return state;     } }; export default reducer; 6. PostForm.js import React, { useCallback, useState, useRef } from 'react'; import { Form, Input, Button } from 'antd'; import { useSelector, useDispatch } from 'react-redux'; import { addPost } from '../reducers/post'; const PostForm = () => {     const { imagePaths } = useSelector((state) => state.post);     const dispatch = useDispatch();     const imageInput = useRef();     const [text, setText] = useState('');     const onChangeText = useCallback((e) => {         setText(e.target.value);     }, []);     const onSubmit = useCallback(() => {         dispatch(addPost);         setText('');     }, []);     const onClickImageUpload = useCallback(() => {         imageInput.current.click();     }, [imageInput.current]);     return (         <Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}>             <Input.TextArea                 value={text}                 onChange={onChangeText}                 maxLength={140}                 placeholder="어떤 신기한 일이 있었나요?"             />             <div>                 <input type="file" multiple hidden ref={imageInput}/>                 <Button onClick={onClickImageUpload}>이미지 업로드</Button>                 <Button type="primary" style={{ float: 'right' }} htmlFor="submit">짹짹</Button>             </div>             <div>                 {imagePaths.map((v) => (                     <div key={v} style={{ display: 'inline-block'}}>                         <img src={v} style={{ width: '200px' }} alt={v} />                         <div>                             <Button>제거</Button>                         </div>                     </div>                 ))}             </div>         </Form>     ) }; export default PostForm; 7. PostCard.js import React from 'react'; const PostCard = () => {     return (         <div>             PostCard         </div>     ); }; export default PostCard; 8. user.js import { HYDRATE } from 'next-redux-wrapper'; // initialState 부분 const initialState = {     user: {         isLoggedIn: false,         user: null,         signUpData: {},         loginData: {},     },     post: {         mainPosts: [],     } }; // [로그인] action creator export const loginAction = (data) => {     return {         type: 'LOG_IN',         data,     } }; // [로그아웃] action creator export const logoutAction = (data) => {     return {         type: 'LOG_OUT',     } }; // reducer const rootReducer = (state = initialState, action) => {     switch (action.type) {         case HYDRATE:             console.log('HYDRATE', action);             return { ...state, ...action.payload };         case 'LOG_IN':             return {                 ...state,                 user: {                     ...state.user,                     isLoggedIn: true,                     user: action.data,                 },             };         case 'LOG_OUT':             return {                 ...state,                 user: {                     ...state.user,                     isLoggedIn: false,                     user: null,                 },             };         default:             return state;     } }; export default rootReducer;   다소 많은 양의 글 내용이지만, 시간이 허락되실 때 답변 주시면, 참 감사할 것 같습니다! 오늘 하루도 고생많으셨고, 이번 한 주도 파이팅입니다! 늘 양질의 강의 감사합니다 ^^  

안녕하세요 수업 잘 듣고 있습니다! 해결이 되지 않아서 질문 남깁니다 ㅠㅠㅠㅠ   리덕스로 글 수정을 시도 중입니다 현재 글 list의 내용을 input에 불러온 뒤 수정한 내용과 같이 보내서 수정을 하고 있습니다  문제는 list를 콘솔에 찍게 되면 2가지의 목록이 불러와지고 있습니다 2번째의 list에는 현재 게시물의 목록, 첫번째는 그 전에 눌렀던 목록이 나오고 있습니다 제가 원하는 list는 두번째의 목록의 list인데 input창까지는 두번째의 list가 잘 불러와지지만 postEditInfo에서는 첫번째 목록이 불러와진 상태이고 이 데이터를 서버에 보내게 되면 그 전에 눌렀던 목록의 list가 현재 목록에 덮어지는 현상이 발생하고 있습니다    그래서 default를 ' ' 로 변경을 하고 나서 목록을 수정하게 되면 postEditInfo가 수정하지 않은 목록은 undefined로 뜨게되고 서버에서 undefiend인 목록은 수정을 하지 않게 막아놓은 상태라서 일단 제대로 수정이 되고 있습니다  하지만 한번 수정을 하고나서 다른 게시물을 수정하게 된다면 원래 남아있던 postEditInfo가  다른게시물에 덮어집니다 ㅠㅠㅠ 왜 두번 목록이 불러와지는지,  현재의 목록을 한번만 불러오려면 어떻게 해야 되는지 궁금합니다 ㅠㅠㅠ    const list = useSelector((state)=> state.postsDetailReducer) console.log('list====',list)     const [postEditInfo, setPostEditInfo] = useState({ restaurant_name: list.restaurant_name, recruitment_personnel: list.recruitment_personnel, delivery_fee: list.delivery_fee, address: list.address, body: list.body, }) ... <input defaultValue={list.address} onChange={handleInputValue('address')} />       const postDetailInitialState = { address: null, body: null, category_food: null, closed: null, created_at: null, delivery_fee: null, id: null, lat: null, lng: null, recruitment_personnel: null, restaurant_name: null, user_id: null, }; const postsDetailReducer = (state=postDetailInitialState, action) => { switch(action.type){ case SHOW_POST_LIST_SUCCESS: let post = action.payload.data.data; let newData = { address: post.address, body: post.body, category_food: post.category_food, closed: post.closed, created_at: post.created_at, delivery_fee: post.delivery_fee, id: post.id, lat: post.lat, lng: post.lng, recruitment_personnel: post.recruitment_personnel, restaurant_name: post.restaurant_name, user_id: post.user_id, } return Object.assign({}, state, newData); case SHOW_POST_EDIT_SUCCESS: return Object.assign({}, state, { contendId: post.contendId, restaurant_name: post.restaurant_name, recruitment_personnel: post.recruitment_personnel, delivery_fee: post.delivery_fee, address: post.address, body: post.body, }); default: return ''; // default: return state; // 원래 코드 } }

10:00분에서 useEffect(() => {    if (!(me && me.id) {            Router.push('/');    } }, [me &&.id]); if (!me) {   return null; }; 이 코드를 if (!me) {   Router.push('/');   return null; }; 이렇게 코드 바꿔도 오류는 없던데 밑에 껄로해도 별 차이 없는건가요?

안녕하세요 제로초님 ! 수업 열심히 듣고 있습니다. 에러에 관한 질문은 아니고 개인적인 질문입니다 ㅜ.ㅜ 원래 리액트를 조금은 공부한 대학생이고, 협업을 하기전 강의로 부족한 부분을 알아가기 위해 듣고 있습니다. next.js도 공부해보고 싶었구요! Q0. 저는 redux에서 액션을 생성할 때 redux-actions를 이용해서 createAction을 사용하고, switch 대신 handleActions를 사용하고 있습니다. 이번 수업에서도 사용해서 진행하고 있습니다. 제 생각에는 취향 혹은 손에 익은 차이가 가장 클 것 같아서 swtich 혹은 return  형식으로 리덕스 액션 생성 함수와 아래 리덕스 타입에 따른 실제 상태 변환을 해주신다고 생각하는데, 그게 맞을까요 ? Q1. 컨테이너를 따로 분리하지 않고 컴포넌트 안에서 바로 액션 디스패치를 넣어주시고 있는데, 강의 도중에 설명도 해주셨지만, 요즈음은 이렇게 바로 컴포넌트에 넣는 것으로 많이 쓰는지 궁금합니다.   저녁에 질문 드려 죄송합니다 !! 초보자라서 질문이 혹시 이상하다면 말씀해주시면 감사하겠습니다.

안녕하세요 :)  const dispatch  = useDispatch();  const getTodoDatum = useCallback(() => {  dispatch(fechLocal());}, [dispatch]); 이런식으로 dispatch를 사용하는 함수를 useCallback으로 감싸고 의존성 배열에 dispatch를 넣었는데요 상태가 변경될 때마다 disptach가 새로 생성되어서 getTodoDatum도 새로 생성되더라구요. 또 이 함수를 전달받는 컴포넌트들도 리렌더링되구요.  그래서 useMemo를 사용하려 했지만,  콜백함수 안에 useDispatch를 넣으니 hook은 컴포넌트 최상단에 넣어야한다는 에러가 뜨더라구요. 음..  잘 전달됐을지 모르지만 요약하자면 useDispatch()의 값을 메모이제이션 할 수 있는 방법이 궁금합니다! 참고 할 수 있는 키워드 혹은 사이트만 알려주셔도 감사하겠습니다:)

직접 공식문서 찾아드리려 했지만 이분께서 정리를 잘 해주셨습니다. ant design업그레이드 되면서 바뀐 문제입니다.   참고: https://shinye0213.tistory.com/317

안녕하세요 zerocho 님 eslint 설정관련해서 질문이 있습니다.   eslint에서 env쪽에 node: true를 주시면서 node에서 사용하니까 주셨다고 하셨는데   next.js는 Browser환경에서 실행되지 않나요? server 코드가 따로 있는게 아닌 것 같아서요   혹시 이유를 알 수 있을까요?

  안녕하세요 강의 잘보고 있습니다! DB 관련해서 제가 몇가지 궁금한게 있는데 1.  예를 들어 하나의 테이블에서 다 대 다일때 즉 user 와 user에 다대다 일때  중간테이블 follow를 만들어주지 않고 한 User 테이블에 컬럼을 늘리는건 별로 안좋은 방식인가요? 예를 들어서 follow 테이블을 만들지 않고 User 테이블안에 팔로우, 팔로잉 수 컬럼을 넣는 방식   2. 다 대 다 관계일시 중간테이블 관련 다 대 다 관계일시 데이터베이스 이론적으로는 중간테이블을 만드는걸로 저도 배우긴 했는데 근데 이게 프로그래밍 관점에서 테이블을 너무 많이 늘리고 join이 많아질시 성능이 안좋다고 배웠던 기억이 있어서요 그래서 이게 실무에서도 다대다일시 중간테이블로 쪼개고 join을 자주 발생시키는지 궁금해요  로그인 같은경우에도 팔로우,잉,쓴글갯수를 유지하기 위해 로그인을 할때마다 post 테이블 follow 테이블 과의 3개의 테이블을 조인시켜서 select 하는 경우인데 과연 이런식의 3중조인을 로그인할때마다 해줘야 하는건가에 대한 생각 꼭 조인을 이렇게 많이해야 저 데이터를 가지고 올 수있나에 대한 DB설계에 대한 생각이 공존합니다. 아니면 제가 너무 오버하는 것일지 문제가 되지 않는 것인지... 그래서 실제로도 실무에서도 이런식으로 중간테이블과 db설계관련 또한 그걸로 인한 많은 join 관련해서 궁금하네요  ++ 제가 이런 생각이 든 이유가 게시판을 만들때 게시물 상세 페이지에 파일갯수랑, 댓글 갯수를 게시물 리스트에 명시해주는 로직을 짜다가  join 몇번해서 select 해서 가져와보자 했는데..  다른분께서 이유는 말안하셨지만 join 그렇게 하지말라고 하셨거든요 그래서 그래서 게시물 DB에 갯수에 대한 컬럼을 늘려서  게시물 상세페이지 작성시 댓글, 파일 insert 할때 게시물 db에 갯수counting 해서 insert 하고 조인 없이 list 뿌려지는 형태로 바꿨거든요 그게 생각이나서요(insert 시 다른 db에는 count+1 insert 한 동작에 각 테이블의 2번의 insert 작업) 3. db 생성시 post.js user.js -> 실 테이블 posts, users 뒤에 s가 붙는데 이건 왜 붙는건 가요?   제가 실무 경험이 없어서 꼭 알고 싶은 포인트입니다.. ** 질문이 많은데 읽어주셔서 감사합니다.

안녕하세요. 선생님, 강의 잘 듣고 있습니다. 리덕스가 AppLayout 에 연결은 된 것 같은데, 초기 값을 가져오지 못합니다. state 에 user 가 없다는 오류만 자꾸 나오는데, 어떤 것을 한번 봐야 할까요?

안녕하세요. 먼저 이런 좋은 강의를 듣게 해주셔서 감사합니다.     질문) pages/index.js 와 components/UserProfile.js 에서 state값이 다른 이유가 궁금해서 질문드립니다.       아래 사진 순서) pages/index.js components/UserProfile.js 콘솔창

전 강좌에서 캐루셀 설정후에 npm run dev를 통하여 확인해보려 하는데  ready - started server on 0.0.0.0:3060, url: http://localhost:3060 Unknown error from PostCSS plugin. Your current PostCSS version is 8.4.5, but autoprefixer uses 6.0.23. Perhaps this is the source of the error below. error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/antd/dist/antd.css BrowserslistError: Unknown browser query `dead`     at Array.reduce (<anonymous>) 이러한 에러가 뜹니다 ㅜ 구글링해서 계속 찾아보고있는 중인데 도대체 무슨이유인지 모르겠습니다 ㅜㅜㅜ 부탁으려요

안녕하세요~ 글 작성시 UserID가 DB에 저장안되는 이슈가 있어서 질문드립니다.   게시글을 작성 후에 TypeError: Cannot read properties of null (reading 'nickname') 에러가 납니다.   지금까지 해본 것 1. 다른 답글에 적어주신 내용처럼 router/post.js 쪽에서 req.user.id를 확인해보았습니다.     위에 사진처럼 작성자의 아이디가 나왔습니다.   2. MySQL의 DB에 보니까 UserId가 올라오고 있지 않습니다. 3. res.send로 받은 result를 console.log를 찍어보니까 UserId가 없었습니다. 4. MySQL 에 UserId를 직접 입력 (1) 해보니까 에러 없이 잘 나왔습니다.   제 생각에는 Model에서 에러가 발생한 것 같습니다.   깃허브에 올려주신 것을 보니까 5버전에 클래스로 하신 코드이신데 강의에서는 위와 같이 사용중이라서 참고를 해보았으나 DB 등록시 UserId가 입력이 안되는 것 같습니다.알려주신대로 기능 추가시 흐름을 정리해서 보면서 생각해보니까 여기까지는 에러가 왜 낫는지 알겠는데 몇시간을 고민해도 버그가 수정이 안되서 송구스러운 마음을 가지고 질문드립니다.       깃허브 주소 : https://github.com/hyunjoogo/react-nodebird

리덕스 설치강좌 듣고 있는데요, 제 vscode에서 설치가 제대로 안됩니다.(win10 64bit) npm i next-redux-wrapper@6 명령어를 넣었을때 ->  npm i redux 명령어를 입력했을때 ->  제대로 설치가 안된거 같은데 어떻게 해야 하나요?

강의소개보면 swr(리덕스대체) 라고 나와있는데 swr도 리덕스처럼 상태관리를 하는건가요?

몽고db 사이트가 많이바뀌어서 cluster 화면이 너무많이바뀌어서 강의를 알아들을수없습니다.

안녕하세요 제로초님 포트폴리오를 nextjs로 새로만들면서 작업중인데 라우트 이동 및 새로고침시에도 각 컴포넌트별 state를 유지하는 효율적인 방법을 좀 알고싶습니다. url : https://dv-node-portfolio.herokuapp.com/git : https://github.com/dvisign/new-next-portfolio전에 리액트로 할때는 useHistory를 이용한 커스텀 훅스 route state에 저장하였는데 nextjs에서는 사용할수가 없어서 useRouer로 저장이 가능한가 확인해보았는데 안되더라구요  그래서 다음으로 알아본것이 redux-persist 라이브러리였는데 리뉴얼된 강좌에서 ssr때문에 HYDRATE 액션때문에  사용은 해보지 않았고 리액트로 redux-persist 라이브러리를 사용했을때 로컬스토리지에 담는것같아 이용하지 않았습니다(개인적으로 localstorage를 신뢰하지 않는 개인적 성향때문에 그렇습니다.)   예를들어서 사이드 네비게이션이 열려있는것을 닫았다가 다른 라우트로 이동했을때 다시 열려있는 현상입니다. 스크린샷을 첨부합니다. 부단 이 부분 뿐만 아니라 나중에 더 만들다보면 이런 state유지 할것들이 더 많아질텐데 어떻게 유지 시키는것이 가장 효율적인 방법일까요?

댓글 등록하고 버튼 눌렀을때 User 값이 안들어오는 것처럼 에러가 뜨는데 그 상태에서 바로 새로고침하면 값이 들어가있네요 분명 통신과정에서 올바르게 include한 전체 값을 들고오는게 맞는데 뭐가 문제인걸까요....?

강의 초반에  redux에 대해서 미리 공부해오고 redux에 type 붙이는것만 알려주신다고 하셨는데 react 무료강좌에서는 redux에 대해 설명한 것이 없으셨던거 같아서요.. 유로강좌인 redux + mobx 강의를 듣고 와야 되는지 여쭈어보려고 합니다.

도움 주신 덕분에 페이지를 잘 관리하고 있었는데 어제부터 DNS문제가 발생하는것 같네요.   저는 Error [ERR_TLS_CERT_ALTNAME_INVALID]: Hostname/IP does not match certificate's altnames: Host: api.-----.com. is not in the cert's altnames: DNS:raa.----.com, DNS:www.raa.----.com 이라는 문제를 접하고 있는데요   제로초님 사이트를 들어가보니 갑자기 문제가 생기신거 같더라고요 혹시 같은 에러때문에 오류가 발생한 것인지 궁금해서 글 남겨 봅니다. https://www.zerocho.com/ Application error An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command   저와 같은 문제라면 아마도 서버사이드 렌더링이 깨져서 생기는 문제일 것 같긴 합니다...만 백 사이드는 오류시 적어도 프론트가 보이도록 해결은 했는데 정작 원인인 does not match certificate's altnames은 해결을 못하고 있네요..   혹시 짐작 가시는 점 있으실까요? 강의랑 큰 관련이 없어보이기도 해서 조심스레 질문 남겨봅니다.      

리덕스에서 관리되는 데이터는 props로 넘기는 대신 redux 접근해서 바로 가져와도 성능적인면에서 크게 상관없나요? 컴포넌트끼리 props 넘기는 과정이 귀찮고 나중에 코드볼때 어떤 데이터가 넘어가야되는지 확인해야되서 리덕스로 웬만한건 다 처리하려고하는데 상관없나요?