첫번째 포트폴리오를 작성하던중, 경로를 boards/new로 이동하면 자꾸 저런 문구가 뜨며 오류가 발생합니다

이렇게 코드를 작성하였는데history.ts:480 Uncaught Error: useNavigate() may be used only in the context of a <Router> component. 에러가 발생합니다 ㅠㅠ

const{result} = useQuery(FETCH_BOARDS); 이 부분에서result자리에 data가 아닌 다른 단어를 넣으면 보드 목록이 불러와지지가 않는데 다른 이유가 혹시 있는건가요..? ㅜㅜ

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

1.사용자가 웹에 접속을 할 때, 브라우저 -> 프론트서버 로 요청을 보내게 되고프론트 -> 브라우저 로 html css js 파일을 보내서 뷰를 표시하게 되는데그러면 특정 기능을 사용할 때, 예를 들어 로그인 버튼을 누른다고 하면그 요청은 브라우저 -> 백엔드 인가요 프론트 -> 백엔드 인가요?만약 브라우저 -> 백엔드 이면백엔드 cors 설정에서는 프론트서버 도메인만 허용하도록 해놓는데 어떻게 브라우저에서백엔드로 접근이 가능한건가요? 2.강좌에서는 me값으로 로그인 유지를 위한 로직을 작성했고모든 페이지 접속 때마다 백엔드로 요청을 보내서 세션인증을 하는방식으로 로직을 작성했는데제가 알기로 세션인증방식은 세션id를 프론트에 보내서 쿠키에 있는 세션id를 이용해 로그인 유지를 하는것으로 알고있습니다. 제가 알고 있는 방식과 강좌에서의 세션인증이 좀 다른것 같은데 어떻게 이해해야 하나요?강좌는 ssr 적용 전 백엔드 부분까지만 들은 상태입니다.

매개변수로 쓰는 변수에는 let이나 const를 안 붙여줘도 되는 이유가 뭔가요?"하나의 함수는 하나의 역할만을 위해 존재하는 것이 가장 이상적" 이라고 하셨는데이게 퍼사드 패턴을 쓰는 이유와도 연관이 있을까요?(퍼사드 패턴으로 리팩토링을 하면서 createTokenOfPhone() 함수 하나에서 하던 기능들을 3가지 함수로 나눠준 점) 하나의 함수는 하나의 역할만 하는 게 좋다고 한다면,퍼사드패턴 적용 후, createTokenOfPhone() 같이 여러 함수들을 호출해 주는 api 함수의 경우에는각각 checkValidationPhone(), getToken(), sendTokenToSMS() 함수를 불러주는 3가지 역할을 하고 있는 것 같은데이런 경우는 예외적으로 괜찮은 경우인가요? 강의에서 사용하는 코드를 개인 블로그에 정리해서 올려도 되나요? 노션 내용을 그대로 붙여 넣는 게 아니라 코드는 거의 비슷하게 쓰되 내용 설명은 제가 정리해서 써보려고 합니다.

빌드하고 테스트? 하는 작업 할때 명령어 오류가 발생합니다.install 할때도 serve 가 잘 안되는거 같습니다. 실행하는 디렉토리 위치나 필요한 파일이 있을가요 ..? 

안녕하세요! 로그아웃 후 계속 auth/me후 계속 req에서 쿠키가 존재해서 문의 남깁니다! application탭에서 쿠키는 잘 삭제가 되고 네트워크 탭에서도 logout이 성공적으로 이루어지는데 reload하면 바로 auth/me가 계속 200코드와 함께 user가 전달됩니다. 콘솔에도 찍어봤는데 계속 req에 쿠키가 같이 전달되고 있어서 요. 서버도 껐다 켜보고 했는데도 계속 그래서 문의드립니다!client/src/context/auth.tsxclient/src/components/NavBar.tsxserver/src/middlewares/auth.tsserver/src/routes/auth.ts

강의에서는 const ar = []ar.length === 0 ?console.log("true"):console.log("FALSE");이런식으로 코드를 보여주셨는데제가 궁금한건 const ar = []; !ar.length ? console.log("Something exist"):console.log("EMPTY");이렇게 코드를 작성하면 물론 Something exist가 출력이 되겠지만제가 궁금한건 저기서 ar.length === 0 // 또는 FALSY? 인지ar.length ==0 // 또는 FALSY ?인지 궁금함다.질문을 한줄 요약하면삼항 연산자에서 조건 비교를 할때 내부적으로 == 가 사용되는지 아니면 === 로 사용되는지 궁금함다. 

