inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

fetch web api 에 next 옵션

해결됨

Next + React Query로 SNS 서비스 만들기

fetch 함수가 그냥 web API 같은데 fetch 함수에 next 라는 속성이 들어간건데 따로 임포트해온것도 아닌데 어떻게 작동되는건가요? next 가 내부적으로 fetch 를 새로 만든건가요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
쵸잉 댓글 1 좋아요 0 조회수 355

https 적용(SSL/TLS 인증서 발급)과 비용에 관련한 질문입니다.

해결됨

AWS 배포 완벽가이드 (feat. Lightsail, Docker, ECS)

안녕하세요, AWS를 통한 SSL/TLS 인증서 발급에 대해 한 가지 의문이 들어서 질문 남깁니다. SSL/TLS 인증서는 CA(인증기관)을 통해 발급받을 수 있고, CA는 도메인과 소유자의 세부 정보를 확인하고 '이 웹사이트는 믿을 수 있음'이란 의미로 인증서를 발급해주는 기관이며, AWS는 CA 중 하나로서 도메인과 SSL/TLS 인증서를 판매할 수 있다고 이해했는데요, 의문이 생기는 지점은 AWS가 이 SSL/TLS 인증서를 무료로 발급해준다는 점입니다. 유/무료 인증서의 차이는 유료 인증서가 웹사이트에 대해 더 높은 신뢰를 보장하고, 보안 사고에 대해 보상금을 지급할 의무를 지는 반면 무료 인증서는 그런 제약이 없다는 것으로 알고 있는데, DNS 검증만 통과하면 AWS에서 인증서가 발급되고, 어떤 보안 사고에 대한 보장 같은 건 언급이 되어 있지 않으니... AWS에서 발급받은 인증서를 예를 들면 회사 홈페이지 도메인에 적용해도 되는 걸까요? 무료라고 해도 그 AWS가 '신뢰할 수 없는' 것을 제공할 것 같지는...? 않아서 아리송합니다. 강의 내용을 좀 벗어나는 것 같긴 하지만ㅠㅠ 여기저기 검색을 해봐도 적절한 답변을 찾을 수가 없어서요. 항상 감사합니다.

  • aws
  • ssl
  • https
황지은 댓글 2 좋아요 0 조회수 937

next-auth Login 시 middleware 이슈 질문 드립니다.

해결됨

Next + React Query로 SNS 서비스 만들기

안녕하세요. next-auth 로그인시 해결되지 않는 부분이 있어서 질문드립니다. 로그인을 계속 실패하고 있습니다. next-auth의 버젼 (4였다가 삭제하고 3으로도 시도 해봤습니다.) "dependencies": { "next-auth": "^5.0.0-beta.3", }, 로그인을 시도했을때 뜨는 화면: The Middleware "/src/middleware" must export a middleware or a default function This error happened while generating the page. Any console logs will be displayed in the terminal window. 로그인을 시도했을때 콘솔 화면: 로그인을 시도했을때 네트워크 화면 : middleware.ts code 입니다. import { auth as middleware } from "./auth"; // See "Matching Paths" below to learn more export const config = { matcher: ["/compose/tweet", "/home", "/explore", "/messages", "/search"], }; auth.ts code 입니다. import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; console.log("-", process.env.AUTH_URL); export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch(`${process.env.AUTH_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), }); if (!authResponse.ok) { return null; } const user = await authResponse.json(); return user; }, }), ], }); handers.ts의 로그인쪽 코드입니다. import { http, HttpResponse, StrictResponse } from "msw"; import { faker } from "@faker-js/faker"; export const handlers = [ http.post("/api/login", () => { console.log("로그인"); return HttpResponse.json({ id: "zerohch0", nickname: "제로초", image: "/5Udwvqim.jpg" },, { headers: { "Set-Cookie": "connect.sid=msw-cookie;HttpOnly;Path=/", }, }); }), ];

  • react
  • next.js
  • react-query
  • next-auth
  • msw
댓글 1 좋아요 0 조회수 1385

클라이언트 컴포넌트 자식으로 서버 컴포넌트를 넣었을 때의 원리에 대해서 질문있습니다!

미해결

Next + React Query로 SNS 서비스 만들기

