hyunwooji@jihyeon-uui-MacBook-Air emotiondiary % npm install -g servenpm WARN config global --global, --local are deprecated. Use --location=global instead.npm ERR! code EACCESnpm ERR! syscall mkdirnpm ERR! path /usr/local/lib/node_modules/servenpm ERR! errno -13npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/serve'npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/serve'] {npm ERR! errno: -13,npm ERR! code: 'EACCES',npm ERR! syscall: 'mkdir',npm ERR! path: '/usr/local/lib/node_modules/serve'npm ERR! }npm ERR! npm ERR! The operation was rejected by your operating system.npm ERR! It is likely you do not have the permissions to access this file as the current usernpm ERR! npm ERR! If you believe this might be a permissions issue, please double-check thenpm ERR! permissions of the file and its containing directories, or try runningnpm ERR! the command again as root/Administrator.npm ERR! A complete log of this run can be found in:npm ERR! /Users/hyunwooji/.npm/_logs/2023-02-19T07_24_53_420Z-debug-0.log  구글링 해봣을때는 npm 업데이트 문제인거같다고로 찾아서npm update 도 해봣는데 전혀 해결되지 않고 더 꼬이고 있는거같습니다.. 완강을 앞두고 좌절중이네요ㅠ 오늘 다 완강하고 싶었는데 도저히 해결이 안되어 질문남깁니다 감사합니다!!

안녕하세요~ 포트폴리오 주소 가져오기 공부하면서 질문드립니다BoardWrite 컨테이너 파일과 타입스 파일에서 타입 명시해주는 부분이 이해되지 않습니다동그라미 친 부분만 그대로 타입 명시해주면 되는 줄 알았는데 타입스 파일에는 4부분으로 나눠져서 타입이 명시되 있어서요~ 저는 타입스 파일에서 4번째 동그라미만 있으면 될 것 같았어요~  

데이터베이스 한 칼럼에 다중 값을 넣으려면 어떻게 해야 할까요? 예를 들어서 월, 화, 수, 목, 금, 토, 일을 체크박스로 만들고 여러 개의 값을 체크하면 그 값이 한칼럼에 다 들어간다고 가정했을 때 어떤 방법을 사용해야 할까요?

현재 강의 front쪽에서 env 로컬 배포 일떄도 나누나요?

function App2() { const [value1, setValue1] = useState(0); const [value2, setValue2] = useState(0); const [value, setValue] = useState({ value1: 0, value2: 0 }); const onClick = () => { setValue({ value1: 10 }); }; return ( <div> Hello App2 <hr /> {JSON.stringify(value1)} {JSON.stringify(value2)} {JSON.stringify(value.value1)} <button onClick={onClick}>클릭</button> </div> ); } export default App2; 여기서 onClick을 수행할때 왜 value.value1의 값이 변경되는 건가요?? 첫번째에 useState(0)으로 만든 value1은 어떻게 해야 값의 변경이 되는거죠??

존경하는 그랩님Warning: Each child in a list should have a unique "key" prop 오류 케이스에 대해서 조언좀 구할 수 있을까요? ReactDOM.render 방식이 React 18에서 지원하지 않으면서 오류들을 수정했습니다.//[AS-IS] import ReactDOM from 'react-dom'; ReactDOM.render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode>, document.getElementById('root') //[TO-BE] import * as ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode>); 다만 아래와 같은 오류들이 발생을 하였는데요.구글링에서 찾아보니 각 엘리먼트에 key값을 주는 것으로 해결하라고 하는데요.- 그렇다면 src > main > index.js 에서 각 엘리먼트들에 key 값을 설정해줘야 하나요?- 각 엘리먼트들에 map으로 되어있는 함수를 지우고.. (product, index) 형태를 key={product.id}>{product.imageUrl}key={product.id}>{product.name} 형태로 바꾸어 주어야 하나요?- 조금 어렵게 느껴지네요. 해당 부분처럼 바꾸는게 맞는지 조금 조언 부탁드립니다.현재 제 깃 레파지토리 참조로 첨부드립니다. 도와주세요 ㅠㅠhttps://github.com/promotionX/Grabmarket-clinet

