그런데 테이블을 선택해서 코드를 보려면 자꾸 workbench가 팅겨서 꺼집니다 ㅠㅠ코드를 깃허브에 있는 class형 함수를 긁어서 사용해서 문제가 되는걸까요..?ㅠㅠ 아래는 오류창입니다..

강사님 모든 코드를 수정한 후 로그인하려고 하는데아이디, 비밀번호 입력 후 누르면 로그인이 되지 않습니다.콘솔창에 에러도 나타나지 않아서 어디가 틀렸는지 모르겠네요.몇개파일의 코드 같이 올려드립니다.아래는 로그인 안되는 화면캡처본입니다.LoginForm.jsimport React, { useCallback, useMemo } from "react"; import Link from "next/link"; import { Form, Input, Button } from "antd"; import styled from "styled-components"; import useInput from "../hooks/useInput"; import { useDispatch, useSelector } from "react-redux"; import { loginRequestAction } from "../reducers/user"; const FormWrapper = styled(Form)` padding: 15px; `; const LoginForm = () => { const dispatch = useDispatch(); const { isLoggingIn } = useSelector((state) => state.user); const [id, onChangeId] = useInput(""); const [password, onChangePassword] = useInput(""); const style = useMemo(() => ({ marginTop: 10 }), []); const onSubmitForm = useCallback(() => { console.log(id, password); dispatch(loginRequestAction({ id, password })); }, [id, password]); return ( <FormWrapper onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <Input name="user-id" value={id} onChange={onChangeId} required></Input> </div> <div> <label htmlFor="user-password">비밀번호</label> <Input name="user-password" value={password} onChange={onChangePassword} required ></Input> </div> <div style={style}> <Button type="primary" htmlType="submit" loading={isLoggingIn}> 로그인 </Button> <Link href="/signup"> <a>회원가입</a> </Link> </div> </FormWrapper> ); }; export default LoginForm; reducers-user.jsexport const initailState = { isLoggingIn: false, // 로그인 시도중 - 로딩창을 띄우기위해 isLoggedIn: false, isLoggingOut: false, // 로그아웃 시도중 me: null, signUpDate: {}, loginData: {}, }; // 로그인 액션 create export const loginRequestAction = (data) => { return { type: "LOG_IN", data, }; }; export const logoutRequestAction = () => { return { type: "LOG_OUT", }; }; const reducer = (state = initailState, action) => { switch (action.type) { case "LOG_IN_REQUEST": console.log("reducers login"); return { ...state, isLoggingIn: true, }; case "LOG_IN_SUCCESS": return { ...state, isLoggingIn: false, isLoggedIn: true, me: { ...action.data, nickname: "가나다" }, }; case "LOG_IN_FAILURE": return { ...state, isLoggingIn: false, isLoggedIn: false, }; case "LOG_OUT_REQUEST": return { ...state, isLoggingOut: true, }; case "LOG_OUT_SUCCESS": return { ...state, isLoggingOut: false, isLoggedIn: false, me: null, }; case "LOG_OUT_FAILURE": return { ...state, isLoggingOut: false, }; default: return state; } }; export default reducer; sagas-user.jsimport { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; function loginAPI(data) { return axios.post("/api/login", data); // 서버에 요청 } function* login(action) { try { console.log("saga login"); yield delay(1000); // 비동기 요청 대신수행 // const result = yield call(loginAPI, action.data); yield put({ type: "LOG_IN_SUCCESS", data: action.data, }); } catch (err) { yield put({ type: "LOG_IN_FAILURE", data: err.response.data, }); } } function logoutAPI() { return axios.post("/api/logout"); // 서버에 요청 } function* logout() { try { yield delay(1000); // const result = yield call(logoutAPI); yield put({ type: "LOG_OUT_SUCCESS", }); } catch (err) { yield put({ type: "LOG_OUT_FAILURE", data: err.response.data, }); } } function* watchLogIn() { yield takeLatest("LOG_IN_REQUEST", login); } function* watchLogOut() { yield takeLatest("LOG_OUT_REQUEST", logout); } export default function* userSaga() { yield all([fork(watchLogIn), fork(watchLogOut)]); } configureStore.jsimport { applyMiddleware, createStore, compose } from "redux"; import createSagaMiddleware from "redux-saga"; import { createWrapper } from "next-redux-wrapper"; import { composeWithDevTools } from "redux-devtools-extension"; import reducer from "../reducers"; import rootSaga from "../sagas/index"; const configureStore = () => { const sagaMiddleware = createSagaMiddleware(); const middlewares = [sagaMiddleware]; const enhancer = process.env.NODE_ENV === "production" ? compose(applyMiddleware(...middlewares)) : composeWithDevTools(applyMiddleware(...middlewares)); const store = createStore(reducer, enhancer); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === "development", }); export default wrapper;

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 넷플릭스 실습을 하면서 iframe을 사용해 유튜브에서 동영상이 나오게 하는거 까지는 완료가 되었습니다.그런데 재생버튼을 누르고 영상이 시작되면 그림처럼 흐릿하게 나오는데 왜 그런걸까요?

[text, setText]와 onChangeText를 만들어놓은 훅 useInput을 사용해서 코딩해도 되지 않나요? 그렇게 하지 않은 이유가 긍금합니다!

현재 노드 버전이 올라가서 노드도 16.17로 내리고나머지도 다 버전 내려서 버전에 맞게 설정하고yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact까지 했는데 노션에 있는 것 처럼 페이지와 api 여러 등등이 뜨지 않습니다뭐가 문제일까요?ㅠㅠ

post 로 id, password 전송시 => 크롬 개발자 도구, 네트워크, Request 에 보면 id, password 가 그대로 노출되는데 숨길순 없나요?브라우저를 사용하는 유저가 보낸 거기 때문에 보안을 안해도 상관없을까요?

  그대로 따라한거 같은데 태그마다 빨간 줄이 있는 이유가 뭔지 모르겠어요 ㅜ 작동은 잘 됩니다! 항상 감사합니다

tdd 앱 개발 초입 강의에서 질문 있습니다.App.test.js에서는 screen.getByTestId("counter")를 했고, App.js 에서는 <h3> 내부에 data-testid="counter" 라고 되어 있는데요.어떻게 App.js 내부의 <h3> 태그의 data-testid가 getByTestId로 불릴 수 있는지 궁금합니다..!그리고 넘어간 정보가 왜 0이 아니라 TextContent가 맞는걸까요?

import "reflect-metadata";^^^^^^SyntaxError: Cannot use import statement outside a module 해당 에러 발생 후 , package.json 파일에type 을 추가 후 실행 하였더니, 충돌 에러가 발생합니다 ㅠ 어떻게 해결 해야 하는지 조언좀 부탁드립니다.https://github.com/bottlesun/study/tree/master/09-redditClone-nextjs

const subs = await AppDataSource.createQueryBuilder() .select( `s.title,s.name,${imageUrlExp} as "imageUrl", count(p.id) as "postCount"` ) .from(Sub, 's') .leftJoin(Post, 'p', `s.name = p."subName"`) .groupBy('s.title, s.name, "imageUrl"') .orderBy(`"postCount"`, 'DESC') .limit(5) .execute(); 위의 코드에서 백틱 ``과 따옴표들 '', "" 사용방식들에대한 기초적인 지식을 쌓으려면 어떻게 검색해보면될까요?일단 제 나름대로 접근식으로는 .from이나 .orderBy 이런건 typeORM 문법인거같아서 찾아보니 문서에는 백틱은 안적혀있는거같고 따옴표로만 작성해준거같아서요.. 혹시 변수가 들어가있으면 ``를써주는게맞나요?근데 .orderBy부분에서 `"postCount"`, 이부분이 좀 이해가 안가는게 백틱에 또 큰따옴표를 감싸주셔서.. 

export const getServerSideProps: GetServerSideProps = async ({ req, res }) => { try { const cookie = req.headers.cookie; console.log(req.headers.cookie); // 쿠키가 없다면 에러를 보냄 if (!cookie) throw new Error('Missing auth token cookie'); // 쿠키가 있다면 그 쿠키를 이용해서 백엔드에서 인증 처리하기 await axios.get('/auth/me', { headers: { cookie } }); return { props: {} }; } catch (error) { // 백엔드에서 요청에서 던져준 쿠키를 이용해 인증 처리할 때 에러가 나면 // login 페이지로 이동 res.writeHead(307, { Location: '/login' }).end(); return { props: {} }; } }; axios.get에 파라미터로 헤더.쿠키 로 넣어준걸까요?근데 순서대로 코드가 동작하게되면 if문에 걸려서 영원히 쿠키가 없어 페이지가 로그인페이지로 이동될텐데 제가 잘못생각한걸까요?두번쨰로 리턴 props:{}로 해주신 이유에대해서 궁금합니다. 다른식으로 그냥 return; 이렇게 작성하고 끝내도 괜찮을까요?

const id = useSelector((state) => state.user.user?.id); const { addCommentDone } = useSelector( (state) => state.post );위에 코드처럼 state 단계에서 갈리게되면 2번 실행하게되는데 성능엔 문제 없나요?     

강의를 보고 graphql-codegen 설치를 진행하는데 yarn generate 명령어를 입력하니 아래와 같은 에러가 발생합니다.  수업 자료를 보고 다시 설치해봐도 동일한 오류가 계속 발생합니다.

next13 학습을 진행하고 있는데 오류가 발생해서 질문드립니다.기본적으로이 상태에서는이런 오류가 발생하고<Link>를 사용을 하게 되면이런 오류가 발생합니다..어떻게 해야하나요?   

 안녕하세요 선생님첫화면엔 커넥션 리퓨즈 뜨고회원가입 누르면 이러한 오류가 뜹니다 넘어가질 않고 오류가 계속나오는데 왜이런걸까요?..무엇이 문제인지 궁금합니다:4000 으로 계속 찍히는거 보면 cors가 안되는것일까요강의보고 다 제대로 따라했는데 ㅠㅠ도와주시면 감사하겠습니다

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를 제거하라는게 무슨말인가요??

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]; };

선생님 포스트 나 댓글 삭제기능은 어떤식으로 해야될까요 따로 강의는 없겟죠? ㅠ

짹짹 버튼을 눌렀을 때, 처음 클릭 시에만 해당 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;   

안녕하세요 선생님post 타이틀을 한글로 쓰면 경로이동이 안됩니다 영어로 쓰면 라우터대로 경로가 이동하는데 한글로 쓰면 이동이 안되네요... 왜이럴까요 한글타이틀 도 영어타이틀 처럼 잘 이동될순 없을까요