서버 컴포넌트가 프론트 서버에서 미리 렌더링되는 것으로 알고 있었습니다. 이것이 맞을까요?? 클라이언트 컴포넌트랑 서버 컴포넌트의 렌더링 방식을 찾아봤음에도 여전히 헷갈리는데 시간적 여유가 되신다면 쉽게 알려주실 수 있을까요?? 클라이언트 컴포넌트 사이에 서버 컴포넌트를 넣으면 렌더링 동작이 어떻게 수행되는지 궁금합니다. 강좌에서는 PostArticle이라는 클라이언트 컴포넌트의 자식으로 서버컴포넌트를 넣는데, 공식문서에서는 클라이언트 컴포넌트가 DOM Tree의 끝에 오도록 하는 것을 권장하는 것으로 알고 있었는데 제가 잘못 알고 있던 것이었을까요??

  • react
  • next.js
  • react-query
  • next-auth
  • msw
이종민 댓글 2 좋아요 1 조회수 1923

x.com에 모달창에 url을 적용시킨 이유가 있을까요?

해결됨

Next + React Query로 SNS 서비스 만들기

x.com 을 보면 로그인도 그렇고 게시글 올릴때도 그렇고 모달창이 뜰때마다 그냥 화면에 띄우는 방식이 아니라 저렇게 모달창을 띄울수 있는 url 따로 만든 이유가 뭘까요? 관리가 더 편해서일까요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
쵸잉 댓글 1 좋아요 0 조회수 598

npm run start:dev 명령어 실행시 Error: connect ECONNREFUSED ::1:6379 에러 발생

미해결

Next + React Query로 SNS 서비스 만들기

해당 강의에서 postgresql 설치와 노드버전 18.17.0 환경에서 nest-prisma의 폴더를 다운 받은 후 npm i -> npx prisma migrate dev 까지는 순조롭게 진행되었으나 npm run start:dev에서 Error: connect ECONNREFUSED ::1:6379 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) { errno: -61, code: 'ECONNREFUSED', syscall: 'connect', address: '::1', port: 6379 } 에러가 발생했습니다 구글링을 해보니 레디스 서버가 구동이 안된 것 같다고 나오기도하고 서버쪽을 잘 몰라 질문 드립니다 .env 파일 입니다 DATABASE_URL="postgresql://postgres:비번@localhost:5432/zcom?schema=public" REDIS_URL=redis://localhost:6379 COOKIE_SECRET=cookienyamnyam

  • react
  • next.js
  • react-query
  • next-auth
  • msw
mun9927 댓글 4 좋아요 2 조회수 1425

API 요청 시, cookie 보내는 것에 대한 질문

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요! 제로초님! 보너스 강의까지 잘 챙겨보고 있습니다. 매번 감사합니다! 제 질문은..! server action 함수쪽에서 fetch config 객체에 credentials 을 include로 해줘야 쿠키(세션)를 API 요청 시 같이 태워서 보낼 수 있다고 설명해주셨는데, 혹시 이것이 next-auth 로부터 도움을 받는 것일까요? 강의 수강 후, next 14로 프로젝트를 구현하고 있는데, fetch 할 때, credentials 를 include 해주었음에도 불구하고, 브라우저 application 탭에서 확인 할 수 있는 쿠키가 태워지지 않아서요. 해당 쿠키는 서버에서 로그인 시에 set-cookie 해준 쿠키이고, 프론트엔드는 localhost , 서버는 ec2에 배포된 서버입니다. 그래서 현재는 server action 함수내에서 next.js에서 지원해주는 cookie() 를 이용해서 fetch config 객체 내 headers 에 직접 쿠키를 넣어주고 있는데, 강의에서는 credentials 만으로 API 요청시 쿠키(세션)을 잘 태워서 보내주고 있는 것 같아 질문을 남기게 되었습니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
withkey 댓글 2 좋아요 0 조회수 1072

섹션3. 날씨 재검증하기 NextRequest 질문입니다.

해결됨

손에 익는 Next.js - 공식 문서 훑어보기

콘솔로그 결과 안녕하세요 선생님, 강의를보고 간단하게 따라해보았는데요 NextRequest 타입의 req를 매개변수로 받아와서 req를 console.log 에 찍어보면 undefined가 뜹니다. 혹시 NextRequest 사용에 조건이 따로 있을까요? req.nextUrl.pathname 으로 url 도 가져와보고 싶고한데 생각처럼 잘 안되네요..

  • react
  • typescript
  • next.js
  • next.js13
