월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
next cach가 계속 changes에 뜹니다
안녕하세요 노드버드 강의를 듣고 혼자 next 프로젝트를 만들고 있는데요 항상 changes에 엄청나게 많은 caches 및 static의 파일들도 수정이 되고 있습니다 왜 그런지 궁금하며 어떻게 없앨 수 있는건지 궁금합니다 패키지의 스크립트는 아래와 같습니다 "scripts": { "dev": "next dev", "build": "next build", "start": "next start" },
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
faker.js 자체에 무슨 문제가 있는 걸까요?
faker 를 설치했고 package.json 에도 설치가 완료되었고 딱히 오타도 없는 것 같은데 에러가 떴습니다. 분명 package.json 에도 있는데 import 오류가 왜 날까 싶어서 검색을 해보니 무언가 문제가 있는 것 같아요 아니면 제가 찾은 faker.js 가 아니라 다른 걸까요..?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
toolkit과 saga
안녕하세요 제로초님 질문들의 답변중에 saga를 버리고 toolkit으로 넘어가셨다고 하셨는데 saga와 toolkit은 별개 아닌가요?redux- toolkit을 씀으로써 saga를 redux-toolkit에 내장된 redux-thunk로 대체한다로 이해하면 될까요!?앞장에서는 thunk보다 saga를 추천하셔가지고 위에 가정은 아닌것 같고 toolkit에 비동기 미들웨어를 담당하는 다른 부분이 있는건가요!?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인이 왜 유지되는지 궁금합니다.
현재 강의를 응용하여 프론트는 s3, 백엔드는 ec2에 배포한 뒤 도메인 연결까지 하였습니다. 제 코드가 강의와 차이가 있는데, 왜 그래도 로그인 유지가 잘 되는지 궁금합니다. 제 코드에는 app.use(session({ httoOnly: .., secure:.., domain:.. })) 위 코드를 추가하지 않았습니다. 그래서 인지 애플리케이션 탭의 쿠키에서도 connect.sid가 없습니다. 왜 그런데도 로그인이 유지될까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
혹시 faker 라이브러리 이슈가생긴거같은데 버전을 낮춰서 쓰는방법이있나요?
npm i @5 faker로 설치해도 6.6.6버전이 설치되면서 오류가 생겨요 https://www.youtube.com/watch?v=KD9NutaY8a4
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
재빌드 및 redux 질문입니다.
1. 재빌드 현재 코드를 수정하고 저정하기 단축키를 누르면 페이지가 자동적으로 새로고침이 안돼서 ctrl + r 로 한번씩 새로고침 하고있습니다 만약 자동적으로 새로고침을 할려면 어떻게 해야하나요? 2. redux 질문 현재 게시물을 작성하면 user와 post 데이터가 sage에서 yield put({ ... }) yield put({ ... }) 데이터가 변경되는 것을 볼 수 있는데요 만약 sage 없으면 다른 reducer의 데이터를 변경할 수 없게되는건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
에러 문의 드립니다 ㅠㅠ
좋은 강의 잘 듣고 있습니다!! 현재 아래의 에러때문에 이틀째 진도를 나가지 못하고 있습니다. 조언 좀 부탁드립니다. 상황: user의 posts 를 다이나믹 라우팅으로 불러오는 과정에서 에러가 발생합니다. 브라우저 post_saga.js user/[id].js의 SSR 부분 post_action.js 서버 로그 1. 서버의 로그를 보면 데이터는 스토어에 UserInfo와 mainPosts에 데이터는 채워지는 것 같은데 user/[id].jsx의 id에 타입에러가 발생해서 렌더링이 완료되지 못하는 것 같습니다. 찾아봐도 id에 큰 문제가 없어보이는데 어떤 문제인지 조언 주실 수 있나요? 2. Error: "MyDocument.getInitialProps()" should resolve to an object. But found "undefined" instead. 위 에러는 SSR 과정에서 문제가 생기면 대부분 위의 에러로그가 발생하는데 이 로그가 내부적으로 뭘 의미하는 지 궁금합니다. 3. 추가로 SSR을 적용한 후부터 서버로그에 의존할 수 밖에 없어서 디버깅이 좀 힘들어지는데 이 부분도 조언 부탁드립니다! 관련된 코드가 많아서 모두 캡쳐하지는 못해서 필요하시다면 아래의 깃허브 주소로 참고 해주시면 감사하겠습니다. https://github.com/Leo-Xee/react-nodeBird
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
서버사이드 랜더링시 초기화 오류.. 서버포트 80?
안녕하세요.. 서버사이드 랜더링 이후에 데이터가 계서 InitialState로 덮어쓰길래.. 어떤 문제인지 확인해보기위해 로그를 찍어주니 80번 포트를 바라보면서 오류가 나더라구요.. 왠지 api 호출시에 포트번호를 자동으로 80으로 설정해주는 거 같은데... 노드버드는 프록시서버가 아니라 CORS 설정을 벡엔드에서 해주는 경우여서 알기가 어렵네요.. 혹시 이런경우 서버사이드 랜더링 서버포트를 따로 설정해야하나요? (현재 next start로 개발서버 돌리고 있으며, 3000번 포트) 참고로 axios로 api 서버(8080포트서버) 를 next.config.js 에서 rewrites 로 프록시서버설정을 통해 사용하고 있습니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
jwt 인증 질문..
1. 쿠키는 모든 http 요청메시지에 포함되어서 보내지게 되는데 jwt 토큰을 쿠키에 보관한다면 매 요청마다 jwt토큰값이 서버로 넘어가는건데 그렇다면 왜 따로 쿠키에 담긴 jwt 토큰값을 꺼내서 http request header의 authorization속성에 담아 보내는 것인지 궁금합니다 2. 1번질문과 연관된 질문입니다 Cookie의 HttpOnly 속성을 설정하게되면 document.cookie와 같은 자바스크립트로 쿠키를 조회하는 것을 막고 서버로 Http request 요청을 보낼때만 쿠키를 전송하는 걸로 알고 있는데요 쿠키 조회를 막는다면 요청헤더에 authorization 속성값으로 jwt 토큰을 넣어줄 때 쿠키에 담아둔 jwt 토큰값 조회가 필요할 거같은데 어떻게 꺼내서 사용하는 건가요? 혹시 개발코드는 접근이 가능하고 브라우저에서만 쿠키에 접근을 막는것인가요?? 3. 자동 로그아웃처리를 구현할때 토큰의 만료기한을 지정하는것인가요 아니면 쿠키의 만료기한을 지정하는 것인가요?? 4. 로그인유지라는 기능을 구현한다면 서버에서 jwt 토큰의 만료기한을 지정하지 않는건가요?? 그렇게되면 로그아웃 api 콜 하지 않고 클라이언트에서 쿠키만 삭제하였을때 서버에서 보관하는 리프래쉬 토큰을 어느시점에 지우게되는지 궁금합니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
상태관리 라이브러리 트렌드
안녕하세요. 강의 토대로 이것저것 만들어보고 있습니다. 올려주신 리액트쿼리 버전으로 따라하다가 클라이언트 상태관리도 필요한것 같아서 강의에 나온대로 NPM트렌즈에서 어떤게 잘나가나 검색을 해봤습니다.. 리덕스나 모백스등 인기 상태관리 라이브러리 그래프가 급격한 하락세던데 혹시 2022년에 새로운 트렌드를 주도하는 라이브러리가 나왔나요? context-api 얘기는 많이 들어봤는데 npm트렌즈에선 검색이 잘 안되네요.. 리덕스-리덕스 사가를 그냥 쓸까 하는데 선생님이 Next와 연동이 매끄럽지 않다고 하신부분도 있고 리덕스로 하다보니 초기 코딩량이 많은데다가.. 최근 이용자수도 급격히 떨어지는것 같아서 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
배포 방법에 대한 질문드립니다.
1. 제가 알기로 무중단 배포는 새로 작성한 코드를 추가로 배포할 때, 그 파일을 가져오고 다시 실행하는 동안 끊기지 않게 해주는 것으로 알고있습니다. 그런데 강의에서 ec2는 해당 우분투 shell을 나가면 자동으로 종료되므로 pm2를 이용해 무중단 배포를 하시는 것을 봤습니다. ec2는 끊기지 않기 위해서라도 무조건 무중단 배포를 해야하는 걸까요? 2. 노드버드 강의에서 배운 내용을 토대로 배포 과정을 공부하기 위해 작은 프로젝트를 혼자 진행하고 있는데, aws에도 ec2, s3, elasticbeanstalk등 다양한 옵션이 있고, 이걸 무중단 배포를 해야하느냐, 한다면 pm2를 이용할지 docker와 nginx를 이용할지 등.. 옵션이 많아 어떤 것을 선택해야할지 고민입니다. 제가 원하는건 단순히 프론트 서버를 aws에 배포해서 언제든 실제 주소로 잘 들어가지고, github action을 이용하여 깃허브에 push했을 때 자동으로 테스트 후 배포되는 ci/cd를 구축하는 것 까지가 목표입니다. 현재 스택은 nextjs가 아닌 그냥 리액트입니다. 무중단 배포를 해보고는 싶지만 지금은 고려대상이 아닙니다. 이때 aws에서 어떤 옵션을 선택해야 할지, 무중단 배포를 꼭 해야하는지 등, 가장 알맞은 배포 방법이 어떤 것일지 조언을 구하고 싶습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
styled-componens 가 antd 의 스타일일 오버라이딩하지 못하는데 왜그럴까요?
분명 ButtonWrapper 의 martion-top 속성은 잘 먹었는데왜 FormWrapper 의 padding:10px 속성이 안 먹는지 모르겠습니다.. 제가 콘솔로 확인해본 결과 스타일이 들어간 건 맞는데 .ant-form 자체의 padding:0 속성이 더 우세더라구요그걸 체크해제해주면 제가 준 10px 속성이 들어갑니다.어떤 것이 문제일까요? 아래가 styled 로 준 스타일이 들어간건 맞는데 antd 의 속성보다 밀리는 것 같습니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
문자열 배열 콤마 단위 특정 문자열 삭제하기
제로초님 강의 듣고 혼자 개인 프로젝트 하고 있는데 제가 백단에서 이미지를 json으로 get 요청해서 가져왔습니다. 그리고 이미지를 <img src={value.image} /> 이런 식으로 가져왔는데, 이미지가 여러 개 인것도 있습니다. console.log(value) 1. http://localhost:8000/upload/image/1, 2. http://localhost:8000/upload/image/2,http://localhost:8000/upload/image/3,http://localhost:8000/upload/image/4, 3. http://localhost:8000/upload/image/5, 4. http://localhost:8000/upload/image/6, 5. http://localhost:8000/upload/image/7, http://localhost:8000/upload/image/8, http://localhost:8000/upload/image/9, 여러 개 있는 이미지는 현제 (,)와 여러 이미지가 짬뽕으로 묶여서 있어서 2,5 번은 지금 화면에 액박으로 나오고 있습니다. 그래서 제가 좀 생각 해 보았는데 repllace, substring 다 생각 해 보았는데, (,) 단위로 맨 첫번쨰 만 보이고 뒤에 있는 것들은 삭제 하고 싶습니다. http://localhost:8000/upload/image/2 http://localhost:8000/upload/image/7 (,) 단위로 첫 번쨰 껏만 출력하고 뒤에 있는 것들은 다 없애버리고 싶은데 어떻게 해줘야 할지 모르겠습니다..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
앱에서 디스패치를 할경우 자동디버그로 일시중지됩니다
코드에서는 중간에 일시정지를 하는 디버그 관련코드가 전혀없는데 로그인버튼이나 로그아웃버튼 클릭시 디스패치가되면서 일시중지가 되며 자동으로 개발자도구에 react-dom 파일에 디스패치 소스부분이 띄워집니다 해결루트가 있을까요 이것때문에 진도가 나가지 않네요 ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
백엔드에서 로그인 인증
우선 로그인시 setCookie잘 작동하고 로그인 성공시 connect.sid가 쿠키에 잘 저장이됩니다. 그 이후 로그인이 되어있어야 할 수 있는 기능을 사용 시 로그인이 필요하다고 합니다. 프론트에서 withCredentials 옵션은 true이고 백에서 req.signedCookies랑 req.user를 찍어보면 각각 암호화된 connect.sid와 undefined가 뜹니다. 실제로 요청헤더에도 쿠키가 잘 들어가 있고 백에서도 이 쿠키를 잘 받아옵니다. 쿠키가 백까지 잘 넘어오는데 로그인 인증이 안될 경우 어떻게 접근해야하나요?쿠키파서랑 세션에서 시크릿키 모두 process.env.COOKIE_SECRET으로 같습니다,
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
import 문법 오류
안녕하세요 다름이 아니라 .eslintrc를 적용하는 와중에 다른 js파일들에서 에러가 생겨서 문의드립니다. vscode 실행 시, js 파일 import구문에 빨간 밑줄이 쳐지면서 Parsing error: Must use import to load ES Module: /Users/seolranlee/study/react/react-nodebird/front/node_modules/eslint-scope/lib/definition.js require() of ES modules is not supported. require() of /Users/seolranlee/study/react/react-nodebird/front/node_modules/eslint-scope/lib/definition.js from /Users/seolranlee/study/react/react-nodebird/front/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/seolranlee/study/react/react-nodebird/front/node_modules/eslint-scope/package.json.eslint 상기와 같은 에러 설명이 뜨는데요..ㅠㅠ 스택 오버 플로우에 검색하니 비슷한 현상이 있어서 따라 해결해 보았는데도 문제현상이 해결되지않아서 직접 문의드려요. https://stackoverflow.com/questions/69554485/eslint-error-must-use-import-to-load-es-module 현재 프로젝트 내 .eslintrc 내용도 함께 전달드립니다. { "parser": "babel-eslint", "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "env": { "browser": true, "node": true, "es6": true }, "extends": [ "airbnb" ], "plugins": [ "import", "react-hooks" ], "rules": { "jsx-a11y/label-has-associated-control": "off", "jsx-a11y/anchor-is-valid": "off", "no-console": "off", "no-underscore-dangle": "off", "react/forbid-prop-types": "off", "react/jsx-filename-extension": "off", "react/jsx-one-expression-per-line": "off", "object-curly-newline": "off", "linebreak-style": "off" // "no-param-reassign": "off" } } 혹시 몰라 package.json 내용도 전달드려요. { "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next -p 3060", "build": "next build" }, "author": "seolranlee", "license": "ISC", "dependencies": { "@ant-design/icons": "^4.7.0", "antd": "^4.16.13", "axios": "^0.24.0", "faker": "^5.5.3", "immer": "^9.0.6", "next": "^9.5.5", "next-redux-wrapper": "^7.0.5", "prop-types": "^15.7.2", "react": "^17.0.2", "react-dom": "^17.0.2", "react-redux": "^7.2.6", "react-slick": "^0.28.1", "redux": "^4.1.2", "redux-devtools-extension": "^2.13.9", "redux-saga": "^1.1.3", "shortid": "^2.2.16", "styled-components": "^5.3.3" }, "devDependencies": { "babel-eslint": "^10.1.0", "eslint": "^8.1.0", "eslint-config-airbnb": "^18.2.1", "eslint-plugin-import": "^2.25.2", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-react": "^7.26.1", "eslint-plugin-react-hooks": "^4.2.0" } }
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
npm run build 시 멈춤현상..(?)
안녕하세요 제로초님~! aws 배포 강의를 앞두고 build를 하는 과정에서 위처럼 3/7 지점에서 멈춰서 더이상 동작하지 않는 현상이 나타납니다.. 원인이 뭘까요 ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리렌더링 질문입니다
리렌더링 설명 중 return( ) 안에 있는 것 중에서바뀐 부분만 리렌더링 된다고 말씀하셨는데어떻게 하면 바뀐 부분만 렌더링 되는지 궁금합니다무엇을 했기 때문에또는useCallback 으로 OOO 인해서 바뀐 부분만 렌더링이 된다how 설명이 궁금합니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
antDesign Warning
앤트디자인 사용 하니까 이런 경고 가 뜨는데 이건 왜뜨는 걸까요? react에서 사용할땐 이런거 없었는데 왜 이런건가요? 새로고침 할때마다 나타납니다. 에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
next js pm2 배포 관련 질문이 있습니다.
현재 배포중인 next js 서비스에 수정사항이 생겨서 새로 코드를 받은 후 npm run build를 할 때, build를 하는 기간 동안 서비스 접속을 하면 500 Error: Cannot find module 가 먼저 나오고, 새로고침을 계속 할 시에 404 Application error: a client-side exception has occurred (see the browser console for more information). 해당 오류가 나옵니다. build가 끝나면 서비스 접속은 되지만 pm2 reload를 하기 전까지는 아래와 같이 매니패스트 파일을 불러오지 못하고, pm2 reload를 하고 나면 정상적으로 서비스가 작동합니다. 해당 사항을 해결하려면 어떻게 해야할지 궁금합니다.