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 모두 끈질기게 시도해봤지만 능력부족 탓인지 성공하지 못했습니다.. 능력자분들께서 도움주시면 잊지않겠습니다!!
질문1) 4000/test에서는 토큰이 표시되지만, 8002/v1/test 에서는 유효하지 않은 토큰으로 뜨는 이유가 무엇일까요? 로그에서는 401코드가 뜨다가 4000/test 접속 후 새로고침을 하면 200 코드가 로그에 다시 뜹니다. api 코딩 내용 첨부합니다. app.js controllers/v1 middleware/v1 routes/v1
아직 노드버드 ch10 진행중입니다. 진행하면서 다른 글들도 참고하면서 진행중인데요 async await 사용 방식에 대해 문의드립니다. DB 데이타 조회, 생성 시 async 로 진행하는데 코딩 방식1 try{ const user = await User.findOne(...); ... await user.addFollowing(...); }catch(err){ next(err); } 코딩 방식2 User.findOne() .then((result) => { user.addFollowing(...); }) .then((result) => { ... }) .catch((err) => { next(err)}); 방식1은 await 키워드로 비동기 함수 호출하는 방식이구 아래는 then 을 통해 비동기 함수 호출 하는 방식인듯 한데요. 둘중 많이 쓰는 방식이 있을까요..?
클라이언트가 만약 소켓 연결을 정상 종료하지 않고 프로그램을 끄게 되는 경우 예컨데 정전으로 인해 클라이언트 PC가 종료됐다면 서버는 알턱이 없으니 결국 TimeOut을 체크해서 서버가 연결을 종료해야할 것 같은데 맞을까요? 제 생각엔 위와 같은 흐름으로 진행되고 다른 방법은 떠오르지 않는데 혹시 대응할 수 있는 방법이 있을까요?
로그인 및 인증,인가(세션,jwt둘다 사용), 게시판(이미지포함), 댓글, 소켓채팅 정도의 기능을 구현하여 테스트 코드와 docker로 띄워서 CI/CD까지 구현하려고 합니다. 상태랑 로직 관리를 useReducer, React Context API, React Query, redux, graphql 정도로 생각하고 있는데 어떤걸로 하는게 좋을까요?!
메인화면으로가는 버튼을 빠르게 반복해서 누르면 로딩중만 나오길래 개발자모드에서 network를 보면 (pending)이렇게 나오면서 응답을 못하는상태인데 왜 그러는걸까요? 모든 함수에서 mysql에 연결하고 쿼리문 사용할때 async/await 사용하고있습니다. 로그인 미들웨어는 promise로 사용하고있는데 정확히 어떤점때문에 이러한 오류가 발생하는지 모르겠습니다. 저pending 오류를 어떻게해야 해결이 될까요?
제목처럼 react typescript vite설치를 하려고 터미널에 yarn create vite를 입력하여 설치를 했습니다. 아래 이미지와 같이 typescript를 선택 후, 설치를 완료했는데... 아래 이미지들처럼 설치 하자마자 빨간줄들이 난무하고있습니다ㅜㅜ 아래 이미지는 package.json 파일입니다. 어떻게 해결할 수 있을까요?
안녕하세요! 강사님 강의를 끝까지 다 수강하였습니다. 너무 도움이 많이 되었습니다. 감사합니다. 부동산 매물 강의에 대한 공지를 보고 메일로 문의 드렸는데 아직 피드백이 오지 않아 이렇게 질문글로 문의를 드리게 되었습니다! 메일 문의 한 번만 확인 부탁드립니다. 감사합니다!
안녕하세요 선생님 ! 강의 정말 잘 보고 있습니다 ! 다름이 아니라 현재 Node Js 교과서를 참고해서 웹 프로젝트를 진행 중입니다. AWS를 이용해 lightsail과 도메인을 구입해 실제 배포를 하려 하는데요. 큰 프로젝트가 아니라 사용자가 100~200명쯤 되는 블라인드 매칭 서비스입니다. 무료로 진행하는 프로그램이라 큰 걱정은 없지만, 실제 서버 배포를 함에 있어 15장에 나오는 서비스 운영을 위한 패키지 만으로 보안이 가능할까 걱정이 돼서 글을 작성합니다. 추가 적으로 추천하시는 패키지들이 있으시면 추천 받고 싶습니다 !
MDN의 가이드에 따라 DragNDrop 코드를 작성하는데 파일을 가져오기 위한 코드인 event.dataTransfer.items 에서 아래와 같은 오류가 발생햇습니다. 'DataTransferItemList' 형식은 배열 형식이 아닙니다.ts(2461) MDN DataTransfer: items 속성 가이드에서는 목록을 반환하고 항목이없어도 빈목록을 반환한다고 되어있고 MDN DataTransferItemList 타입 가이드에서 객체라고 명시되어 있던데 개별항목에는 [ ]표기법으로 접근할수 있다는걸로 보아 event.dataTransfer.items의 타입은 리스트가 아닌 오브젝트에 숫자를 KEY로 값을 넣어놓은 형태인가요?? 아님 또다른 타입인건가요? 코드 function dropHandler(ev: React.DragEvent<HTMLDivElement>): void { console.log('File(s) dropped'); // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); if (ev.dataTransfer.items) { // Use DataTransferItemList interface to access the file(s) [...ev.dataTransfer.items].forEach((item, i) => { // If dropped items aren't files, reject them if (item.kind === 'file') { const file = item.getAsFile(); if (file) { console.log(`… file[${i}].name = ${file.name}`); } } }); } else { // Use DataTransfer interface to access the file(s) const files = ev.dataTransfer.files; [...files].forEach((file, i) => { console.log(`… file[${i}].name = ${file.name}`); }); } } MDN DragNDrop가이드 https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop MDN DataTransfer: items 속성 가이드 https://developer.mozilla.org/ko/docs/Web/API/DataTransfer/items MDN DataTransferItemList 타입 가이드 https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItemList