안녕하세요 제로초님다름이 아니라 로그인 후 포스트를 추가할 때 에러가 발생하는데혼자 해결하려고 노력해봤지만 해결을 아직 하지 못하여 질문드립니다.reducers/post.jsimport shortId from "shortid"; import { produce } from "immer"; import faker from "faker"; export const initialValue = { mainPosts: [], //이미지업로드 할떄 이미지경로들이 여기 들어간다. imagePaths: [], hasMorePost: true, //true면 가져올 시도를 해라. (스크롤 했을 때) loadPostsLoading: false, loadPostsDone: false, loadPostsError: null, //게시글 추가가 완료되었을때 TRue addPostLoading: false, addPostDone: false, addPostError: null, removePostLoading: false, removePostDone: false, removePostError: null, addCommentLoading: false, addCommentDone: false, addCommentError: null, }; //가짜 데이터 export const generateDummyPost = (number) => Array(number) .fill() .map(() => ({ id: shortId.generate(), User: { id: shortId.generate(), nickname: faker.name.findName(), }, content: faker.lorem.paragraph(), //아무 문장, Images: [ { src: "https://image.utoimage.com/preview/cp872722/2022/12/202212008462_500.jpg", }, ], Comments: [ { User: { id: shortId.generate(), nickname: faker.name.findName(), }, content: faker.lorem.sentence(), }, ], })); export const LOAD_POSTS_REQUEST = "LOAD_POSTS_REQUEST"; export const LOAD_POSTS_SUCCESS = "LOAD_POSTS_SUCCESS"; export const LOAD_POSTS_FAILURE = "LOAD_POSTS_FAILURE"; export const ADD_POST_REQUEST = "ADD_POST_REQUEST"; export const ADD_POST_SUCCESS = "ADD_POST_SUCCESS"; export const ADD_POST_FAILURE = "ADD_POST_FAILURE"; export const REMOVE_POST_REQUEST = "REMOVE_POST_REQUEST"; export const REMOVE_POST_SUCCESS = "REMOVE_POST_SUCCESS"; export const REMOVE_POST_FAILURE = "REMOVE_POST_FAILURE"; export const ADD_COMMENT_REQUEST = "ADD_COMMENT_REQUEST"; export const ADD_COMMENT_SUCCESS = "ADD_COMMENT_SUCCESS"; export const ADD_COMMENT_FAILURE = "ADD_COMMENT_FAILURE"; export const addPost = (data) => ({ type: ADD_POST_REQUEST, data, }); export const addComment = (data) => ({ type: ADD_COMMENT_REQUEST, data, }); //리듀서란 이전 상태를 액션을 통해 다음 상태로 만들어내는 함수(단, 불변성은 지키면서) //draft는 불변성 상관없이 바꾸면 immer가 알아서 불변성있게 만들어준다. const reducer = (state = initialValue, action) => produce(state, (draft) => { switch (action.type) { //게시글 추가 case ADD_POST_REQUEST: draft.addPostLoading = true; draft.addPostDone = false; draft.addPostError = null; break; case ADD_POST_SUCCESS: draft.addPostLoading = false; draft.addPostDone = true; draft.mainPosts.unshift(action.data); draft.imagePaths = []; //unshift란 배열의 맨 앞에다가 추가하는 함수 break; case ADD_POST_FAILURE: draft.addPostLoading = false; draft.addPostError = action.error; break; //게시글 불러오기 case LOAD_POSTS_REQUEST: draft.loadPostsLoading = true; draft.loadPostsDone = false; draft.loadPostsError = null; break; case LOAD_POSTS_SUCCESS: draft.loadPostsLoading = false; draft.loadPostsDone = true; draft.mainPosts = action.data.concat(draft.mainPosts); //concat은 두개 이상의 배열을 합칠 때 사용 //action.data에는 더미데이터들이 들어있고 draft.mainPosts는 원래 데이터 draft.hasMorePost = draft.mainPosts.length < 50; //50개보다 적으면 불러와야함 break; case LOAD_POSTS_FAILURE: draft.loadPostsLoading = false; draft.loadPostsError = action.error; break; //댓글 추가 case ADD_COMMENT_REQUEST: draft.addCommentLoading = true; draft.addCommentDone = false; draft.addCommentError = null; break; case ADD_COMMENT_SUCCESS: //immer버전 (너무 간단함) const post = draft.mainPosts.find( (v) => v.id === action.data.postId ); //해당 게시글 찾기 post.Comments.unshift(dummyComment(action.data.content)); draft.addCommentLoading = false; draft.addCommentDone = true; //댓글 넣어주기 break; //immer를 안 쓴 부분 // const postIndex = state.mainPosts.findIndex( // (v) => v.id === action.data.postId // ); // const post = { ...state.mainPosts[postIndex] }; // post.Comments = [ // dummyComment(action.data.content), // ...post.Comments, // ]; //얕은 복사 // const mainPosts = [...state.mainPosts]; // mainPosts[postIndex] = post; //댓글 추가하는 부분 너무어려움.. // //불변성을 지키다 보니 가독성이 너무 안좋음 // return { // ...state, // mainPosts, // addCommentLoading: false, // addCommentDone: true, // }; case ADD_COMMENT_FAILURE: draft.addCommentLoading = false; draft.addCommentError = action.error; break; //게시글 삭제 case REMOVE_POST_REQUEST: draft.removePostDone = false; draft.removePostLoading = true; draft.removePostError = null; break; case REMOVE_POST_SUCCESS: draft.removePostLoading = false; draft.removePostDone = true; draft.mainPosts = draft.mainPosts.filter( (v) => v.id !== action.data ); break; case REMOVE_POST_FAILURE: draft.removePostLoading = false; draft.removePostError = action.error; break; default: break; } }); export default reducer;여기서 Images안에 아무것도 들어있지 않아서 나타나는 오류같은데 잘 모르겠습니다.

reset했을때 x버튼이 안지워집니다.수업대로 visible? block: none;했는데 안지워지는 이유가 뭘까요..? ㅜㅜ파일도 깃헙다운 받은거라 코드 없는 부분도 없는 거 같고요질문을 해당 수업에서 다시 올리라고 해서 올려봅니다. 수업 내용은 [순수JS 1] 검색폼3 입니다.

import { List, Button, Card } from 'antd';import { StopOutLined } from '@ant-design/icons';로 임포트를 했는데도 불구하고 프로필창을 열면 다음과 같은 에러가 납니다터미널에는 에러메시지도 뜨고요error - ./components/FollowList.jsAttempted import error: 'StopOutLined' is not exported from '@ant-design/icons'.  npm i antd antd 와 npm install @ant-design/icons --save-dev로 다시 설치해봤는데 해결되지 않았습니다 package.json 에서 확인한 버전입니다 "antd": "^5.10.2", "@ant-design/icons": "^5.2.6",  FollowList.js 에서 의심스러운 부분입니다import { List, Button, Card } from 'antd'; import { StopOutLined } from '@ant-design/icons'; const FollowList = ({header, data}) => { return ( <List renderItem={(item) => ( <List.Item style={{ marginTop: 20 }}> <Card actions={[<StopOutLined key="stop" />]}> <Card.Meta description={item.nickname} /> </Card> </List.Item> )} /> ) };

안녕하세요.^^ 정환님 강의 잘 보고 있습니다."비동기 호출을 해줘야하니깐. this binding을 해줘야한다."강의를 듣다가 궁금한게 생겼는데 위처럼 말씀을 하셨는데 그 이유가 무엇일까요?  (스스로 답을 찾음)내부에 this를 사용하기전에 binding을 습관적처럼 해야겠군요. 대부분 내부에 this.state 등등 리액트 api를 쓸거라면.https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/

안녕하세요. 리액트 테스트 관련 좋은 강의를 제공해주셔서 감사합니다.수업 듣고 테스트 코드를 작성 시에 console.error로 wrapped in act 오류가 표시되어 문의드리게 되었습니다.여러 질문들도 찾아보고... 구글링도 해보며 방안을 찾아서 테스트코드가 성공하는 것 까지는 봤으나, 로그에 첨부드리는 이미지와 같이 표시되어지고 있습니다... useEffect에서 state변경시에 발생되는 것 같은데.. 이부분은 어떻게 처리해야할가요..?ㅠ 며칠을 찾아보고.. 제공해주신 소스코드도 확인해봤지만... 다른 부분이 없어 문의드립니다.(추가로.. 첨부 주신 코드의 리액트버전을 제가 구성하는 버전으로 구성 후 테스트 진행 시에 저와 동일한 결과가 나오는 것을 확인했습니다.)감사합니다.

리액트에서 fetchUser를 이용해 로그인이 되어있는지 검증하려고 하는데 로그인api를 호출 후 fetchUser를 호출하면 Unauthorized에러가 납니다 헤더에 토큰이 저장되지 않아서 그런걸까요?

안녕하세요, 금일 (10월 28일) 강의를 시작한 학생입니다.어떻게 강의를 들어야 하는지 헷갈려서 문의드려요.

reset했을때 x버튼이 안지워집니다.수업대로 visible? block: none;했는데 안지워지는 이유가 뭘까요..? ㅜㅜ

안녕하세요 섹션 31 댓글 기능 구현 과제 중 궁금한 점이 있어 질문 남깁니다 댓글 리스트의 수정 아이콘 클릭 시 사진과 같은 화면이 나오도록 했고, 댓글 등록하기 presenter component를 재사용 했습니다댓글 리스트 presenter 파일입니다export default function CommentListUI(props) { return ( <S.Wrapper> {props.data?.fetchBoardComments.map((item) => ( <S.CommentListWrapper key={item._id}> {props.isEdit && props.commentId === item._id ? ( <CommentWriteUI></CommentWriteUI> ) : ( <S.Comment_Container> <S.profile_icon src="/02/profile_icon.png"></S.profile_icon> <S.Content_container> <S.Name_Star_container> <S.Text style={{ fontWeight: "600" }}>{item.writer}</S.Text> <S.ReviewStar_container style={{ marginLeft: "16px" }}> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> </S.ReviewStar_container> </S.Name_Star_container> <S.Text style={{ marginTop: "-15px", fontWeight: "500" }}> {item.contents} </S.Text> <S.Text style={{ fontSize: "12px", fontWeight: "400", color: "#BDBDBD", }} > {getDate(item.createdAt)} </S.Text> </S.Content_container> <S.Icon_container> <S.Icon style={{ backgroundImage: `url("/createComment.png")` }} onClick={() => props.onClickTEST(item._id)} ></S.Icon> <S.Icon style={{ backgroundImage: `url("/clear.png")` }} onClick={() => props.onClickDelete(item._id)} ></S.Icon> </S.Icon_container> </S.Comment_Container> )} </S.CommentListWrapper> ))} </S.Wrapper> ); } 삼항연산자를 사용해 나오는 화면을 다르게 했습니다isEdit 변수는 수정하기 아이콘 클릭 시 true로 바뀌고, 삼항연산자 조건에 isEdit 변수만 사용하니 수정 아이콘을 클릭하지 않은 다른 댓글 리스트가 사라지면서 재사용한 댓글 등록 presenter 파일만 화면에 나와서 조건은 위와 같이 작성했습니다 여기서 문제는 수정 아이콘을 클릭해 나오는 댓글 등록 창은 container 파일에 작성한 함수가 작동하지 않는 것입니다 댓글 리스트 container 파일입니다export default function CommentList() { const { data } = useQuery(FETCH_COMMENTS); const [deleteBoardComment] = useMutation(DELETE_COMMENTS); const onClickDelete = async (item) => { const pw = prompt("비밀번호를 입력해주세요."); try { await deleteBoardComment({ variables: { pw: pw, boardCommentId: item, }, refetchQueries: [{ query: FETCH_COMMENTS }], }); alert("삭제되었습니다."); } catch (error) { alert(error.message); } }; // 수정하기 아이콘 클릭 시 화면 변화 const [isEdit, setIsEdit] = useState(false); const [commentId, setCommentId] = useState(); const onClickTEST = (item) => { setIsEdit(true); setCommentId(item); }; // console.log(commentId); return ( <CommentListUI data={data} onClickDelete={onClickDelete} onClickTEST={onClickTEST} isEdit={isEdit} commentId={commentId} ></CommentListUI> ); } 댓글 등록 container 파일입니다 const [updateBoardComment] = useMutation(UPDATE_BOARD_COMMENT); const onClickUpdate = () => { // updateBoardComment({ // variables: { // updateBoardCommentInput: { // contents: contents, // rating: 0 // }, // password: pw, // boardCommentId: // } // }) console.log("Test"); }; return ( <> <CommentWriteUI onChangeWriter={onChangeWriter} onChangePw={onChangePw} onChangeContents={onChangeContents} onClickUpdate={onClickUpdate} ></CommentWriteUI> </> ); } onClickUpdate 함수는 댓글 작성 presenter 파일의 등록하기 버튼에 연결되어 있습니다상세 페이지 로딩 시 나오는 댓글 등록창은 버튼 클릭 시 콘솔이 제대로 나오는데댓글 리스트 수정 아이콘을 눌러 나오는 댓글 등록창에서는 버튼을 눌러도 콘솔 자체가 나오지 않습니다 댓글 과제 가이드를 확인해서 어떻게 수정하면 좋을지는 알았지만, 궁금한 점이 해소되지 않네요궁금한 점은삼항연산자, map 등 기능의 속성을 제대로 알지 못한 채 사용한 문제인지코드 자체를 잘못 작성한 것인지 추가로 rating(별점) 데이터 활용법에 대한 힌트를 얻고 싶습니다rating 값 1 = 별 1개 인가요? rating 숫자 데이터가 별과 어떻게 연결되는지 잘 모르겠습니다 부족한 점이 많아 질문이 너무 길어졌네요 항상 감사합니다

[JSX Key 속성 이해하기] 파트에서는 todoData에 map 메서드를 사용할 때  this.todoData.map((value) => ( <div style={this.getStsyle()} key={value.id}> <input type="checkbox" defaultChecked={false} /> {value.title} <button style={this.btnStyle}>X</button> </div> ))로 return 없이 사용하셨는데 전 기존에는 this.todoData.map((value) => { return ( <div style={this.getStsyle()} key={value.id}> <input type="checkbox" defaultChecked={false} /> {value.title} <button style={this.btnStyle}>X</button> </div> ) })이렇게 사용했습니다 둘다 정상 동작하는데 차이점이 뭔지 궁금합니다

보시면 하나의 지도 div에 두개가 열리는 것 같습니다.실제로 지도가 두개가 열려 서로 level이 달라 겹치는 모습입니다. 뒷장의 지도에는 마커가 표기되지 않습니다.아래는 맵과 관련된 코드들입니다.mern_client/src/components/common/Map/index.tsximport React, { useEffect } from 'react'; interface MapProps { width: string; height: string; initMap?: (map: naver.maps.Map) => void; } function Map({width, height, initMap}: MapProps) { useEffect(() => { const mapOptions = { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }; const map = new naver.maps.Map('map', mapOptions); if (initMap){ initMap(map); } }, []); return <div id="map" style={{width, height}}></div>; } export default Map; mern_client/src/components/MapContainer.tsximport { useSetAtom } from "jotai"; import React from 'react'; import Map from './common/Map'; import { mapAtom } from "../atoms/map"; function MapContainer() { const setMap = useSetAtom(mapAtom); const initMap = (map: naver.maps.Map) => { setMap(map); naver.maps.Event.addListener(map, 'click', () => { console.log("맵 클릭"); }); }; return <Map width="100%" height='100%' initMap={initMap}/> }; export default MapContainer; mern_client/src/atoms/map.tsimport { atom } from 'jotai'; export const mapAtom = atom<naver.maps.Map | null>(null);

안녕하세요.  showResetButton 메쏘드가 이해가 안갑니다. display=visible? 에서 보이는 것이 검색어 입력한 것인가요?이해가 안가는 것이..this.resetElement.style.display는 검색어 입력한 것에 대한 것이 아니라, X버튼 부분이 보이는지에 대한 것인거 같은데. 어떻게 해서 저 부분이 검색어 입력한 것에 대한 디스플레이를 나타내는지 너무 모르겠습니다.. 

 ✔ Downloading template✔ Copying template✔ Processing template✔ Installing Ruby Gems⠙ Installing CocoaPods dependencies (this may take a few minutes)현재 이화면에서 더 이상 진행되지 않고 프로젝트가 생성되지 않습니다.window에서 프로젝트 생성 후 github에 올린프로젝트를 맥에 clone 받은 후 npm install > pod install 진행 하면 프로젝트가 잘 진행됩니다. 혹시 맥에서 Installing CocoaPods dependencies 이후 진행되지 않는 이유가있을까요?? 버전 현황node:v18.18.2ruby:3.1.2p20 Homebrew: 4.1.16watchman:2023.10.23.00Apple M1macOs:sonoma(14.0)Xcode:15.0platform: ios(17.0) 

 ✖ Android SDK - Required for building and installing your app on Android - Versions found: N/A - Version supported: 33.0.0sdk 를 못찾는거 같은데 일단 sdk 에서 cmdline 다운 받아 봤고, 시스템 경로 변경도 해보았습니다 .

안녕하세요 제로초님현재 섹션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 에러가 뜨는지 모르겠네요...

이번에 듣고 있는데 CBV 설명하실 때context = self.get_queryset()를 잘 못 적으셨다고 합니다.이 부분은 강의를 듣는 사람에게 혼란을 야기할 수도 있다고 생각합니다. 그 이유는 설명에서는 get_context로 바꾸면 된다고는 하지만 그 다음 설명인 ListView의 내부를 살펴봤을 땐 'get_context_data', 'get_context_object_name'이 두가지의 함수가 존재합니다.그래서 어느 함수가 쓰여져있는지 강의를 듣는 사람 입장에서 혼란스러울 수 밖에 없는 입장이 될 수 있습니다.이 부분은 물론 강의 듣는 사람이 실습하면서 직접 알아볼 수 도 있지만 강의 하시는 분이시니 고쳐주셨으면 합니다. 오탈자 목록을 지원하지 않으시다면 수정해서 다시올려주시면 감사합니다.

다음과 같이 에러가 나는데 이유가 뭔가요 '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