172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 강사님, 강의 잘 듣고 있습니다. 다름이 아니라, useEffect 부분 따라하고 있는데 다르게 작성한 부분이 없는데 useEffect 부분이 항상 2번씩 호출되서 콘솔에 찍힙니다. 다른 예제 할때도 이게 계속 반복되는데 혹시 왜 그런걸 까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 이제 막 React를 시작한 초보 개발자 입니다. 강의 11분에 리스트를 undefined 했을때 어떤 부분에서 에러가 나는지 강사님과 같은 화면을 보고싶으면 어떻게 해야하나요? 저는 위와 같은 화면이 뜨지 않고 빈 화면만 표기가 됩니다. 그리고 콘솔에 에러 표기도 DiaryList.js 가 아닌 bundle.js 로 표기가 되는데ㅠ 강사님처럼 상세 에러 화면을 보려면 어떻게 해야 하나요? 궁금합니다!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 강의 잘 보고 있습니다. 다름 아니라 defaultProps 부분과 관련해서 여쭤보고 싶은 게 있어서요. 지금 강의에서는 props가 undefined으로 올 때 등을 대비해서 defaultProps을 지정해주시는데, 혹시 이 방법 말고 diaryList에 바로 디폴트 값(빈 배열)을 할당하면 안 될까요? (ex. {diaryList = []}) => {...} ) 기본값 매개 변수로 지정할 수도 있을 것 같아서 여쭤봅니다. 아니면 혹시 차이점이 있을까요? 감사합니다!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 강의 보면서 기초 개념 다지는 중인 학생입니다 :) 다름이 아니라 일기 작성 시 제목과 내용 본문 입력 후, 점수를 별도로 선택하여(이벤트 발생) 저장하면 데이터가 잘 넘어가는데, default로 설정한 점수에서 점수를 별도로 선택하지 않고 제목과 내용만 입력 후 저장하면 데이터가 넘어가지 않은 채 undefined로 콘솔에 확인이 됩니다.ㅠㅠ 간략하게는 제목, 내용, 점수 모두 지정해서 저장하면 잘 나옴. A 제목, 내용만 쓰고 디폴트 점수로 저장하면 점수가 undefined로 됨. 입니다! B 어디가 문제인지 하루종일 들여다봐도 문제를 찾을 수가 없어서 질문드려요ㅠㅠ
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요. 제로초님의 강의에 큰 도움을 받고 있음에 감사의 말씀을 드립니다. 여러 검색결과도, 질문답변도, 해당강의 반복재생으로 찾아보았으나 해결치 못한 부분이 있어 이렇게 직접 질문을 하게 됐네요! [ 마주한 문제점 & 상황 ] 은 다음과 같습니다. 1. ( 이전 상황) 로그인폼(Id, Pwd)에 텍스트를 입력해 "로그인" 버튼을 누르면 정상적으로 로그인이 됐고, Redux 역시 정상작동해 개발자도구에서 확인이 가능했습니다. 2. ( 현재 상황) 섹션3(Redux) "더미데이터와 포스트폼 만들기" 강의를 들으며 문제에 마주했습니다. 3. ( 더미데이터와 포스트폼 만들기 강의 후 ) 잘 넘어가던 로그인 화면에서 데이터는 넘어가 콘솔에 찍히지만, 화면 페이지는 게시판으로 넘어가지 않는 상황에 직면했습니다. [ 콘솔에 찍히는 Error ] 는 다음과 같습니다. [정상적으로 넘어가는 로그인 데이터] -> 그러나 로그인이 되지 않고 화면이 넘어가질 않습니다! [ 소스코드 ] 1. package.json { " name " : " react-nodebird-front " , " version " : " 1.0.0 " , " description " : "" , " main " : " index.js " , " scripts " : { " dev " : " next -p 3060 " , " build " : " next build " }, " author " : "jj " , " license " : " ISC " , " dependencies " : { " @ant-design/icons " : " ^4.7.0 " , " antd " : " ^4.19.0 " , " next " : " ^9.5.5 " , " next-redux-wrapper " : " ^6.0.2 " , " prop-types " : " ^15.8.1 " , " react " : " ^16.14.0 " , " react-dom " : " ^16.14.0 " , " react-redux " : " ^7.2.8 " , " redux " : " ^4.1.2 " , " redux-devtools-extension " : " ^2.13.9 " , " styled-components " : " ^5.3.3 " }, " devDependencies " : { " eslint " : " ^8.10.0 " , " eslint-plugin-hooks " : " ^0.4.2 " , " eslint-plugin-import " : " ^2.25.4 " , " eslint-plugin-react " : " ^7.29.3 " } } 2. LoginForm.js 파일 import React , { useState , useCallback , useMemo } from ' react '; import { Form , Input , Button } from ' antd '; import Link from ' next/link '; import styled from ' styled-components '; import { useDispatch , useSelector } from ' react-redux '; import useInput from " ../hooks/useInput "; import { loginAction } from ' ../reducers/user '; const ButtonWrapper = styled . div ` margin-top: 10px; ` ; const FormWrapper = styled (Form) ` padding: 10px; ` ; const LoginForm = ({ setIsLoggedIn }) => { const dispatch = useDispatch () ; const [ id , onChangeId ] = useInput ( '' ) ; const [ password , onChangePassword ] = useInput ( '' ) ; const onSubmitForm = useCallback ( () => { console . log ( id , password ) ; dispatch ( loginAction ( { id , password } )) ; }, [ id , password ]) ; return ( < FormWrapper onFinish ={ onSubmitForm } > < div > < label htmlFor = " user-id " > 아이디 </ label > < br /> < Input name = " user-id " value ={ id } onChange ={ onChangeId } required /> </ div > < div > < label htmlFor = " user-password " > 비밀번호 </ label > < br /> < Input name = " user-password " type = " password " value ={ password } onChange ={ onChangePassword } required /> </ div > < ButtonWrapper > < Button type = " primary " htmlType = " submit " loading ={ false } > 로그인 </ Button > < Link href = " /signup " >< a >< Button > 회원가입 </ Button ></ a ></ Link > </ ButtonWrapper > </ FormWrapper > ) ; } export default LoginForm ; 3. index.js import React from ' react '; import { useSelector } from " react-redux "; import AppLayout from " ../components/AppLayout "; import PostForm from ' ../components/PostForm '; import PostCard from ' ../components/PostCard '; const Home = () => { const { isLoggedIn } = useSelector ( ( state ) => state . user ) ; const { mainPosts } = useSelector ( ( state ) => state . post ) ; return ( < AppLayout > { isLoggedIn && < PostForm /> } { mainPosts . map ( ( post ) => < PostCard key ={ post . id } post ={ post } /> ) } </ AppLayout > ) ; } export default Home ; 4. configureStore.js import { createWrapper } from ' next-redux-wrapper '; import { applyMiddleware , compose , createStore } from ' redux '; import { composeWithDevTools } from ' redux-devtools-extension '; import reducer from ' ../reducers '; const configureStore = () => { const middlewares = [] ; const enhancer = process . env . NODE_ENV === ' production ' ? compose ( applyMiddleware ( ... middlewares )) : composeWithDevTools ( applyMiddleware ( ... middlewares )) ; const store = createStore ( reducer , enhancer ) ; return store ; }; const wrapper = createWrapper ( configureStore , { debug : process . env . NODE_ENV === ' development ' , } ) ; export default wrapper ; 5. post.js // [ initialState ] export const initialState = { mainPosts : [ { id : 1 , User : { id : 1 , nickname : ' jj ' , }, content : ' 첫 번째 게시글 #해시태그 #익스프레스 ' , Images : [ { src : ' https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832 ' , }, { src : ' https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832 ' , }, { src : ' https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832 ' , } ] , Comments : [ { User : { nickname : ' jj4 ' , }, content : ' redux를 학습 중입니다. ' , }, { User : { nickname : ' jj3 ' , }, content : ' 다음은 sage를 학습 예정임. ' , } ] } ] , imagePaths : [] , postAdded : false , } const ADD_POST = ' ADD_POST ' ; export const addPost = { type : ADD_POST , } const dummyPost = { id : 2 , content : ' 더미데이터입니다. ' , User : { id : 1 , nickname : ' jj1 ' , }, Images : [] , Comments : [] , }; const reducer = ( state = initialState , action ) => { switch ( action . type ) { case ADD_POST : return { ... state , mainPosts : [ dummyPost , ... state . mainPosts ] , postAdded : true , }; default : return state ; } }; export default reducer ; 6. PostForm.js import React , { useCallback , useState , useRef } from ' react '; import { Form , Input , Button } from ' antd '; import { useSelector , useDispatch } from ' react-redux '; import { addPost } from ' ../reducers/post '; const PostForm = () => { const { imagePaths } = useSelector ( ( state ) => state . post ) ; const dispatch = useDispatch () ; const imageInput = useRef () ; const [ text , setText ] = useState ( '' ) ; const onChangeText = useCallback ( ( e ) => { setText ( e . target . value ) ; }, []) ; const onSubmit = useCallback ( () => { dispatch ( addPost ) ; setText ( '' ) ; }, []) ; const onClickImageUpload = useCallback ( () => { imageInput . current . click () ; }, [ imageInput . current ]) ; return ( < Form style ={{ margin : ' 10px 0 20px ' }} encType = " multipart/form-data " onFinish ={ onSubmit } > < Input.TextArea value ={ text } onChange ={ onChangeText } maxLength ={ 140 } placeholder = " 어떤 신기한 일이 있었나요? " /> < div > < input type = " file " multiple hidden ref ={ imageInput } /> < Button onClick ={ onClickImageUpload } > 이미지 업로드 </ Button > < Button type = " primary " style ={{ float : ' right ' }} htmlFor = " submit " > 짹짹 </ Button > </ div > < div > { imagePaths . map ( ( v ) => ( < div key ={ v } style ={{ display : ' inline-block ' }} > < img src ={ v } style ={{ width : ' 200px ' }} alt ={ v } /> < div > < Button > 제거 </ Button > </ div > </ div > )) } </ div > </ Form > ) }; export default PostForm ; 7. PostCard.js import React from ' react '; const PostCard = () => { return ( < div > PostCard </ div > ) ; }; export default PostCard ; 8. user.js import { HYDRATE } from ' next-redux-wrapper '; // initialState 부분 const initialState = { user : { isLoggedIn : false , user : null, signUpData : {}, loginData : {}, }, post : { mainPosts : [] , } }; // [로그인] action creator export const loginAction = ( data ) => { return { type : ' LOG_IN ' , data , } }; // [로그아웃] action creator export const logoutAction = ( data ) => { return { type : ' LOG_OUT ' , } }; // reducer const rootReducer = ( state = initialState , action ) => { switch ( action . type ) { case HYDRATE : console . log ( ' HYDRATE ' , action ) ; return { ... state , ... action . payload }; case ' LOG_IN ' : return { ... state , user : { ... state . user , isLoggedIn : true , user : action . data , }, }; case ' LOG_OUT ' : return { ... state , user : { ... state . user , isLoggedIn : false , user : null, }, }; default : return state ; } }; export default rootReducer ; 다소 많은 양의 글 내용이지만, 시간이 허락되실 때 답변 주시면, 참 감사할 것 같습니다! 오늘 하루도 고생많으셨고, 이번 한 주도 파이팅입니다! 늘 양질의 강의 감사합니다 ^^
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
버전이 달라서 그런지 인터페이스도 다르고 메뉴도 다른 것 같아요 AVD Manager도 보이지 않고요 ㅠ 어떻게 해야 할지 모르겠습니다
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
add 후에 List페이지로 이동하면, 흰화면으로 에러가 출력됩니다. Home.js 의 프로퍼티에 대해 undefind 가 출력됩니다. [Uncaught TypeError: Cannot read properties of undefined (reading 'length') at Home.js:15:1] [ diaryList.length >= 1 ] : 에러 발생하는 부분 useEffect (() => { if ( diaryList . length >= 1 ) { //에러발생부분 const firstDay = new Date ( curDate . getFullYear (), curDate . getMonth (), 1 ). getTime (); const lastDay = new Date ( curDate . getFullYear (), curDate . getMonth () + 1 , 0 ). getTime (); setData ( diaryList . filter (( it ) => firstDay <= it . date && it . date <= lastDay ) ); } }, [ diaryList , curDate ]);
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
<질문1> Products.js에서 sequelize.define로 테이블 정의시 복수형태로 Products된다고 들었는데 models.Product.create도 Product 단수 형태로 테이블 이름에서 s를 빼주는건가요??? <질문2> result를 log찍어 봤을떄는 또 Product라고 나오고 위에는 Products 테이블로 insert into 됐다고 나오는데 테이블을 만들어주는건 models/products.js 에서하는건데 model.Product.create 이말은 사실 테이블 생성이아니라 데이터 삽입이라고 보면 될까요? models . Product . create ( { name , description , price , seller , } )
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 15분 대에 객체 프로퍼티 속성을 delete하면 결국 삭제가 된 상태이고, 브라우저에서는 더이상 콘솔 로그를 찍어도 알 수가 없습니다. 그러나 왜 여전히 메모리가 삭제 되지 않았는지 그 의미가 이해되지 않아 질문을 드립니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 강의 듣는 중 궁금한점이 생겨서 질문을 드리게 됩니다. 영상 24:32 부분에서 const copyList = JSON.parse(JSON.stringify(diaryList)); 으로 하셧는데 원본 배열을 정렬을 하게되어 불변성 문제 때문에 Json.stringify 로 문자열로 바꿧다가 다시 JSON.parse로 새로운 배열을 만들어 값을 받았는데 혹시 그럼 스프레드 연산자인 const copyList = [...diaryList] 이렇게 하게 된다면 위 코드와 다르게 동작이 될까요..?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
10:00분에서 useEffect(() => { if (!(me && me.id) { Router.push('/'); } }, [me &&.id]); if (!me) { return null; }; 이 코드를 if (!me) { Router.push('/'); return null; }; 이렇게 코드 바꿔도 오류는 없던데 밑에 껄로해도 별 차이 없는건가요?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
안녕하세요 선생님 유익한 강의 잘 수강하고있습니다. 현재 회원가입까지 구현이 다 되어서 몽고 db에 회원가입시 데이터가 잘 들어가는것도 확인하였고, 클라이언트(프론트) 상에서 이 db를 가져와서 쓰고싶은데 어떻게 해야 가져와서 쓸수있을까요? 프론트만 파서 이쪽은 잘 감이 안잡힙니다 감사합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. JSX에서 문법규칙에서 반드시 부모 요소 하나가 감싸는 형태여야 한다라고 하는데 부모 요소가 무엇인지 알수 있을까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
신규글을 등록할 때에도 제일 밑으로가지고, 기존 글을 수정해도 밑으로 가지길래 Components로 확인해보니 date값이 다르게 들어가져요.. 더미데이터로 넣은 date는 1648092529386 ~ 90 인데 새로운글이나 수정글은 date가 1648080000000 로 나오네요ㅠㅠ onCreate랑 OnEdit이 DiaryEditor.js에서 date를 가져가기에 console . log ( new Date ( date ) . getTime ()) ; DiaryEditor.js 안에서 onCreate,onEdit 안에서 쓰는 getTime으로 찍어보면 1648080000000 나오는데 어디서 꼬인걸까요 ...? ㅠ https://codesandbox.io/s/sharp-brown-p38cvp?file=/src/components/DiaryEditor.js
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
안녕하세요. 강의 잘 보고 있습니다 제가 토큰 생성까지 따라했는데 무한로딩이 발생했습니다. if(err) return cb(err);로 수정을 했는데도 계속 로딩이 발생하네요 save함수 안에서는 console.log도 안찍히는 거 봐선 save함수가 문제인거 같기도 한데 검색해도 아무 정보도 안나와서 정말 답답하네요.. 혹시 도와주실수 있을까 해서 git hub 주소 올려봅니다 https://github.com/ChyoPyoRo/CP1
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
지금까지 강의 보면서 톡방 비번을 못본거 같은데 혹시 어디에 있었는지 알 수 있을까요..
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 조현영 선생님 제가지금 해당 강의를 통해서 개인 프로젝트를 진행중인데 문제가 발생이 됬습니다. 클라이언트와 백엔드 다 우분트 환경에서 잘 작동해서 실제 배포한 ip주소로 들어가면 정상적으로 화면이 보여집니다. 클라이언트 서버: 다 작동이 잘 되고 회원가입 기능도 잘 작동해서 실제 해당http://13.125.96.64 쪽으로 요청을 하여 데이터베이스도 잘 생성이되고 됩니다. 근데 문제가 local로 성공적으로 로그인을하면 passport.js 쪽에서 serializeUser 한번 실행을하고 쿠키가 생겨야하는데 생기질 않습니다. 그리고 다시 메인 화면으로 돌아오면 LOAD_MY_INFO_REQUEST action으로 통해서 cookie 와 같이 서버로 전송을해서 deserializeUser도 실행이 되야하는데. deserializeUser도 실행이 안됩니다. 제 로컬에서는 모든게 다 잘 작동합니다. 로컬에서 프론트: 로그인 하면 잘 작동합니다. 로컬에서 백엔드 pm2 환경 보시면 쿠키도 잘 생성되고 passport.js 에서 deserializeUser 도 잘 작동되는게 보입니다. 하지만 배포한 ip에서는 쿠키도 생성이 되질않고 deserializeUser 도 작동하지 않습니다위 사진은 제가 로그인이 성공하고 다시 메인 페이지로 돌아온 화면입니다 성공적으로 로그인이 되도 쿠키는 여전히 생성되지 않았습니다. 위 사진은 제가 로그인이 성공하고 다시 메인 페이지로 돌아온 화면입니다 성공적으로 로그인이 되도 쿠키는 여전히 생성되지 않았습니다. 백엔드쪽 봐도serializeUser 으로 로그인이 성공하고 deserializeUser는 호출이 되질 않습니다. back/app.js 소스코드입니다. const express = require('express'); const PORT = 80; const app = express(); const cors = require('cors'); const effectRouter = require('./routers/effect'); const userRouter = require('./routers/user'); const effectsRouter = require('./routers/effects'); const db = require('./models'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const dotenv = require('dotenv'); const passport = require('passport'); const passportConfig = require('./passport'); const morgan = require('morgan'); const hpp = require('hpp'); const helmet = require('helmet'); db.sequelize .sync() .then(() => { console.log('db 연결 성공'); }) .catch(console.error); passportConfig(); dotenv.config(); app.use(cookieParser(process.env.EFFECTSHOP_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret:process.env.EFFECTSHOP_SECRET, }) ) if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); //보안에 도움되는 라이브러리 app.use(helmet()); }else{ app.use(morgan('dev')); } app.use(passport.initialize()); // 패스포트 설정 미들웨어에 추가. app.use(passport.session()); app.use(express.json()); app.use(express.urlencoded({extended: true})); app.use(cors({ origin:["http://localhost:3000","http://54.180.81.148"], credentials:true, })); app.get('/',(req,res)=>{ res.send('hello express'); }) app.use('/effects' ,effectsRouter); app.use('/effect',effectRouter); app.use('/user', userRouter); app.listen(PORT, ()=>{ console.log(`server on! at http://localhost:${PORT}`); }); 더 자세한 코드를 보시길 원하신다면 여기에 제 소스코드를 올려 놓았습니다 ㅠㅠ 엄청난 고민끝에 여쭤봅니다 ㅜ 감사합니다. https://github.com/sungmin-choi/effectShopByHTML-CSS
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
- 혹시 위와같은 문제에 대해서 알수 있을까요
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! react를 수강중인 학생입니다..! 멍청한 질문인것 같은데.. 혹시 create react app 하고 vscode환경에서 html파일을 생성해서 js파일에 링크 걸어논다음에 html파일을 열 수 있나요?? 그러니까 html파일, react js 파일 둘다 작성해서 링크로 연동이 가능한지 궁금합니다! 감사합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! 상태 강의 8:08초쯤 count에서 값을 1씩 올릴때 +1을 하면 오류가 안생기는데 제가 궁금해서 count ++를 써보니 const로 선언돼서 값을 재할당할 수 없다고 오류가 뜨더라구요! +와 ++의 차의점을 알 수 있을까요? 감사합니다! const [ count , setCount ] = useState ( 0 ); const onIncrease = () => { setCount ( count + 1 ); };