가스라이팅의정석 댓글 1 좋아요 1 조회수 360

vanila-extract window 문제

해결됨

Next + React Query로 SNS 서비스 만들기

windows 에서 vanila-extract 의 문제점은 구체적으로 어떤 것일까요? https://github.com/vanilla-extract-css/vanilla-extract/issues/1086 해당 이슈가 맞는지 궁금합니다!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
부드러운 펭귄 댓글 1 좋아요 0 조회수 1047

서버사이드 렌더링을 할 때, 서버는 어디에 있는 건가요?

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

선생님, 안녕하세요. 너무 기초적인 질문일 수 있지만, 갑자기 궁금해져서 질문드립니다. 서버사이드 렌더링의 경우, 서버에서 pre-render된 코드를 만들어서 보내주고, 클라이언트에서 hydrate를 해서 페이지를 만든다고 알고 있습니다. 클라이언트 사이드 렌더링의 경우는 html코드와 js코드를 함께 보내서, 클라이언트에서 페이지를 만들구요. 서버사이드 렌더링을 할 때, pre-render된 코드를 만드는 서버는 각 클라이언트들의 컴퓨팅 자원을 사용하는 건지(클라이언트의 컴퓨터에서 만드는 건지), 아니면 배포하는 중앙(?)서버(aws ec2 또는 이 강의에서 처럼 vercel)의 컴퓨팅 자원을 사용하는 건지(서버에서 만드는 건지) 궁금합니다. 클라이언트 측에서 다 계산을 한다고 하면, 중앙(?)서버의 부담이 적을테지만, 중앙(?)서버에서 한다고 하면, 부담이 갈 수 있을 것 같아서요. 최근 next.js 14버전이 되면서 디비와 직접 통신하는 등 기능이 많이 생겼는데, 이 통신하는 등의 역할은 client side가 아닌 server side에서만 가능하더라구요. 그래서 server side라는 게 중앙서버 하나에만 있다면, 계산이 오래걸린다거나 트래픽이 늘어나거나 한다면 다른 사용자들에게도 영향을 끼치지 않을까 궁금했습니다.(자동 확장이 되지 않을때) 또, 이런식으로 간다면 따로 백엔드 서버가 필요없게 될 수도 있겠다라고도 생각해봤는데, 어떻게 보고계시는지도 궁금합니다.

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
google_user 댓글 2 좋아요 1 조회수 1210

서버 컴포넌트 관련 질문입니다!

해결됨

손에 익는 Next.js - 공식 문서 훑어보기

SSR 방식에 서버 컴포넌트와 클라이언트 컴포넌트를 둘 다 적절히 사용하는 것인가요?? 서버 컴포넌트는 데이터 페칭, 보안, 캐싱, JS 번들크기 감소와 같은 장점이 있고 event와 hook을 사용하지 못한다는 특징도 이야기해주셨는데, 그렇다면 데이터를 받아서(페칭해서) 클라이언트 컴포넌트에 데이터를 뿌려주는 느낌으로 조합해서 사용하는 건가요?? 서버컴포넌트는 event를 사용하지 않으므로, TTI를 개선하기 위해 나온 개념은 아닌거죠???

  • react
  • typescript
  • next.js
  • next.js13
이종민 댓글 5 좋아요 3 조회수 1747

ApolloError: request to http://mock.com/graphql failed, reason: response3.headers.all is not a function

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