onDragOver를 통해서 화면 안으로 파일을 넣으면 업로드라는 문자가 뜨는데 다시 파일을 밖으로 꺼내도 업로드! 라는 화면이 계속 떠 있더라구요 그래서 onDragLeave를 사용하여 dragover를 false로 만들어줘서 해결하긴 했는데, onDragOver만 사용했을 때는 업로드! 화면이 깜빡이지 않았는데, onDragLeave를 같이 사용하니까 업로드! 화면이 마우스를 움직일 때마다 깜빡이면서 채팅창 부분이 리렌더링 되는데, 더 효율적인 방법이 있을까요??const DM = () => { const [dragOver, setDragOver] = useState(false); const onDragOver = useCallback((e: any) => { e.preventDefault(); setDragOver(true); }, []); const onDragLeave = useCallback((e: any) => { e.preventDefault(); setDragOver(false); }, []); if (!userData || !myData) { return null; } // useSWRInfinite가 2차원 배열이기 때문에 1차원 배열로 만들어서 reverse를 해준다. const chatSections = makeSection(chatData ? [...chatData].flat().reverse() : []); return ( <Container onDrop={onDrop} onDragOver={onDragOver} onDragLeave={onDragLeave}> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nickname} /> <span>{userData.nickname}</span> </Header> {/* chatData => 채팅을 DM에 표시해주기 위함 */} <ChatList chatSections={chatSections} ref={scrollbarRef} isEmpty={isEmpty} isReachingEnd={isReachingEnd} setSize={setSize} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> {dragOVer && <DragOVer>업로드!</DragOVer>} </Container> ); }; export default DM;코드는 해당되는 부분만 적었습니다.

강의내용의 pord.txt 가 같은데 에러가 뜨네요  django~=3.0.0 djangorestframework djangorestframework-jwt django-cors-headers django-pydenticon pillow

리액트는 어느정도 프로젝트도 해보고 웬만한건 구현이 가능한 정도인데 노드에 관해서 전혀 모르는데 수강해도 괜찮을까요?혹시 노드 지식이 필요하다면 어떤 강의를 듣고 와서 수강을 해야할까요?

질문 제목 그대로입니다.props를 주는쪽은 객체 하나에 모든 값들을 프로퍼티로 보내고, 받는쪽도 객체 하나로 모든걸 컨트롤해야한다고, 이해하면 될까요? 객체 두개( { }로 묶인친구 두 덩어리)를 따로따로 보낼려고 하면 어떻게 해야할지도 모르겠고, 시도만 하면 전부 에러가 납니다...

안녕하세요 재남님!배포 과정에서 문제가 있어 질문 드립니다~현재 상황은 heroku에 깃 연동을 통해 배포를 한 상태입니다.그렇기 때문에 herokuURL/graphql 을 입력하면 studio.apollographql.com에서 날리는 api test도 잘 동작하고 있습니다.그런데 vercel로 배포한 페이지에서는 products 화면을 제외한 cart, admin 같은 경우는 204 error가 뜨고 있는 상황입니다. 검색을 해보니 컨텐츠를 보여줄 필요가 없다(?) 라고 나오는데 어떤 문제인지 잘모르겠습니다.. ㅜ

안녕하세요 ant design 사이트에서 별점을 가져와서 사용하는 부분 질문있습니다콘테이너 파일에서는 리턴부분에 바로 setStar={setStar}로 넘겨주면  프레젠터 파일에서 props.setStar로 받고 있습니다 다른 매개변수처럼 onChange 함수를 사용하지 않고 바로 setStar로 넘겨주는 이유는 무엇인가요? 작동이 되는 이유가 궁금합니다그리고 types 파일에서 setStar: Dispatch<SetStateAction<number>>;타입을 이렇게 받고 있는데 이 설명은 강의에서 못본것 같아서요~ ant design 사이트에서 알 수 있는 것인가요?? BoardCommentWrite.container.tsx 파일BoardCommentWrite.types.tsx 파일

이번 EDIT 구형하기 강의를 모두 마치고다른 부분에는 문제가 없는데수정 페이지에서 감정 이미지가 나타나지 않는 오류가 발생합니다ㅠ코드 샌드박스에 이미지 파일을 어떻게 올리는지 모르겠어서 우선 코드만 올려봤습니다..!https://codesandbox.io/s/frosty-leaf-63db3g?file=/src/App.js

포트 연결 로그는 뜨는데 그 다음에몽고DB 연결 로그 안 뜨고 그 상태에서 아무 실행도 안 됩니다... 에러메시지도 안 나오니 무슨 에러인지도 모르겠고..ㅠㅠㅠㅠ도와주세요몇번 서버 죽이고 다시 켜봐도 동일하네요ㅠㅠ어떻게 해결해야하나요??

안녕하세요~강의 초기 세팅에서 제로초님 git에서 clone하여 내려받아 백엔드 DB연결까지 했습니다. 그런데 프론트엔드 세팅하기 강좌에서는 어떻게 진행해야할지 모르겠네요.. 이미 깃에 완성된 모든 코드가 내려받아진상태라서 당황스러워서 질문글을 찾아보니..setting폴더의 ts부터 시작하라는 글을 보았는데요..저는 너무 많은 폴더가 중복되어있는게 복잡하고 정리가 안된 느낌이라서... 삭제하고싶은데요그럼 alecture 폴더와, front-js폴더, front-rq, fornt 폴더를 삭제 한 뒤 setting>ts 폴더만 상위로 꺼내와 alecture로 이름을 변경해서 작업을 진행하면 되나요?또 삭제해도 되는 폴더가 있으면 알려주세요..처음부터 시작하고싶지만 백엔드 부분때문에 안될꺼같아서 참 난감합니다..

 안녕하세요 멘토님!시간을 짬짬히 내서 공부하는지라 진도는 느리지만 그래도 여차저차 타입스크립트 포폴 전환까지 완료헀습니다.빨간 줄 한 곳도 없이 무사히 전환 완료하였으나 강의 내용에도 나오지 않은듯한? 부분에서 궁금한게 생겨서 질문 드립니다.댓글 리스트 컴포넌트 부분을 map으로 렌더링 하는 방식으로 작업하였는데요, 여기 el의 타입을 지정하는 부분에서 Pick<IQuery, "fetchBoardComments"> 타입이 먹히지 않아서 삽질을 좀 했습니다. 그래도 여차저차 types.ts 내부를 참고하면서 수정해본 결과, el: IBoardComment 를 그대로 el의 타입으로 지정해주니까 컴파일 에러가 사라지고 해결되었습니다.이건 알고 해결했다기 보다는 모르고 바꿨는데 운 좋게 에러가 사라진 것이라 왜 해결됐는지 알고 넘어가고 싶어서 질문드립니다. (이게 편법이거나 정답이 아닐 수도 있다는 생각도 들었습니다.)그리고 Pick<IQuery, "fetchBoardComments">와 IBoardComment는 어떠한 차이가 있는지 궁금합니다. 참고로 el을 props drilling 하여 보낸 presenter 부분은 이렇게 사용하고 있습니다. 감사합니다. 

다른 유저와 공통적으로 팔로잉을 하고 있는 유저 숫자를 구하고 싶은데 혹시 api를 어떤 방식으로 코딩하면 될까요? 항상 좋은강의 감사합니다

video 코드를 맞게 입력했지만 표출되지 않았습니다콘솔에는 아무런 에러도 없고.. url도 문제가 없어서 이유를 찾기 어려워 리액트 라이브러리로 대체했습니다.작동은 정상적으로 되지만 앞으로 수업 듣기에 문제 없을지는 모르겠습니다.같은 문제를 겪으신 분들 참고하시면 좋겠습니다.// client npm i react-player --save // VideoDetailPage.js import ReactPlayer from 'react-player/lazy'; // video 부분 아래와 같이 대체 <ReactPlayer style={{ width : '100%' }} url={`http://localhost:5000/${VideoDetail.filePath}`} playing={true} // 자동 재생 on controls={true} // 플레이어 컨트롤 노출 여부 light={false} // 플레이어 모드 pip={true} // pip 모드 설정 여부 />

https://github.com/JaeHyuk1217/JH_mall/tree/master/shopping-mall server을 실행하면 이러한 오류가뜹니다... 환경변수 설정도 해보고 node 재설치도 해봤는데 되지 않습니다..

const deleteBlog = (event, id) => { event.stopPropagation(); console.log("delete"); axios.delete(`http://localhost:3001/posts/${id}`).then(() => { setPosts((prevPosts) => { console.log(prevPosts); return prevPosts.filter((post) => { return post.id !== id; }); }); }); }; prevPosts는 delete후에 api에서 넘겨 주는 것인가요? 아니면 기존 posts값인가요>