묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
에러 문의 react hook useEffect
src/components/Row.js Line 14:7: React Hook useEffect has a missing dependency: 'fetchMovieData'. Either include it or remove the dependency array react-hooks/exhaustive-deps쌤 그리고 fetchMovieData 가 있습니다. 그것을 포함하거나 종속성 배열 React-hooks/exhausitve deps를 제거하라는게 무슨말인가요??
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
useInput 했을때, 배열의 첫번째 요소가 func으로 나와요
id와 nickname에 마우스를 올리면 useState를 이용한 password(string), passwordCheck(boolean)과 다르게, 함수라고 나오는데 이렇게 되어도 괜찮은건가요?? 그리고 이것과 관련된 오류인지는 모르겠는데, 약관동의 버튼을 누르고 아이디와 비밀번호를 수정해도 값이 변경되지않습니다. 강의랑 똑같이 작성한것같은데 어디가 잘못된건지 모르겠네요 ㅠㅠ.. 어떻게 해결해야 할까요?? ```signup.jsimport React, { useCallback, useState } from 'react'; import AppLayout from '../components/AppLayout'; import Head from 'next/head'; import styled from 'styled-components'; import { Button, Checkbox, Form, Input } from 'antd'; import useInput from '../components/hooks/useInput'; const ErrorMessage = styled.div` color: red; `; const Signup = () => { const [id, onChangeId] = useInput(''); const [nickname, onChangeNickname] = useInput(''); const [password, onChangePassword] = useInput(''); const [passwordCheck, setPasswordCheck] = useState(''); const [passwordError, setPasswordError] = useState(false); const onChangePasswordCheck = useCallback( (e) => { setPasswordCheck(e.target.value); setPasswordError(e.target.value !== password); }, [password] ); console.log(id); const [term, setTerm] = useState(false); const [termError, setTermError] = useState(false); const onChangeTerm = useCallback((e) => { setTerm(e.target.checked); setTermError(false); }, []); const onSubmit = useCallback(() => { if (password !== passwordCheck) { return setPasswordError(true); } if (!term) { return setTermError(true); } console.log(id, nickname, password); }, [password, passwordCheck, term]); return ( <> <AppLayout> <Head> <title>회원가입 | NodeBird</title> </Head> <Form onFinish={onSubmit}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} required onChange={onChangeId} /> </div> <div> <label htmlFor="user-nick">닉네임</label> <br /> <Input name="user-nick" value={nickname} required onChange={onChangeNickname} /> </div> <div> <label htmlFor="user-password">패스워드</label> <br /> <Input name="user-password" value={password} required onChange={onChangePassword} /> </div> <div> <label htmlFor="user-password-check">비밀번호체크</label> <br /> <Input name="user-password-check" value={passwordCheck} required onChange={onChangePasswordCheck} /> {passwordError && ( <ErrorMessage>비밀번호가 일치하지 않습니다</ErrorMessage> )} </div> <div> <Checkbox name="user-term" checked={term} onChange={onChangeTerm}> 약관에 동의합니다. </Checkbox> {termError && <ErrorMessage>약관에 동의하지 않습니다</ErrorMessage>} </div> <div style={{ marginTop: '10px' }}> <Button type="primary" htmlType="submit"> 가입하기 </Button> </div> </Form> </AppLayout> </> ); }; export default Signup;import { useState, useCallback } from 'react'; export default (initialValue = null) => { const [value, setValue] = useState(initialValue); const handler = useCallback((e) => { setValue(e.target.value); }, []); return [value, handler]; };
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
선생님 삭제기능은 어떤식으로 해야될까요
선생님 포스트 나 댓글 삭제기능은 어떤식으로 해야될까요 따로 강의는 없겟죠? ㅠ
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
PostForm에서 Input이 초기화가 되지않습니다.
짹짹 버튼을 눌렀을 때, 처음 클릭 시에만 해당 Input이 초기화 되고, 그 뒤로는 초기화 되지 않는 오류입니다.useEffect가 addPostDone이 바뀔 때 마다 작동이 되어야 하는데, Redux Devtool에서는 분명 변경이 되었음에도 , PostForm에서 변경이 없는걸로 감지가 됩니다. PostAction export const ADD_POST_REQUEST = 'ADD_POST_REQUEST'; export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS'; export const ADD_POST_FAILURE = 'ADD_POST_FAILURE'; const addPostRequestAction = (data) => ({ type: ADD_POST_REQUEST, data, }); export { addPostRequestAction, }; post.js (reducer)import shortId from 'shortid'; const dummyPost = (data) => ({ id: shortId.generate(), content: data, User: { id: 1, nickname: 'admin', }, Images: [], Comments: [], }); const reducer = (state = initialState, action) => { switch (action.type) { case ADD_POST_REQUEST: console.log('ADD_POST_REDUCER'); return { ...state, addPostLoading: true, addPostDone: false, addPostError: null, }; case ADD_POST_SUCCESS: return { ...state, mainPosts: [dummyPost(action.data), ...state.mainPosts], addPostLoading: false, addPostDone: true, }; case ADD_POST_FAILURE: return { ...state, addPostLoading: false, addPostError: action.error, }; default: return state; } };==Redux-Saga===index.js(rootSaga)import { all, fork } from 'redux-saga/effects'; import postSaga from './post'; import userSaga from './user'; export default function* rootSaga() { yield all([ fork(postSaga), fork(userSaga), ]); }postSagaimport { all, fork, takeLatest, put, delay } from 'redux-saga/effects'; import axios from 'axios'; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, } from '../reducers/Actions/post'; function* addPostRequest(action) { try { // const result = yield call(addPostAPI,action.data) delay(1000); yield put({ type: ADD_POST_SUCCESS, data: action.data, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPostRequest); } export default function* postSaga() { yield all([ fork(watchAddPost), ]); } ==Component==PostForm.jsimport { useCallback, useRef, useEffect, useState } from 'react'; import { Form, Input, Button } from 'antd'; import { useDispatch, useSelector } from 'react-redux'; import { addPostRequestAction } from '../reducers/Actions/post'; const PostForm = () => { const { imagePaths, addPostLoading, addPostDone } = useSelector((state) => state.post); const [text, setText] = useState(''); const dispatch = useDispatch(); useEffect(() => { if (addPostDone) { setText(''); } }, [addPostDone]); const onSubmit = useCallback(() => { dispatch(addPostRequestAction(text)); }, [text]); const onChangeText = useCallback((e) => setText(e.target.value), []); return ( <Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> <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;
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
post 타이틀을 한글로 쓰면 경로이동이 안됩니다
안녕하세요 선생님post 타이틀을 한글로 쓰면 경로이동이 안됩니다 영어로 쓰면 라우터대로 경로가 이동하는데 한글로 쓰면 이동이 안되네요... 왜이럴까요 한글타이틀 도 영어타이틀 처럼 잘 이동될순 없을까요
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
comment 삭제하는법
배포하기 전에 커뮤니티, 포스트, comment 삭제하고 다시작성하고 싶은데 어떻게해야될까요?
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
Uncaught TypeError: Cannot read properties of undefined (reading 'map') 에러
import React, {useState} from "react"; import "./App.css"; export default function App () { const [todoData, setTodoData] = useState([ { id:"1", title:"공부하기", completed: false, }, { id:"2", title:"청소하기", completed: false, } ]); const [Value,setValue] = useState(""); // 첫번째 인수는 변수 두번재 인수는 state를 정하는 변수 const btnStyle ={ color: "#fff", border: "none", padding: "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right", }; const getStyle = (completed) => { return{ padding:"10px", borderBottom:"1px #ccc dotted", textDecoration: completed ? 'line-through' : "none", }; }; const handleClick = (id) =>{ let newTodoData = todoData.filter(data => data.id !== id) console.log("newTodoData",newTodoData) setTodoData(newTodoData); }; const handleChange = (event) => { console.log("event",event.target.Value) setTodoData(event.target.Value); }; const handleSubmit = (event) =>{ console.log("event",event) event.preventDefault(); // reload를 막아줌 // 새로운 할일 데이터 let newTodo ={ id: Date.now(), title : Value, completed: false, }; // 원래 있던 할 일에 새로운 할일을 더해주기 setTodoData(prev => [...prev,newTodo]); setValue(""); }; const handleCompleteChange = (id) => { console.log("todoData",todoData) let newTodoData = todoData.map((data) =>{ if(data.id === id){ data.completed = !data.completed; } return data; }); setTodoData(newTodoData) }; return ( <div className="container"> <div className="todoBlock"> <div className="title"> <h1>할일 목록</h1> </div> {todoData.map((data) => ( <div style={getStyle(data.completed)} key={data.id}> <input type="checkbox" defaultChecked={false} onChange={() => handleCompleteChange(data.id)}/> {data.title} <button style={btnStyle} onClick={() => handleClick(data.id)}>x</button> </div> ))} <form style={{display:'flex'}} onSubmit={handleSubmit}> <input type="text" name="value" style={{flex:'10', pedding:'50'}} placeholder="해야 할 일을 입력하세요." value={Value} onChange={handleChange}/> <input type="submit" value="입력" className="btn" style={{flex:'1'}} /> </form> </div> </div> ); }아래 코드에서 form에 어떠한 글자를 입력하면 Console 창에 왜 Uncaught TypeError: Cannot read properties of undefined (reading 'map')에러가 발생하는지 도저히 모르겠습니다.혹시 아시는분 답변 부탁드립니다.감사합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
로그인 시도 시 타입에러 나는데 모르겠네요
TypeError: dispatch is not a functionat handleSubmit (login.tsx?11e1:23:13) 에러나는 부분은login파일의 dispatch("LOGIN",res.data?.user); 에서 에러가 납니다. 이 강의 듣는 몇몇분들도 동일하게 나타나는 증상같은데.. 확인 한번 부탁드립니다.
-
해결됨만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
vercel 배포 후 list의 uid가 넘어가지 않아 문의 드립니다!
안녕하세요 코드를 전부 작성하고 배포까지 진행해보았으나 문제가 생겨 문의 드리게 되었습니다😂local 상태에서는 screenName이 정상적으로 넘어가 정보가 정상적으로 출력되었으나 배포 이후 uid가 undefined 형태로 넘어가는 것을 확인했습니다.코드를 열심히 확인해 보았으나 어느 부분이 문제인지 모르겠습니다 😥😥
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
drop table 후 질문드리겠습니다.
안녕하세요 제로초님 강의 잘듣고있습니다.배포는 처음이라 해당강의를 들으면서 무작정 따라하면서 실습을 하고 있습니다.근데 제가 모르고 drop table까지 따라해서 database가 삭제됬습니다.그래서 우분투 back으로 간 뒤 다시 db를 생성했습니다.근데 db는 정상적으로 생성이 됬는데 테이블을 검색해보면 다음과 같이 Empty set이 출력이 되더라고요이러한 경우에는 다시 인스턴스를 생성해야될까요? ㅜㅜ mysql> show databases; +--------------------+ | Database | +--------------------+ | information_schema | | mysql | | performance_schema | | recipe.io | | sys | +--------------------+ 5 rows in set (0.00 sec) mysql> use recipe.io; Database changed mysql> show tables; Empty set (0.00 sec) mysql>
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
s3 배포시 Re-run all jobs 버튼 부재
Re-run all jobs 버튼이 없어서 node.js에서 오류가 발생하는데 혹시 어떻게 해야할까요?
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
tailwindcss 적용이 안 됩니다
따라 치면서 실습하는데 적용이 안 되길래 삽질 하다가혹시나 싶어서 강의 자료를 다운 받아 npm run start 해 보았는데요그것도 이렇게 적용이 안 되게 보이네요...뭐가 문제일까요? ㅜ.ㅜ
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
Invalid href passed to next/router
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 94강 13:55초를 보면 콘솔 창에 next-dev.js?3515:20 Invalid href passed to next/router: /u//r/test02/043hzrH/test44, repeated forward-slashes (//) or backslashes \ are not valid in the hre와 같은 에러가 떠있습니다. [username].tsx에서 <Link href={`/u/${comment.post?.url}`}>을 불러 올때 url에 '/r/test02/043hzrH/test44'가 담겨 오면서 슬래쉬(//)가 2번 입력되어 생기는 에러 같습니다. 제공된 소스코드에도 위와 같이 입력되어 있어요. 아래와 같이 '/'를 지우고 링크를 href에 넣어주면 에러가 사라지는데 이게 맞을까요?<Link href={`/u${comment.post?.url}`}>
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
import { User } from "../entities/User"
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.백엔드 entities에서 Post, Sub, Comment는 아래와 같이import Post from "../entities/Post" import Sub from "../entities/Sub" import Comment from "../entities/Comment"처럼 불러올 수 있게 작성하셨는데 User만import {User} from "../entities/User"중괄호를 넣어서 불러와야 합니다. export default class User extends BaseEntity 가 아닌export class User extends BaseEntity 로 작성한 이유가 있을까요?
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
post?.voteScore undefined
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 81강을 수강중입니다.src/pages/r/[slug]/[identifier]/[slug].tsx 작성중{post.voteScore} 를 콘솔로 찍어보면 undefined가 나와서 페이지에 노출되지 않습니다.타입을 voteScore? : number 로 한게 문제인가해서 ?를 지워보았지만, 증상은 동일했고 api를 불러오면서 voteScore는 0으로 초기화되지 않은채 받는것 같아요.그러던 중 백엔드의 Post.ts를 살펴보았더니 get voteScore()를 get VoteScore()로 오타 아닌 오타를 가져가서 초기화 되지 않았단걸 알아내었습니다. 누군가에게 도움이 되시길 바라며
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
cookie-parser Invalid or unexpected token error
영상에 따라서 단순하게 cookie-parser 설치하고 import cookie-parser 한다음에 app.use(cookieParser()) 진행하면 상단에 이미지처럼 에러가 발생하더라구요. cookie-parser을 제거하면 cookie가 정상적으로 저장되는 것을 볼 수 있었습니다. 어떤 부분을 놓친 것일까요server.tsimport express from "express"; import morgan from "morgan"; import { AppDataSource } from "./data-source" import authRoutes from "./routes/auth"; import subRoutes from "./routes/subs"; import cors from 'cors'; import dotenv from 'dotenv'; import cookieParser from "cookie-parser"; const app = express(); dotenv.config(); app.use(cors({ origin: process.env.ORIGIN, credentials: true })) app.use(express.json()); app.use(morgan('dev')); app.use(cookieParser()) app.get("/", (_, res) => res.send("running")); app.use('/api/auth', authRoutes); app.use("/api/subs", subRoutes); const PORT = process.env.PORT; console.log('PORT', PORT) app.listen(PORT, async () => { console.log(`server running at http://localhost:${PORT}`); AppDataSource.initialize().then(async () => { console.log("data initialize...") }).catch(error => console.log(error)) })
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
useMemo hook 질문
강의 내용 중 useMemo 부분의 실습이 없어서 질문드립니다. Component.js로 컴포넌트를 작성하고App.js에서 컴포넌트를 호출해봤는데요. App.js..<div>{<Component a={1} b={5} />}</div> ... Component.js...useMemo(() => compute(a,b),[a,b]); ...이렇게 작성했을 때 useMemo가 제대로 작동하고 있는지 확인하고 싶은데요. useEffect는 console.log로 확인이 됐는데 useMemo는 어떻게 확인을 할 수 있을까요?(useEffect랑 useMemo는 방식이 달라서 useEffect에 로그를 찍어봤자 useMemo를 확인할 수 없었어요...)
-
미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
firebase admin 코드 추가 강의 부분
firebase admin 코드 추가 강의 부분 여기는 저같은 JS와 리액트까지만 어느 정도 알고 있는 프론트엔드 초급 수준 => 강의 소개에 나온 대상자 수준에서 볼 때 frebase-admin.ts 작성이 설명이 (많이) 생략된 부분도 많고 어렵다는 생각이 듭니다. 그래도 그냥 아~~고렇구나 하고 일단 넘어갔습니다.아래는 제 기준 뇌정지 부분 정지 정리했습니다. 혹시 다음에 공부하시는 분들도 참고하시라고요ㅠ7:50초 강의를 3번 돌려보고 30분 넘게 꼼꼼하게 코드 치고 모르는 건 최대한 구글링했습니다아1.공식문서도 참고하라는 페이지가 2초 화면에 나오고 사라졌는데 나왔는데 여기가 맞나요https://firebase.google.com/docs/admin/setup선생님이 하신 거처럼 안하고(제가 이해가 되지 않는 코드는 안쓰는 게 낫지 않을까요?) 공식문서대로 나온대로 쓰는 거랑 무슨 차이인가요2.싱글톤 패턴...갑자기요? ㅠㅠ 패알못이라서 왜 여기서 싱글톤 패턴 사용하는지 몰겠어요3. 자바스크립트 에서 클래스 생성하는 문법 까먹어서 뇌정지 모먼트https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes public static, instance, private 등 한번 배우고 까먹은 용어들이 줄줄이 설명없이 나와서 멈추고 찾아봤어요4.환경초기화 하는 메서드는 왜 bootstrap이라는 이름으로 정하셨나요 제가 아는 bootstrap은 프론트엔드 라이브러리가 전부인데요 이 이름으로 정한 이유가 궁금했어요5. 05:33function 처럼 실행하지 않고 field 처럼 실행할꺼라는 말이 무슨 말일까요6. 썬더클라이언트..다운로드 받은 건 기억이 나는데 설명을 안해주심 대충 느낌은 알았어요 포스트맨 같은 거네요일단 그래도 config 파일이라서 울면서 넘어가겠읍니다..저빼고 초급자들은 다 이해하셨을까요 저만 5시간 강의 + 추가 50시간 개인학습되는 거 아니겠쥬 앞으로도 계속 마이크로 수강평 남길게요...
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 redux-persist 질문 드립니다.
안녕하세요 제로초님redux-toolkit에 next-redux-wrapper와 redux-persist 연결하는데 질문드립니다.import userReducer from "@slice/userSlice"; import commonSlice from "@slice/commonSlice"; import localSlice from "@slice/locals"; export const persistConfig = { key: "root", version: 0, whitelist: ["locals"], storage, }; export const rootReducer = (state, action) => { if (action.type === HYDRATE) { return { ...state, ...action.payload, }; } return combineReducers({ user: userReducer, common: commonSlice, locals: localSlice, })(state, action); }; export const reducer = persistReducer(persistConfig, rootReducer); 이렇게 초기 셋팅을 해주었고, export const store = configureStore({ reducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }).concat(logger), devTools: process.env.NEXT_PUBLIC_NODE_ENV !== "production", }); export const persistor = persistStore(store); const setupStore = (context: any): EnhancedStore => store; const makeStore: MakeStore<any> = (context: any) => setupStore(context); export const wrapper = createWrapper<Store>(makeStore); export default wrapper;이렇게 스토어를 만들었습니다.그런데 문제가.. persist에서 rehydrate에서는 저장된 값이 유지 되어있으나.next-redux-wrapper의 hydrate에서 초기 스테이트값을 다시 저장해버리는 문제가 있습니다.둘중 하나를 버려야 할까요? 아니면 셋팅이 잘못된걸까요?
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
모달창 밖에 스크롤 이벤트는 어떻게 끌 수 있을까요?
안녕하세요.모달창 을 띄우고 스크롤을 하면 모달창밖에 화면이 스크롤이 되는데 이부분도useRef를 이용해서 막을 수 있을까요??
