리액트에서 배열 사용하기 1-리스트 렌더링 강의에서 질문있습니다. DiaryItem 컴포넌트에서 diaryList에있는 author, content.. 등 정보를 사용하려면 props 로 내려받아야 하는걸로 알고 있는데..DiaryList 컴포넌트에서는 key 값만 적혀있는데 따로 map을 사용하면 props가 DiaryItem까지 전달되는건가요? {diaryList.map((it) => ( <DiaryItem key={it.id}{...it} /> const DiaryItem = ({ author, content, created_data, emotion, id, }) => { return } import DiaryItem from "./DiaryItem"; const DiaryList = ({ diaryList }) => { console.log(diaryList); return ( <div className="DiaryList"> <h2> 일기 리스트</h2> <h4>{diaryList.length}개의 일기가 있습니다.</h4> <div> {diaryList.map((it) => ( <DiaryItem key={it.id}{...it} /> ))} </div> </div> ); }; export default DiaryList;

이 강의에 불만이 한두개가 아닌 사람입니다.훈훈한 javaScript 타이머 만드는 부분 듣고있는데 제가 코드를 잘못 썼는지 작동이 안되는데요.코드를 비교해 보고싶어도 코드만 따로 올린게 없는 건지, 제가 못찾는건지 모르곘네요.만약 코드만 따로 올려놓은게 없다면 인강 처음부터 돌려보면서 하나하나 비교해야 하는건가요?심지어 html 코드자료 올려놓은거 복사해서 붙여넣었더니 class 이름이 강의랑 달라서 어이가 없었네요.자료좀 똑바로 올려주세요.

onCreate시 localStorage에 데이터가 추가는 되는데, 화면에 작성한 글이 나오지 않아요 ㅠㅠ https://codesandbox.io/s/infallible-artem-sdzknh

안녕하세요! 열심히 강의 듣고 있는데 HTML 수업에서 예치금 충전표 관련해서 따로 내용이 없는데 노션에는 나오더라구여! 예치금 충전표 관련 강의는 어디있는건가요?

시퀄라이즈로 모델 구성시 하나의 database 를 참조하는 방식인데요 서브쿼리로 다른 database(mysql 의 schema)의 테이블을 참조하는 경우에는 다음과 같이 query() function으로 풀어서 요청하기도 하는가요..? db.sequelize.query('select a.name, b.score from schemaA.Users a Left join schemaB.Score B on a.userid=b.userid')

강의에서 제공해주시는 swagger를 사용하여 axios, rest-api로 게시글 post를 테스트 하고 싶습니다. 어떠한 url로 axios.post() 안에 작성해야할 지 모르겠습니다..!

안녕하세요 강의 잘 듣고있습니다.04-02-graphql-mutaion/index.js부분에서  이부분 이유에 대해서 잘 모르겠습니다.  

진도가 잘 안나가네요아직 redux에서 헤매고 있습니다. 페이지 이동 시 버튼을 통해 이동 시에는 state 값이 유지가 되는데 직접 localhost:3060/profile 를 타이핑해서 들어가게 되면 상태값이 유지가 되지 않습니다.원래 그런걸까요..?<Menu.Item key="home"><Link href="/"><a>노드버드</a></Link></Menu.Item> <Menu.Item key="profile"><Link href="/profile"><a>프로필</a></Link></Menu.Item>   유지가 되게 해주려면 어떤 방식으로 가져가야 할까요..?

섹션 24 에서 빈값 처리를 구현하는것을 보여주셨는데요.html5 에서 제공하는 유효성 검사 <input type="text" required />위와같이 사용하는것과의 차이점이 뭘까요 ??  

23강 수업중에 초반부터 오류가 생기더라구요 한번 확인해주시면 감사하겠습니다

https://metlin-72.github.io/react-netflix/ 접속 시 아래와 같이 에러가 납니다.===========================================================metlin-72.github.io/:1 GET https://metlin-72.github.io/static/js/main.5bcb49d4.js net::ERR_ABORTED 404metlin-72.github.io/:1 GET https://metlin-72.github.io/static/css/main.10fc3cf1.css net::ERR_ABORTED 404manifest.json:1 GET https://metlin-72.github.io/manifest.json 404manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.===========================================================뭘까요? 여러번 반복해서 똑같이 따라했는데 안되네요.도움 부탁드립니다.

8.26.기준 강의자료 서버 보일러 플레이트에 axios 없네요~ npm install axios모두 화이팅~~

ec2 우분투에서 npm run build:production 명령어를 입력하면,> client@0.1.0 build:production> env-cmd -f .env.production react-scripts buildCreating an optimized production build...이 상태에서 더 이상 진행되지 않고 멈춰있습니다.ctrl+c로 중단했다가 다시 빌드해봐도 동일한데 어떻게 해결할 수 있을까요?

onCreate에서 data의 초기값이 빈배열인 이유가 JS의 비동기성과 관련이 있나요?로직을 순서대로 보면 getData에서 initData를 넣은 다음에 callBack 함수가 선언되어 초기값에 문제가 없을거 같은데비동기성 때문에 이런 문제가 발생하는지 궁금합니다.

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 초심자의 입장에서 사실 저러한 기능을 보면 그냥 처음에 만들때는 useCallback, React.memo 를 다 써보고 나중에 문제 생기면 그때 바꿔쓰면 되지 않나? 라는 생각이 듭니다.마치 평소에는 const 로 다 만들고, 해보다가 let 으로 변경이 필요하다 싶으면 let 으로 바꾸는 것처럼요.이걸 어떤 기준을 잡고 사용해야 할까요? 정확한 기준이 있는지도 궁금합니다. 렌더링 되는데 걸리는 시간이 몇 초 이상일시 변경한다거나 하는 기준이 있을까요?

리덕스 스토어에 로그인 유저 정보 저장이 되지 않는 것 같습니다.로그인은 잘 되어 라우팅 되는 거 같은데 왜 스토어에 저장이 안되는지 질문드립니다!

안녕하세요 강사님 중고마켓 댓글을 불러오는 쿼리훅을 작성했는데 아래와 같은 에러 메세지로 계속 상태코드 400이 나옵니다 ㅠㅠ "Variable \"$useditemId\" is not defined by operation \"fetchUseditemQuestions\"."훅 안에서 useditemId을 콘솔로 찍어봐도 정상적으로 나오고 같은 변수를 사용하는 fetchUseditem를 참고해서 다시 작성도 해봤는데 계속 같은 오류가 나옵니다.. 그래프큐엘 플레이그라운드에서는 똑같이 작성해서 query variables에 useditemId를 넣어서 요청해보면 문제없이 잘 작동하는데 프로젝트 안에서는 계속 오류가 나네요 ㅠㅠ 제가 어느 부분을 놓친걸까요..? import { gql, useQuery } from "@apollo/client"; import type { IQuery, IQueryFetchUseditemQuestionsArgs, } from "../../../../commons/types/generated/types"; const FETCH_USEDITEM_QUESTIONS = gql` query fetchUseditemQuestions($page: Int, $useditemID: ID!) { fetchUseditemQuestions(page: $page, useditemId: $useditemId) { _id } } `; export const useQueryFetchUseditemQuestions = ( variables: IQueryFetchUseditemQuestionsArgs, ) => { const query = useQuery< Pick<IQuery, "fetchUseditemQuestions">, IQueryFetchUseditemQuestionsArgs >(FETCH_USEDITEM_QUESTIONS, { variables: { useditemId: variables.useditemId, }, }); return query; };

gravatar를 적용시킨 후<WorkspaceWrapper> <Workspace>test</Workspace> <Channels> <WorkspaceName>Sleact</WorkspaceName> <MenuScroll>Menu Scroll</MenuScroll> </Channels> </WorkspaceWrapper>이 부분을 추가해서 저장 후 실행시켰더니 갑자기 메모리 사용량이 폭발적으로 증가해 웹 페이지를 열 수 없다고 나옵니다.작업 관리자를 켜서 실시간으로 확인해봐도 웹 페이지에서 오류 페이지를 띄울 때 까지 계속 증가하네요.인터넷에 검색해도 쿠키를 제거하라는 형식적인 답변만 나오고 커뮤니티 게시판에도 이같은 문제를 겪었던 사람이 없어서 질문드립니다.현재 사용하는 노트북의 RAM은 16기가입니다. 혹시 같은 현상을 겪어보신적 있으신가요?

안녕하세요 제로초님 로그인은 되는데 로그아웃이 되지않아서 질문남깁니다.로그인 한 다음 로그아웃을 하면 위와 같이 AxiosError가 나서 네트워크와 리덕스를 확인해보니깐 로그아웃 요청시 302 Found가 뜨고  404 Not Found라는 에러 메세지가 뜹니다.그리고 리덕스에서는 실패 메세지가 뜹니다. // UserProfile import { logoutRequestAction } from '../reducers/user'; const dispatch = useDispatch(); const { me, logOutLoading } = useSelector((state) => state.user); const onLogOut = useCallback(() => { dispatch(logoutRequestAction()); }, []); <Button onClick={onLogOut} loading={logOutLoading}> 로그아웃 </Button> // 리덕스 logOutLoading: false, // 로그아웃 시도중 logOutDone: false, logOutError: null, export const LOG_OUT_REQUEST = 'LOG_OUT_REQUEST'; export const LOG_OUT_SUCCESS = 'LOG_OUT_SUCCESS'; export const LOG_OUT_FAILURE = 'LOG_OUT_FAILURE'; case LOG_OUT_REQUEST: draft.logOutLoading = true; draft.logOutDone = false; draft.logOutError = null; break; case LOG_OUT_SUCCESS: draft.logOutLoading = false; draft.logOutDone = true; draft.me = null; break; case LOG_OUT_FAILURE: draft.logOutLoading = false; draft.logOutError = action.error; break; 사가 axios.defaults.baseURL = 'http://localhost:3065'; function logOutAPI() { return axios.post('/user/logout'); } function* logOut() { try { yield call(logOutAPI); yield put({ type: LOG_OUT_SUCCESS, }); } catch (err) { console.log(err); yield put({ type: LOG_OUT_FAILURE, error: err.response.data, }); } } function* watchLogOut() { yield takeEvery(LOG_OUT_REQUEST, logOut); }   app.js const express = require('express'); const cors = require('cors'); // session, cookieParser, dotenv const session = require('express-session'); const cookieParser = require('cookie-parser'); const dotenv = require('dotenv'); // passport 로그인 설정 const passport = require('passport'); const passportConfig = require('./passport'); passportConfig(); const postRouter = require('./routes/post'); const userRouter = require('./routes/user'); dotenv.config(); const app = express(); // 시퀄라이즈 - db 연결 const db = require('./models/index.js'); db.sequelize .sync() .then(() => { console.log('db 연결 성공'); }) .catch(console.error); app.use( cors({ origin: true, credentials: true, }) ); app.use(express.json()); app.use(express.urlencoded({ extended: true })); // session,cookieParser app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, }) ); app.use(passport.initialize()); app.use(passport.session()); app.use('/post', postRouter); app.use('/user', userRouter); app.listen(3065, () => { console.log('3065 포트에서 대기중'); }); user.js const express = require('express'); const router = express.Router(); const passport = require('passport'); const bcrypt = require('bcrypt'); const { User, Post } = require('../models'); // 로그인 POST/user/login router.post('/login', (req, res, next) => { passport.authenticate('local', (err, user, info) => { if (err) { console.error(err); return next(err); } if (info) { return res.status(403).send(info.reason); } return req.login(user, async (loginErr) => { if (loginErr) { console.error(loginErr); return next(loginErr); } const fullUserWithoutPassword = await User.findOne({ where: { id: user.id }, attributes: { exclude: ['password'], }, include: [ { model: Post, }, { model: User, as: 'Followings', }, { model: User, as: 'Followers', }, ], }); return res.status(200).json(fullUserWithoutPassword); }); })(req, res, next); }); // 로그아웃 POST/user/logout router.post('/logout', (req, res, next) => { req.logout(() => { res.redirect('/'); }); }); //회원가입 POST / user router.post('/', async (req, res, next) => { try { const exUser = await User.findOne({ where: { email: req.body.email, }, }); if (exUser) { return res.status(403).send('이미 사용중인 아이디입니다.'); } const hashedPassword = await bcrypt.hash(req.body.password, 10); await User.create({ email: req.body.email, nickname: req.body.nickname, password: hashedPassword, }); res.status(200).send('ok'); } catch (error) { console.error(error); next(error); } }); module.exports = router; 로그인과 회원가입은 제대로 작동하는데 로그아웃만 되지 않습니다.

안녕하세요 선생님. :-) 코멘트 복습하며 궁금증이 생겨서 질문 드립니다.리팩토링 하면서 느낀건데 , 이 이미지의 밑줄이 그어진 태그들 없이 이벤트핸들러만 있어도 기능구현에 무리가 없던데 이 태그들이 꼭 있어야 하는건가요 ?? 있어야 한다면 이유를 알고 싶습니다. 두 번째는 antd에서 rate를 가져올 때 궁금증입니다.여기서 제가 궁금한것은 value={el.rating}이 부분인데, value값에 el.rating을 주지 않으면 색칠이 없는 별만 뜨더라구요. 그래서 이모션을 없애고 <div>{el.rating}<div>로 찍으니 숫자가 나오는 걸 알 수 있었습니다. 그럼 결국 댓글 작성할 때 클릭한 별은 숫자로 뮤테이션이 날라가고 조회할 때 그 숫자를 value에 넣어줘야 별 모양이 제대로 뜬다는 것을 확인했습니다. 그렇다면 이건 antd 개발자들이 독자적으로 설정을 이렇게 한건가요 ?? 아니면 일반적으로 이런 모양들은 value에 값을 넣어줘야 정상적으로 뜨는건가요 ??? 미리 답변 감사합니다 선생님 !!! ^_^