제로초님 강의를 들으면서 개인 프로젝트에 개념을 대입하면서 공부하고 있습니다. 근데 아래와 같이 post reducer의 데이터를 가져와서 페이지에 출력하려고 하면 아래와 같이 오류가 발생하는데 혹시 이유를 알 수 있을까요? 혼자서 찾아보고 구글링을 해봐도 도저히 답을 찾기 힘들어서 이렇게 질문드립니다.   import React from 'react'; import { useSelector } from 'react-redux'; import { Button } from 'antd'; import { PlusCircleOutlined } from '@ant-design/icons'; import Link from 'next/link'; import styled from 'styled-components'; import AppLayout from '../components/AppLayout'; import PostList from '../components/PostList'; import { PageMainText, PageSubText } from './_app'; const LogoHeader = styled.div` && { display: flex; justify-content: space-between; align-items: center; padding: 0.2em 1em; margin-bottom: 3em; } `; const LogoText = styled.div` && { display: flex; flex-direction: column; justify-content: start; } `; const PageWrapper = styled.div` && { padding: 0.5em 2em 1em 2em; } `; const Home = () => { const { isLoggedIn } = useSelector((state) => state.user); const { mainPosts } = useSelector((state) => state.post); return ( <AppLayout> <PageWrapper> <LogoHeader> <LogoText> <PageMainText>Recipe.io</PageMainText> <PageSubText>Have a delicious meal today</PageSubText> </LogoText> {isLoggedIn && <Link href='/posting'><a><Button type='primary' size='large' icon={<PlusCircleOutlined />} >Create Recipe</Button></a></Link>} </LogoHeader> {mainPosts.map((post) => <PostList post={post} key={post.id}/>)}; </PageWrapper> </AppLayout> ) }; export default Home; import React from 'react'; import { Input, List } from 'antd'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import PostCard from './PostCard'; const InputWrapper = styled(Input.Search)` margin-bottom: 2em; `; const PostList = ({ post }) => { return ( <> <InputWrapper placeholder="Search for Recipe" size='large' allowClear="true" enterButton /> <List grid={{ gutter: 16, xs: 2, md: 4, }} dataSource={post} renderItem={(item) => ( <List.Item> <PostCard post={item} /> </List.Item> )} /> </> ) }; PostList.propTypes = { post: PropTypes.shape({ id: PropTypes.number, User: PropTypes.object, title: PropTypes.string, desc: PropTypes.string, content: PropTypes.arrayOf(PropTypes.object), Images: PropTypes.arrayOf(PropTypes.object), Comments: PropTypes.arrayOf(PropTypes.object), }) }; export default PostList; import React, { useCallback, useState } from 'react'; import { HeartOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons'; import { Card, Avatar, Modal, Popover } from 'antd'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import PostCardModal from './PostCardModal'; const CardWrapper = styled(Card)` && { width: 400px; } `; const PostCard = ({ post }) => { const [visible, setVisible] = useState(false); const showPostModal = useCallback(() => { console.log(visible); setVisible(true); }, []); return ( <> <CardWrapper hoverable cover={ <img alt="post image" src={post.Images[0]} onClick={showPostModal}/> } actions={[ <HeartOutlined key="like" />, <EditOutlined key="edit" />, <Popover key='more'> <EllipsisOutlined key="ellipsis" />, </Popover> ]} > <Card.Meta avatar={<Avatar>{post.User.nickname[0]}</Avatar>} title={post.title} description={post.desc} /> </CardWrapper> <Modal centered visible={visible} onOk={() => setVisible(false)} onCancel={() => setVisible(false)} width={1000} > <PostCardModal /> </Modal> </> ) }; PostCard.propTypes = { post: PropTypes.shape({ id: PropTypes.number, User: PropTypes.object, title: PropTypes.string, desc: PropTypes.string, content: PropTypes.arrayOf(PropTypes.object), Images: PropTypes.arrayOf(PropTypes.object), Comments: PropTypes.arrayOf(PropTypes.object), }) }; export default PostCard; export const initialState = { mainPosts: [{ id: 1, User: { id: 1, nickname: 'Mirrer' }, title: '돼지고기 갈비찜', desc: '한국인이 좋아하는 대표 고기 요리 갈비찜 레시피!!', content: [{ ingredient: '주 재료 = 갈비 600g, 당근 20g, 은행 10알, 밤 10개, 파 1대, 양파 50g, 양념장 재료 = 간장 3큰술, 설탕 2큰술, 육수 12큰술, 다진 생강 1작은술, 깨소금 2큰술, 청주 ¼컵, 다진 마늘 3큰술, 참기름 1큰술, 후춧가루 약간', }, { recipes: '1. 갈비는 사방 5㎝ 크기로 썰어 기름기를 제거한다., 2. 기름기를 없앤 갈빗살에 칼집을 낸 다음 찬물에 30분~한 시간쯤 담가 핏물을 빼주고, 혹시 모를 절단 과정에서 섞인 뼛가루나 뼛조각을 제거해준다. 이 핏물 빼는 과정을 속성으로 하고 싶으면, 한 번 끓여 데치는 거로 대체해도 되긴 된다, 3. 끓는 물에 핏물을 뺀 갈비와 토막 낸 양파·파를 넣어 속까지 익을 때까지 삶아낸다. 중간에 젓가락으로 고기를 찔러보아 핏물이 나오는지 확인한다. 핏물이 나오면 고기가 덜 익은 것., 4. 고기가 익으면 체에 받친다. 이 국물은 걸러서 지저분한 것을 제거하고 양념장의 육수로 이용한다.' }, { tips: '갈비를 한 번 끓여서 핏물이나 기름기를 어느 정도 빼준 후, 재료들을 압력밥솥에 싹 때려넣고 그대로 푹 익혀버리면 질긴 고기가 녹아드는 수준이 되어 부드럽게 먹을 수 있다.' }], Images: [{ src: 'https://recipe1.ezmember.co.kr/cache/recipe/2015/06/03/f6551b241deba537266c7dfe668e09821.jpg', }, { src: 'https://recipe1.ezmember.co.kr/cache/recipe/2017/09/15/af5ed61b01ce6d0c8ded20d59f0d15e31.jpg', }, { src: 'https://www.cj.co.kr/images/theKitchen/PHON/0000002320/0000009726/0000002320.jpg', }], Comments: [{ User: { nickname: 'AppleLover', }, content: '우와 정말 맛있을것 같아요 ㅎㅎ', }, { User: { nickname: 'Nightmare', } }, { content: '오늘 저녁은 갈비찜이다!!', }], }], imagePaths: [], postAdded: false, }; const dummyPost = { id: 2, User: { id: 2, nickname: 'ZeroCho', }, title: '한류 대표 음식 비빔밥', desc: '한국을 대표하는 대표적인 한류음식 맛있는 비빔밥을 만들어보자 ㅎㅎ', content: [{ ingredient: '콩나물, 오이, 고사리, 당근, 버섯, 양파, 무(생채), 도라지, 시금치 등 각종 나물', }, { recipes: '1. 냉장고를 열어 나물류를 비롯한 있는 반찬을 꺼낸다., 2. 밥을 퍼서 큰 그릇에 담는다., 3. 꺼낸 반찬을 모두 밥 퍼놓은 그릇 위에 얹는다.' }, { tips: '젓가락을 비비면 재료가 뭉개지지 않게 맛있게 먹을 수 있다' }], Images: [{ src: 'https://w.namu.la/s/02034f3c4f5bce39b228d9e368727f091d03ac093efec038a1bcd28f1d046eacfc918db2fad3d98bdda454966eb61895654f4ec4e68a4c35de5a337759028cc47d2ed541554353ba9b7d91dcf23e6f97f09ff287aee488e2b03a27c4313801240b273147ef1f426a82cbd4323e9d5240' }, { src: 'https://w.namu.la/s/ad2bee50b8267c381e01dea6c82aa0ea0e13a3d39feb22f9f32ef66e04bdaeb01206634140b5375aa6176e15add1bd9393f407f2e9bcc5426866663bd01595382207ca414ae02d8ac0aa109a94872e25174a1f8db20bf24198f1a27c915b33ced6c526cc571b2b07decfa1b4775d444e' }], Comments: [{ User: { nickname: 'Korean', }, content: '역시 한국인은 밥심이죠 ㅎㅎ', }], }; export const addPost = { type: 'ADD_POST' }; 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;

안녕하세요, 선생님. 강의 정말 잘 듣고 있습니다. 좋은 강의 감사합니다.  다름이 아니라 수업 때 배운 내용을 적용해 세로로 빌딩같은 화면을 만들었는데 모바일에서 보면 제가 보이게 한 부분보다 넓은 부분이 보인달까요?ㅠㅠ 그래서 이런 경우는 이유가 뭔지 아니면 혹시 제가 뭘 따로 공부해야 할 지 조언해주시면 감사하겠습니다. 제가 만든 화면의 주소입니다. http://52.78.25.55/02.html 혹시 문제시 삭제하겠습니다! 감사합니다.

[딥러닝 전문가 과정 DL1101] 딥러닝을 위한 파이썬 레벨1 이랑 기초대수학 이수중인데, 수강기한 조금만 더 늘려주실 수는 없을까요? ㅠㅠ 생각보다 3개월이 짧네요....

  구글링 해보면서 해결법이라는것들 적용해보고있는데, 그래도 안되네요 ㅠㅠ

선생님, 문득 궁금증이 든건데 gsap라이브러리를 활용해 애니메이션 처리해주는 것과 draw 함수 내부에서 애니메이션 처리해주는 것에 차이점이 간편하게 구현할 수 있다는 것 제외하면 없는건가요?? gsap에서 구현한 애니메이션을 draw 애니메이션 함수에서도 구현할 수 있겠죠??

Post클래스를 사용하지 않고 PostEditor 클래스를 만들어서 이 클래스에 수정하고 싶은 내용들을 필드로 담아두면 이 클래스는 수정하려는 클래스 이다 , 여기에 있는 필드들은 수정이 가능하다 라는 의미를 다른개발자분들에게 의미부여 할 수 있을것 같은데요!   toEdit 메소드가 없이 그냥 PostEditor 클래스에 빌더 패턴으로 생성자를 만들어 save 로 사용하면 될  것 같은데 굳이 toEdit 메소드를 만드신 의미가 어떤건지 궁금합니다!

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기asdfasdfasdf를 이용해주세요.

제로초님 안녕하세요 강의 재밌게 수강하고 있습니다!   webpack.config에서 proxy 설정을 따라하던 중 에러를 마주하여 회원가입 진행을 못하고 있습니다.   [진행 방법] - back 폴더 app에서 cors쪽 코드 주석처리하였습니다.   1. 백 서버 잘 띄운 상태에서 webpack.config에서 코드 수정할 때마다 프론트서버 재실행하였습니다. 2. 회원가입 진행하였습니다. 3. 아래와 같은 에러를 마주합니다.   아래 에러이미지, 작성중인 코드, package.json쪽 코드 사진 첨부합니다.                       제가 봤을 땐 proxy 설정이 제대로 이루어지지 않은 것으로 보입니다. 회원가입시 api요청을 보내는 프론트 포트가 3090이고 백포트는 3095이기 때문에 cors정책에 벗어나서 위와 같은 에러가 뜨는 것이 당연하다고 봅니다.   그래서 proxy 설정이 되지 않는 것 위주로 구글링하며 이것 저것 많이 시도해봤는데 3시간째 해메고 있어서 질문 남깁니다ㅠㅠ  

구조체 할당메모리 강의에서 쓰인 내용을 바꾸어서 배열의 크기를 제가 정하고 문장을 입력받는 코드를 시도해보았습니다. 근데 오류가 뜨고 입력이 안되네요.. 뭐가 잘못된걸까요? 파일 첨부합니다!

import computed 자동저장시 eslint에 의해 'vue'로 재정의되는대  'vue'와 @vue/reactivity 의 차이가 무엇일까요? { ref , computed } 'vue' 사용하여 써도 문제가없던대  'vue'안에 모듈들이 함축적으로 포함되어있는건가요? 강의에서는 @vue/reactivity 로 하셨지만 조금 달라서 여쭈어봅니다.!

@GetMapping에 @ModelAttribute를 쓰는 이유가 뭔지 알수있을까요? 저와 비슷한 질문을 올린 글을 봐도 명확한 설명이 없어서요...

다음은 9.2강에서 나오는 코드입니다.#include <iostream>using namespace std;class Point{private: double m_x, m_y, m_z;public: Point(double x = 0.0, double y = 0.0, double z = 0.0) : m_x(x), m_y(y), m_z(z) {} double getX() { return m_x; } double getY() { return m_y; } double getZ() { return m_z; } // friend 전역 함수 friend std::ostream& operator << (std::ostream& out, const Point& point) { out << "( " << point.m_x << " " << point.m_y << " " << point.m_z << " )"; return out; }};int main(){ Point p1(0.0, 0.1, 0.2), p2(3.4, 1.5, 2.0); cout << p1 << " " << p2 << endl; return 0;}   저는 연산자 오버로딩 함수가 매개변수로 const Point& point 를 받기 때문이라고 생각했지만 const를 지워도 같은 오류가 나옵니다. 오류와 별개로 코드를 실행하면 정상적으로 작동합니다. 질문 : 비주얼스튜디오 2022에서 위와 같은 오류가 뜨는데 원인을 모르겠습니다.  

이번 강의에서 '이 객체는 휴먼이라는 클래스로 만들었기 때문에 변수의 형태는 휴먼이 된다. 때문에 자료형을 휴먼으로 적었다'라고 하셨는데 이 부분이 좀 어렵습니다. 이해가 잘 안되서 2강의 자료형을 다시 복습했는데도 답이 나오질 않아서 질문드립니다.   혹시 2강에서 배운 오브젝트 자료형이 이 부분과 연관이 있는 걸까요?

이거 너무 불편해요 강의 내용은 알차서 좋은데... 인프런 영자님들 보시면 좀 달아주세요 ㅡ.ㅡ;  

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 다른 부분에선 문제가 없는데 AirResult 결과를 받아오는 곳에서 문제가 생기네요 어떻게 해야 할까요?

메일확인 부탁드립니다.

val host 부분에서 이것이 Null일때 리턴을 해준다고 되어있는데 return값이 혹시 그 다음줄의 navController를 리턴해주는 건가요?

선생님 안녕하세요! update 관련해서 질문사항이 하나 있습니다! 다름이 아니라 선생님께서 강의에서 구현하신 update기능은  table의 각 row별로 id값을 기준으로 url을 생성하여 해당 url에서 값을 수정하는 방식이라 이해했습니다!   그런데 table상의 모든 데이터를 한 페이지에 모두 모아놓고, 해당 페이지에서 전체 데이터를 동시에 update할수있는 방법은 혹시 없을까요? 답변 주시면 정말 감사하겠습니다! :)

