월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
http 상태코드에 관하여
안녕하세요 제로초님 저는 이 강의로 유익하고 재미있게 공부를 하는 프론트개발 초보자 입니다.저는 여태 백엔드쪽에서 내려주는 상태들 200ok, 401 error, 500error 등 http상태코드가 자동으로 나오는줄 알았는데 백엔드에서 직접 내려주는걸 알게되었어요. 조금 이상한 생각일지도 모르겠으나 백엔드 개발자가 악의적으로 프론트 에러처럼 서버 에러(500번대)도 400번대로 내려주고 혹은 백엔드개발자도 초보여서 이게 400에러인지, 500에러인지 헷갈려서 잘못 내려주는등의 실수를 할 수 있는건가요? 그렇다면 저같은 초보자들은 상태코드를 나침반 삼아 어디서 에러를 내는지 찾는데 방해가 될꺼같거든요.... ㅠㅜ 이런 사소한 질문까지 드려서 죄송합니다. 급한건 아니니 다른 질문에 답변하시고 시간나실때 답변 부탁드려요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
강의를 보다가 if-else를 안쓰시고, 계속 if만 쓰시던데 속도의 차이가 있는건지, 가독성 때문인건지 특별한 이유가 있나요?
(사진)
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
CSR vs SSR
안녕하세요! 강좌 너무너무 잘 보고 있습니다 :) 계속 수강을 하면서 궁금한 점이 생겨 질문 드립니다. 1. CSR과 SSR의 차이가 SSR은 애초에 사이트가 로드될 때 부터 데이터가 담겨있다는 것이라고 배웠는데요. 그럼 어느 경우에 CSR을, 또 어떤 경우에는 SSR을 쓰시는지 알 수 있을까요!? 어떻게 구분해서 써야하는지 아직 잘 모르겠어서요 :( 2. 또, 로그인 정보를 불러오기 위해서 컴포넌트마다 getServerSideProps를 통해 로그인 정보 요청 request를 보내셨는데, 이건 글로벌하게 하나의 파일로 만들어서 사용할 수 없는 것인지 궁금합니다. 제 질문이 바보같은 질문은 아니였나 모르겠네요 .. ㅠㅠ 답변 주시면 감사하겠습니다 !!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Next link 서버사이드렌더링 질문
안녕하세요! 강의를 응용해서 블로그를 만들어보고 있는데요! <a href="/">Home</a> <Link href="/" ><a>Home<a/></Link> a태그를 이용해 이동 할 경우, 아래 getServerSideProps가 잘 작동하여, 데이터가 채워지는데, Link를 이용해 이동 할 경우 데이터가 채워지지 않습니다. export const getServerSideProps = wrapper.getServerSideProps(async (context) => { const cookie = context.req ? context.req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (context.req && cookie) { axios.defaults.headers.Cookie = cookie; } context.store.dispatch({ type: LOAD_MY_INFO_REQUEST, }) context.store.dispatch({ type: LOAD_POSTS_REQUEST, }); context.store.dispatch(END); await context.store.sagaTask.toPromise(); }); 새로고침이 되지 않으면 데이터가 채워지지 않는 것 같은데, 몇일 간 관련 자료를 찾아보아도 이런 경우가 없는 것 같아 질문드립니다..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
배포후 테스트중입니다. redux-dev-tools가 보입니다.
좋은 강의 감사합니다. 이제 배포 후 테스트 중인데. 개발자 도구에 redux가 계속 나타나서요. 코드에는 문제가 없는거 같은데 nodebird.com가서 보니 여기도 액션을 볼수 있네요. 혹시 배포 버전에서는 어떻게 숨기나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
ReactDOM에서 에러가 발생합니다.
안녕하세요. 강의를 듣고 좀더 익숙해 지고 싶어서 처음부터 다시 듣고 있는데 로그인폼 생성 후 회원가입 창과 프로필 창을 들어가면 위와 같은 에러가 발생합니다. 혹시 원인을 알려주신다면 진심으로 감사하겠습니다...
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
app.use(express.json()), app.use(express.urlencoded({extended:true})) 클라이언트에서 보낸 데이터 사용에 관한 질문입니다.
app.use(express.json()); app.use(express.urlencoded({ extended: true }));req.body에 클라이언트에서 보내느 json데이터와 form에서 전달된 데이터를 사용할때 필요한 거라고 알고있는데 body-parser라는것을 설치 하지 않고 express에서 자체적으로도 제공을 하는건지 궁금합니다. body-parser로 안해줘도 되는건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Global CSS cannot be imported from files
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages\_app.js. import 'antd/dist/antd.css'; _app.js 에 css임포트 하였는데 이러한 에러가 뜨는 이유가 있을까요 ㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
connect ECONNREFUSED 127.0.0.1:3333
고생 많으십니다. 아래처럼 npx sequelize db:create 입력시 connect ECONNREFUSED 127.0.0.1:3333으로 표시되고 있습니다. 연결되지 않았다는 뜻 같은데 해당 포트 주소가 DB 주소로 설정한 상태입니다. 워크벤치를 통해서도 해당 주소로 잘 접속되고 있고 터미널을 통해서도 mysql을 켜둔 상태입니다. config.js에도 잘 입력하여 back 서버에 git pull로 잘 적용한 상태입니다. 왜 이런걸까요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
map 내에서 고차함수 사용 질문 드립니다.
1) const temp ⇒ (data) => { //로직 }; <Button onClick={() => temp(data)}>버튼</Button> 2) const temp = (data) ⇒ () ⇒ { //로직 }; <Button onClick={temp(data)}>버튼</Button> 1번처럼 사용해도 기능에 문제는 없는데 2번처럼 사용하는 경우가 성능상의 문제 때문일까요? 명확한 답을 알고싶은데 구글링을 해봐도 원하는 답을 찾기가 어려워 질문 남겨봅니다... 😥
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
pages폴더의 파일을 통해 components폴더의 컴포넌트들로 이동 할 경우
안녕하세요 제로초님 제로초님 영상을 보며 조금씩 응용해가면서 개인 사이드프로젝트를 진행하고 있습니다! 하단 로그인 navbar 를 클릭하여 pages의 login.js을 거쳐 LoginForm이라는 컴포넌트로 이동을 하고 있습니다! (마이페이지, 새글작성도 마찬가지) 제로초님의 방식은 AppLayout에서 컴포넌트에 바로 setIsLoggedIn props를 전달하는 방식인데 저는 AppLayout에 컴포넌트가 아닌 각각의 <Link>로 걸어놔서 props를 어떻게 효율적으로 전달해줘야할지 고민이 됩니다 ,,! 효율적인 해결방법이 생각나지않아서 const [isLoggedIn, setIsLoggedIn] = useState(false); 을 props 전달이 필요한 각 pages 마다 정의했고, login페이지에선 로그인이 되어있지 않으면 LoginForm 컴포넌트, 되어있으면 MainPage로 이동하게끔 return 부분의 컴포넌트를 이런식으로 전달을 해줬습니다 <AppLayout> { isLoggedIn ? <MainPage setIsLoggedIn={setIsLoggedIn}/> : <LoginForm setIsLoggedIn={setIsLoggedIn}/>} </AppLayout> 로그인 상태를 다른 페이지로 이동하면 유지하지 못함 (이건 서버가 없어서 그런건가 싶기도 해요..!) const [isLoggedIn, setIsLoggedIn] = useState(false);이 로그인, 마이페이지, 새글작성에 모두 중복되서 정의되어있음 (AppLayout컴포넌트에는 정의되어있지않음) 이런 문제점이 존재해서 혼자 해결해보려고 했지만 적당한 방법을 못찾아서 문의글을 남깁니다 ㅠㅠ AppLayout.js import React, { useState } from "react"; import PropTypes from "prop-types"; import Link from "next/link"; import { Row, Col } from "antd"; import styles from '../styles/styles.module.css'; import LoginForm from './LoginForm'; import MyPage from './MyPage'; const AppLayout = ({ children }) => { return ( <> <Link href="/"> <a><h1 className={styles.logo}>놀멍쉬멍 <img src="logoIcon.png" alt="logoImage" style={{width: '24px'}} /></h1> </a> </Link> <div>{children}</div> <Row className={styles.bottomNav}> <Col xs={4}><Link href="/writePost"><a>새글작성</a></Link></Col> <Col xs={4}><Link href="/community"><a>커뮤니티</a></Link></Col> <Col xs={8}> <Link href="/"> <a><img className={styles.centerNav} src='../icon.png'/></a> </Link> </Col> <Col xs={4}><Link href="/myPage"><a>마이페이지</a></Link></Col> <Col xs={4}><Link href="/login"><a>로그인</a></Link></Col> </Row> </> ); }; AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout; pages/login.js import React, {useState} from "react"; import AppLayout from "../components/AppLayout"; import Head from 'next/head'; import MainPage from '../components/MainPage'; import LoginForm from '../components/LoginForm'; const login = () => { const [isLoggedIn, setIsLoggedIn] = useState(false); return ( <> <Head> <meta charSet="utf-8" /> <title>로그인 | 놀멍쉬멍</title> </Head> <AppLayout> { isLoggedIn ? <MainPage setIsLoggedIn={setIsLoggedIn}/> : <LoginForm setIsLoggedIn={setIsLoggedIn}/>} </AppLayout> </> ); }; export default login; components/LoginForm.js import React, { useCallback, useState } from 'react'; import {Form, Input, Button} from 'antd'; import Link from 'next/link'; import styles from '../styles/login.module.css'; import styled from 'styled-components'; const LoginBtn = styled(Button)` background-color: white; border: 1px solid #857171; &:hover { background-color: #857171; border: 1px solid #857171; color: white; } `; const LoginForm = ({setIsLoggedIn}) => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const onChangeEmail = useCallback((e) => { setEmail(e.target.value); },[]); const onChangePassword = useCallback((e) => { setPassword(e.target.value); },[]); const onSubmitBtn = useCallback(() => { setIsLoggedIn(true); console.log(email, password); }, [email, password]); return ( <> <Form className={styles.LoginForm} onFinish={onSubmitBtn}> <div> <label htmlFor="user-email">이메일</label> <br /> <Input name="user-email" value={email} onChange={onChangeEmail} required/> </div> <div> <label htmlFor="user-password">비밀번호</label> <br /> <Input name="user-password" type="password" value={password} onChange={onChangePassword} required /> </div> <div className={styles.buttonWrapper}> <LoginBtn htmlType="submit" loading={false}>로그인</LoginBtn> < br/> <span>놀멍쉬멍이 처음이신가요?</span> <Link href="/signup"><a>회원가입</a></Link> </div> </Form> </> ); }; export default LoginForm; 폴더구조
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Link 와 a 태그 사용처
안녕하세요 열심히 수강하고있는 입문자입니다. 메뉴쪽은 링크로 href로 했고, <Link href=""><a>메뉴</a></Link> 마지막 사이트 링크 걸었을 때는 a태그를 사용했는데, <a href="">내용</a> 두 링크의 사용처에 대해 알 수 있을까요? 외부사이트 이동을 Link로 사용해도 상관 없는 부분이겠지요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
갑자기 실행 오류가 뜨네요..
❯ npm run dev > nodebird@1.0.0 dev /Users/hangyujin/Desktop/JBBP/tutorial/nodebird/front > next ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5 error - ../../../../../node_modules/react-redux/es/components/Context.js:1:0 Module not found: Can't resolve 'react' Import trace for requested module: ./../../../../../node_modules/react-redux/es/exports.js ./../../../../../node_modules/react-redux/es/index.js ./node_modules/next-redux-wrapper/es6/index.js ./store/configureStore.js ./pages/_app.js https://nextjs.org/docs/messages/module-not-found 왜 그럴까요,,, nodemodules과 package-lock.json 삭제했다가 다시 npm install하고 실행해도 똑같습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
slick 이 작동을 안합니다 !
현재 화면의 상태입니다. 제가 강의를 보면서 작성한 코드가 작동을 하지 않아서 제공되는 코드를 git에서 긁어서 넣어 봤는데도 똑같은 현상이 일어납니다. \ ImagesZoom 에서 index.js와 styles.js를 만들고 그것을 zerocho teacher가 만든 코드를 넣엇습니다. 그런데도 클릭을 하면 배경이 검은색이 되고 넘길수 있어야 하는데 그런것은 없이 맨 상단의 사진처럼 그냥 맨 위에 상세 이미지와 x버튼만 나오는 것을 확인할 수 있습니다. import React, { useState } from 'react'; import PropTypes from 'prop-types'; import Slick from 'react-slick'; import { Overlay, Header, CloseBtn, SlickWrapper, ImgWrapper, Indicator, Global } from './styles'; const ImagesZoom = ({ images, onClose }) => { const [currentSlide, setCurrentSlide] = useState(0); return ( <Overlay> <Global /> <Header> <h1>상세 이미지</h1> <CloseBtn onClick={onClose} /> </Header> <SlickWrapper> <div> <Slick initialSlide={0} beforeChange={(slide, newSlide) => setCurrentSlide(newSlide)} infinite arrows={false} slidesToShow={1} slidesToScroll={1} > {images.map((v) => ( <ImgWrapper key={v.src}> <img src={v.src} alt={v.src} /> </ImgWrapper> ))} </Slick> <Indicator> <div> {currentSlide + 1} {' '} / {images.length} </div> </Indicator> </div> </SlickWrapper> </Overlay> ); }; ImagesZoom.propTypes = { images: PropTypes.arrayOf(PropTypes.shape({ src: PropTypes.string, })).isRequired, onClose: PropTypes.func.isRequired, }; export default ImagesZoom; 위는 index.js이고 밑은 style.js입니다. import styled, { createGlobalStyle } from 'styled-components'; import { CloseOutlined } from '@ant-design/icons'; export const Global = createGlobalStyle` .slick-slide { display: inline-block; } .ant-card-cover { transform: none !important; } ` export const Overlay = styled.div` position: fixed; z-index: 5000; top: 0; left: 0; right: 0; bottom: 0; `; export const Header = styled.header` height: 44px; background: white; position: relative; padding: 0; text-align: center; & h1 { margin: 0; font-size: 17px; color: #333; line-height: 44px; } `; export const SlickWrapper = styled.div` height: calc(100% - 44px); background: #090909; `; export const CloseBtn = styled(CloseOutlined)` position: absolute; right: 0; top: 0; padding: 15px; line-height: 14px; cursor: pointer; `; export const Indicator = styled.div` text-align: center; & > div { width: 75px; height: 30px; line-height: 30px; border-radius: 15px; background: #313131; display: inline-block; text-align: center; color: white; font-size: 15px; } `; export const ImgWrapper = styled.div` padding: 32px; text-align: center; & img { margin: 0 auto; max-height: 750px; } `; 도대체 무엇을 잘못한걸까요? import를 잘못햇으면 뭐가 선언이 되지 않앗다 오류가 날텐데 이 경우에는 직접 작성한 것이 작동하지 않아 심지어 그대로 긁어온것인데 말이죠 ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
패스포트 로그인하기에서 ./passport를 찾을 수 없다고 합니다
지금 백엔드 노드 서버로 구축하기에서 패스포트로 로그인하기, 쿠키/세션 전체 로그인 흐름 이쪽 강의를 듣고 있는데 서버를 실행 시키면 ./passport 를 찾을 수 없다고 뜹니다 npm uninstall passport passport-local npm i passport passport-local 이렇게 재설치 해도 해당 모듈을 찾을 수 없다고 뜹니다 app.js passport/index.js passport/local.js package.json front/package.json { "name": "react-nordbird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next -p 3060", "build": "build next" }, "author": "heymi", "license": "ISC", "dependencies": { "@ant-design/icons": "^4.6.2", "antd": "^4.16.11", "axios": "^0.21.4", "bcrypt": "^5.0.1", "eslint-plugin-jsx-a11y": "^6.4.1", "faker": "^5.5.3", "immer": "^9.0.6", "next": "^9.5.5", "next-redux-wrapper": "^7.0.2", "prop-types": "^15.7.2", "react": "^17.0.2", "react-dom": "^17.0.2", "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", "saga": "^4.0.0-alpha", "shortid": "^2.2.16", "styled-components": "^5.3.0", "update": "^0.7.4" }, "devDependencies": { "babel-eslint": "^10.1.0", "eslint": "^7.31.0", "eslint-config-airbnb": "^18.2.1", "eslint-plugin-import": "^2.24.2", "eslint-plugin-react": "^7.24.0", "eslint-plugin-react-hooks": "^4.2.0" } }
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
useSelector 사용시 undefined 문제
안녕하세요, AppLayout.js 에서 const isLoggedIn = useSelector((state) => state.user.isLoggedIn); 이부분 state의 user가 undefined가 뜹니다... 어느부분을 더 확인해봐야 할까요? TypeError: Cannot read property 'user' of undefined at C:\Users\oht36\react-projects\react-nodebird\prepare\front\.next\server\pages\index.js:152:101 at useSelectorWithStoreAndSubscription (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\react-redux\lib\hooks\useSelector.js:39:30) at useSelector (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\react-redux\lib\hooks\useSelector.js:139:25) at AppLayout (C:\Users\oht36\react-projects\react-nodebird\prepare\front\.next\server\pages\index.js:152:85) at processChild (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3353:14) at resolve (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5) at ReactDOMServerRenderer.render (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22) at ReactDOMServerRenderer.read (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29) at renderToString (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27) at Object.renderPage (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\next\dist\next-server\server\render.js:50:851)
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요~
안녕하세요 강좌를 마치고 홀로 하드코딩을해 react + nodejs 게시판을 만들고 배포까지 완료하였습니다. 그중에 로그인 문제가 발생하여 질문드립니다. 3일간의 검색결과 passport사용시 secure : false 속성을 사용해야된다는 것을 알아 냈는데요 이 경우 https 두개의 서버를 각각 플론트와 백엔드로해 로그인을 하면 쿠키 전송이 되지 않거나 true로하면 passport가 동작하지 못하는 현상이 발생한것으로 추측합니다. 해결 방법을 찾지 못해 질문드립니다. 배포 사이트 : https://font-techblog.herokuapp.com/ 깃헙주소 : https://github.com/ITwoo/portfolio-react-node-blog (깃헙은 배포중인 사이트와 살짝 다를수 있습니다.) id : 1@1 password 1 로 설정해 두었습니다. 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Unhandled Runtime Error
아이디랑 비밀번호 입력하고 로그인 누르면 다음과 같은 에러가 표시 되네요 ㅜㅜ LoginForm.js UserProfile.js
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
넥스트를 좀더 알고싶어서 찾아봤습니다
넥스트를 알고싶어서 좀더 알아봤는데 파일이 스타일 파일이 생기더라구요 HTML 이랑 CSS가 익숙해서 꾸미려고하는데 꾸미는게 너무 익숙지않아서 그러는데 저가 styles 파일을 만들고 그안에 css를 만들어서 예시) import layoutStyle from '../styles/layout.css' 이렇게해서 컴포넌트안에 Applayout에 스타일을 적용을 따로 하려고하는데 안되더라구요 에러 메세지가 구글 폰트도 사용해서 넣으려고하니까 안되서 방법을 찾는게 어렵습니다 도와주세요 쌤 Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages\_app.js. Or convert the import to Component-Level CSS (CSS Modules). Read more: https://err.sh/next.js/css-global 이렇게 뜨더라구요 어떻게 CSS를 해야할지 잘 모르겠습니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
'onFinish' ignored 에러 관련 질문 있습니다.
우선, 이번 강좌와 다른 내용의 질문을 드려 죄송합니다. 아래와 같이 에러 메시지가 나왔습니다. 코드는 문제가 없어 보이는데, 로그인 버튼을 클릭해도 아무런 반응이 없는 건, 아래와 같은 onFinish문제 때문일까요? antd를 다시 설치해봐도 해결이 되지 않는데 어떻게 해야 하나요?