실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
unit-test-example에서 테스트를 실행하니 테스트코드 통과 여부에 관계없이 Test result not found만 뜨며 실패합니다. 이유를 모르겠어요ㅠㅠ Test result not found. If you set `vitest.commandLine` please check: Did you set `vitest.commandLine` to `run` mode? (This extension requires `watch` mode to get the results from Vitest api) Does it have the ability to append extra arguments? (For example it should be `yarn test --` rather than `yarn test`) Are there tests with the same name? Can you run vitest successfully on this file? Does it need custom option to run?
안녕하세요 강의를 듣고 next-auth를 활용하여 개발 중에 궁금한 점이 생겨 질문 드립니다. 프로젝트에서 일반 로그인과 소셜 로그인을 모두 사용하고 있어 next-auth의 signin callback에서 로그인일 경우 자체 서버에 요청하여 accessToken과 refreshToken을 발급 받고 jwt callback에서 엑세스 토큰의 만료 시간을 체크하여 만료 시에 재발급 요청이 되도록 구현하고 있습니다. 이렇게 구현했을 경우 간헐적으로 서버 시간과의 타이밍 이슈 때문인지 api 요청 시에 401 토큰 만료 에러가 발생하는 순간이 존재합니다. 따라서 401 상태코드일 경우에 refreshToken 토큰 재발급 요청을 하려고 하는데 refreshToken이 현재 next-auth에서 jwt 콜백에서 리턴되어 jwt토큰으로 생성되어 있습니다. 이 401일 경우 재발급 요청 처리를 클라이언트 단에서 할 경우 refreshToken이 노출되어 보안상 이슈가 있을 것으로 예상이 되는데 서버단에서 처리를 하려면 next에서 어디서 처리를 하면 좋을 지 문의드립니다. async signIn({ account, user, credentials }) { const cookieStore = cookies(); const authorizationParams = JSON.parse( cookieStore.get("authorization-params")?.value ?? "" ); const action = authorizationParams.action; user.platform = authorizationParams.platform; if (!account?.provider || !sns_type_map[account.provider]) { throw new Error("Unsupported provider"); } user.snsType = sns_type_map[account.provider]; if (action === auth_action_type.signin) { return handleSignIn(user); // getAccessToken } if (action === auth_action_type.signup) { return handleSignUp(); } return false; }, async jwt({ token, account, user }) { // Initial sign in if (account && user) { return { ...token, ...user, accessToken: user.refreshToken, expiresAt: new Date( Date.now() + (user?.expiresIn ?? 0) ).toISOString(), refreshToken: "refreshtoken", }; } // Return previous token if the access token has not expired yet if (new Date() < new Date(token.expiresAt as string)) { console.log("@@@@@@valid"); return token; } else { // Access token has expired, try to update it console.log("@@@@@@expired"); const cookieStore = cookies(); const authorizationParams = JSON.parse( cookieStore.get("authorization-params")?.value ?? "" ); const body = { .... }; const tokenData = await authApi.reissueAccessToken(body); // reissue token return { ...token, ...user, accessToken: tokenData.accessToken, expiresAt: new Date( Date.now() + (tokenData.expiresIn ?? 0) ).toISOString(), refreshToken: tokenData.refreshToken, }; } }, 미들웨어에서 401 상태 코드 처리하는 것도 알아보았으나 일반적인 방식인지 궁금합니다. 미들웨어에서 401일때 재발급 요청 시 새로운 엑세스 토큰으로 재요청이 정상적으로 되는 것은 확인했으나 다시 next-auth의 jwt토큰에 재발급된 값을 세팅해줘야 하는데 어떻게 해야할지도 궁금합니다. import { NextResponse } from 'next/server'; import { getToken } from 'next-auth/jwt'; export async function middleware(request) { const token = await getToken({ req: request, secret: process.env.AUTH_SECRET }); if (request.nextUrl.pathname.startsWith('/gateway')) { const accessToken = token?.accessToken; const headers = new Headers(request.headers); if (response.status === 401) { const refreshToken = token?.refreshToken; const refreshResponse = await fetch("/reissueToken") const refreshData = await refreshResponse.json(); if (refreshResponse.ok) { const newAccessToken = refreshData.accessToken; headers.set('Authorization', `Bearer ${newAccessToken}`); const newResponse = NextResponse.next({ request: { headers: request.headers, }, }); } // 토큰 재발급 실패 시 처리 return NextResponse.redirect('/login'); } return NextResponse.next(response); } return NextResponse.next(); }
테스트는 내부 구현에 의존하지 않고 사용자 입장에서 작성하는게 좋다고 이해했습니다. 그런데 ProductFilter 컴포넌트의 통합테스트를 작성하시면서 "상품명을 수정하는 경우 setTitle 액션이 호출된다" , "최소 가격 또는 최대 가격을 수정하면 setMinPrice와 setMaxPrice 액션이 호출된다" 와 같이 사용자가 값을 변경할 때 특정 액션 함수가 호출되는지를 검증하셨는데, 이건 내부 구현에 의존적인 테스트라고 볼 수 없을까요? 추후 Store 내부 구조가 바뀌거나 아예 Store를 사용하지 않는 식으로 구현 방법이 바뀌더라도 사용자 입장에선 달라지는게 없으니 테스트가 실패하지 않는게 좋은 테스트가 아닌지 궁금합니다. 2. api를 호출하는 커스텀 훅을 사용하는 컴포넌트를 테스트하실 때 msw를 이용해 해당 api의 응답을 모킹하셨는데, 커스텀 훅 자체를 모킹해서 훅이 반환하는 값을 원하는대로 지정하는 것도 가능할 것 같습니다. 이렇게 api 대신 훅을 모킹하여 테스트하는 것에 대해 어떻게 생각하시는지 궁금합니다.
안녕하세요 강사님. 수업노트에 올려주신 iterator와 iterable 강의까지 들었는데 잘 이해가 안되는 부분이 있어 질문합니다. iterator와 iterable강의에서 ' iterator 는 Collection이나 Aggregate 객체를 순횐하는 방법을 제공하는 것' 이라고 보았습니다. 구현 예제까지 본 후에는 '방법을 제공한다 = 어떤 동작을 제공한다 = 함수를 제공한다' 라고 생각했습니다. (예제에서는 hasNext(), next() 함수를 제공함) 그런데 [추가섹션] 배열의 순회 강의에서 배열의 keys() , values() , entires() , [Symbol.iterator]() 함수를 사용하는 걸 보면 각 함수들이 반환하는 iterator들은 함수를 제공하지 않는 걸로 보여서요. 이 함수들의 반환값이 for문으로 순회 가능한(iterable한) 객체들이고, 그럼 iterable한 객체를 만들어주는 keys()같은 함수들이 곧 'iterator'인게 아닌가 싶은데 왜 함수들의 반환값이 iterator가 되는 것인지 궁금합니다!
Static Page로 설정되는 기준은 동적함수가 아니거나 데이터 캐시에 저장해주는 경우 설정된다고 하셨는데요 만약 그렇다면 강의 자료에서도 백엔드에서 받아온 데이터가 데이터 캐시부분을 그냥 지나가는 게 아니라 'SET' 해야하는거 아닌가 궁금합니다 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
혹시 해당 내용을 공식문서에서 직접 찾아보려구 했는데 안나와서요 해당 내용이 문서 어디를 참조하면 될까요? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
> onebite-books-server@0.0.1 seed > tsx prisma/seed/seed.ts file:///Users/majunghan/dev/onebite-books-server/node_modules/tsx/dist/resolve-ts-path-DUkQ8uuR.mjs:1 import o from"node:path";import{parseTsconfig as x,getTsconfig as m,createFilesMatcher as u,createPathsMatcher as g}from"get-tsconfig";let i,r,l=!1;const j=s=>{let t=null;if(s){const e=o.resolve(s);t={path:e,config:x(e)}}else{try{t=m()}catch{}if(!t)return}i=u(t),r=g(t),l=t?.config.compilerOptions?.allowJs??!1},P=` ^^^^^^^^^^^^^^^^^^ SyntaxError: The requested module 'get-tsconfig' does not provide an export named 'createPathsMatcher' npm run seed하고 이런 에러뜨면은 1. npm install get-tsconfig@latest 2. node modules 폴더 지우기 3. npm i 4. npm run seed 하시면 잘됩니다.
12.14)New 페이지 구현하기 2. 기능 강의를 따라 코드를 작성했는데 작성 완료 버튼을 누르면 데이터가 추가되지 않고 아래 사진과 같은 에러가 뜹니다. 왜 그런지 이유를 몰라 질문 드립니다. 소스코드는 깃헙에 올려놨습니다! https://github.com/dooheeyaa/section12
