안녕하세요 제로초님현재 섹션3 redux-saga 연동하기 - 게시글, 댓글 saga 작성하기 영상의 Warning: Encountered two children with the same key, 2. 에러 해결까지 수강한 학생입니다!로그인 후 포스트 폼에 글을 입력 후 트윗하기 버튼을 누르는 순간 콘솔 창에 에러가 발생했습니다.redux-devtools로 포스트 추가 액션의 변화를 살펴보니ADD_POST_SUCCESS 포스트 추가 성공 액션이 실행되고 있지 않았습니다! 콘솔에 있는 에러 메시지 번역은 다음과 같았습니다.번역을 읽고 data가 undefined이며, addPost에 이상이 있음을 확인했고,컴포넌트 폴더의 PostForm.js와 reducers/post.js, sagas/post.js를 코드를 확인했습니다.https://github.com/ZeroCho/react-nodebird/blob/master/ch4/front/components/PostForm.js제로초님의 깃허브 챕터4와 구글 검색을 참고 후 가장 의심되는 코드 부분을 올립니다!※ 관련 없는 코드는 . . . 으로 요약 표시하였습니다. components/PostForm.js가독성을 위해 setText는 setPostText로, text는 postText로 바꾸어 코딩했습니다.// reducer 포스트 추가 요청 액션 불러오기 import { addPost } from '../reducers/post'; // 포스트 폼 컴포넌트(사용자 정의 태그) const PostForm = () => { const dispatch = useDispatch(); const [postText, onChangePostText, setPostText] = useInput(''); const { imagePaths, addPostLoading, addPostDone } = useSelector((state) => state.post); /* ----- 포스트 추가 완료 시 포스트 폼 글자 지우기 ----- */ useEffect(() => { if (addPostDone) { setPostText(''); } }, [addPostDone]); /* ----- 포스트 폼 제출 시 포스트 카드 추가 ----- */ const onSubmitForm = useCallback(() => { dispatch(addPost(postText)); }, [postText]); // const onSubmitForm = useCallback(() => { // dispatch({ // type: ADD_POST_REQUEST, // data: addPost, // }); // }, [postText]); return ( <Form . . . /> <Input.TextArea id="post-form" value={postText} onChange={onChangePostText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> . . . {/* ---------- 포스트 작성 버튼 ---------- */} <Button type="primary" style={{ float: 'right' }} htmlType="submit" loading={addPostLoading} > 트윗하기 </Button> </div> </Form> ); }; reducers/post.js// ShortId 라이브러리 불러오기 import shortId from 'shortid'; // 중앙 데이터 저장소(기본 state) export const initialState = { /* ---------- 메인 포스트 더미 데이터 ---------- */ mainPosts: [{ . . . }], /* ---------- 이미지 업로드 시 경로 저장 ---------- */ imagePaths: [], /* ---------- 포스트 추가 시도 중, 완료, 에러 ---------- */ addPostLoading: false, addPostDone: false, addPostError: null, } // 포스트 추가 액션 : 요청, 성공, 실패 export const ADD_POST_REQUEST = 'ADD_POST_REQUEST'; export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS'; export const ADD_POST_FAILURE = 'ADD_POST_FAILURE'; // 포스트 추가 요청 액션 생성함수(action creator) export const addPost = (data) => ({ type: ADD_POST_REQUEST, data, }); // 포스트 더미 데이터 const dummyPost = (data) => ({ id: shortId.generate(), content: data, User: { id: 1, nickname: '다랑', }, Images: [], Comments: [], }); // 리듀서(reducer) : (이전 상태, 액션) => 다음 상태 const reducer = (state = initialState, action) => { switch (action.type) { /* ----- 포스트 추가 요청 리듀서 ----- */ case ADD_POST_REQUEST: return { addPostLoading: true, addPostDone: false, addPostError: null, }; /* ----- 포스트 추가 성공 리듀서 ----- */ case ADD_POST_SUCCESS: return { ...state, mainPosts: [dummyPost(action.data), ...state.mainPosts], addPostLoading: false, addPostDone: true, // 사용자 더미 데이터 me: dummyUser(action.data), }; /* ----- 포스트 추가 실패 리듀서 ----- */ case ADD_POST_FAILURE: return { addPostLoading: false, addPostError: action.error, }; default: return state; } }; sagas/post.js// Saga 이펙트 불러오기 import { all, fork, call, takeLatest, put, delay } from 'redux-saga/effects'; // Axios 라이브러리 불러오기 import axios from 'axios'; // reducer 포스트 추가, 답글 추가 액션 불러오기 import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, } from '../reducers/post'; // addPost 실행 시 서버에 addPostAPI 요청 function addPostAPI(data) { return axios.post('/api/post', data) } // ADD_POST_REQUEST 액션이 실행되면 addPost 함수 실행 function* addPost(action) { try { // const result = yield call(addPostAPI, action.data); /* ----- 요청 성공 시 ADD_POST_SUCCESS 액션 디스패치 ----- */ yield delay(1000); yield put({ type: ADD_POST_SUCCESS, data: action.data, // 성공 결과 }); } catch (err) { /* ----- 요청 실패 시 ADD_POST_FAILURE 액션 디스패치 ----- */ yield put({ type: ADD_POST_FAILURE, error: err.response.data, // 실패 결과 }); } } 강의 잘 보고 있습니다!항상 정성스러운 답변 남겨주셔서 감사합니다 제로초님!

