묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
freeboard_frontend폴더는 어떻게 다운받나요? ㅠ
1. "codecamp-frontend-이름" 폴더에 "freeboard_frontend"이름의 Next.js 프로젝트 설치하기2. "freeboard_frontend" 폴더를 만들고 수업프로젝트(class 폴더)와 동일한 순서로 똑같이 설치하기어떻게 하나요? ㅠ
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
시퀄라이즈 관계메소드를 두번 사용하는 경우
const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); 이런식으로 Image.create() 를 적용한 다음다시 post.addImages() 하는 이유가 뭔가요? 중복된 실행이라고 생각했는데 실행해봤을때는 중복된 튜플이 생성되지는 않네요..
-
미해결처음 만난 리액트(React)
클릭 시 페이지가 넘어가지지 않습니다.
안녕하세요 질문이 있습니다.에러는 발생하지 않는데 클릭 했을 때 페이지가 안 넘어 가집니다. 주소를 입력해서 접속할 때도 잘되는데클릭 시에 아무 반응이 없습니다. 뭐가 문제일까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
localhost 오류
첫번째 포트폴리오를 작성하던중, 경로를 boards/new로 이동하면 자꾸 저런 문구가 뜨며 오류가 발생합니다
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
navigate(history 변경)이 계속 오류가 발생하네요
이렇게 코드를 작성하였는데history.ts:480 Uncaught Error: useNavigate() may be used only in the context of a <Router> component. 에러가 발생합니다 ㅠㅠ
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
aws 질문입니다.
안녕하세요!혹시 강의 대로 진행하면 요금은 따로 청구되지 않는걸까요? 예전에 요금 폭탄을 맞은적이 있어 혹시 몰라 질문드립니다!ㅜㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
const{result} = useQuery(FETCH_BOARDS); result자리에 data가 아닌 다른 단어를 넣으면 실행이 안되는데 다른 이유가 있는건가요,,? ㅜㅜ
const{result} = useQuery(FETCH_BOARDS); 이 부분에서result자리에 data가 아닌 다른 단어를 넣으면 보드 목록이 불러와지지가 않는데 다른 이유가 혹시 있는건가요..? ㅜㅜ
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
useEffect 요런거 눌르면 자동으로 ()=>{ ) 어런식으로 자동완성 되자나요? 그거어떻게 하나요? ㅠㅠ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
백엔드 질문
1.사용자가 웹에 접속을 할 때, 브라우저 -> 프론트서버 로 요청을 보내게 되고프론트 -> 브라우저 로 html css js 파일을 보내서 뷰를 표시하게 되는데그러면 특정 기능을 사용할 때, 예를 들어 로그인 버튼을 누른다고 하면그 요청은 브라우저 -> 백엔드 인가요 프론트 -> 백엔드 인가요?만약 브라우저 -> 백엔드 이면백엔드 cors 설정에서는 프론트서버 도메인만 허용하도록 해놓는데 어떻게 브라우저에서백엔드로 접근이 가능한건가요? 2.강좌에서는 me값으로 로그인 유지를 위한 로직을 작성했고모든 페이지 접속 때마다 백엔드로 요청을 보내서 세션인증을 하는방식으로 로직을 작성했는데제가 알기로 세션인증방식은 세션id를 프론트에 보내서 쿠키에 있는 세션id를 이용해 로그인 유지를 하는것으로 알고있습니다. 제가 알고 있는 방식과 강좌에서의 세션인증이 좀 다른것 같은데 어떻게 이해해야 하나요?강좌는 ssr 적용 전 백엔드 부분까지만 들은 상태입니다.
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
nextjs13강의 pdf랑 소스코드 올려주실수 있나요..
에러 잡는부분이랑 제 코드 어딘가 잘못된거 같은데 보면서 확인하고 싶어요..
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
빌드하기 에서 npx serve build 시 오류
빌드하고 테스트? 하는 작업 할때 명령어 오류가 발생합니다.install 할때도 serve 가 잘 안되는거 같습니다. 실행하는 디렉토리 위치나 필요한 파일이 있을가요 ..?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
로그아웃 후에도 계속 쿠키가 존재합니다.
안녕하세요! 로그아웃 후 계속 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
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
삼항 연산자에서 조건 비교할때 === 인가요? ==인가요?
강의에서는 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의 개념에 관하여
남겨주신 노마크코더님의 영상과 기술블로그 글을 보았는데요.DOM 의 풀네임 (Document Object Model) 말처럼HTML, CSS, JS 파일들을 객체화하여 따로 분리하여 연결해주는 모델링이 속도가 빠르게 해주는 핵심 이유이며,객체화를 통해 브라우저에서 직접 모든 렌터, 레이아웃을 계산하는게 아닌 Offline 상태에서 계산하여 결과값만 브라우저에 나타내기 때문이다. 라고 이해를 하고 있는데 맞을까요?이런 React의 동작방식과 작업방식이 가장 빠른건 아니지만웬만한 웹에서 빠르게 동작하고 충분히 빠르고 효율적이기에 많은 서비스들에서 사랑 받고 있는 프레임워크다. 혹시 이렇게 정리하는게 조금 제가 잘 이해를 못 하고 있는 부분일지요.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
node.js Unexpected identifier 오류
제가 겪었던 문제는node를 생각없이 치고 terminal에서 위와 같은 오류값을 얻었는데요. 원인은 아래와 같았습니다.Terminal 옆에 "2: node"로 되어있는 부분이 Terminla에 node를 실행시키면 나오던데 node 환경에서node test.js 가 안 먹는 모양입니다.node가 아닌 bash나 zsh 콘솔에서 실행해야 코드가 정상적으로 작동되는 것 같아요.
-
미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
파이어 베이스 회원가입 오류
회원가입을 하려고 할때 이런 오류가 뜨는대요 완성본 파일에서 ChatPage의 Manipanel을 가져오면 이런 오류가 사라집니다.오류내용을 번역하면 소스를 통해 호스팅에 배포되지 않은 경우 옵션을 제공해야 합니다. (app/no-timeout).이게 뭘 의미하는지 모르겠습니다답변 부탁드립니다!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
authentication error 발생 해결책 문의드립니다.
관련 에러를 찾아보니 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' }}
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
is_like , is_LIke , isLike 오타가 나서 몇시간 헤매었습니다
아무리봐도 강의랑 똑같이 쳤다고 생각했는데 하트가 안바뀌어서 질문올릴까 말까 고민하다가 오타발견해서 해결하였네요 ㅠㅠ setPostList(prevList => { return prevList.map(currentPost => currentPost === post ? { ...currentPost, is_Like: isLike } : currentPost ); }); is_like is_Like isLike 너무 똑같은 변수명이고 post , postlist 에서 같이 쓰다보니깐 헷갈리는데 혹시 같은문제로 안되시는분 있을까해서 올립니다
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
antd의 upload로 이미지 업로드
안녕하세요 선생님..그냥 단순히 인풋박스 만들어서 이미지 업로드를 해도 되지만 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를 이용한 파일 업로드를 할 때 제가 놓친 부분이 어디인지 알 수 있을까요..? 조언 부탁드립니다 선생님ㅠ
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
목서버, "usageLimitError"
안녕하세요 콘솔에 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." } }