월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
어... 이 에러를 어떻게 처리할지 몰라서.. 어떻게 해야요 ?ㅜㅜ
(사진)
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
passport 질문드립니다.
passport에 deserializeUser 에서 세션쿠키에 저장된 id 값을 다시 req.user에 담아준다고 하셨는데, user 라우터에서 req.login시 user 정보를 담아준다면 deserializeUser는 언제 실행되는것이고, 이부분이 실행되었을때는 조인된 테이블의 자료가 없는데 어떻게 작동되는건지 궁굼합니다!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
저가 CSS 를 버튼색을 바꾸려고하는데 아예 먹히지도 않아요
-const SearchInput = styled(Input.Search)` vertical-align: middle; color: #ffb618;`const AppLayout = ({ children }) => { const [isLoggedIn, setIsLoggedIn] = useState(false); return( <div> <Menu mode="horizontal"> <Menu.Item> <Link href="/"><a>Studyboard 📢</a></Link> </Menu.Item> <Menu.Item> <Link href="/profile"><a>Profile </a></Link> </Menu.Item> <Menu.Item> <Link href="/about"><a>About </a></Link> </Menu.Item> <Menu.Item> <SearchInput placeholder="Type it what you looking for" enterButton /> </Menu.Item> <Menu.Item> <Link href="/signup"><a>SignUp </a></Link> </Menu.Item> </Menu> {/*컬럽 사이에 간격 gutter*/} <Row gutter={10}> {/*24개 컬럼 화면 100퍼센트 다사용 6개를 사용 25퍼센트 */} <Col xs={24} md={6} > {isLoggedIn ? <UserProfile /> : <LoginForm /> } </Col> <Col xs={24} md={12} > { children } </Col> <Col xs={24} md={6} > 오른쪽 메뉴 </Col> </Row> </div> 이렇게 했는데 적용이 안돼는 듯해요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
시퀄라이즈 모델
노드강좌를 듣고 추가적으로 듣고있는데 시퀄라이즈 모델 구성하는 부분이 조금 다르네요. 지금 강좌의 방식이 타이핑량은 적은데 혹시 현업에서는 어떤 방식을 선호하는가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
aws 에서 npm run build 실패하는데요
front에서 npm run build 실패하는데요. aws에서 말고 local에서는 npm run build 성공합니다. aws에서 에러 로그는 아래와 같습니다. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! front@1.0.0 build: `cross-env NODE_ENV=production ANALYZE=true next build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the front@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/ubuntu/.npm/_logs/2021-09-14T13_04_47_669Z-debug.log 여기저기 찾아보니까 용량이 크면 빌드가 안된다고 하던데 그래서 그런걸까요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
만약 앤트디자인을 가져와서
앤트디자인에서 가져왔는데 색깔이 마음에안들면 어떻게 고쳐야해요? 주황색으로 버튼색을 고친다거나 서치바를 둥글게 만들다거나 이렇게요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문드립니다.
면접에서 피드백으로 saga와 api가 강결합 되어있다는 피드백을 받았는데 이런경우 어떤식으로 작성해야된다는것일까요? 저는 설명할때 saga를 사용하는 이유가 컴포는트는 화면을 보여주는데에만 집중하고 데이터 통신은 따로 분리하기 위해서 사용하는거라고 설명을 헀는데 이러한 피드백을 받았습니다. 어떻게 수정하라는건지 감이 안잡히네요..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
models안의 index.js 작성 중 에러
안녕하세요 제로초님! 따라하던 중 이런 에러가 발생했는데 제로초님 깃허브랑 비교했을때 아무 차이가 없는데.. 이럴때는 어디서부터 추적하면 될까요?..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
sudo npx pm2 start npm -- start && sudo npx pm2 monit 사용후 에러입니다
포트도 맞게 작성한거 같은데 오류가 뜹니다 찾아보니 80포트에 권한이 없다고 나오는데 해결방법을 적용해도 해결이 되지않아 질문을 남깁니다 { "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next -p 3060", "build": "ANALYZE=true NODE_ENV=production next build", "start": "NODE_ENV=production next start -p 80" }, "author": "HoneyKikiki", "license": "ISC", "dependencies": { "@ant-design/icons": "^4.6.3", "@next/bundle-analyzer": "^11.1.2", "antd": "^4.16.12", "axios": "^0.21.1", "babel-plugin-styled-components": "^1.13.2", "cross-env": "^7.0.3", "faker": "^5.5.3", "i": "^0.3.6", "immer": "^9.0.5", "moment": "^2.29.1", "next": "^9.5.5", "next-redux-wrapper": "^7.0.2", "npm": "^7.23.0", "pm2": "^5.1.1", "prop-types": "^15.7.2", "react": "^16.14.0", "react-dom": "^16.14.0", "react-redux": "^7.2.4", "react-slick": "^0.28.1", "redux": "^4.1.1", "redux-devtools-extension": "^2.13.9", "redux-saga": "^1.1.3", "shortid": "^2.2.16", "styled-components": "^5.3.0", "swr": "^1.0.0", "webpack": "4.44.1" }, "devDependencies": { "babel-eslint": "^10.1.0", "eslint": "^7.32.0", "eslint-config-airbnb": "^18.2.1", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "^2.24.2", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-prettier": "^3.4.1", "eslint-plugin-react": "^7.24.0", "eslint-plugin-react-hooks": "^4.2.0" } }
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
dispatch가 안되는 것 같습니다.
안녕하세요 제로초님. 강의들으면서 따라하던 와중에 문제가 생겨서 해결해보려 하였으나 도저히 모르겠어서 질문 드립니다. 제가 콘솔로그도 보고 redux 툴로도 보는데 보시다시피 HYDRATE말고는 아무런 액션도 들어가지를 않습니다. 프론트의 index.js부터 시작해서 _document.js, _app.js reducer, saga 백앤드의 posts.js 라우터까지 계속 보면서 제로초님 깃허브의 내용을 그대로 제가 따라했는지 체크하면서 하고 있지만 어디서부터 잘못된건지 감이 안잡힙니다. 혹시 이럴때는 어떤 순서대로 버그를 추적하면 될지 조언 부탁드립니다!..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 에러메세지에 대한 질문입니다.
아래와 같은 에러메세지가 나와서 번역기를 돌려보았습니다. 요소 유형이 유효하지 않고 정의된 파일에서 구성요소를 내보내는 것을 잊었거나 기본가져오기와 명명된 가져오기를 혼합했을 수 있습니다라고 적혀있었습니다.. 하지만 무슨 뜻이지 이해가 가지않아 저와 비슷한 여러 에러사이트를 방문하던중 저랑 같은 에러인 사이트를 들어갔더니 해결법이 있어 따라하였지만 다른 에러가 떴습니다. 그래서 원래대로 돌리고 다시돌렸지만 처음에러 그대로 나옵니다. 어떻게 해야할지 몰라서 이렇게 질문드립니다. 아래는 저의 AppLayout.js코드입니다. 그리고 package.json코드입니다. 마지막으로 .eslintrc 코드입니다. 혹시 몰라서 파일경로도 확인했는데 파일경로는 괜찮았습니다. 에러메세지 참고사이트입니다. https://onecompiler.com/questions/3tjhj2ytk/element-type-is-invalid-expected-a-string-for-built-in-components-or-a-class-function-for-composite-components-but-got-undefined-you-likely-forgot-to-export-your-component-from-the-file-it-s-defined-in-or-you-might-have-mixed-up-default-and-named-imports
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
마지막 alert 에러
안녕하세요 제로초님 err.data에 이미 사용중인 아이디입니다. 가 들어있는데 alert 로 표출되지 않습니다. 쉽게 해결되지 않아서 질문 남깁니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
npm run build 오류 해결이 안됩니다.
ubuntu@ip-172-31-15-137:~/react-nodeBird/prepare/front$ npm run build > react-nodebird-front@1.0.0 build /home/ubuntu/react-nodeBird/prepare/front > ANALYZE=true NODE_ENV=production next build Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db info - Using external babel configuration from /home/ubuntu/react-nodeBird/prepare/front/.babelrc info - Creating an optimized production build Failed to compile. ModuleNotFoundError: Module not found: Error: Can't resolve '../../components/AppLayout' in '/home/ubuntu/react-nodeBird/prepare/front/pages/post' > Build error occurred Error: > Build failed because of webpack errors at build (/home/ubuntu/react-nodeBird/prepare/front/node_modules/next/dist/build/index.js:15:918) at runMicrotasks (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:95:5) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-nodebird-front@1.0.0 build: `ANALYZE=true NODE_ENV=production next build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-nodebird-front@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/ubuntu/.npm/_logs/2021-09-13T07_35_54_295Z-debug.log =========================================== 오류를 보고 오류가있는곳은 이곳 두곳 같은데 아무리해도 해결이 되지않습니다. // 레이아웃 파일 import React, { useCallback } from 'react'; import PropTypes from 'prop-types'; import Link from 'next/link'; import { Menu, Input, Row, Col } from 'antd'; import styled from 'styled-components'; import { useSelector } from 'react-redux'; import Router, { useRouter } from 'next/router'; import UserProfile from './UserProfile'; import LoginForm from './LoginForm'; import useInput from '../hooks/useInput'; // const Global = createGlobalStyle` // .ant-row{ // margin-right: 0 !important; // margin-left: 0 !important; // } // .ant-clo:first-child { // padding-left:0 !important ; // } // .ant-col:last-child{ // padding-right: 0 !important; // } // `; const SerachInput = styled(Input.Search)` vertical-align: middle; `; const AppLayout = ({ children }) => { const { me } = useSelector((state) => state.user); const router = useRouter(); const [serachInput, onChangeSearchInput] = useInput(''); const onSearch = useCallback(() => { Router.push(`/hashtag/${serachInput}`); }, [serachInput]); return ( <div> <Menu mode="horizontal" selectedKeys={[router.pathname]}> <Menu.Item key="home"> <Link href="/"> <a>노드버드</a> </Link> </Menu.Item> <Menu.Item key="profile"> <Link href="/profile"> <a>프로필</a> </Link> </Menu.Item> <Menu.Item key="search"> <SerachInput enterButton value={serachInput} onChange={onChangeSearchInput} onSearch={onSearch} /> </Menu.Item> </Menu> <Row gutter={8}> <Col xs={24} md={6}> {me ? <UserProfile /> : <LoginForm />} </Col> <Col xs={24} md={12}> {children} </Col> <Col xs={24} md={6}> <a href="https://www.zerocho.com" target="_blank" rel="noreferrer noopener"> zerocho </a> </Col> </Row> </div> ); }; AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout; ----------------------------------------- // post/[id].js; import React from 'react'; import { useRouter } from 'next/router'; import { END } from 'redux-saga'; import axios from 'axios'; import { useSelector } from 'react-redux'; import Head from 'next/head'; import wrapper from '../../store/configureStore'; import { LOAD_MY_INFO_REQUEST } from '../../reducers/user'; import { LOAD_POST_REQUEST } from '../../reducers/post'; import AppLayout from '../../components/AppLayout'; import PostCard from '../../components/PostCard'; const Post = () => { const router = useRouter(); const { id } = router.query; const { singlePost } = useSelector((state) => state.post); // if (router.isFallback) { // return <div>로딩중...</div>; // } return ( <AppLayout> <Head> <title> {singlePost.User.nickname} 님의 글 </title> <meta name="description" content={singlePost.content} /> <meta property="og:title" content={`${singlePost.User.nickname}님의 게시글`} /> <meta property="og:description" content={singlePost.content} /> <meta property="og:image" content={ singlePost.Images[0] ? singlePost.Images[0].src : 'https://nodebird.com/favicon.ico' } /> <meta property="og:url" content={`https://nodebird.com/post/${id}`} /> </Head> <PostCard post={singlePost} /> </AppLayout> ); }; // export async function getStaticPaths() { // return { // paths: [ // { params: { id: '1' } }, // { params: { id: '2' } }, // { params: { id: '3' } }, // ], // fallback: true, // }; // } export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req, params }) => { const cookie = req ? req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (req && cookie) { axios.defaults.headers.Cookie = cookie; } store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); store.dispatch({ type: LOAD_POST_REQUEST, data: params.id, }); store.dispatch(END); await store.sagaTask.toPromise(); }); export default Post;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
궁금한게 있습니다!
만약에 About 폴더를 만들고 -pages - about -Leadership.js 이렇게 만들었을때 어바웃으로 들어가면 그 메인화면이 어떤게나오나요? 어바웃이라는 페이지가있고 거기에 하위 페이지를 만들려고하는데 어떻게해요? 어바웃폴더에있는 index 메인페이지는 어떻게 설정해줘야하는거예요 ?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
aws ssh 접속오류
제로초님 강의 듣고 웹,앱 서비스를 만들었습니다. aws 는 프리티어를 사용중인데, 백앤드 서버가 다운됐습니다. 저번에 몇번 터졌을때는 pm2를 사용하여서 다시 복구가 되었는데, 이번엔 아예 복구조차 되지않습니다. 그리고 ssh로 백앤드 서버로 접속하려고 하면 줄바꿈은되는데 아무것도 뜨지않습니다. gony ~/Documents/MT master ssh -i "***.pem" ubuntu@ec2-**-***-***-***.ap-northeast-2.compute.amazonaws.com 이게 백앤드서버로 접속하는 코드인데,입력하면 줄바꿈만되고 아무일도 일어나지않습니다. 하지만 프론트 서버로는 접속이 잘됩니다. 혹시 해결방법이 있을까요? 프리티어 사용과 관련있는걸까요...
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
프론트서버 시작후 백엔드서버 오류
안녕하세요 제로초님프론트서버랑 백엔드서버까지 ip주소로 창띄우는 거 까지 했는데요프론트서버 접속할때 백엔드서버에서 오류가나는데이게 뭐땜에 생긴 오류인지 이해가 안가서요..찾아보니까 dns 문제라고 봤는데 그렇다고 뭘확인해야할지 모르겠어서 질문드립니다..ㅠㅠ참고로 moviefeeds는 db 이름입니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
style-component 질문드립니다.
style-component 로 스타일을 선언해서 사용하는 경우 새로고침을 하면 해당 스타일이 적용이안되는데 이건 무슨 문제일까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
lint 적용후 문제
lint 적용후 AppLayout에서 children 부분이 빨갛게 밑줄이 그어져 있습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
gitignore 파일 따로 설치 받을 수 있나요?
안녕하세요 제로초님. 이전 강의까지 제로초님과 조금 다르게 진행하다가 6강부터는 동일한 파일로 강의를 따라가고싶어서 github에서 내려받았는데 gitignore에 적혀있는 파일들이 없어서 실행되지 않는것 같습니다. gitignore에 있는 파일들을 받을 수 있는 경로가 있을까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
https 적용 질문입니다..
안녕하세요 설치가 다른댓글처럼 404가떠서 다른 댓글에 남기신 https://www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb 이거보고 프론트,백 설치했는데요 /etc/nginx/nginx.conf 여기 안에 include /etc/nginx/sites-enabled/*; 이라는 문구가 있으면 nginx.conf말고 vim /etc/nginx/sites-enabled/default 들어가서 그대로 적으면 되는건가요? 서버가 이상한거보니까 제가 뭔가 잘못이해한거같은데 vim /etc/nginx/sites-enabled/default 여기에 그대로 적는게 아닌가요.. 첫번째사진이 처음상태고 두번째로 제가 제로초님 블로그 보고 바꾼상태입니다. sudo service nginx start를 하고 status 는 이상태입니다,, 프론트는 위같은 에러가뜨면서 헤더만뜨고 아무것도안뜨고 백서버는 sudo service nginx start이거하면 아무 말 없이 실행되고 welcome to nginx 인데 백도 지금 잘못된상태인가요? 배포까지는 여태까지 뜨는 에러들 진짜 몇일동안 혼자 다 해결했는데 https적용 이거는 뭐가문제인지를 모르겠어서 질문합니다..