월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
선생님 이해가안되서요
index.js profile.js signup.js 의 최상위가 갑자기 어떻게 _app.js가 되죠 ? 넥스트에서 해준다고하는데 그렇게 원래 다른프로젝트에서도 설정하는것인가요 ? _app.js 비구조화 할당 component에서는 어떤값을 받나요 ?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
파일인식
선생님 react 다른강의배울때 파일생성할때 카멜케이스 문법으로 proFile 이런식으로 생성하고 export default ProFile 이런식으로 바꿔줫는데 파일이름을 proFile 이런식으로하면 next가 인식못해서 404에러 뜨더라구요 페이지찾을수없다고 그래서 profile.jsx 이렇게 바꿔주니 잘되요 결론: 파일이름 무조건 소문자로 해야하나요 ?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
자꾸 post가 작동하지 않습니다.
아니 teacher처럼 똑같이 5:56부분처럼 햇는데 왜 저는 안될까요? app.js안에 node express를 사용하면 간단하게 url를 만들 수 있는데 우선 get은 잘 작동을 합니다. 근데 postman을 이용해서 post를 사용할 때 문제가 생깁니다. const express = require('express'); const postRouter = require('./routes/post'); const userRouter = require('./routes/user'); const db = require('./models'); const cors = require('cors'); const passportConfig = require('./passport'); const app = express(); db.sequelize.sync() .then(() => { console.log('db 연결 성공'); }). catch(console.error); passportConfig(); app.use(cors({ origin: '*', credentials: false, })); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.get('/', (req, res) => { res.send('hello express'); }) app.post('/api/testPost', (req,res) => { res.json({id :2, content:'result'}); }) app.get('/api/testPost' , (req, res) => { res.json([ { id: 1, content: 'hello'} ]); }); app.use('/post', postRouter); app.use('/user', userRouter); app.listen(3065, () => { console.log('서버 실행 중'); }); 현재 app.js인데 이보다 좀 뒤에 강의에서 제가 뭔가 안된다고 질문을 올렸는데 생각을 해 보니 postman에서 post로 요청을 할 때부터 무언가 안되기 시작해서 다시 돌려보고 있는 와중에 문제점을 찾았습니다. 코드에 제가 app.post('/api/testPost', (req, res) => { res.json({id:2, content:'result'}) }) 로 작성하고 postman에서 post요청을 보낸 결과... 아무 반응도 일어나지가 않습니다. 서버가 올라가지 않았으면 애초에 get 요청도 보이지가 않아야 하는데 get은 되고 왜 post는 되는건지 이해가 안됩니다. 좀 도와주십시오 ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
에러가 나는데 도저히 못찾겠습니다 ㅠㅠ
현재 안되는 부분의 오류입니다. action값을 sagas의 user.js에서 받아서 yield call(signUpAPI, action.data);하는 부분에서 오류가 납니다. 오류 메시지를 타고 가보면 무슨 data가 선언이 안됐다는 뚱딴지 같은 오류를 내보내는데 도대체 이해가 안됩니다. ㅠㅠ signup 하는 데서 오류가 발생한다! 그래서 쭈욱 따라가보니... undefined라는 이상한 오류... 도대체 뭐가 문제일까요? 회원가입시 입력한 값은 다 받아오는데 이제 API를 타고 back에 데이터를 넣어주지를 못하고 잇습니다. sagas 안에 user.js에 console을 제가 찎어봤는데 yield call(signUpAPI, action.data) 이 부분에서 터져버립니다. import { all, delay, fork, put, takeLatest, call } from 'redux-saga/effects'; import { FOLLOW_FAILURE, FOLLOW_REQUEST, FOLLOW_SUCCESS, LOG_IN_FAILURE, LOG_IN_REQUEST, LOG_IN_SUCCESS, LOG_OUT_FAILURE, LOG_OUT_REQUEST, LOG_OUT_SUCCESS, SIGN_UP_FAILURE, SIGN_UP_REQUEST, SIGN_UP_SUCCESS, UNFOLLOW_FAILURE, UNFOLLOW_REQUEST, UNFOLLOW_SUCCESS, } from '../reducers/user'; function logInAPI(data) { return axios.post('/api/login', data); } 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, }); } } function logOutAPI() { return axios.post('/api/logout'); } function* logOut() { try { // const result = yield call(logOutAPI); yield delay(1000); yield put({ type: LOG_OUT_SUCCESS, }); } catch (err) { console.error(err); yield put({ type: LOG_OUT_FAILURE, error: err.response.data, }); } } function signUpAPI(data) { return axios.post('http://localhost:3065/user', data); } function* signUp(action) { try { console.log("뭐가 이상한데1"); console.log("action.data" , action.data); const result = yield call(signUpAPI, action.data); console.log("뭐가 이상한데2"); yield put({ type: SIGN_UP_SUCCESS, }); } catch (err) { yield put({ type: SIGN_UP_FAILURE, error: err.response.data, }); } } function followAPI() { return axios.post('/api/follow'); } function* follow(action) { try { // const result = yield call(followAPI); yield delay(1000); yield put({ type: FOLLOW_SUCCESS, data: action.data, }); } catch (err) { console.error(err); yield put({ type: FOLLOW_FAILURE, error: err.response.data, }); } } function unfollowAPI() { return axios.post('/api/unfollow'); } function* unfollow(action) { try { // const result = yield call(unfollowAPI); yield delay(1000); yield put({ type: UNFOLLOW_SUCCESS, data: action.data, }); } catch (err) { console.error(err); yield put({ type: UNFOLLOW_FAILURE, error: err.response.data, }); } } function* watchFollow() { yield takeLatest(FOLLOW_REQUEST, follow); } function* watchUnfollow() { yield takeLatest(UNFOLLOW_REQUEST, unfollow); } function* watchLogIn() { yield takeLatest(LOG_IN_REQUEST, logIn); } function* watchLogOut() { yield takeLatest(LOG_OUT_REQUEST, logOut); } function* watchSignUp() { yield takeLatest(SIGN_UP_REQUEST, signUp); } export default function* userSaga() { yield all([ fork(watchFollow), fork(watchUnfollow), fork(watchLogIn), fork(watchLogOut), fork(watchSignUp), ]); } 또 심각한점은 여기 network를 보시면 아예 응답 자체가 넘어가지 않고 있는 모습을 확인할 수 있습니다. post가 안되면 post실패다 뭐가 status가 나와야 하는데 아무리 가입하기를 눌러도 그런 모습은 확인할 수 없습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
로그아웃 -> 마이페이지 properties of null 에러 발생
안녕하세요 제로초님 ! 로그인 상태가 false일 경우, '마이페이지'가 보이도록, 반대일 경우엔 '로그인'이 보이도록 페이지를 만들었습니다. 문제는 마이페이지(유저프로필)에서 로그아웃 버튼을 누르면 user가 정상적으로 null값으로 바뀌는데 여기서 왜 Posts 속성이 없다는 에러가 발생하는지 모르겠습니다.. 로그아웃을 하는데 왜 마이페이지 에러가 발생하는걸까요 ㅠㅠ.. //components/AppLayout.js import React 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 { useSelector } from 'react-redux'; const AppLayout = ({ children }) => { const {logInDone} = useSelector((state) => state.user); 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="/findPlace"><a>장소검색</a></Link></Col> {logInDone ? <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 from "react"; import AppLayout from "../components/AppLayout"; import Head from 'next/head'; import MyPage from '../components/MyPage'; import LoginForm from '../components/LoginForm'; import { useSelector } from 'react-redux'; const login = () => { const {logInDone} = useSelector((state) => state.user); return ( <> <Head> <meta charSet="utf-8" /> <title>로그인 | 놀멍쉬멍</title> </Head> <AppLayout> { logInDone ? <MyPage /> : <LoginForm />} </AppLayout> </> ); }; export default login; //pages/myPage.js import React from 'react'; import AppLayout from '../components/AppLayout'; import Head from 'next/head'; import MyPage from '../components/MyPage'; import LoginForm from '../components/LoginForm'; import { useSelector } from 'react-redux'; const myPage = () => { const {logInDone} = useSelector((state) => state.user); return ( <> <Head> <meta charSet="utf-8" /> <title>마이페이지 | 놀멍쉬멍</title> </Head> <AppLayout> { logInDone ? <MyPage /> : <LoginForm />} </AppLayout> </> ); }; export default myPage; //components/LoginForm.js import React, { useCallback, useEffect } 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'; import useInput from '../hooks/useInput'; import { useDispatch, useSelector } from 'react-redux'; import {loginRequestAction} from '../reducers/user'; const LoginBtn = styled(Button)` background-color: white; border: 1px solid #857171; max-width: 600px; margin: 20px 0; width: 100%; margin-bottom: 40px; height: 40px; &:hover { background-color: #857171; border: 1px solid #857171; color: white; } `; const LoginInput = styled(Input)` height: 40px; `; const LoginForm = () => { const dispatch = useDispatch(); const {logInLoading} = useSelector((state) => state.user); const [email, onChangeEmail] = useInput(''); const [password, onChangePassword] = useInput(''); const onSubmitBtn = useCallback(() => { console.log(email, password); dispatch(loginRequestAction({email, password})); }, [email, password]); return ( <> <Form className={styles.loginForm} onFinish={onSubmitBtn}> <div className={styles.inputWrapper}> <label htmlFor="user-email">이메일</label> <br /> <LoginInput name="user-email" type="email" value={email} onChange={onChangeEmail} required/> </div> <div className={styles.inputWrapper}> <label htmlFor="user-password">비밀번호</label> <br /> <LoginInput name="user-password" type="password" value={password} onChange={onChangePassword} required /> </div> <div className={styles.buttonWrapper}> <LoginBtn htmlType="submit" loading={logInLoading}>로그인</LoginBtn> < br/> <span>놀멍쉬멍이 처음이신가요?</span> <Link href="/signup"><a>회원가입</a></Link> </div> </Form> </> ); }; export default LoginForm; //components/MyPage.js import React, { useCallback } from 'react'; import {Card, Avatar, Button} from 'antd'; import FollowList from './FollowList'; import styled from 'styled-components'; import page from '../styles/wrapper.module.css'; import { useDispatch, useSelector } from 'react-redux'; import {logoutRequestAction} from '../reducers/user'; const LogoutBtnWrapper = styled.div` display: flex; justify-content: flex-end; button { border: none; background-color: transparent; color: gray; } `; const MyPage = () => { const dispatch = useDispatch(); const {logOutLoading, user} = useSelector((state) => state.user); const onLogout = useCallback(() => { dispatch(logoutRequestAction()); }, []); return ( <div className={page.pageWrapper}> <div> <Card cover={ <img alt="my_profile_pic" src="../cute.jpeg" />} actions={[ <div key="writedPost">작성한 글<br />{user.Posts.length}</div>, <div key="followings">팔로잉<br />{user.Followings.length}</div>, <div key="followers">팔로우<br />{user.Followers.length}</div> ]} > <Card.Meta avatar={<Avatar>{user.nickname[0]}</Avatar>} title={user.nickname} description="개냥이 키웁니다 우하하" /> <br /> <LogoutBtnWrapper> <Button onClick={onLogout} loading={logOutLoading}>로그아웃</Button> </LogoutBtnWrapper> </Card> </div> <div> <div style={{margin: '20px 0'}}> <FollowList header="나를 팔로잉하는 사람" data={user.Followings}/> <FollowList header="내가 팔로우하는 사람" data={user.Followers}/> </div> </div> </div> ); }; export default MyPage;
- 미해결[리뉴얼] 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" } }