남겨주신 노마크코더님의 영상과 기술블로그 글을 보았는데요.DOM 의 풀네임 (Document Object Model) 말처럼HTML, CSS, JS 파일들을 객체화하여 따로 분리하여 연결해주는 모델링이 속도가 빠르게 해주는 핵심 이유이며,객체화를 통해 브라우저에서 직접 모든 렌터, 레이아웃을 계산하는게 아닌 Offline 상태에서 계산하여 결과값만 브라우저에 나타내기 때문이다. 라고 이해를 하고 있는데 맞을까요?이런 React의 동작방식과 작업방식이 가장 빠른건 아니지만웬만한 웹에서 빠르게 동작하고 충분히 빠르고 효율적이기에 많은 서비스들에서 사랑 받고 있는 프레임워크다. 혹시 이렇게 정리하는게 조금 제가 잘 이해를 못 하고 있는 부분일지요.

 혹시 과제 풀이를 볼수 있는곳이 있을까요?

제가 겪었던 문제는node를 생각없이 치고 terminal에서 위와 같은 오류값을 얻었는데요. 원인은 아래와 같았습니다.Terminal 옆에 "2: node"로 되어있는 부분이 Terminla에 node를 실행시키면 나오던데 node 환경에서node test.js 가 안 먹는 모양입니다.node가 아닌 bash나 zsh 콘솔에서 실행해야 코드가 정상적으로 작동되는 것 같아요. 

관련 에러를 찾아보니 ip주소를 0000이나 내 컴퓨터 ip를 입력해봐서 해결한 경우를 보았으나 제 경우는 해결되지 않습니다. 어떻게 해결할 수 있을까요? 아래 오류 코드입니다.  MongoServerError: bad auth : authentication failed at Connection.onMessage (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/connection.js:227:30) at MessageStream.<anonymous> (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/connection.js:60:60) at MessageStream.emit (node:events:513:28) at processIncomingData (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/message_stream.js:125:16) at MessageStream._write (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/message_stream.js:33:9) at writeOrBuffer (node:internal/streams/writable:392:12) at _write (node:internal/streams/writable:333:10) at Writable.write (node:internal/streams/writable:337:10) at TLSSocket.ondata (node:internal/streams/readable:766:22) at TLSSocket.emit (node:events:513:28) { ok: 0, code: 8000, codeName: 'AtlasError', connectionGeneration: 0, [Symbol(errorLabels)]: Set(2) { 'HandshakeError', 'ResetPool' }} 

blog.user 필드에 user 도큐먼트 전체를 복사해서 저장되도록 되었습니다.blog.user 필드에는 ObjectId 가 저장되어야 하는건지, 아니면 user 도큐먼트 값을 그대로 복사한 값이 저장되어야 하는건지 궁금합니다

