묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Cannot find module 'msw/node' from 'src/commons/mocks/index.js'
안녕하세요. 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.js 시작하기(feat. 지도 서비스 개발)
SSR vs SSG
안녕하세요 강의 정말 잘 듣고있습니다!SSG가 SSR보다 사용자 경험이 좋은건 이해했습니다! 근데 한가지 더 의문점인건 SSG가 아니고 SSR을 선택해야하는 케이스가 있을까요? 라는 의문이 듭니다! 예를 들면 검색결과 페이지라던가 매번 매순간 페이지의 내용이 달라지는 페이지라면 SSG가 아니고 SSR로 만드는게 더 적합한 그런 케이스가 실무에서 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
fetchPointTransactionsOfBuying API에서 특정 정보만 불러와지지 않습니다.
안녕하세요 강사님.마이페이지 내 포인트 화면의 구매내역 조회기능을 구현 중에 있습니다.fetchPointTransactionsOfBuying API로 구매내역을 조회하는데 판매자의 이름이 불러와지지 않습니다.. const FETCH_POINT_TRANSACTIONS_OF_BUYING = gql` query fetchPointTransactionsOfBuying($search: String, $page: Int) { fetchPointTransactionsOfBuying(search: $search, page: $page) { _id impUid amount balance status statusDetail useditem { _id name price seller { _id # name # email } buyer { _id name email } soldAt } createdAt } } `;useditem.seller._id까지는 조회가 되는데 name과 email은 조회가 되지않습니다.혹시나 해서 buyer 정보를 불러왔는데 buyer도 _id만 조회가 되고 name과 email는 조회가 되지 않습니다.위와 같은 오류가 나오는데 제가 모르는 부분이 있는건지 데이터에 문제가 있는건지 잘 모르겠습니다.. !
-
미해결
Next.js GCP App Engine 배포 시 환경변수 분기
Next.js로 Google Cloud Platform에 App Engine 서비스 배포를 진행하고 있습니다.문제는 production ( 실 서비스 )와 development ( 개발용 )으로 나누어서.env.development, .env.production의 두개의 환경변수를 가지고있습니다.배포 시 실서비스 에서는 .env.production을 사용하도록개발용 에서는 .env.development를 사용하도록 설정하려는데 이것저것 만져보아도 production만 사용하는 문제가 발생해버리네요. 현재 프로젝트구조와 설정코드는 이렇습니다.project ├── local └── Dockerfile └── docker-compose.yml ├── resource └── .next └── ... (Next.js 빌드 파일) └── node_modules └── package.json └── dev_app.yaml └── prd_app.yaml └── .env.development └── .env.production └── next.config.js └── ... (기타 Next.js 프로젝트 파일) 여기서 package.json의 script설정은 다음과 같습니다.{ dev: "next dev", start: "next start", lint: "next lint", deploy: "npm run build && gcloud app deploy --project='production' -q --appyaml=prd_app.yaml", deploy:dev: "npm run build:dev && gcloud app deploy --project='development' -q --appyaml=dev_app.yaml", build: "dotenv -e .env.production next build", build:dev: "dotenv -e .env.development next build" } next.config.js는 특별히 건드리지 않았습니다.dev_app.yaml, prd_app.yaml파일은 서비스명만 각각 설정해 주었습니다.runtime: nodejs20 # or another supported version service: development 질문 1.현재 app engine 업로드된 용량, 로직을 보니 빌드파일이 아닌 프로젝트 그대로 들어가는 것 같습니다.빌드는 환경변수파일도 정상적으로 분기되는데 앱엔진에서 해당문제가 발생하는 것으로보아혹시 Next.js에서 빌드된 파일로 app engine에 배포할 수 있는지 궁금합니다.질문 2.빌드파일만 올릴수 없다 라고 하더라도 프로젝트 그대로 올리면서 환경변수를 분기할 방법이 있는지 궁금합니다.정말 문서건 블로그건 구글서칭, 깃허브검색, GPT 모두 끈질기게 시도해봤지만능력부족 탓인지 성공하지 못했습니다..능력자분들께서 도움주시면 잊지않겠습니다!!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
npm run dev시 password 다르다고 나옴
에러 종류: 위와 같은 환경에서 error: password authentication failed for user "postgres" 로 추정되는 에러 발생아마 서버 연결시 인증 문제로 보입니다.작동 절차: docker-compose up 입력,server 파일로 이동, npm run dev 실행. 에러 발생+1)POSTGRES_HOST_AUTH_METHOD: trust로 설정하고 서버 새로 만들어도 동일한 에러가 발생하여 무슨 문제일지 잘 모르겠네요.. 도움 주시면 감사하겠습니다.+2) 아래에 터미널의 전체 에러 코드 남깁니다.C:\Users\tukim\Desktop\reddit-clone-app\server>npm run dev > server@1.0.0 dev> nodemon --exec ts-node ./src/server.ts[nodemon] 3.0.1[nodemon] to restart at any time, enter rs[nodemon] watching path(s): .[nodemon] watching extensions: ts,json[nodemon] starting ts-node ./src/server.tsserver running at https://localhost:4000error: ����� "postgres"�� password ������ �����߽��ϴ� at Parser.parseErrorMessage (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\parser.ts:369:69) at Parser.handlePacket (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\parser.ts:188:21) at Parser.parse (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\parser.ts:103:30) at Socket.<anonymous> (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\index.ts:7:48) at Socket.emit (node:events:513:28) at Socket.emit (node:domain:489:12) at addChunk (node:internal/streams/readable:324:12) at readableAddChunk (node:internal/streams/readable:297:9) at Socket.Readable.push (node:internal/streams/readable:234:10) at TCP.onStreamRead (node:internal/stream_base_commons:190:23) { length: 107, severity: 'ġ��������', code: '28P01', detail: undefined, hint: undefined, position: undefined, internalPosition: undefined, internalQuery: undefined, where: undefined, schema: undefined, table: undefined, column: undefined, dataType: undefined, constraint: undefined, file: 'auth.c', line: '329', routine: 'auth_failed'}
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
api 질문입니다.
포토폴리오 마이페이지 - 내포인트 부분을 작업하는 도중 api 질문입니다.fetchPointTransactionsOfBuying 이 내포인트 -> 구매내역 api로 알고있습니다.피그마를 보면 거기서 판매자 데이터를 가져오고있는데 오류가 뜨네요.ㅠ판매자 데이터를 가져오고 싶은데 여기서 seller {name} 이부분을 넣으면 데이터가 안가져오네요..판매자데이터가 없어서 그런건지 왜 그런지와 어떻게 해야하는지 두가지 모두 알고싶습니다.
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 실습 4탄 질문이요 ㅠㅠ
싸이월드 실습 4탄 하는 중인데LOTTO 부분에 "특히 버튼과 숫자박스 부분"이 왜 세로로 다닥다닥 붙어있을까요..ㅠgame__container 부분에 flex-direction: column; align-items: center; justify-content: space-between; padding: 20px;가 들어있고lotto__text부분에도display: flex; flex-direction: column; align-items: center; justify-content: space-between;를 넣어봤으나 아무 변화가 없었습니다 ㅠgame.html:<!DOCTYPE html> <html lang="ko"> <head> <title>Game</title> <link href="./styles/game.css" rel="stylesheet"> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="header__title"> <div class="title">GAME</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="game__container"> <img src="./images/word.png"> <div class="game__title">끝말잇기</div> <div class="game__subtitle">제시어 : <span id="word">코드캠프</span> </div> <div class="word__text"> <input class="textbox" id="myword" placeholder="단어를 입력하세요"> <button class="search">입력</button> </div> <div class="word__result" id="result">결과!</div> </div> <div class="game__container"> <img src="./images/lotto.png"> <div class="game__title">LOTTO</div> <div class="game__subtitle"> 버튼을 누르세요. </div> <div class="lotto__text"> <div class="number__box"> <div class="number1">3</div> <div class="number1">5</div> <div class="number1">10</div> <div class="number1">24</div> <div class="number1">30</div> <div class="number1">34</div> </div> <button class="lotto_button">Button</button> </div> </div> </div> </body> </html>game.css:* { box-sizing: border-box; margin: 0px } html, body{ width: 100%; height: 100%; } .wrapper { width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; /* 박스가 wrapper안에 game__container 두개 총 세개*/ align-items: center; justify-content: space-between; } .wrapper__header{ width: 100%; display: flex; flex-direction: column; } .header__title{ display: flex; flex-direction: row; align-items: center; } .title{ color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; } .game__container{ width: 222px; height: 168px; border: 1px solid gray; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; background-color: #f6f6f6; } .game__title { font-size: 15px; font-weight: 900; } .game__subtitle { font-size: 11px; } .word__result { font-size: 11px; font-weight: 700; } .word__text { width: 100%; display: flex; flex-direction: row; justify-content: space-between; } .textbox { width: 130px; height: 24px; border-radius: 5px; } .search { font-size: 11px; font-weight: 700; width: 38px; height: 24px; } .number__box{ width: 130px; height: 24px; border-radius: 5px; background-color: #FFE400 ; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .lotto__text { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .number1{ font-size: 10px; font-weight: 700px; margin: 5px; } .lotto_button { font-size: 11px; font-weight: 700; width: 62px; height: 24px; }
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
async await
안녕하세요. banner.js에서 질문이 있습니다이 부분에서 왜 async await를 사용하셨는지 궁금합니다!const fetchData = async () => { // 현재 상영중인 영화 정보를 가져오기(여러 영화) const request = await axios.get(requests.fetchNowPlaying); // 여러 영화 중 영화 하나의 ID를 가져오기 const movieId = request.data.results[ Math.floor(Math.random() * request.data.results.length) ].id; // 특정 영화의 더 상세한 정보를 가져오기(비디오 정보도 포함) const { data : movieDetail } = await axios.get(`movie/${movieId}`, { params: {append_to_response: "videos"}, }); setMovie(movieDetail); }
-
미해결
next.js의 "_buildmanifest.js" 파일의 경로 유출(?)은 괜찮은 걸까요?
소스코드에서 _buildmanifest.js에 들어가보면 모든 경로가 표시되던데이러면 관리자 페이지의 모든 경로도 볼 수 있어서 어느정도 앱 규모(?)를 알 수 있다는 건데이거 보안적으로 괜찮은걸까요?관리자 페이지는 따로 만들어야 하는 건지 아니면 slug 경로를 이용해서 안 보이게 해야하는 건지 갑자기 머리가 복잡해지네요😂다른 분들은 어떻게 하시는지 궁금합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
mysql_secure_installation 정책에 관해
제가 다른게시물 보고 https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04이거까지 했는데 계속 새로운 비밀번호 입력 하라고 뜨네요 ㅠㅠ이런 경우 어떻게 해야할까요 비밀번호도 보안수준에 맞게 했는데 계속 뜨네요 ㅠㅠ
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강의자료 pdf에서 우분투에서 도커 다운받는 링크 복사할때
도커 다운받는 링크 복사 할때 공백 생겨서 필요 하신분 쓰시라고 링크 올려 두겠습니다.https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-22-04
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
mysql_secure_installation password 질문이요
... Failed! Error: SET PASSWORD has no significance for user 'root'@'localhost' as the authentication method used doesn't store authentication data in the MySQL server. Please consider using ALTER USER instead if you want to change authentication parameters.구글링도하고 mysql다시깔아서 local password도 다시 설정했는데 자꾸 이 오류가 나오네요.. 혹시 해결 방법이 있을까요?
-
미해결Next.js 시작하기(feat. 지도 서비스 개발)
마커 클러스터링 도입
안녕하세요, 강의 보면서 많은 도움 받았습니다. 제가 추가로 마커클러스터링을 도입하려고 하는데 네이버에서 제공하는 깃헙 예제 코드를 봐도 도무지 이해가 안가서요.. 혹시 어떤식으로 풀어나가면 될지 궁금합니다... ㅠㅠ
-
해결됨만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
강의 관련 질문입니다!
members.add.ts 25번째 줄에 return이 없어도 괜찮은건가요?또 개인적인 생각으로는 api를 호출하는 부분에서 axios를 사용하면 코드가 더 간단해질 것 같은데 fetch가 사용된 이유가 있을까요?바쁘실텐데 여러 사소한 질문들 드려서 죄송합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
우분투에서 작업시 윈도우로 mysql 설치하는 것에 관해서
제로초쌤 제가 우분투에서 Nodebird를 진행하고 있는데 더북에 써져있는 거처럼 리눅스(우분투)에서 설치하는 방법 그대로 설치하다가 Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (13) 소켓 에러가 계속 나서 해결하려고 인터넷에 찾아보면서 따라하고 있는데 해결이 안되서 혹시 윈도우로 mysql설치해서 진행해도 크게 차이가 없을까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
next.js sroll restoration
안녕하세요 제로초님 강의를 다 듣고 개인 프로젝트를 하고 있는 사람입니다. 궁금한게 하나 있는데 SSR 페이지로 간 후에 뒤로가기 하면 스크롤 위치가 초기화되던데 이거 막는방법이 있나요? SSR 페이지가 아니면 스크롤이 그 위치 그대로 있더라고요 항상 SSR 페이지 갔다가 뒤로가기 하면 스크롤이 최상단으로 초기화되서 그런데 혹시 막을 수 있는 방법 있을까요?ㅜ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
제로초님 오랜만에 질문하나만 올리겠습니다.
개인 토이 프로젝트를 하나 하고 있는데요, 혹시 next.js에서 도메인 라우팅 하는 방법이 있나요? 문제가 뭐냐면 제가 만든 토이 프로젝트가 있는데 http://www.hubfoodlink.com 으로 접속해서 해당 정보를 클릭하면 리엑트 컴포넌트 모달창이 띄워지는데, http://hubfoodlink.com 으로 접속하면 접속은 되는데 정보 클릭 시 리엑트 컴포넌트 모달창이 안뜨고 An unexpected error has occurred. 라고 떠서 문제가 발생되네요 ㅠ 아니면 http://hubfoodlink.com 접속시 www을 붙여서 http://www.hubfoodlink.com접속이 되게 하는 방법이 있을까요? 물론 강의와 관련없는 질문이긴한데 몇일간 찾아보고 고민해봐도 해결되지 않아서 염치불구하고 질문을 올려봅니다. 죄송합니다 ㅠ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
getInitialProps 로 데이터가 안넘오옵니다.
안녕하세요. 노드버드 강의 보면서 제가 맡은 프로그램을 짜보고 있습니다. 다름이 아니라, mysql 디비에서 라우팅해서 관련 데이터가 포스트맨으로 넘어오는거까지 확인이 되었는데요, 프론트엔드 부분에서 statusView 페이지에서 관련 데이터 받아와서 뿌리는 테스트 코드를 작성해봤는데, 아무런 반응이 없습니다. 테스트 코드는 다음과 같습니다. 크롬창에서 localhost:3000/statusView 들어가보면 Hello Town1 List만 나오고 console.log(test) 이부분은 undefined로 나옵니다. getInitialProps가 동작을 했다면 console.log('aaaaaa')가 나왔어야 하는데 이건 출력이 안되더군요. 참고로, 백앤드 서버는 실행한 상태에서, 새로 폴더를 만들어서 react, react-dom, next 만 설치한 상태에서 pages 폴더를 만들고 statusView 페이지에 위에 코드를 넣어보니 이때는 또 데이터가 잘 넘어 옵니다. 어디서 부터 디버깅을 해야할지 막막해서 두서없지만 질문 올립니다.