33-05 강의에서 test에서 자꾸 이 오류가 뜹니다 apis.js import { graphql } from "msw"; const gql = graphql.link("http://mock.com/graphql") export const apis = [ gql.mutation("createBoard", (req, res, ctx) => { const { writer, title, contents } = req.variables.createBoardInput return res( ctx.data({ createBoard: { _id: "qqq", writer, title, contents, __typepname: "Board", }, }) ); }), // gql.query("fetchBoards", () => {}) ]; jest.setup.js import { server } from "./src/commons/mocks/index" beforeAll(() => server.listen()); afterAll(() => server.close()); index.test.tsx import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import StaticRoutingMovedPage from "../../pages/section33/33-05-jest-unit-test-mocking"; import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache, } from "@apollo/client"; import fetch from "cross-fetch"; import mockRouter from "next-router-mock"; jest.mock("next/router", () => require("next-router-mock")); it("게시글이 잘 등록되는지 테스트 하자!", async () => { const client = new ApolloClient({ link: new HttpLink({ uri: "http://mock.com/graphql", fetch, }), cache: new InMemoryCache(), }); render( <ApolloProvider client={client}> <StaticRoutingMovedPage /> </ApolloProvider> ); fireEvent.change(screen.getByRole("input-writer"), { target: { value: "맹구" }, }); fireEvent.change(screen.getByRole("input-title"), { target: { value: "안녕하세요" }, }); fireEvent.change(screen.getByRole("input-contents"), { target: { value: "방가방가" }, }); fireEvent.click(screen.getByRole("submit-button")); await waitFor(() => { expect(mockRouter.asPath).toEqual("/boards/qqq"); }); }); 도와주십쇼 ㅠㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
김무연 댓글 4 좋아요 0 조회수 678

섹션 31 댓글 기능 구현 과제 관련 질문

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 섹션 31 댓글 기능 구현 과제 중 궁금한 점이 있어 질문 남깁니다 댓글 리스트의 수정 아이콘 클릭 시 사진과 같은 화면이 나오도록 했고, 댓글 등록하기 presenter component를 재사용 했습니다 댓글 리스트 presenter 파일입니다 export default function CommentListUI(props) { return ( <S.Wrapper> {props.data?.fetchBoardComments.map((item) => ( <S.CommentListWrapper key={item._id}> {props.isEdit && props.commentId === item._id ? ( <CommentWriteUI></CommentWriteUI> ) : ( <S.Comment_Container> <S.profile_icon src="/02/profile_icon.png"></S.profile_icon> <S.Content_container> <S.Name_Star_container> <S.Text style={{ fontWeight: "600" }}>{item.writer}</S.Text> <S.ReviewStar_container style={{ marginLeft: "16px" }}> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> </S.ReviewStar_container> </S.Name_Star_container> <S.Text style={{ marginTop: "-15px", fontWeight: "500" }}> {item.contents} </S.Text> <S.Text style={{ fontSize: "12px", fontWeight: "400", color: "#BDBDBD", }} > {getDate(item.createdAt)} </S.Text> </S.Content_container> <S.Icon_container> <S.Icon style={{ backgroundImage: `url("/createComment.png")` }} onClick={() => props.onClickTEST(item._id)} ></S.Icon> <S.Icon style={{ backgroundImage: `url("/clear.png")` }} onClick={() => props.onClickDelete(item._id)} ></S.Icon> </S.Icon_container> </S.Comment_Container> )} </S.CommentListWrapper> ))} </S.Wrapper> ); } 삼항연산자를 사용해 나오는 화면을 다르게 했습니다 isEdit 변수는 수정하기 아이콘 클릭 시 true로 바뀌고, 삼항연산자 조건에 isEdit 변수만 사용하니 수정 아이콘을 클릭하지 않은 다른 댓글 리스트가 사라지면서 재사용한 댓글 등록 presenter 파일만 화면에 나와서 조건은 위와 같이 작성했습니다 여기서 문제는 수정 아이콘을 클릭해 나오는 댓글 등록 창은 container 파일에 작성한 함수가 작동하지 않는 것입니다 댓글 리스트 container 파일입니다 export default function CommentList() { const { data } = useQuery(FETCH_COMMENTS); const [deleteBoardComment] = useMutation(DELETE_COMMENTS); const onClickDelete = async (item) => { const pw = prompt("비밀번호를 입력해주세요."); try { await deleteBoardComment({ variables: { pw: pw, boardCommentId: item, }, refetchQueries: [{ query: FETCH_COMMENTS }], }); alert("삭제되었습니다."); } catch (error) { alert(error.message); } }; // 수정하기 아이콘 클릭 시 화면 변화 const [isEdit, setIsEdit] = useState(false); const [commentId, setCommentId] = useState(); const onClickTEST = (item) => { setIsEdit(true); setCommentId(item); }; // console.log(commentId); return ( <CommentListUI data={data} onClickDelete={onClickDelete} onClickTEST={onClickTEST} isEdit={isEdit} commentId={commentId} ></CommentListUI> ); } 댓글 등록 container 파일입니다 const [updateBoardComment] = useMutation(UPDATE_BOARD_COMMENT); const onClickUpdate = () => { // updateBoardComment({ // variables: { // updateBoardCommentInput: { // contents: contents, // rating: 0 // }, // password: pw, // boardCommentId: // } // }) console.log("Test"); }; return ( <> <CommentWriteUI onChangeWriter={onChangeWriter} onChangePw={onChangePw} onChangeContents={onChangeContents} onClickUpdate={onClickUpdate} ></CommentWriteUI> </> ); } onClickUpdate 함수는 댓글 작성 presenter 파일의 등록하기 버튼에 연결되어 있습니다 상세 페이지 로딩 시 나오는 댓글 등록창은 버튼 클릭 시 콘솔이 제대로 나오는데 댓글 리스트 수정 아이콘을 눌러 나오는 댓글 등록창에서는 버튼을 눌러도 콘솔 자체가 나오지 않습니다 댓글 과제 가이드를 확인해서 어떻게 수정하면 좋을지는 알았지만, 궁금한 점이 해소되지 않네요 궁금한 점은 삼항연산자, map 등 기능의 속성을 제대로 알지 못한 채 사용한 문제인지 코드 자체를 잘못 작성한 것인지 추가로 rating(별점) 데이터 활용법에 대한 힌트를 얻고 싶습니다 rating 값 1 = 별 1개 인가요? rating 숫자 데이터가 별과 어떻게 연결되는지 잘 모르겠습니다 부족한 점이 많아 질문이 너무 길어졌네요 항상 감사합니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
zero.1.0.one.xx 댓글 2 좋아요 0 조회수 611

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-- 위와 같은 오류가 발생합니다. 해결 부탁드립니다!

  • react
  • node.js
  • seo
  • graphql
  • next.js
dlwjdgus3217 댓글 2 좋아요 0 조회수 1279

SSR vs SSG

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

안녕하세요 강의 정말 잘 듣고있습니다! SSG가 SSR보다 사용자 경험이 좋은건 이해했습니다! 근데 한가지 더 의문점인건 SSG가 아니고 SSR을 선택해야하는 케이스가 있을까요? 라는 의문이 듭니다! 예를 들면 검색결과 페이지라던가 매번 매순간 페이지의 내용이 달라지는 페이지라면 SSG가 아니고 SSR로 만드는게 더 적합한 그런 케이스가 실무에서 있을까요?

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
박굿뜨 댓글 2 좋아요 1 조회수 501

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 는 조회가 되지 않습니다. 위와 같은 오류가 나오는데 제가 모르는 부분이 있는건지 데이터에 문제가 있는건지 잘 모르겠습니다.. !

  • react
  • node.js
  • seo
  • graphql
  • next.js
summery 댓글 2 좋아요 0 조회수 347

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 모두 끈질기게 시도해봤지만 능력부족 탓인지 성공하지 못했습니다.. 능력자분들께서 도움주시면 잊지않겠습니다!!

  • next.js
  • react
  • gcp
  • appengine
  • frontend
  • 배포
  • 환경변수
  • 빌드
  • build
  • googlecloudplatform
장준수 댓글 2 좋아요 1 조회수 1084

npm run dev시 password 다르다고 나옴

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

에러 종류: 위와 같은 환경에서 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.ts server running at https://localhost:4000 error: ����� "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' }

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
지말미 댓글 2 좋아요 0 조회수 712

api 질문입니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

포토폴리오 마이페이지 - 내포인트 부분을 작업하는 도중 api 질문입니다. fetchPointTransactionsOfBuying 이 내포인트 -> 구매내역 api로 알고있습니다. 피그마를 보면 거기서 판매자 데이터를 가져오고있는데 오류가 뜨네요.ㅠ 판매자 데이터를 가져오고 싶은데 여기서 seller {name} 이부분을 넣으면 데이터가 안가져오네요.. 판매자데이터가 없어서 그런건지 왜 그런지와 어떻게 해야하는지 두가지 모두 알고싶습니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
임프런 댓글 2 좋아요 0 조회수 381

lightsail ssl 적용 api 작성

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

안녕하세요 강의대로 lightsail을 이용해서 서버를 구축하였습니다 ssl 보안을 적용해서 https api를 만들고자 하는데 혹시 추천하시는 방법이 있을까요? linux계열로 생각해서 ssl를 적용하면 되는 건지 혹은 lightsail 자체에서 제공하는 loadbalence를 적용하면 되는 건지 궁금합니다

  • nestjs
  • https
  • ssl
  • lightsail
midbar.developer 댓글 1 좋아요 0 조회수 721

인기 태그

인프런 TOP Writers

주간 인기글