묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
API 모킹할 때 받아오는 _id 값
안녕하세요 멘토님매번 강의 잘 듣고 있습니다.이번 강의를 마무리로 별도로 개인 토이프로젝트 개발을 시작하고 배포를 할 때가 오면 다시 배포 부분부터 수강할 예정인데 이 강의에서 이해가 좀 정확히 안되는 부분이 있어서 질문 글을 올렸습니다.API 모킹을 통해 가짜 게시글 생성 테스트 API를 보내서 result를 받는 부분 중, _id 값 부분이 이해가 잘 안됩니다.writer, title, contents 는 테스트 input 부분에 있던 내용들 그대로 result에 적어서 이 값들이 제대로 insert 되었는지 테스트를 하기 때문에 같은 값을 입력했다는 것은 이해를 했습니다.그런데 _id 부분은 왜 백엔드에서-받은-게시글ID 이라고 임의로 입력을 했는지 부분을 이해 못했습니다.id, _id 와 같은 값은 랜덤으로 생성되기에 뭘로 받아올지 모르기 때문에 테스팅 라이브러리에서 임의의 값으로 지정하도록 설정이 가능해서일까요?그렇다면 아폴로에서 캐싱할 때도 _id, id 라는 명을 인식해서 캐싱이 더 잘되듯이, 테스팅 라이브러리도 _id, id 명에 한정해서 개발자가 임의의 값을 입력해도 되도록 만들어 둔 것인지도 궁금합니다.// 가짜 mutation 만들기 (요청, 응답 모두) const mocks = [ { request: { query: CREATE_BOARD, variables: { createBoardInput: { writer: "철수", title: "안녕하세요", contents: "반갑습니다", password: "1234", }, }, }, result: { data: { createBoard: { _id: "백엔드에서-받은-게시글ID", writer: "철수", title: "안녕하세요", contents: "반갑습니다", }, }, }, }, ];
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
사용 게시글 강의에서 SerializableError
SerializableError: Error serializing `.initialState.post.loadPostsError` returned from `getServerSideProps` in "/user/[id]". Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value all together. at isSerializable (/Users/js/Desktop/sansbook/node_modules/next/dist/lib/is-serializable-props.js:7:95) at /Users/js/Desktop/sansbook/node_modules/next/dist/lib/is-serializable-props.js:7:503 at Array.every (<anonymous>) at isSerializable (/Users/js/Desktop/sansbook/node_modules/next/dist/lib/is-serializable-props.js:7:304) at /Users/js/Desktop/sansbook/node_modules/next/dist/lib/is-serializable-props.js:7:503 at Array.every (<anonymous>) at isSerializable (/Users/js/Desktop/sansbook/node_modules/next/dist/lib/is-serializable-props.js:7:304) at /Users/js/Desktop/sansbook/node_modules/next/dist/lib/is-serializable-props.js:7:503 at Array.every (<anonymous>) at isSerializable (/Users/js/Desktop/sansbook/node_modules/next/dist/lib/is-serializable-props.js:7:304)이 에러가 떴는데 user-[id].js에서 getServerSideProps 코드가 잘못되었다는 뜻인가요? 아니면 undefined나 null을 어떻게 처리할것인지..잘모르겠습니다
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
코드가 잘못 됐나요..
코드가 잘못 됐나요..상품 목록이 나오질 않네요..#1 vsCode<html> <head> <title>TerretAccompany</title> <link href="index.css" type="text/css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <div id="header"> <div id="header-area"> <img src="images\icons\logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="images\banners\banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"></div> </div> <div id="footer"></div> </body> <script> axios .get("https://2007f5d2-9d8b-49f0-8b70-032507e17d79.mock.pstmn.io") .then(function (result) { console.log("통신 결과 : ", result); const products = result.data.products; let productsHtml = ""; for (var i = 0; i < products.length; i++) { let product = products[i]; productsHtml = productsHtml + '<div class="product-card">' + "<div>" + '<img class="product-img"' + 'src="' + product.imageUrl + '" />' + "</div>" + '<div class="product-contents">' + "<!-- text를 넣을때 많이 씀 -->" + '<span class="product-name">' + product.name + "</span>" + '<span class="product-price">' + product.price + "원" + "</span>" + '<div class="product-seller">' + '<img class="product-avatar" src="images/icons/avatar.png" />' + "<span>" + product.seller + "</span>" + "</div>" + "</div>" + "</div>"; } document.querySelector("#product-list").innerHTML = productsHtml; }) .catch(function (error) { console.error("error 발생 : ", error); }); </script> </html> #2 postman{ "products" : [ { "name": "농구공", "price": 500000, "seller": "조던", "imageUrl": "images/products/basketball1.jpeg" }, { "name": "축구공", "price": 600000, "seller": "메시", "imageUrl": "images/products/soccerball1.jpg" }, { "name": "키보드", "price": 300000, "seller": "그랩", "imageUrl": "images/products/keyboard1.jpg" } ] }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
withAuth에서 토큰 유지는 어떻게 하나요?
section 19 refresh Token을 공부하면서 새로고침시 토큰을 유지하는 방법에 대해 다음과 같이 알려주셨는데요const [accessToken, setAccessToken] = useRecoilState(accessTokenState); useEffect(() => { // 1. 기존방식(refreshToken 이전) // console.log("지금은 브라우저다!!!!!"); // const result = localStorage.getItem("accessToken"); // console.log(result); // if (result) setAccessToken(result); // 2. 새로운방식(refreshToken 이후) - 새로고침 이후에도 토큰 유지할 수 있도록 void getAccessToken().then((newAccessToken) => { setAccessToken(newAccessToken); }); }, []);이게 withAuth가 아닐시의 방법이고 withAuth 일때는 나중에 리뷰해주신다고 했는데, 강의 자료를 살펴보니 따로 적힌 방법이 없어서요. withAuth가 아닐때는 토큰 유지를 어떻게 하나요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
리액트랑 강의를 동시에 같이 진행해야하나요 ? ..
혹시 강의를 node react 동시에 같이 들어야하나요 ?? 노드강의만 먼저 순서대로 듣고있는데 갑자기 2분 15초경에 갑자기 유저모델까지 만들었다고 말씀해주시는데 노드 이전강의는 몽고DB연결만 한걸로 나와서요 ..
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
서버에 코드를 올렸는데 mixed content에러 발생중입니다.
안녕하세요. 제로초님.우선 학습관련 내용이 아닌 내용에 대해 질문드리게 되어 죄송합니다.혹여 문제가 될 시 질문 글을 삭제하도록 하겠습니다.몇 일 동안 해결하려 했으나 해결이 잘 되지 않아 이 곳을 통해 질문드리게 되었습니다.fe작업물을 테스트 서버에 반영하였으나,로그인을 시도할 때 아래와 같은 에러가 발생중입니다.xhr.js:247 Mixed Content: The page at 'https://도메인주소/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://백엔드api주소'. This request has been blocked; the content must be served over HTTPS. 구글링을 해본 결과 메타 태그를 index.html에 삽입하라고 하여 삽입을 해보았으나,pending로 통신 자체가 불가능한 상황입니다.http-proxy-middleware 라이브러리를 사용하여 setproxy.js파일도 세팅을 해보았으나 여전히 위와 같은 문제가 발생중입니다..env 파일을 생성하여 백엔드 api를 프록시로 설정을 하였고, 프론트엔드 host도 지정을 하였는데 위와 같은 문제가 발생 중입니다. 도무지 해결이 되지 않아 여기 질문드린 점 다시 한번 사과드리겠습니다.혹여 문제가 되면 질문 글은 바로 삭제하도록 하겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
router undefined로 인한 쿼리요청 실패
import NewBoard from "../../../../src/components/units/write/BoardWrite.container" import { useQuery, gql } from "@apollo/client" import { useRouter } from "next/router" const FETCH_BOARD = gql` query fetchBoard($boardId: ID!){ fetchBoard (boardId: $boardId) _id writer title contents } ` export default function editPage(props) { const router = useRouter() console.log("-------------------") console.log(router.query.detail) console.log("-------------------") const {data} = useQuery(FETCH_BOARD, { variables: { boardId : Number(router.query.detail) } }) console.log("++++++++++++++++++") console.log(data) console.log("++++++++++++++++++") console.log("###################################") return( <> <NewBoard isEdit={true} queryData = {data?.data?.fetchBoard}/> </> ) } 수정 페이지에서 라우터 안에 있는 보드 아이디로 쿼리 요청을 보내려 했는데 처음에는 router.query.detail이 undefined 상태로 있어서 그런지 오류가 나왔습니다 ㅜㅜ어떤 부분이 잘못된 걸까요..
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
서버사이드렌더링 준비하기 강의 질문
강의에 올라와 있는 pages폴더에서 index.js 파일 getServerSideProps부분이 저도 store.dispatch오류가 나서 고차함수로 바꾸어 주니까 해결됬습니다. 근데 이유를 잘모르겠습니다 ㅠㅠexport const getServerSideProps = wrapper.getServerSideProps( (store) => async () => { store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); store.dispatch({ type: LOAD_POSTS_REQUEST, }); store.dispatch(END); await store.sagaTask.toPromise(); } );
-
미해결사물인터넷 통신은 내 손에 (Arduino, MQTT, Nodejs, MongoDB, Android,VS Code)
아두이노에서 MQTT서버 접속이 안됩니다.
위 상태의 환경인데요, 아두이노에서 wifi 접속까지는 되지만 192.168.0.2의 브로커에 접속하려하면Attempting MQTT connection... failed, rc=2 try again in 5 seconds의 메세지가 계속 뜨며 접속이 안됩니다. 구글에 찾아보니 client null이 아니라 다른 문자열이 나오는 것 같은데, 이를 어찌해야 좋을까요? 진도를 못 나가고 있습니다...방화벽도 해제하였고, # listener port-number [ip address/host name/unix socket path]#listenerlistener 1883# Defaults to false, unless there are no listeners defined in the configuration# file, in which case it is set to true, but connections are only allowed from# the local machine.allow_anonymous true 위 내용도 콘피그에 넣어봤습니다. 당연히 토픽 명은 아두이노 코드와 같게 outTopic으로 하였습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
github
제 깃헙 아이디를 만들어서푸시를 해야 이 섹션 진행 할 수 있는건가요?vscode와 git 연결을 해야하는건지답변 부탁드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Next.js 버전
이 수업에 대한 질문은 아니지만,next.js의 버전이 올라갔는데가르쳐주시는 버전으로 배워도취업하는데에 문제가 없을까요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
빌드 아이디 바꾼 후 적용 안됨_재질문
안녕하세요. 이 강의에 질문을 달았는데 해결이 안되서 다시 질문드립니다.ㅠ 우선 로드밸런서에서는 아래의 동적페이지가 잘 작동되는것으로 확인됩니다.cloudFrond에서 연결도 잘 해줬구요. 그런데...제 도메인에서 부터 시작되는 부분은 자꾸 오류가 납니다.아래처럼요ㅠ아래 _buildManifest.js 네트워크창을 확인해보면 보드아이디도 잘 먹혀있는걸 확인할 수 있습니다.그런데 오류가 난 빨간부분에서는 뭔가 이상합니다.x-cache 부분을 보면 클라우드 프론트에 에러가 났다고 하는데 이유를 당최 모르겠습니다.
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
9장 프로젝트 구조갖추기부분
컨트롤러스 page.js 에서 이부분 객체로 만든건가요?exports.renderProfile=(req,res,next)=>{}
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
thumb 폴더 생성이 안됩니다.
이미지 업로드 후 thumb 폴더가 생성 안됩니다!검색해보니 AWS Lambda 함수에서 S3 서비스를 호출할 때, 해당 Lambda 함수의 실행 역할이 S3 버킷에 대한 필요한 권한을 가지고 있지 않아서 발생한 것이라고 합니다...역할도 S3객체 읽기 전용 권한 선택했습니다.근데 여기서 PutObject가 없는게 걸립니다..
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
쿠키공유 질문드립니다.
도메인까지 연결 성공했고 쿠키 공유만 해결하면 되는데 뭐 때문인지 감이 안잡힙니다....
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
기동시 동적으로 설정 정보를 읽어서 적용하는 방법
FE 서버 기동시(yarn start) 사전에 정의한 설정 정보를 읽어서 사용하는 방법이 있을까요?예를 들어, 아래 apollo의 uploadLink 생성 코드의 경우, 만약 graphql 서버 주소가 바뀌었다면 uri 부분을 변경해서 다시 빌드를 해야 되는데요.빌드없이 yarn start 시에 FE 서버 로컬 설정파일에서 uri를 읽어와서 적용하는 방식으로 하고 싶은데 어떤식으로 하면 좋을지요?.env 파일은 빌드 이후에 변경은 반영되지 않는것 같고.. SSR 같은 방법으로 해야 할까요? 아니면, 기동시에 accessToken 처럼 backend에 uri 정보를 조회해서 적용해야 할까요? const uploadLink = createUploadLink({ uri: "https://backendonline.codebootcamp.co.kr/graphql", headers: { Authorization: `Bearer ${accessToken}` }, credentials: "include", });
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
413 Request Entity Too Large 질문
안녕하세요 선생님. 프로젝트 배포하고 나서 테스트 중에 특정 이미지를 업로드 하면 '413 Request Entity Too Large'라고 뜨는 오류를 발견했습니다. 특정 이미지 크기는 4.13mb정도구요. 일단 에러가 떠도 그대로 post요청을 보내면 업로드된 이미지가 보이긴 하는데 왜 이런 에러가 뜨는지 모르겠습니다..테스트 해보니까 세로 길이가 비교적 긴 이미지를 업로드 요청할 때 에러가 나는걸 확인했습니다.위 이미지가 프론트에서 나는 에러 상태 입니다. 오류 해결을 위해 먼저 back의 const upload = multer({ storage: multerS3({ s3: new AWS.S3(), bucket: 'fashionary-s3', key(req, file, cb) { cb(null, `original/${Date.now()}_${path.basename(file.originalname)}`) } }), limits: { fileSize: 20 * 1024 * 1024 }, // 20MB });여기서 limits부분이 20m인걸 확인하고, sudo vim /etc/nginx/nginx.conf 해서 http { ## # Basic Settings ## client_max_body_size 20M; sendfile on; tcp_nopush on; types_hash_max_size 2048; # server_tokens off; # server_names_hash_bucket_size 64; # server_name_in_redirect off; include /etc/nginx/mime.types; default_type application/octet-stream; 위와 같이 http부분 설정을 20m으로도, 0으로도 설정 후 sudo service nginx reload 했는데도 특정 이미지 전송을 시도하면 같은 에러가 떠요..이럴 땐 어디를 봐야 하나요?
-
해결됨탄탄한 백엔드 NestJS, 기초부터 심화까지
@Get(':id') @Get('all')
@Get(':id') getOneCat(@Param('id', PositiveIntPipe) id: number) { console.log(id, typeof id); return 'one cat'; }이전에 작성되었던 아이디로 검색 메서드가 있었는데요,이번 강의에서 @Get('all') 을 추가해서포스트맨으로 테스트하는데 위에 getOneCat 으로 넘어가는데 왜 이런건지 알 수 있을까요?@ApiOperation({ summary: '현재 고양이 가져오가' }) @UseGuards(JwtAuthGuard) @Get() getCurrentCat(@CurrentUser() cat) { return cat.readOnlyData; }만약 이게 더 위에 있다면, 여기서 걸린다면 이해 하겠는데그렇지도 않고 @Get('all') 일때만 걸리는 이유가 뭘까요..?
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
pm2 에러
ec2-ubuntu 환경에서 pm2사용하는데sudo npm run start:prodcross-env NODE_ENV=production PORT=80 pm2 start dist/src/main.js실행하였는데Error: EACCES: permission denied, mkdir '/root/.pm2/logs'Error: EACCES: permission denied, mkdir '/root/.pm2/pids'Error: EACCES: permission denied, open '/root/.pm2/module_conf.json'Error: EACCES: permission denied, mkdir '/root/.pm2/modules'에러가 발생해서 제로초님이 답변하신거 찾아보고 노드 재설치도 했는데같은 에러가 발생합니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
js d-day 카운터 질문 합니다.
const nowDate = new Date (); const dayDate = new Date ("2023-4-15") const count = (dayDate - nowDate) / 1000 ; const countDate = Math.floor(count / 3600 / 24); const countHours = Math.floor(count / 3600) % 24 ; const countMinutes = Math.floor(count / 60) % 60; const countSec = Math.floor(count) % 60;수업 시간 작성한 코드는 이해가 갑니다.d day 카운터 관련 구글링중 const dDay = new Date('2023-4-15'); const today = new Date(); const difference = dDay.getTime() - today.getTime(), // Ms 단위로 변환 secInMs = Math.floor(difference / 1000), minInMs = Math.floor(secInMs / 60), hourInMs = Math.floor(minInMs / 60), days = Math.floor(hourInMs / 24), // 남은 시간 계산 seconds = secInMs % 60, minutes = minInMs % 60, hours = minutes % 24;위의 코드를 보면 hours = minutes % 24 이부분이 이해가 가지 않습니다. minutes 은 나머지 값인데 왜 작동이 잘될까요?
