개인 토이 프로젝트를 하나 하고 있는데요, 혹시 next.js에서 도메인 라우팅 하는 방법이 있나요? 문제가 뭐냐면 제가 만든 토이 프로젝트가 있는데 http://www.hubfoodlink.com 으로 접속해서 해당 정보를 클릭하면 리엑트 컴포넌트 모달창이 띄워지는데, http://hubfoodlink.com 으로 접속하면 접속은 되는데 정보 클릭 시 리엑트 컴포넌트 모달창이 안뜨고 An unexpected error has occurred. 라고 떠서 문제가 발생되네요 ㅠ 아니면 http://hubfoodlink.com 접속시 www을 붙여서 http://www.hubfoodlink.com접속이 되게 하는 방법이 있을까요? 물론 강의와 관련없는 질문이긴한데 몇일간 찾아보고 고민해봐도 해결되지 않아서 염치불구하고 질문을 올려봅니다. 죄송합니다 ㅠ
안녕하세요. 제로초님 _app.js의 props로 들어오는 두 가지 중에 하나는 영상에서 설명해주신 Component는 pages폴더 안에 있는 페이지를 가져오는거라면, 두번 째 props로 들어오는 pageProps에 대해서도 혹시 설명해주실 수 있을까요? 공식문서에서는 데이터를 가져오는 방법이라고 번역해서 봤는데 이 부분은 없어도 되는 건가요? 제로초님 깃허브에서 NodeBird Toolkit버전에서는 pageProps가 들어가있더라구요. 그래서 일단 따라해봤고, 내용 정리하려고 하는데 찾아봐도 정확한 역할을 모르겠네요...
안녕하세요. 노드버드 강의 보면서 제가 맡은 프로그램을 짜보고 있습니다. 다름이 아니라, mysql 디비에서 라우팅해서 관련 데이터가 포스트맨으로 넘어오는거까지 확인이 되었는데요, 프론트엔드 부분에서 statusView 페이지에서 관련 데이터 받아와서 뿌리는 테스트 코드를 작성해봤는데, 아무런 반응이 없습니다. 테스트 코드는 다음과 같습니다. 크롬창에서 localhost:3000/statusView 들어가보면 Hello Town1 List만 나오고 console.log(test) 이부분은 undefined로 나옵니다. getInitialProps가 동작을 했다면 console.log('aaaaaa')가 나왔어야 하는데 이건 출력이 안되더군요. 참고로, 백앤드 서버는 실행한 상태에서, 새로 폴더를 만들어서 react, react-dom, next 만 설치한 상태에서 pages 폴더를 만들고 statusView 페이지에 위에 코드를 넣어보니 이때는 또 데이터가 잘 넘어 옵니다. 어디서 부터 디버깅을 해야할지 막막해서 두서없지만 질문 올립니다.
sagas/index.js의 axios default url을 localhost 나 혹은 api.nodebird-hyun.shop 으로 바꾸면 ssr 로그인 유지가 안되요 axios.defaults.baseURL = 'http://127.0.0.1:3065'; // ssr 로그인 유지 o // axios.defaults.baseURL = 'http://localhost:3065'; ssr 로그인 유지 x // axios.defaults.baseURL = 'http://api.nodebird-hyun.shop'; ssr 로그인 유지 x 로그인 시점에서 쿠키가 생성은 되는거 같은데 application 탭을 열어보면 없는데 이유가 무엇일까여? 알려주시면 감사여
안녕하세요 제로초님! 궁금한 부분이 있어 질문 드립니다. 회원가입할 때 개발자도구 network 탭에서 해당 요청의 request payload를 보면 회원가입할 때 입력했던 정보를 그대로 확인할 수 있는데요, 혹시 이거 노출시키지 않도록 설정할 수 있나요? 가령 비밀번호는 암호화 한다는가하는 방법으로요. 실제 실무에서는 이 부분이 보안상 문제가 될 거 같은데, 실무에서는 어떻게 처리하는지 궁금합니다. :) 감사합니다!
안녕하세요 front에서 내용을 수정하고 ec2에서 git pull하고 npm run build과정에서 자꾸 먹통이 나는데 무슨 문제일까요?? 제가 했던 순서는 제로초님 말대로 그냥 로컬 : git commit -am " ~comit msg" git push origin master에서 git에 등록한 후 ubuntu 접속: sudo git pull sudo npm run build 아래의 캡처본과 같이 여기서 자꾸 동작이 멈추게 되네요... pm2 kill하고도 해봤고 pm2를 그대로 실행시킨 상태에서도 해도 똑같네요... 어딜 고쳐야하는 걸까요? (로컬에서 npm run build하면 제대로 작동하고 위의 경우에도 인스턴스 중지 후 다시 재시작해서 build하면 제대로 작동해요)
안녕하세요. 쿠키 관련 질문이 있습니다. front에서 axios로 보낼 때 withcredentials: true 를 해주고 backend에서도 cors에서 credentials : true를 해주었기 때문에 로컬에서 프론트와 백엔드를 같이 돌릴 경우에는 쿠키 공유 문제가 없습니다. 그런데 백엔드를 aws EC2에 두고 프론트 엔드를 로컬에서 돌릴 경우 쿠키가 공유되지 않습니다. 원인은 samesite 정책 때문이고 해결하려면 backend에서 쿠키를 보낼 때 samesite=none과 secure:true를 같이 적용해줘야 한다는 걸 알았습니다. 이를 해결하려면 결국 https 적용을 위해 nginx로 프록시를 만들어 줘야 하는데 다른 방법이 있을까요? 간단한 방법은 로컬에서 계속 테스트 하다가 배포관련 수업에서 하는 것 처럼 도메인을 같이 등록하면 되긴 하지만 이런 경우에도 해결하는 방법이 있는지 궁금합니다.
reducers 폴더의 index파일의 rootReducer함수에서 defalut: return state 들어가는이유 설명해주실때 액션타입해서 그 다음상태 만들어주는것을 처리해주는대 리듀서 초기화할때 또 rootReducer함수가 실행이되는대 그때defalut: return state이 부분이 없으면 리턴값이 undefined된다 이렇게 설명해주셨는대 리듀서가 왜 초기화되는지 이유가 궁금합니다!
안녕하세요!! 강의를 구매하고 시작합니다. 그런데 궁금한 점이 있는데..... 구글에서 '노드버드'라고 검색하니깐, 검색이 되는 것을 확인했습니다. 그런데 네이버에서 '노드버드'를 검색을 해보니 아무것도 보이지 않네요?? 1. 네이버 검색엔진에 등록은 안하신 건가요? 2. 네이버에서는 검색엔진 최적화가 안되는 건가요? 3. 개인 포트폴리오를 만들고 싶은데요, 리액트로 블로그를 만들어서 검색엔진 최적화를 하고 싶은데요. 제가 게시물을 작성 한다면.... 그 각자의 게시물이 검색엔진에 의해서 검색이 될 수 있는거죠? p.s. 조현영 강사님~ 리액트로 검색엔진 최적화가 된다길래.. 뒤도 돌아보지 않고 질렀습니다. 강의 열심히 들어볼께요! 그리고 이걸 마스터 하면 다른 타입스크립트 강좌도 구매할 예정입니다^^
안녕하세요 제로초님, 강의 잘 보고 있다가, 댓글 삭제 기능도 만들고 싶어 만들어 보았는데요... 삭제시 삭제는 되나 새로고침을 해야 사라지는 부분이 있더라구요, 삭제 버튼 클릭시 바로 사라지도록 하고 싶은데 어느 부분이 잘못 됬는지 감이 잡히질 않습니다ㅠㅠ 한번 확인 부탁드려요ㅠㅠ reducer api onClick 삭제 버튼 사가
AppLayout . prototype = { children : Protypes . node . isRequired } 꼭 사용해야 next 에서 children 를 사용할수 있는건가요? react에서는 prototype을 사용하지 않고 children를 사용한것으로 기억해서요
질문1. 리덕스사가에 액션이 전달되는 과정 dispatch({ type: LOG_IN_REQUEST, data: { email, password }, }); 위와 같이 로그인 버튼을 눌렀을때 인자로 전달된 액션을 dispatch 하게 되는데. function* watchLogIn() { yield takeLatest(LOG_IN_REQUEST, logIn); } 이후 사가에서 LOG_IN REQUEST 에관한 액션이 왔을떄 login 함수가 실행된다는 흐름은 이해를 했습니다. 하지만 액션객체의 type 속성인 LOG_IN_REQUEST 가 어떻게 위에 takeLatest 의 첫번째 인자로 인식이되어 login 함수가 실행되는지 직관적으로 이해가 가지않습니다. 이미 사가 라이브러이에서 정해진 규칙같은 건가요 ? 액션을 디스패치 할때 {type: `액션타입`} 형태여야만 takeLatest('액션타입') 이 인식이되는지 궁금합니다. 질문2. yield function* logIn(action) { try { console.log('saga logIn'); // const result = yield call(logInAPI); yield delay(1000); => 멈춤? yield put({ => 멈춤? type: LOG_IN_SUCCESS, data: action.data, }); } catch (err) { console.error(err); yield put({ type: LOG_IN_FAILURE, error: err.response.data, }); } } yield 는 중단점 역활을 한다고 이해했습니다. 그럼 위에 takeLatest 의 두번째인자로 위 login 함수가 실행될때 첫번째 yield delay(1000) 이 실행되고 멈추는게아니라 계속에서 아래 yelid put 쪽을 실행되는부분이 이해가 잘 가지않습니다.! 영상 몇번 돌려보고 찾아도 봤는데 스스로 해결하지 못해 질문 드립니다 ㅜㅠ..
/front/sagas/index.js 에서 axios . defaults . baseURL = 'http://localhost:3065' ; axios . defaults . withCredentials = true ; 이렇게 공통으로 지정을 해주는데, 만약에 예외적으로 다른 URL을 사용하고 싶으면 어떻게 하나요? function loadPostsAPI ( data ) { return axios . get ( 'http://naver.com/test' , data ); } 이런식으로 개별적으로 URL 넣어주면 될까요? 아니면 애초에 공통URL을 지정해주지 말고 각자 넣어줘야 하는걸까요? 공통URL과 더불어 withCredentials 값도 각자 넣으려면 어떻게 해야하는지 궁금합니다!