안녕하세요 선생님..그냥 단순히 인풋박스 만들어서 이미지 업로드를 해도 되지만 antd의 upload가 예뻐보여서 이걸 써서 이미지를 업로드 하고 싶은데 아무리 해도 되질 않아서 질문 드립니다ㅠㅠ보니까 보통 인풋박스를 통해 이미지 파일을 업로드할 때 양식이 FileList형식(배열처럼 보이는 객체...?)이던데antd upload에서 제공하는 props의 filelist는양식이 좀 다르더라구요..일단 백은 기존의 이미지 업로드 방식에서 바뀐 부분이 없고, 제가 antd의 Upload를 사용한 방식은 아래와 같습니다.  <Upload name='image' listType="picture-card" multiple fileList={fileList} onChange={onChangeImages} onPreview={onPreview} onRemove={onRemoveImage} > {fileList.length < 2 && 'Drag images or click'} </Upload>업로드 props는 위와 같이 설정하고 onChange함수는 const onChangeImages = useCallback(({ fileList: newFileList }) => { setFileList(newFileList); console.log('images', fileList); const imageFormData = new FormData(); for(let i = 0; i< fileList.length; i++){ imageFormData.append('key',fileList[i]); } return dispatch({ type: UPLOAD_IMAGES_REQUEST, data: imageFormData }); });위와 같이 작성하면 업로드 되지 않을까 했는데, 이미지 업로드가 성공했다고 쓰지만콘솔 창에 나온 메세지를 보면{type: 'UPLOAD_IMAGES_SUCCESS', data: Array(0), @@redux-saga/SAGA_ACTION: true}이런 식으로 빈 배열만 자꾸 들어가고, 콘솔로 찍어본 fileList는 아래와 같이 뜨던데images[{…}]0:lastModified: 1669296034457lastModifiedDate: Thu Nov 24 2022 22:20:34 GMT+0900 (한국 표준시) {}name: "icons8-team-URoyGsQdLwg-unsplash.jpg"originFileObj: File {uid: 'rc-upload-1675523328622-3', name: 'icons8-team-URoyGsQdLwg-unsplash.jpg', lastModified: 1669296034457, lastModifiedDate: Thu Nov 24 2022 22:20:34 GMT+0900 (한국 표준시), webkitRelativePath: '', …}percent: 0size: 674143status: "uploading"thumbUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgtype: "image/jpeg"uid: "rc-upload-1675523328622-3"[[Prototype]]: Objectlength: 1[[Prototype]]: Array(0)   노드버드에서는 업로드할 파일을 콘솔에 찍어보았을 때FileList {0: File, length: 1}0: FilelastModified: 1669296034457lastModifiedDate: Thu Nov 24 2022 22:20:34 GMT+0900 (한국 표준시) {}name: "icons8-team-URoyGsQdLwg-unsplash.jpg"size: 674143type: "image/jpeg"webkitRelativePath: ""[[Prototype]]: Filelength: 1[[Prototype]]: FileList이렇게 나오는걸 보면 데이터 구조상의 차이가 있어서 업로드가 안되는 것인가요? antd upload를 이용한 파일 업로드를 할 때 제가 놓친 부분이 어디인지 알 수 있을까요..? 조언 부탁드립니다 선생님ㅠ

Cannot set headers after they are sent to the client에러를 구글링해보니 중복처리할 경우 발생한다하던데 이게 뭔 말인지도 잘 모르겠고 코드도 똑같이 따라쳤는데..ㅜㅜ 도와주세요 어떻게 해결해야할까요..몇시간째 붙잡고 있어요

안녕하세요 콘솔에 404 에러가 떠서 목서버를 확인해보니 아래와 같은 오류가 떴는데 이러한 경우 어떻게 해결할 수 있을까요..{ "error": { "name": "usageLimitError", "header": "Usage limit reached", "message": "Your team plan allows 1000 mock server calls per month. Contact your team Admin to up your limit." } }

다이어리 에디터 직접 만들어보고 있는데 강의에서 e.target.name에 []괄호 안에넣는데 e.target.name 자체가 string이잖아요 괄호표기법으로 안써도 위에서는 그냥 author: "" 이렇게 key갑: value 값 써줬는데 e.target.name도 console찍어보면 author라고 뜨는데 왜 괄호를 붙여야 하나요?[e.target.name] 왜 이렇게 써야하는지 궁금합니다.위에선 괄호없이 string으로 썼는데

요즘 프론트 공고를 보면, 경력/신입을 불문하고redux, recoil, mobX 등 상태관리 라이브러리가 필수 자격요건에 들어가있는 경우가 많더라구요.그런데 해당 props 수업을 듣고 생각나서 커리큘럼을 다시 보니까 다른 기술들은 다 강의가 있는데 딱 상태관리 라이브러리 관련 수업 제목만 안보였습니다.혹시나 뒤의 강의 내용에 포함되어 있는 건지는 아직 다 보진 못했지만관련 강의가 없다면 상태관리 라이브러리는 포트폴리오에 굳이 적용시키지 않아도 추후 서류를 넣을 때 포트폴리오에 상태관리 라이브러리 적용 경험이 없다면 합불 당락을 결정할 정도로 하자가 되지 않을지 궁금합니다.아직 이른 걱정일지는 모르겠지만,나중에 완강하고 따로 상태관리 라이브러리를 공부해서 추후 포트폴리오 완성 시 별도로 공부해서 적용 시켜볼지, 아니면 적용 시키지 않고 그대로 포트폴리오로 써도 상관 없을지 멘토님의 의견이 궁금합니다.좋은 강의 감사합니다.  

문득 수업 듣다가 궁금해진 부분인데요,boards 폴더 안에list 폴더 만들고 index.js 만들고detail 폴더 만들고 index.js 만드는게 아니라,바로 같은 경로에 list.js, detail.js 이런 식으로 만드는건 next.js에서 안되는 방식일까요?