몇 번이고 완성코드랑도 비교해보고 영상도 계속 돌려보고다 확인해봐도 코드의 문제는 전혀 없는데도대체 왜 갑자기 cors 에러가 뜨는지 모르겠네요...

다음과 같이 에러가 나는데 이유가 뭔가요 'rev' 속성이 '{}' 형식에 없지만 'Pick<AntdIconProps, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "start" | "hidden" | "color" 에서 필수입니다 라고 나옵니다

안녕하세요. test를 하던 중 오류가 발생하여 문의드립니다.지금 현재 코드를import { setupServer } from "msw/node"; import { apis } from "./apis"; export const server = setupServer(...apis); 위에처럼 입력해 놓은 상태입니다. 하지만 테스트 실행 시아래와 같이 발생합니다. Cannot find module 'msw/node' from 'src/commons/mocks/index.js' Require stack: src/commons/mocks/index.js jest.setup.js > 1 | import { setupServer } from "msw/node"; | ^ 2 | import { apis } from "./apis";추가적으로 지금 jest관련 페이지에서Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src\commons\mocks\index.js` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json However, that TSConfig does not include this file. Either: - Change ESLint's list of included files to not include this file - Change that TSConfig to include this file - Create a new TSConfig that includes this file and include it in your parserOptions.project See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--위와 같은 오류가 발생합니다. 해결 부탁드립니다! 

"NEXT_PUBLIC_" prefix 는 Browser를 위한거라 서버컴포넌트에서는 반드시 넣을 필요는 없는 것 같네요ㅎㅎhttps://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser

노드 버전때문에 eslint가 설치되다가 중간에 오류가 났습니다. 그래서 오류 내용이 노드 16버전이나 18버전 이상을 써라고 하는거 같더라고 지금 17.3.1버전이고요, 그래서 nvm use 명령을 사용해서 18.15버전을 사용해서 설치 했더니 그때부터 parser 오류가 계속 나더라고요..ㅠㅠ parser 오류를 없애려고 하니, eslint가 작동을 안하는거 같고 도와주세요 아래에 tsconfig.json, eslintrc.js, package.json, 그리고 경로 사진을 첨부하여 드립니다. 어떻게든 구글 검색으로 할려고 했으나... 도대체 어느버전이 호환이 안되는건지 모르겠네요 ㅠㅠeslint 설치시 오류난 상황 캡처 사진입니다.파일 경로 캡처입니다.tsconfig 캡처입니다.package.json 캡처입니다.eslintrc.js 캡처입니다. 

안녕하세요.린터와 포멧터 강의 따라하면서 모든 설치와 적용을 끝냈는데요. 하던 중에 .eslintrc.js에서 다음과 같은 에러가 뜨기 시작하더라구요.해결방법 서치하다가 아래 코드를 추가했더니 위 에러는 사라지긴 했는데 맞는 해결방법인지 모르겠네요.ignorePatterns: [".eslintrc.js"]그리고 이 코드를 넣든 안 넣든 class 내에 있는 모든 js 파일들에서 import 부분에 Parsing error가 나네요...(ts, tsx 파일들은 제대로 lint가 작동하는 것 같아 전부 고칠 수 있었습니다)이런 오류가 아마 모든 js 파일에서 뜨네요yarn lint하면 이렇게 도배가 되구요... 어떻게 해결해야 하나요?참고로 .eslintrc.jsmodule.exports = { env: { browser: true, es2021: true, }, extends: ["standard-with-typescript", "plugin:react/recommended", "prettier"], overrides: [ { env: { node: true, }, files: [".eslintrc.{js,cjs}"], parserOptions: { sourceType: "script", }, }, ], parserOptions: { project: "**/tsconfig.json", ecmaVersion: "latest", sourceType: "module", }, plugins: ["react"], rules: { "react/react-in-jsx-scope": "off", "@typescript-eslint/no-misused-promises": "off", "@typescript-eslint/no-unused-vars": "off", }, ignorePatterns: [".eslintrc.js"], }; tsconfig.json{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "incremental": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve" }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] } 폴더 구조입니다!

package.jsonnode_modules, yarn.lock 지우고 다시 깔아보고 라이브러리 버전 맞춘거 같은데 yarn run start가 안돼요 tsconfig.jsoneslintrc.jstsconfig.json, eslintrc.js 느낌상 이쪽 문제 같은데 어딘지 모르겠습니다여기 폴더 인터넷 찾아보고 조금 수정했는데 모르겠어요어느순간부터 오류 놓쳤는데 어딘지 모르겠어요

안녕하세요, 실무에서 next.js를 이번에 사용할려고 강의를 듣고있습니다.강의 초반부에 SSR의 경우 (getServerSideProps) API 응답 속도에 따라 렌더가 되지않아 가급적 자제하라고 본 것 같은데,실무에선 사실 컴포넌트 내에서 API요청량이 많을텐데 보통 어떤식으로 구현하시는지 궁금합니다보통 getServerSideProps 에서 API 통신을 하고 props로 넘겨줘서 쓰는지 ? 아니면 CSR방식으로 일반 컴포넌트 내에서 API통신을 하는지 ? 도 궁금합니다.2번 질문에서 CSR방식으로 컴포넌트 내에서 API통신을 한다면 next.js를 쓰는 장점은 비동기 데이터 dom들을 제외한 html을 서버에서 렌더링해준다는게 장점일까여?

안녕하세요!  람다하고 nginx 까지 적용했는데, 정말 렌덤하게 403 error 가 뜹니다.몇몇 이미지는 처음 업로드 할때 403 error 가 나지만 새로고침을 하면 업로드가 되어 있었습니다.1MB에 png 이미지는 resizing 이 되지 안고 새로고침을 해도 403에러가 납니다.람다 모니터링 메세지를 봤는데 이렇게 나옵니다.혹시 제가 resize 폴더에 너무 많은 이미지를 저장해서 나는 오류일까요? 감사합니다.

무한스크롤 Section16-02-infinite-scroller 강의를 듣고 있을 때 발생한 오류입니다.실행은 정상적으로 되는데 해결방법 알 수 있을까요?

안녕하세요 차근차근 강의 들으며 공부하고 있는 수강생입니다 현재 강의에서 알려주신 방법에 따라 페이지를 구현할 경우 2가지 문제점에 대해 말씀해 주셨는데요2번째 문제점은 내가 수정하고 싶은 요소만 수정했을 때, 기존에 입력했던 다른 요소가 삭제된다는 것이었습니다 그런데 container 파일 작성 요소 중 const [writer, setWriter] = useState(); const [title, setTitle] = useState(); const [contents, setContents] = useState();useState() 소괄호가 비어 있을 땐 기존에 입력했던 다른 요소가 삭제되지 않은 채 수정한 요소가 반영되었습니다 여기서 궁금한 점은useState() 소괄호가 비어 있을 때와 소괄호 안에 빈 문자열("")을 넣어주었을 때 결과가 달라지는 이유useState() 소괄호가 비어 있는 상태로 코드 작성을 끝내지 않는 이유입니다 감사합니다

BoardWriter 컴포넌트를 자동완성으로 쓸 경우 import 경로 자동완성이 @으로 시작되면 경로 오류가 뜨고 위처럼 ../ 로 바꿀경우 오류가 안뜨는데 자동완성으로 하면 안되나요?

여기서 만들때 writer 이랑 password에 string 느낌표 안붙여있는건 오류인가요? 원래는 느낌표가 있어서 필수 입력인거죠?

그래프큐엘로 작성자 비밀번호 제목 내용 이렇게 넘기고 조회해보려는데 패스워드는 안되더라고요 패스워드 넘긴거는 그냥 넘긴건가요 아님 따로 조회할수있나요?

프로트 서버에서 config.js안에 있는 주소 바꿔주고 npm run build 했는데 계속 빌드가 안됩니다.용량이 너무 커서 서버가 멈춘것일까요? 다른 분 질문 한것을 보니까 이럴경우 로컬에서 빌드를 하고 git push 할때 .next 파일도 같이 보내주는 경우를 봤는데, 이렇게 해도 상관 없나요?아니면 다른 부분에서 이슈가 있어서 빌드가 안되는 것일까요?음...터미널을 닫고 ec2서버 다시 연결하려는데, 연결이 안되고 계속 저기 상태에서 연결이 안되네요...서버에 이상이 생긴걸까요?감사합니다.

s3 설정을 하고 나서, 서버 도메인을 새로고침하고, pm2 리스트를 봤는데, status에 errored라고 뜹니다.pm2를 kill하고 다시 시작했는데, 처음에는 아무 이상없고, 도메인에 접속하고 list를 찍어보면 Status 가 Errored 라고 바뀌어 있네요ㅜㅜ어디쪽에서 errored가 발생한것일까요? 감사합니다.

안녕하세요! DROP DATABASE 후에 테이블을 다시 생성하는 과정을 반복했는데, use my-memories-back(제 데이터베이스 이름.)을 입력하니까 ERROR 1049 (42000): Unknown database 'my-memories-back'가 뜹니다.한가지 걸리는 것은 DROP DATABASE할때, root 권한으로 mysql 접속해서 했는데, 이것이 문제가 있을까요?음.. 그리고 이건 Back end server pm2 list 인데,Access denied for user 'root'@'localhost'라는 에러가 뜨는데, 이것이 테이블을 다시생성 하는것에 문제가 될 수 있을것이라고 생각이 드는데, 어떤가요? 항상 감사합니다 :)

<> <div> // img 태그의 스타일에도 버티컬얼라인 미들 추가해주면 정상적으로 나옵니다. <img role="presentation" style={{ verticalAlign: 'middle' }} width="50%" src = {images[0].src} alt={images[0].src} onClick={onZoom} /> <div role="presentation" style={{ display: 'inline-block', width: '50%', textAlign: 'center', verticalAlign: 'middle' }} onClick={onZoom} > <PlusOutlined /> <br /> {images.length - 1 }개의 사진 더보기 </div> </div> </>사용 환경 Antd 5

비밀번호를 바꾼후에 npx sequelize db:create를 실행했는데,Unexpected token '(' 이라는 에러가 뜹니다.보통 이런경우 타이포 error 일것 같아서 파일을 살펴 봤는데 별다른 오타는 없었습니다.다른곳을 살펴봐야할 부분이 있을까요?감사합니다.