2번정도 보면서따라하는걸 반복하고 복습하기위해 그림 레이아웃만 보고 작성을 해봤는데 실시간 미리보기 하니까 다르게 나와있어서 어디서부터 잘못되었는지 잘 모르겠어서 처음부터 영상을 보면서 다시 해봤는데 영상을 보면서 했을때는 결과물이 똑같이 잘만 나왔던게 갑자기 안되니까 답답해서 요청 드려봅니다.ㅜㅜ      <!DOCTYPE html> <html lang="ko"> <head>     <meta charset="UTF-8">     <title>layout04</title>     <style>         body {background-color: #ffe0b2;}         #wrap {width: 1000px; height: 900px; margin: 0 auto; font-size: 30px; color:#fff; text-align: center; text-transform: uppercase;}         .header {width: 1000px; height: 100px; line-height: 100px; background: #ef6c00;}         .nav {width: 1000px; height: 100px; line-height: 100px; background: #f57c00;}         .side {float: left; width: 300px; height: 600px; line-height: 600px; background: #fb8c00;}         .content1 {float: left; width: 700px; height: 300px; line-height: 300px; background: #ff9800;}         .content2 {float: left; width: 700px; height: 300px; line-height: 300px; background: #ffa726;}         .footer {clear: both; width: 1000px; height: 100px; line-height: 100px; background: #ffb74d;}     </style> </head> <body>     <div di="wrap">         <dic class="header">header</dic>         <dic class="nav">nav</dic>         <dic class="side">side</dic>         <dic class="content1">content1</dic>         <dic class="content2">content2</dic>         <dic class="footer">footer</dic>     </div> </body> </html>     http://127.0.0.1:52737/04.%20layout04.html   아 그리고 질문하나 더있습니다. Brackets 프로그램이랑 Visual studio Code 프로그램이랑 다른점이 있나요? 사용을 해보았을때엔 둘다 비슷한 프로그램 같은데말이죠. 

동영상에서 단위테스트를 위한 소스파일SimpleStorageUpgrade.test.js 을 생성하였습니다. 그리고, 갑자기 소스가 보이는 데... 물론 중급이라서 생략한 것 같기는 하지만... 소스를 따로 입력해야 하는 것인지.. 그렇다면 게시판에 소스 파일을 , 자동으로 생성되는 것이라면... 그 부분에 대한 설명을 부탁드립니다.