묻고 답해요

msw patch

미해결

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

안녕하세요 msw patch 관련해서 여쭤보고싶은게 있습니다! 제로초님 강의를 응용해서 프로젝트에 msw로 데이터들을 테스트 하고있습니다 handler에서 /users란 엔드포인트로 get요청후 데이터들을 받아온뒤 다시 수정이 필요해 patch handler를 생성했습니다. mutation을 통해서 patch 요청은 성공한거같은데 기존의 get으로 받아온 user데이터들을 수정하고 싶다면 어떻게 할수있을지 여쭤보고싶습니다 ! const mutation = useMutation({ mutationFn: async (e: FormEvent) => { e.preventDefault(); const updatedUser = { userId: product.userId, nickName: product.nickName, userFileUrl: product.userFileUrl, techStack: product.techStack, position: product.position, employmentStatus: product.employmentStatus, year: product.year, links: product.links, alarmStatus: product.alarmStatus, content: product.content, softSkill: product.softSkill, }; fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/users`, { method: "PATCH", body: JSON.stringify(updatedUser), }); }, }); import { bypass, http, HttpResponse } from "msw"; import { hotPeople, peoples, users } from "./peopleData"; export const handlers = [ http.get("/peoples/hot/:tag", () => { return HttpResponse.json(hotPeople); }), http.get("/peoples", ({ request, params }) => { return HttpResponse.json(peoples); }), http.get("/users", () => { return HttpResponse.json(users); }), http.patch("/users", async ({ request }) => { return HttpResponse.text("success?"); }), ]; export default handlers;

• react
• next.js
• react-query
• next-auth
• msw

로그인 모달창 새로고침 시 배경 메인 페이지 사라지는 현상

미해결

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

로그인 버튼을 클릭하면 우선 '/login' 주소로 이동했다가 'i/flow/login'으로 이동하기 때문에 이때 '/login'에서 배경이 메인 컴포넌트를 보여줘야 메인 페이지가 바탕이 되고로그인 모달 창을 띄운다는 점은 이해했습니다. 따라서 app/(beforeLogin)/login/page.tsx 에서 Main 컴포넌트를 보여주도록 했습니다. export default function Login() { const router = useRouter(); router.replace("/i/flow/login"); return <Main />; } 문제는 '/i/flow/login' 에서 새로고침하면 모달 창은 그대로지만 배경은 메인 페이지가 아닙니다. 이때 아래와 코드와 같이 따로 Main 컴포넌트를 불러오면 새로고침 시, 배경은 메인 페이지로 잘 나옵니다.그런데 강의와 깃허브 코드를 보니 LoginModal 컴포넌트만 보여주고 있습니다. LoginModal 컴포넌트만 있어도 app/(beforeLogin)/page.tsx에서 Main 컴포넌트를 보여주고 있으므로 app/(beforeLogin)/layout.tsx에서 Main 컴포넌트가 {children}에 할당된다고 생각했습니다. 따라서 아래 코드에서 Main 컴포넌트가 없어도 배경은 메인 페이지가 나온다고 생각했습니다. 아래 코드와 같이 Main 컴포넌트가 있으면 새로고침 시, 메인 페이지가 배경이 되고 그 위에 로그인 모달창이 띄워지지만 Main 컴포넌트가 없으면 새로고침 시, 메인 페이지가 빈 페이지가 나옵니다. 여기서 Main 컴포넌트를 넣어서 해결해도 되는건지 의문이 들었습니다. 아래 코드에서 Main 컴포넌트를 넣지 않으면 Main 페이지가 어떻게 배경으로 보여지는 건지 알고 싶습니다! import LoginModal from "@/app/(beforeLogin)/@modal/(.)i/flow/login/page"; import Main from "@/app/(beforeLogin)/_component/Main"; export default function Page() { return ( <> <LoginModal /> <Main /> </> ); }

• react
• next.js
• react-query
• next-auth
• msw

[공유] cy.visit() failed trying to load;

미해결

2시간으로 끝내는 프론트엔드 테스트 기본기

위 화면처럼 connect ECONNREFUSED::1:54382등 locahost에 접근할 수 없다고 나오면 cypress.config.ts에서 baseurl 설정해야합니다. ( https://parkparkpark.tistory.com/186) import { defineConfig } from "cypress"; export default defineConfig({ e2e: { baseUrl: "http://localhost:3000", setupNodeEvents(on, config) { // implement node event listeners here }, }, });

• react
• jest
• 소프트웨어-테스트
• Cypress
• storybook
• chatgpt

아주 기초적인 질문입니다.

해결됨

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

현재 next.js 를 생성시킨후, 서버 start를 시킨후, 화면을 수정하면, 화면이 리로딩되고 있지 않습니다. 계속 새로 빌드를 해야지만, 화면 소스가 바꼈을 경우, 리로딩이 되는건가요?

• seo
• next.js
• vercel
• csr
• ssg
• ssr

[1.2장 상품목록 화면] 1.2.3 Button ...rest 관련 질문 드립니다.

미해결

[React 2부] 고급 주제와 훅

안녕하세요. 아래 질문에 대한 답글을 보고 …rest에 대해 이해를 했는데요. https://www.inflearn.com/questions/1186424 몇 가지 궁금한 점이 생겨 질문 드립니다! 강의에서 나온 방식이 1번 어트리뷰트로 버튼 컴포넌트에 인자를 전달하는 것 맞을까요? App.jsx <Button styleType={"brand"} onClick={() => console.log("TODO: 주문하기 클릭")} > 주문하기 </Button> Button.jsx const Button = ({ styleType, block, ...rest }) => { let className = 'Button'; if (styleType) className += ` ${styleType}`; if (block) className += ` block`; return <button className={className} {...rest}/> }; export default Button; 위 App.jsx의 Button에 대한 JSX 코드를 JS 코드로 변환하면 아래와 같이 변환 되나요? onClick은 어떤 식으로 변환되는지 궁금합니다. createElement( Button, // 함수 { styleType: "brand" }, // props onClick: () => console.log("TODO: 주문하기 클릭") // children "주문하기 , 결제하기" // children ) onClick도 …rest 나머지 매개변수 구문에 들어갔는데, 개발자 도구에서 props를 보면 onClick은 onClick이라는 프롭스에 맵핑 되어 있습니다. rest 객체에 children, onClick 속성이 포함되어 있어서 내부적으로 구분해주는 것인가요? 아래처럼 작성 하는 게 2번 태그 안에 인자를 전달하는 방식 맞을까요? <Button styleType={"brand"} onClick={() => console.log("TODO: 주문하기 클릭")} children={"주문하기"} > </Button> 감사합니다.

• react
• React-Context
• react-hooks
• react-router
• react-component

css 관련 질문드립니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요 선생님! 너무나 좋은 강의 잘 듣고 있습니다. 17:28 에서 .EmotionItem 을 가운데 정렬할 때 text-align: center 를 사용하셨는데요. display: flex 와 text-align: center 중 어떤 것을 사용할지에 대한 기준이 있으실까요? 리액트 강의라 크게 중요한 부분은 아니지만 수업 중 flex 를 사용하신 경우가 더 많았던 것 같아 질문을 드려봅니다! 🥺

• javascript
• react
• node.js

태그 옵션 { } 사용

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! DiaryList.jsx 파일에서 option이나 Button 태그의 옵션에 보면 value={"latest"}나 type={"POSITIVE"} 이런 식으로 { } 를 사용하셨던데 없이 해도 출력이 잘 되는데 꼭 써줘야 하는지 궁금합니다.

• javascript
• react
• node.js

마지막 배포하기에서 npm install -g vercel을 한 뒤에도 인식을 못하는 분들 이거 확인해보세요!

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

한 30분동안 고생했는데.. 후.. 다른분들은 고생하지 마시길 바라며.. vercel : 이 시스템에서 스크립트를 실행할 수 없으므로 위치 줄:1 문자:1 + vercel login + ~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess 이런 문구가 나온다면 windows powerShell을 관리자로 실행하셔서 현재 권한상태 확인(get-ExecutionPolicy) - Restricted로, 로컬에서 작성한 스크립트를 실행할 수 없는 상태 오류 권한 상태를 Set-ExecutionPolicy RemoteSigned를 하고 Y로 변경한다. get-ExecutionPolicy로 변경이 되었는 지 확인하시면 됩니다. 꼭, 관리자 실행으로 PowerShell을 키셔야 가능합니다!!!! 다른분들은 고생하지 마시길 바랍니다 ㅠ

• react
• node.js

flask, react 로 개발한 웹앱을 모바일로 접속시 이미지가 안나오는 오류

미해결

안녕하세요. 저는 flask와 react를 활용해서 프로젝트를 진행하고 있는 대학생입니다. flask는 5000번, 리액트는 3000번 포트를 사용하고 리액트에서 웹앱의 배경화면 이미지를 flask의 라우팅 함수를 통해 받아오는 중입니다. localhost :포트번호 에 접속할 때는 문제가 없고, 같은 와이파이에서 다른 노트북으로 아이피:포트 로 접속해봐도 문제가 없습니다. 다만, 모바일에서 아이피:포트 에 접속할 때는 이미지가 로딩되지 않는 문제가 있습니다. 이미지 외에 네비게이션은 잘 나오고 기타 동작은 문제가 없는 것으로 확인했습니다. react에서 로컬 디렉토리에 있는 이미지를 랜더링할 땐 모바일에서도 이미지가 잘 나옵니다. flask에서 받아온 이미지를 랜더링할 때만 모바일 접속시 이미지가 안나옵니다. 아이패드로 접속시 화면 맥에서 로컬호스트 접속시 화면 3. 코드 @app.route('/map-image/') def serve_map_image(): return send_from_directory('static', 'map.png') 리액트파일에서 아래처럼 flask서버를 통해 받아옵니다. const imageUrl = " http://localhost:5000/map-image " ; 관련 경험이 있으신 분들의 많은 도움과 조언 부탁드립니다..

• react
• flask
• 이미지
• 랜더링
• 모바일
• 웹어플리케이션
• 리액트

vercel 배포했는데 잘 되다가 안들어가집니다.

미해결

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

안녕하세요 제로초님 강의 잘 듣고있었는데, 강의 질문이 아니라 다른 질문이라 죄송합니다. 당장 다음주 월요일부터 심사가 시작되는 공모전에 나갈 프로젝트인데 잘 되던게 갑자기 안들어가져서요 ㅠㅠㅠㅠ 약 한달전에 배포 cicd 설정 다 해놓고 어제밤까지만해도 문제없이 잘 들어가졌는데 오늘 갑자기 안들어가지네요.. dns_probe_finished_nxdomain 이라고 뜬대요 근데 제 pc로는 캐시를 다 삭제하고 들어가도 잘 되거든요 근데 모바일에선 안되고 다른 사람은 안들어가진다고 하는데 원인이 뭘까요..? 제 pc에서도 크롬에서만 들어가지고 다른 브라우저는 안됩니다. 메일로 vercel에서 뭐 온것도 없습니다.. vercel 설정에서 domains에 문제도 없구요. 메일로 vercel에서 뭐 온것도 없습니다. 빌드 에러도 없구요 무료플랜이었어서 유료플랜으로 업그레이드 했는데도 똑같습니다.. ㅠㅠ 도메인이름은 공개적으로 못 적지만 개인적으로 알려드리겠습니다. ci/cd 되어있어서 main에 계속 push해봐도 빌드 잘 되는데 들어가지지를 않아요...

• next.js
• vercel
• dns
• domain

CRUD에서 CR만 배우는건가요

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

수정 삭제는 sqlite로 직접 만져야되나요

• HTML/CSS
• javascript
• react
• node.js
• react-native
• 머신러닝
• express
• tensorflow

searchParams props

미해결

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

안녕하세요 search 페이지 props에서 searchParams props가 기본적으로 제공된다고 알고있는데 저는 콘솔로 찍어보니 나오지 않습니다..! 혹시 제가 잘못적용한건지 아니면 다시한번 확인해야 될곳이 있을까요?/ import SelectBox from "@/components/common/SelectBox"; import SelectStack from "@/components/common/SelectStack"; import Peoples from "@/components/people/Peoples"; import SearchForm from "@/components/common/SearchForm"; type Props = { searchParams: { page: string; size: string; sort?: string; keyword?: string; position?: string; teckStack?: string; }; }; export default function Page({ searchParams }: Props) { console.log("??", searchParams); return ( <div> <div className="relative flex items-center gap-4"> <h1 className="text-[36px] font-bold">People</h1> </div> <div className="flex justify-between"> <div className="flex gap-3"> <SelectBox options={option} title="포지션" /> <SelectStack /> </div> <SearchForm keyword={searchParams.keyword as string} /> </div> <Peoples searchParams={searchParams} /> </div> ); }

• react
• next.js
• react-query
• next-auth
• msw

프리즈마로 api만드시는 강의는 언제쯤 나올지 알 수 있을까요?

미해결

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

안녕하세요 선생님 프리즈마로 api만드시는 강의는 언제쯤 나올지 알 수 있을까요? 직접만든 api랑 이번수업에서 배울next로 플젝을 만들고 싶은데 궁금합니다.

• react
• next.js
• react-query
• next-auth
• msw

next-auth로 다시 한번 질문을 올립니다...

해결됨

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

공지의 올려주신대로 auth.ts 를 수정하였으며 loginModal 의 redirect:true export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, callbacks: { // async signIn() // async authorized({ auth }) { // if (!auth) { // // 쿠키가 없으면 로그인 페이지로 돌리기 // return NextResponse.redirect("http://localhost:3000/i/flow/login"); // } // return true; // }, }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, // NEXT_PUBLIC_BASE_URL=http://localhost:9090 { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), } ); // 여기 주목!!! 서버에서 에러가 발생할 때 그 에러 내용이 서버에 담겨 있을 겁니다. console.log(authResponse.status, authResponse.statusText); if (!authResponse.ok) { const credentialsSignin = new CredentialsSignin(); if (authResponse.status === 404) { credentialsSignin.code = "no_user"; } else if (authResponse.status === 401) { credentialsSignin.code = "wrong_password"; } throw credentialsSignin; } const user = await authResponse.json(); console.log("user", user); // id, name, image, email만 허용 return { id: user.id, name: user.nickname, image: user.image, }; }, }), ], }); 아래와 같은 오류가 계속 해서 발생하고 있습니다. TypeError: next_dist_server_web_exports_next_request__WEBPACK_IMPORTED_MODULE_0__ is not a constructor pakage.json 의 버젼은 아래와 같이 사용하고 있고요 "@auth/core": "^0.27.0", "next-auth": "^5.0.0-beta.16", 혹시 이 부분의 같은 에러가 나오신 분들 중 해결 하신 분들이 있을까요?

• react
• next.js
• react-query
• next-auth
• msw

섹션 7 GraphQL 관련 질문 드립니다

해결됨

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

안녕하세요 섹션 04-05-graphql-mutation-product 따라하고 있는데 도중에 저런 에러 메세지가 떴습니다. 디버깅 하려고 해도 Network 부분에 message 부분이 안 뜨네요ㅠ 검색해보니 쿠키 및 인터넷 기록 삭제해보라고 나오는데.. 삭제해도 해결이 안 되고요ㅠㅠ 어떻게 해야 해결될까요? 도움 부탁드립니다

• react
• node.js
• seo
• graphql
• next.js

앱 구조에 대해서

미해결

따라하며 배우는 리액트 네이티브 기초

혹시 expo를 설치를 했는데 구조가 너무 달라서 질문드립니다! app.js 파일도 없고 component hooks script폴더들이 있는데 어떤식으로 사용이되는 파일인지 모르겠습니다

• react
• react-native
• expo

8.2에서 보이는 site안에 page파일과 7.6에서 보이는 page파일의 코드가 다른거 같습니다.

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

8.2에서 보이는 site안에 page파일과 7.6에서 보이는 page파일의 코드가 다른거 같습니다. 깃허브에는 7.7 챕터가 따로 있던데... 혹시 그 브랜치에 site안의 page파일을 그대로 사용하면 될까요??

• react
• 인터랙티브-웹
• 클론코딩
• next.js
• tailwind-css
• zustand

is not valid JSON 에러 ..!

미해결

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

import { http, HttpResponse } from "msw"; const testData = [ { result: "success", userId: 2, nickname: "닉네임", favoriteCount: 223, viewCount: 336, position: "Backend", userFileUrl: "/Users/user/Desktop/pictures/userPicture.jpg", year: "경력없음", techStack: "react, java, ---", softSkill: "소통, 적극성, ---", links: "http://블로그주소", alarmStatus: true, content: "안녕하세요 구인 중입니다", }, ]; export const handlers = [ http.post("/api/post", () => { return HttpResponse.text(JSON.stringify("ok")); }), http.get("/api/get", ({ request }) => { console.log("request", request); return HttpResponse.json(testData); }), ]; export default handlers;"use client"; import { redirect } from "next/navigation"; export default function Home() { const handleClick = () => { fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/get`, { method: "get", }) .then((res) => console.log("res", res.json())) // JSON 형식으로 변환된 데이터를 가져옴 .then((data) => console.log("res?", data)); // JSON 데이터를 로그에 출력 }; return ( <> <div> <button onClick={handleClick}>test btn</button> <p>계정을 생성하세요</p> <form> <div> <> <label htmlFor="id">아이디</label> <input type="text" id="id" name="id" required /> </> <> <label htmlFor="name">이름</label> <input type="text" id="name" name="name" required /> </> <button type="submit">가입하기</button> </div> </form> </div> </> ); } browser.ts, handlers.ts, http.ts, MSWComponent.tsx, server.ts 는 제로초님과 다 동일하게 설정하였고 get부분에서 위와같이 하였는데 Unexpected token '<', "<!DOCTYPE "... is not valid JSON 라는 에러가 계속 발생합니다 ㅠㅠ 어떤부분이 문제일까요.. ! console.log("res", res.json())) 이부분에서 res만 콘솔로 확인하면 이렇게 나옵니다..!

• react
• next.js
• react-query
• next-auth
• msw

무한 스크롤 prefetch SSR 로그인 쿠키 관련 질문

해결됨

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

안녕하세요 제로초님, api/users/{id} 에서 Followers 데이터는 제가 상대방을 팔로잉 했고 로그인 정보 쿠키가 잘 전달되면 상대방의 팔로워 수와 관계없이 제가 팔로우 했다면 저의 userId만 배열에 담겨서 돌아오기 때문에 api/posts/followings 혹은 api/posts/recommends의 Comments 데이터도 이와 동일할 것이라고 생각했습니다. 추천 포스트는 prefetch를 진행하고( Suspense를 적용하지 않음) 팔로잉 포스트는 SSR을 할 때 서버에서 로그인 여부를 판단하는 쿠키를 함께 보내야 하기 때문에 prefetch에서는 next의 cookies를 사용해서 쿠키를 전달했습니다 . 하지만 Comments 배열에 로그인 유저가 아닌 다른 유저의 id도 함께 날라옵니다. 추천 포스트가 아닌 팔로잉 포스트는 useSuspenseInfiniteQuery를 사용했는데 로그인 유저의 id만 잘 전달받았습니다. 이게 Suspense 내부에 있어서 그런가 싶어서 Suspense를 걷어내고 prefetch만 사용했을 때도 동일하게 로그인 유저가 아닌 다른 유저의 id도 확인할 수 있었습니다. 왜 로그인 쿠키를 보내는데도 다른 유저의 정보도 날라오는지 궁금합니다. 어디가 잘못된 것일까요? useSuspenseInfiniteQuery를 사용한 팔로잉 포스트는 추천 포스트와 어떤점이 달라서 정상 작동한 것일까요? 추가) 이 글 작성하고 추천 포스트에도 useSuspenseInfiniteQuery를 적용했는데 팔로잉 포스트처럼 안 나오고 이전과 동일하게 다른 유저의 id도 함께 날라오는데 왜 그럴까요? 추천 포스트 결과 현재 로그인 한 유저의 id는 'jihwan3' Comments에 'jihwan2'도 함께 날라오는중 팔로잉 포스트 결과 현재 로그인 한 유저의 id는 'jihwan3' Comments에 'jihwan3'만 날라오는 중 Hearts도 jihwan3가 좋아요를 안 눌러서 비어있는 모습 page.tsx import { Suspense } from "react"; import { auth } from "@/auth"; import { Container } from "./_component/styled"; import HomeTab from "./_component/HomeTab"; import HomeTabProvider from "./_component/HomeTabProvider"; import PostForm from "./_component/PostForm"; import SuspenseDecider from "./_component/SuspenseDecider"; import Loading from "../_component/LoadingUI"; export default async function Home() { const session = await auth(); return ( <Container> <HomeTabProvider> <HomeTab></HomeTab> <PostForm me={session} /> <Suspense fallback={<Loading />}> {/* @ts-expect-error Server Component */} <SuspenseDecider /> </Suspense> </HomeTabProvider> </Container> ); } SuspenseDecider.tsx import { QueryClient, HydrationBoundary, dehydrate } from "@tanstack/react-query"; import getRecommendPosts from "../_lib/getRecommendPosts"; import getRecommendPostsServer from "../_lib/getRecommendPostsServer"; import PostDisplay from "./PostDisplay"; export default async function SuspenseDecider() { const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryKey: ["posts", "recommends"], queryFn: getRecommendPostsServer, initialPageParam: 0, getNextPageParam: (lastPage, pages) => lastPage.at(-1)?.postId, pages: 1, }); return ( <HydrationBoundary state={dehydrate(queryClient)}> <PostDisplay /> </HydrationBoundary> ); } getRecommendPostsServer.ts import { QueryFunction } from "@tanstack/query-core"; import { Post as IPost } from "@/model/Post"; import { cookies } from "next/headers"; type Prop = { pageParam: number; }; const getRecommendPostsServer: QueryFunction<IPost[], [_1: string, _2: string], number> = async ({ pageParam }: Prop) => { const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/recommends?cursor=${pageParam}`, { method: "get", headers: { Cookie: cookies().toString(), }, }); if (response.ok) return response.json(); else throw new Error(); }; export default getRecommendPostsServer; postDisplay.tsx "use client"; import { use } from "react"; import { TabContext } from "./HomeTabProvider"; import RecommendPosts from "./RecommendPosts"; import FollowingPosts from "@/app/(afterLogin)/home/_component/FollowingPosts"; export default function PostDisplay() { const { selectedMenu } = use(TabContext); if (selectedMenu === "recommend") { return <RecommendPosts />; } return <FollowingPosts />; } RecommendPosts.tsx "use client"; import { useEffect, Fragment } from "react"; import { InfiniteData, useInfiniteQuery } from "@tanstack/react-query"; import { useInView } from "react-intersection-observer"; import getRecommendPosts from "../_lib/getRecommendPosts"; import Post from "../../_component/Post"; import { Post as IPost } from "@/model/Post"; export default function RecommendPosts() { const { isFetching, fetchNextPage, hasNextPage, data } = useInfiniteQuery<IPost[], Object, InfiniteData<IPost[]>, [_1: string, _2: string], number>({ queryKey: ["posts", "recommends"], queryFn: getRecommendPosts, initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.at(-1)?.postId, }); const { ref, inView } = useInView({ /* Optional options */ threshold: 0, delay: 100, }); useEffect(() => { if (inView) !isFetching && hasNextPage && fetchNextPage(); }, [inView, isFetching, hasNextPage, fetchNextPage]); if (!data) return null; // 이거 에러는...? type error인데.. -> InfiniteData로 해결 return ( <> {data.pages.map((ele: IPost[], idx: number) => ( <Fragment key={idx}> {ele.map((post: IPost) => ( <Post key={post.postId} post={post}></Post> ))} </Fragment> ))} <div ref={ref} style={{ height: "50px" }}></div> </> ); } getRecommendPost.ts import { QueryFunction } from "@tanstack/query-core"; import { Post as IPost } from "@/model/Post"; type Prop = { pageParam: number; }; const getRecommendPosts: QueryFunction<IPost[], [_1: string, _2: string], number> = async ({ pageParam }: Prop) => { const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/recommends?cursor=${pageParam}`, { method: "get", credentials: "include", }); if (response.ok) return response.json(); else throw new Error(); }; export default getRecommendPosts; FollowingPosts.tsx "use client"; import { Fragment, useEffect } from "react"; import { useSuspenseInfiniteQuery, InfiniteData } from "@tanstack/react-query"; import { useInView } from "react-intersection-observer"; import getFollowingPosts from "../_lib/getFollowingPosts"; import Post from "../../_component/Post"; import { Post as IPost } from "@/model/Post"; export default function FollowingPosts() { const { isFetching, fetchNextPage, hasNextPage, data } = useSuspenseInfiniteQuery<IPost[], Object, InfiniteData<IPost[]>, [_1: string, _2: string], number>({ queryKey: ["posts", "followings"], queryFn: getFollowingPosts, initialPageParam: 0, getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => lastPage.at(-1)?.postId, }); const { ref, inView } = useInView({ threshold: 0, delay: 100, }); useEffect(() => { if (inView) !isFetching && hasNextPage && fetchNextPage(); }, [inView, fetchNextPage, hasNextPage, isFetching]); if (!data) return null; return ( <> {data.pages.map((ele: IPost[], idx: number) => ( <Fragment key={idx}> {ele.map((ele) => ( <Post key={ele.postId} post={ele}></Post> ))} </Fragment> ))} <div ref={ref} style={{ height: "100px" }}></div> </> ); }

• react
• next.js
• react-query

mockServiceWorker.js 파일이 프로젝트내에 포함되어 있어야 하나요?

해결됨

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

실무에 적용하려고 하니 msw 에서 많이 막히네요 ㅠ 그래서 올려주신 깃헙 프로젝트를 샅샅히 훑어보고 있는데 mockServiceWorker.js 이 파일과 package.json에 "msw": { "workerDirectory": "public" } 요런 부분이 있더라고요. 요것들의 역할이 뭔지 알수 있을까요? msw 사이트에 가서 Getting started 를 가봐도 안나와 있는것 같아서 궁금합니다!

• javascript
• react
• 소프트웨어-테스트
• vitest