월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
React.createRef 사용중 Next.js가 createRef 인식을 못하는데 뭐가 문제일까요.. ??
기존에 React로 개발한 프로젝트를 Next.js로 전환하려고 강좌를 보고 있습니다. 본 강좌와 관련이 없는 질문이라면 죄송하지만, 아무리 구글 검색을 해봐도 답을 얻지 못해 도움을 구해보고자 이렇게 질문드립니다. 너무 바쁘실텐데 도움 주시면 정말 감사하겠습니다 우선 오류는 다음과 같습니다. 아래는 제 코드이구요, Ref를 선언하는 부분에서 Next.js가 Ref를 인식하지 못하는 것 같습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
nginx https 적용후 aws ec2 리젼 다수 생성
안녕하세요, 제로초님.. 강의영상에서 커뮤니티 보니깐 진행은 블로그 내용 참조하라고 하셔서 ec2 터미널에서 nginx및 https script 작성했는데 해당 부분 남기고 싶어서 ec2 우분투에서 git 푸시한시점 이후에 EU와 US 지역에서 대량 리젼이 무작위로 생성됐더라구요.. 저는 외부에 있어서 스팸전화나 해당 메일 제목이 무엇인지 모르고 늦게서야 free tier limit alert을 보고 계정정지가 되고 금액이 20만원이상 청구가 되버렸습니다. 의심해볼게 sourcetree로 확인해보니 위에 말한 시점 이후에 대량 생성된 거라 해당 시점과 작업방법에 외에 의심할게 없는데요... 첫 배포시 git clone했을때도 gitignore파일이있었고 https 적용 후에 우분투 루트에서 git push해도 .env파일도 안올라가있는거확인했는데 탈취될 수 있는건가요?? (이전 https 적용 이전 lamda, 카카오 공유하기까지는 아무런 알럿이나 메일은 없었습니다.) 제가 push하는 방법이 잘못된건지 잘몰라서 문의드립니다. https 작업 내용을 남기고싶어서 ec2 우분투에서 작업하고 git remote push한게 잘못된거라면 로컬에서 계속 수정사항이 생기면 git clone을 위해서 우분투에 설정한 https를 git reset --hard 하고 또 설정해줘야하는건지 아니면 진짜 채굴하듯이 탈취당할 수 있는건지 해서요..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
블로그에 해당 과정을 따라한걸 업로드해도 될까요?
[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다. 안녕하세요! 수강생입니다. 블로그에 해당 내용을 학습한 것을 업로드 해도 될까요? 여러가지 성능개선도 해볼 생각입니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
노드버드를 포트폴리오로 활용할 때 궁금한 점이 있습니다!
안녕하세요 제로초님! 좋은 강의 항상 잘 듣고 있습니다! 노드버드를 배포강의까지 모두 수강 상태에서 제가 이 노드버드를 프론트엔드 포트폴리오를 만들때 재구성해서 활용하고 싶은데, 백엔드와 노드 부분은 무지한 상태라 강의를 보면서 이해보단 그저 따라치는 수준에 그쳤습니다. 그래서 이해를 전혀 하지 못한 백엔드 부분을 배제한 채로 백엔드 API가 없다는 가정하에 더미 데이터와 페이커를 사용한 부분까지 포폴에 인용해서 사용하고 싶은데, 여기서 고민인 점이 제 포폴에 강의를 보고 고대로 만든 백엔드 API를 넣어서 연동하는 기능을 보여주는 것이 좋을지, 아니면 백엔드를 고려해서 더미 데이터를 설계한 정도만으로도 좋을지 모르겠습니다. 그리고 혹시 실무에서 프론트엔드 개발자가 배포까지도 하는건가요? 프론트엔드의 영역이 어디까지인지 감을 잡지 못해서 이렇게 질문드립니다…ㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
error 해결했습니다
원인은 아직 제대로 파악하지는 못했습니다. 전에 table email unique 관련 문제로 테이블을 다 날렸고 데이터가 아무것도 없는 상태였습니다. 혹시 데이터가 없어서 SSR하는데 문제가 있는가 싶어서 과거 branch로 이동하여 회원가입을 해서 user 데이터를 만들었고 이후 현재 브랜치로 돌아와 실행해보니 문제가 해결되었습니다. 늦은시간 답변 해주셔서 감사합니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
배포 후 에러 질문드립니다..
데이터쪽은 전혀 모르는 상태에서 배포강의를 보고 따라가던 와중에 프론트 서버 배포 후 도메인까지 연결했지만 로그인과 회원가입 에러가 발생했습니다ㅠ url에 백엔드 주소 앞에 프론트주소까지 같이 오는데 어떤곳이 문제인지를 찾지 못해서 질문드립니다... 어떤 소스를 보여드려야 하는지조차 감을 못잡고 있습니다...ㅠㅠ 도메인은 hummingbird.kr을 사용하고 있습니다!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
에러 질문 있습니다
위와 같이 에러 메세지가 뜹니다 . thunk middleware 문제인가 싶어서 지워도 봤지만 이번엔 getServerSideProps에서 dispatch 할 때 문제가 생깁니다. ```javascript export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => { const cookie = req ? req.headers.cookie : ''; // req가 있다면 cookie에 요청에 담겨진 cookie를 할당한다. axios.defaults.headers.Cookie = ''; // 요청이 들어올 때마다 초기화 시켜주는 것이다. 여기는 클라이언트 서버에서 실행되므로 이전 요청이 남아있을 수 있기 때문이다 if (req && cookie) { axios.defaults.headers.Cookie = cookie; // 서버일때랑 cookie를 써서 요청을 보낼 때만 headers에 cookie를 넣어준다 } store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); store.dispatch({ type: LOAD_POSTS_REQUEST, }); store.dispatch(END); await store.sagaTask.toPromise(); // store/configureStore.js > store.sagaTask }); // 이 부분이 Home 보다 먼저 실행됨 export default Home; ``` 잘되다가 코드를 수정하거나 건든것이 없고 branch에 push 한 뒤 새로운 branch에서 git pull origin master를 하고 생긴 에러입니다. 뭐가 문제인지 구글링을 해보고 데이터 흐름대로 따라가봐도 감이 오질 않습니다 . 조언 부탁드립니다ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
sequelize에서 mysql 배열 관련 질문입니다.
db는 알 것 같으면서도 어렵네요 ㅠㅠ 어떤 상품에 대해서 1.프론트에서 상품 등록시에 제가 넣고 싶은 사이즈들 ex ) ['x', 'm', 'l'] 을 옵션으로 보내기 2.size를 ['x', 'm', 'l'] 배열을 mysql에 저장하기 3.프론트로 db에서의 사이즈의 배열을 가져오기 4.가져온 size 배열 중에서 하나를 선택해서 백엔드로 보내서 db에 저장하기 이런 식으로 구상 해보았습니다. 그런데 sequelize에서는 mysql? 에는 배열로 저장할 수가 없다는 것 같은 문서를 보았습니다. https://sequelize.org/master/class/lib/data-types.js~ARRAY.html 질문을 요약하자면 sequelize 모델설정에서 size 컬럼에 대해 배열 형태로 설정하고 프론트에서 마찬가지로 배열 형태의 데이터를 보내서 db에 저장하는것이 불가능한걸까요???
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
ERR_TLS_CERT_ALTNAME_INVALID 문제
도움 주신 덕분에 페이지를 잘 관리하고 있었는데 어제부터 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은 해결을 못하고 있네요.. 혹시 짐작 가시는 점 있으실까요? 강의랑 큰 관련이 없어보이기도 해서 조심스레 질문 남겨봅니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
Error 상태 질문
안녕하세요 제로초님 리엑트 공식문서에서 상태 데이터를 결정하는 조건 중에 "컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다"라는 적혀있는데 Error 상태 같은 경우 password 상태와 passwordCheck 상태로 구해질수 있는 값이니 상태로 두지않고 인라인으로 (password !== passwordCheck) && <ErrorMessage> 비밀번호가 일치하지 않습니다. </ErrorMessage>로 진행해도 괜찮은건가요? 혹여나 성능에 문제 있는 것인지 제로초님 의견이 궁금합니다!
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 useState 관련 질문
강의를 보다가 useState 훅에서 상태를 변경해주는 함수 즉, setIsLoggedIn을 바로 props로 넘겨주시는 것을보고 궁금한점이 생겨 질문드립니다. 저는 지금까지 상태를 가지고 있는 컴포넌트에서만 setState 함수를 사용하고 자식들에게 보내줄떄는 함수로 감싸서 보냈습니다만 그렇게 사용했던 이유는 상태를 가지고 있는 곳에서 상태를 바꾸는 로직을 관리하기 위함이였습니다. 단순히 스타일차이인 부분인가요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
전역으로 관리하지 않아도 되는것들은 axios로 바로 불러와도 괜찮나요?
현재 서버사이드 렌더링 전까지 강의를 들으면서 궁금한 점이 생겼습니다! mainPost들을 불러오는 경우 saga에서 REQUEST, SUCCESS, FAILURE의 경우를 처리하고 reducer에서 다시 mainPosts에 추가를 해줘야 하는데 이거를 바로 index.js(메인페이지)에서 axios.get으로 불러와서 then과 catch로 데이터, 오류 경우를 받아도 문제가 없을까요? 게시글을 업로드 하는 경우도 마찬가지로 만약 mainPosts를 전역으로 관리하지 않아도 된다면 saga를 거치지 않고 바로 axios.post로 서버에 업로드 해도 되는지 궁금합니다. 그리고 mainPosts나 imagePaths 같은 경우에는 해당 컴포넌트나 페이지에서만 쓰이고 안쓰이는거 같은데 전역으로 관리하는 이유가 궁금합니다. saga를 사용하는 경우 전역으로 관리하지 않아도 되는 state들(해당 컴포넌트에서만 사용되는)도 비동기 요청이 들어가는 경우에는 전역으로 관리하는게 더 좋은 방법인가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
자동로그인 구현에 대하여
현재 자동로그인을 어떻게 구현할지 구상중입니다. 쿠키를 로컬스토리에 저장시켜 서버에 전송하는 방법을 생각했는데, 이대로 하면 될지, 그리고 이게 가능한지 모르겠습니다. 아니면 통상적인 더 좋은 방법이 있을까요? 유저 정보를 그냥 넣어두기엔 유저정보가 계속 업데이트 되는 서비스를 계획중이라... 방법을 알려주시면 정말 감사하겠습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
next 12버전이던데 사용해도 될까요??
12버전 사용해도 될까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Unhandled Runtime Error 질문드립니다
해시태그 클릭시 Unhandled Runtime Error Error: Failed to load script: /_next/static/chunks/pages/hashtag.js 라는 오류페이지가 뜨고 2초정도 후 새로고침 한것처럼 에러창이 없어지며 해시태그 검색 결과페이지 로드되어집니다 결과창에는 별다른 문제가 없고 백엔드 로그에서도 GET /hashtag/%EC%A7%84%EB%8F%8C?lastId=0 200 24.841 ms - 1433 이렇게 잘 되어지는것 같습니다 한번 에러창이 나왔다가 없어지면 새로고침해도 에로는 나오지 않습니다 어떻게 해결해야할까요..ㅜㅜ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
검색 필터링 조건 관리 방법
안녕하세요 강좌 바탕으로 토이 프로젝트를 해보고 있습니다. 상품목록 페이지에 필터링 조건이 많이 있고, 검색어, 페이징처리까지 있습니다. 한가지 조건이 변경되었을때 다른조건은 유지하면서 새로 api조회를 해야할텐데 1. 상품목록page에서 조건들을 useState로 관리하고, 각 component에서 조건변경시 router push 쿼리 이용하여 목록페이지로 쏴주면 조건업데이트해서 조회 2. 리덕스에서 조건들을 관리하고 각 component에서 useDispatch, useSelector 사용 이런 경우 어느방법이 더 잘 쓰이고 효율적인지 조언 부탁드립니다. 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Cors error 인데 원인을 모르겠습니다.
또한, db 지우고 다시 create 해도 계속 대문자로 생성이 되는데 다른 부분을 설정하고 create 해야하나요? 강의에는 해당내용이 없네요 점검해본 사항 입니다. 추가로 확인해봐야할 사항이 있을까요?? 1. ip 주소 설정 2. build 는 잘 됩니다. 3. ec2 프론트 ip 주소로 접속하면 시작화면은 나오는데 강의처럼 api 요청을하면 cors 에러가 나고있습니다. 4. ubuntu 환경에서 모든 설정 확인 후 재시작 5. cors 설정 app.use( cors({ origin: ['http://13.125.207.66', 'http://localhost:3060'], credentials: true, // 다른 도메인 간에 쿠키 전달할 수 있게 }) );
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
next-redux-wrapper 7.0.5 버전 질문있습니다.
잠시 강의를 멈추고 질문합니다. next-redux-wrapper 버전이 7입니다. npm 사이트 보고 참고하여 아래와 같이 사용하여 강의를 진행하려는데 문제가 있을까요? ```javascript export const getServerSideProps = wrapper.getServerSideProps((store) => () => { store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); store.dispatch({ type: LOAD_POSTS_REQUEST, }); }); // 이 부분이 Home 보다 먼저 실행됨 ``` 참고 사이트: https://github.com/kirill-konshin/next-redux-wrapper 참고한 코드 ```javascript export const getServerSideProps = wrapper.getServerSideProps(store => ({req, res, ...etc}) => { console.log('2. Page.getServerSideProps uses the store to dispatch things'); store.dispatch({type: 'TICK', payload: 'was set in other page'}); } ); // Page itself is not connected to Redux Store, it has to render Provider to allow child components to connect to Redux Store const Page: NextPage<State> = ({tick}) => ( <div>{tick}</div> ); ``` ```javascript context.store.dispatch({...}); // 이렇게 사용하지 않고 위와 같이 사용할 예정입니다. ```
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
get Posts error 문제
리트윗 되는것까지 확인하고 "홍길동님이 리트윗 하셨습니다"라고 확인까지 했습니다. 이후 새로고침을 하는데 갑자기 생긴 에러로 감을 잡을수가 없습니다. loadMy_info에 문제가 있는건지 reducer와 saga를 확인하고 back의 routes/user.js와 routes/post.js, routes/posts.js 까지 확인 결과 문제가 없습니다. 원인을 파악하지 못하고 있는데.. 힌트라도 얻을 수 있을까요? routes/user.js routes/post.js routes/posts.js reducer/user.js sagas/user.js stack overflow 통해 해결했습니다. models/user.js 에서 테이블 생성 시 아이디로 쓰일 email을 unique한 값으로 줘서 난 에러 였습니다. 일단 false로 변경 뒤, 진행하고 있는데 에러메세지에서 너무 많은 key가 지정되어 있고 최대 64개의 key만 허용한다고 합니다. 이부분에 대해서 아직 모르겠는데.. 아이디는 하나씩 밖에 없는데 동일한 아이디가 반복된것도 아니고.. 위의 64개의 key는 무엇인지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
eslint 질문
vscode 익스텐션으로 eslint와 prettier를 적용해서 하게되면 npm으로 설치하지 않아도 적용이 되던데 npm으로 eslint, prettier를 설치하고 eslintrc, prettierrc 설정파일 만들어서 옵션설정하는것과 단순히 익스텐션으로만 적용하는것에 차이가 무엇일까요?? 질문 > 팀프로젝트를 한다고하면 eslint와 prettier를 npm으로 설치해서 설정하는 방법과 익스텐션으로만 설정해주는것에 차이가 어떤지 궁금합니다!