강의대로 eslint 설정한 후 { "extends" : [ "react-app" ] } npm run dev 하면 아래와 같은 에러가 납니다. VITE v6.0.3 ready in 354 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help 오후 4:41:35 [vite] Internal server error: C:\Dev\fullstack-app\frontend\src\main.jsx 1:1 error Parsing error: The keyword 'import' is reserved ✖ 1 problem (1 error, 0 warnings) Plugin: vite-plugin-eslint File: C:/Dev/fullstack-app/frontend/src/main.jsx at TransformPluginContext._formatError (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47158:41) at TransformPluginContext.error (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47153:16) at TransformPluginContext.transform (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite-plugin-eslint/dist/index.mjs:1:1989) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async EnvironmentPluginContainer.transform (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47001:18) at async loadAndTransform (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:40852:27) 오후 4:41:35 [vite] Pre-transform error: C:\Dev\fullstack-app\frontend\src\main.jsx 1:1 error Parsing error: The keyword 'import' is reserved 파싱 오류 같은데 어느 설정파일을 수정해야 할까요?
11:42 아래와 같이 for in을 배열에서도 사용이 가능한 것 같습니다! 다만 권장되지는 않는 방법이라고 하네요. let arr = [1, 2, 3]; for (let i in arr) { console.log(arr[i]); } 권장되는 방법: for...of, 일반 for 루프, forEach() 메서드 등
먼저 next와 react의 버전은 각각 15버전과 19버전입니다 next 15 부터는 http.ts 의 코드가 간결하게 바뀌어서 적용해보던 중 세팅 단계에서 해당 오류가 발생하였습니다 TypeError: Cannot read properties of undefined (reading 'url' 구글에 검색해보니 최신버전에서도 발생하는 것 같습니다 ㅠㅠ
[문제점] MSW의 nodejs Server를 Server-Side 에서 실행하려고 할 때 Module not found Error '_http_common' 와 같은 에러 발생으로 빌드가 실패하는 상황을 겪고 있습니다. 저만 겪고 있는 상황인지 싶지만 질문 드립니다. [현상황] 아래와 같이 SSR Component안에서 API를 사용하여 데이터를 받아온 후 화면을 그리고나면, export const Home = async () => { const res = await fetch("https://api.github.com/users/zerocho"); const data = await res.json(); return ( <div className="flex flex-1 items-center justify-center"> <h1>{data.name}</h1> <img src={data.avatar_url} alt={data.name} className="rouneded" /> </div> ); }; 아래와 같은 화면을 확인 할 수 있습니다. 이를 MSW의 Server-side를 사용하기 위해서 Layout단에서 server를 listen하도록 실행하면 if ( process.env.NEXT_RUNTIME === "nodejs" && process.env.NODE_ENV !== "production" ) { const { server } = require("@/mocks/http"); server.listen(); } export default function RootLayout({ children }: { children: React.ReactNode; }): JSX.Element { return ( <html lang="en"> <body className={inter.className}> <MSWProvider> <Suspense>{children}</Suspense> </MSWProvider> </body> </html> ); } 아래와 같은 Build Error로 Module not found: Can't resolve '_http_common' 나게 됩니다. [찾아본 원인?] _http_common 이 Node.js built-in module인데, Next.js Webpack의 config에서 해당 module을 자동 import 하지 않아서 발생하는 에러라고 합니다. (출처: https://github.com/mswjs/msw/issues/2291 ) [시도한 해결 방안 1] - src/instrumentation.ts 파일을 아래와 같이 추가. export async function register() { if (process.env.NEXT_RUNTIME === "nodejs") { const { server } = await import("./mocks/http"); server.listen(); } } - next.config.js를 아래와 같이 수정 /** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, transpilePackages: ["@repo/ui"], experimental: { instrumentationHook: true }, }; 결과 동일 [시도한 해결방안 2] - next.config.js에 webpack 내용 추가 /** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, transpilePackages: ["@repo/ui"], experimental: { instrumentationHook: true }, webpack: (config, { isServer }) => { if (isServer) { if (Array.isArray(config.resolve.alias)) // server일시 browser를 제외 시킨다 config.resolve.alias.push({ name: "msw/browser", alias: false }); else config.resolve.alias["msw/browser"] = false; } else { if (Array.isArray(config.resolve.alias)) config.resolve.alias.push({ name: "msw/node", alias: false }); else config.resolve.alias["msw/node"] = false; } return config; } }; 결과 동일 [추가 조사한 내용들] - 현재 github issue에 아래와 같이 등록되어 있습니다. https://github.com/mswjs/msw/issues/2291 Server-Side를 사용하지 않고도 MSW를 사용할 수는 있지만, 해결 방안이 있을지 해서 질문드립니다!
[0] Failed running 'server/index.js' [1] [1] VITE v4.4.4 ready in 271 ms [1] [1] ➜ Local: http://localhost:5173/ [1] ➜ Network: use --host to expose [0] Restarting 'server/index.js' [0] file:///Users/kim-yongmin/test-example-shopping-mall/server/index.js:9 [0] import productsJSON from './response/products.json' assert { type: 'json' }; [0] ^^^^^^ [0] [0] SyntaxError: Unexpected identifier 'assert' [0] at compileSourceTextModule (node:internal/modules/esm/utils:337:16) [0] at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:164:18) [0] at callTranslator (node:internal/modules/esm/loader:439:14) [0] at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:445:30) [0] at async ModuleJob._link (node:internal/modules/esm/module_job:106:19) [0] [0] Node.js v22.5.1 [0] Failed running 'server/index.js' 3.1 강의 시청 후 test-example-shopping-mall 브랜치에서, 작업을 시작할려고, 서버와 프로젝트를 모두 킬려고 하는데 잘 동작하지 않습니다. 이에 대한 해결방법이 있을까요?
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문 전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요 강의 잘 듣고 있습니다. cas 강의에서 volatile int와 atomicInteger의 performance 차이를 보니까 atomicInteger가 더 빠른 것을 알 수 있었습니다. 그런데 이건 조금 이해가 잘 안되는게, atomicInteger 자체가 volatile을 내장하고 있는 거라 생각했는데 왜 volatile보다 속도가 빠른 지 이해가 잘 가지 않습니다. volatile은 어떤 락도 안 걸고(그래서 결과가 다르게 나오지만) 가시성만 고려하기 때문에 atomicInteger보다 결과가 좋아야 할 것 같은데 반대의 결과가 나와서 궁금해서 질문드립니다.
1번 (O) 2번 (O) 3번 - Magician은 해석 가능하지만, knight는 implements 하지 않아서 인터페이스 타입으로 해석이 불가능하다 4번 - knight를 해석해도 Healer와 implements 되어있기 때문에 heal() 호출 가능하다 위와 같은 이유로 1, 2번만 옳은게 맞을까요? 3, 4번이 너무 헷갈려요
1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] ServerSocket에 localhost라는 ip정보를 주지 않았는데 브라우저에서 http://localhost:12345 접속하면 응답을 받을 수 있는 이유가 뭘까요
SignupModal 에서 에러가 하나 나오는데 관련해서 질문드립니다. S2322: Type '(formData: FormData) => Promise<{ message: string; } | undefined>' is not assignable to type 'NonNullable<string | ((formData: FormData) => void | Promise<void>) | undefined>'.<br/>Type '(formData: FormData) => Promise<{ message: string; } | undefined>' is not assignable to type '(formData: FormData) => void | Promise<void>'.<br/>Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'void | Promise<void>'.<br/>Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'Promise<void>'.<br/>Type '{ message: string; } | undefined' is not assignable to type 'void'.<br/>Type '{ message: string; }' is not assignable to type 'void'. 이런 에러가 나옵니다. formData 의 타입이 정확하지 않아서 생기는 에러 같습니다. 근데 정상적으로 실행은 됩니다. 제 꺼에선 이렇게 에러가 나오는데 제로초님 화면에서는 에러가 나오는 것 같지 않아서 어떻게 그렇게 된 것인지 궁금해서 질문 남깁니다. 감사합니다.
안녕하세요. 섹션8 진행하던 중 오류 해결에 도움이 필요해 글 남겨요.. Axios 인터셉터와 Access Token, Refresh 토큰 이용한 Access 토큰 자동 갱신 강의 내용의 코드를 강사님처럼 입력했는데 계속 오류가 납니다.. 콘솔 화면에 나타난 오류 찾아보니 TypeError: Cannot read properties of undefined (reading 'map') 오류가 serverData.dtoList 가 정의되지 않아서 발생했다고 하는데 어떻게 처리 해야 할지 모르겠어요. 참고로 강사님과 코드 내용이 같아 제 코드는 따로 첨부하지 않았어요. 필요하시면 첨부 하겠습니다.
많은 분들이 memo 기능 관련하여 문의 주신것 같은데 내용이 다 동일하네요.. 영상을 보면 변경 전/후 전부다 하이라이트가 표시가 되어서 리렌더링이 발생하는지 시각적으로 확인이 안됩니다. 문의 남기신 글에는 console.log로 확인을 하라고 하시는데.. 그럴것 같으면 강의 내용 자체가 바껴야 되는거 아닌가요?? 이 부분이랑 context 설명하는 부분도 마찬가지인데요.. context 설명할때 onUpdate, onDelete, onCreate는 useCallback을 사용하여 재생성을 방지하게 이미 설정되어있는데, 왜 memo 기능을 써야하나요?? 이 부분도 설명할때 화면상에 하이라이트가 전과 후 다 발생하는데.. 강사님 혼자 뭐 없어진거 확인하는데.. 화면상으로 전혀 확인이 안되는데.. 혼자 진행하시니 혼란스럽네요.. 확실하게 딱 표시가 나는게 아니라면 그에 대한 설명이 있어야 하지 않을까 싶습니다.
안녕하세요 jpa 공부하다가 궁금한 것이 있어서 여쭤봅니다 채팅프로그램을 만들고 있는데 간단하게 user table id, email chattingroom id,user_id, room_number로 테이블이 구성되어있습니다 사용자가 로그인해서 채팅방번호를 입력하면 chattingroom만들어지는데 아무래도 id가 따로있다보니 chattingroom에 같은 user_id, room_number중복된 데이터가 생성됩니다 이같은 경우 생성전에 중복 쿼리를 생성해서 검증해야할지 oracle에 merge into ~ update ~ insert를 createQuery로만들어서 구현을 해야하는지 궁금해서 여쭤봅니다 감사합니다
Redis 로 문제점 해결하기 강의 7분 쯤에 나오는 설명으로, redis 는 싱글스레드 기반으로 동작하기 때문에 Thread 1 에서 10:00 에서 10:02 동안 incr coupon_count 메서드가 동작한다고 했을 때 10:02분에 끝나고나서 thread 2의 incr coupon_count 가 동작한다고 말씀하셨는데요 이는 딱 redis 가 싱글스레드로 동작하는 시간 만큼만이 lock 이 걸린 시간이라고 보면 될까요? 예컨데 ApplyService 의 apply 가 싱글 스레드, 단일 요청에 딱 2분이 걸리는 메서드라고 가정하고 그 안에 있는 couponCountRepository.increment() 가 1초가 걸린다고 가정하면 100개의 요청이 동시에 들어온 경우, 전체 요청이 모두 처리되는 시간이 2분 + 1*100초 = 3분 40초가 걸린다고 계산하는게 맞는거죠? 2분*100이 아니라요
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 안녕하세요 강의를 보던 중 궁금한 것이 생겼습니다 ! 변경 감지를 할 때 Entity와 스냅샷을 비교하여 데이터가 변경되었는지 확인을 한다면 1차캐시에 em.persist로 넣어줘야 엔티티가 변경이 되지않을까? 라고 생각을 했습니다. 하지만 코드에는 em.persist를 주석처리하여 실행이 되지않게 막아놨음에도 변경 감지가 된다는 것은 제가 이해한 것 과는 다르게 persist를 해주지 않아도 set메서드를 사용하여 데이터를 바꿔준다면 1차 캐시의 엔티티가 변경이 되는건가요 ? => 변경 감지가 일어나려면? -> Entity가 변경이 되어야 한다 -> 그러면 persist로 변경된 Entity 값을 1차캐시에 넣어준다 -> 후에 스냅샷( 전 Entity 데이터 )와 변경된 Entity를 비교하여 다를 시 쿼리를 날린다 라고 이해를 하고 있는 상태입니다 ! [질문 내용] 여기에 질문 내용을 남겨주세요.
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? ( 예 /아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? ( 예 /아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예 /아니오) [질문 내용] 새로운 pdf에선 스프링 완전정복 시리즈, 스프링부트와 JPA 실무 완전 정복 로드맵이있어요 이둘의 차이가 있다면 어떤것이 있고 어떤상황에서 이런거 추천한다 이런게 있나요?
안녕하세요 강의 실습도중에 에러가 발생하였는데 원인을 찾지못해서 질문드립니다.. 1.3)실습용 백엔드 서버 세팅하기 강의에서 12:11분에 npm run seed 명령어로 시드데이터도 받아지는것을 확인했습니다. (그 이전까지의 실습도 에러없이 정상적으로 실행했습니다.) 이후에 npm run build를 실행해보니 아래와 같은 에러가 발생해서 질문드립니다. ================================= C:\study\React\onebite-books-server-main>npm run build > onebite-books-server@0.0.1 build > nest build src/book/book.service.ts:22:29 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'. 22 select: prismaExclude('Book', ['searchIndex']), ~~~~~~ src/book/book.service.ts:28:29 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'. 28 select: prismaExclude('Book', ['searchIndex']), ~~~~~~ src/book/book.service.ts:35:29 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'. 35 select: prismaExclude('Book', ['searchIndex']), ~~~~~~ src/book/book.service.ts:56:29 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'. 56 select: prismaExclude('Book', ['searchIndex']), ~~~~~~ src/book/book.service.ts:70:31 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'. 70 select: prismaExclude('Book', ['searchIndex']), ~~~~~~ src/book/book.service.ts:88:29 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'. 88 select: prismaExclude('Book', ['searchIndex']), ~~~~~~ src/util/prisma-client-exception.filter.ts:6:15 - error TS2339: Property 'PrismaClientKnownRequestError' does not exist on type 'typeof Prisma'. 6 @Catch(Prisma.PrismaClientKnownRequestError) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/util/prisma-client-exception.filter.ts:8:27 - error TS2694: Namespace '"C:/study/React/onebite-books-server-main/node_modules/.prisma/client/default".Prisma' has no exported member 'PrismaClientKnownRequestError'. 8 catch(exception: Prisma.PrismaClientKnownRequestError, host: ArgumentsHost) { ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Found 8 error(s).
안녕하세요! 늘 강의 잘 듣고 있습니다 (__) 이번 section에서 소소한 의문점이 하나 남아서 질문 글 남깁니다. 먼저 강의에서 작성해주신 아래의 코드 블럭 말인데요, // mount가 됐는지 확인 하는 ref 변수 const isMount = useRef(false); // 1. 마운트 : 탄생 useEffect(() => { console.log("mount"); }, []); // 2. 업데이트 : 변화, 리렌더링 useEffect(() => { if (!isMount.current) { isMount.current = true; return; } console.log("update!"); }); isMount ref 변수가 현재 컴포넌트의 마운트 여부를 체크하는 변수로 만들어졌는데, 그렇다면 마운트 시점에서 true로 갱신해줘야하는게 아닌가 싶어서요. 기본적으로 컴포넌트가 마운트 되면 컴포넌트가 만들어졌다, 즉 변화 했다라고도 할 수 있는거니, update 로직도 같이 실행 되어야 하는게 맞지 않나 라는 의문이 들었습니다. 위 예시는 제가 이해한대로 해석하면 "컴포넌트가 마운트가 되었지만 처음 시점의 update 로직은 패스한다" 라고 생각되는 느낌이라서 살짝 애매하게 느껴집니다. 그래서 아래와 같이 // 1. 마운트 : 탄생 useEffect(() => { console.log("mount"); // mount 시점에서 실행 될 프로세스 start // mount 시점에서 실행 될 프로세스 end // 모두 마무리시 if (!isMount.current) { isMount.current = true; } }, []); // 2. 업데이트 : 변화, 리렌더링 useEffect(() => { // update 프로세스 진행 console.log("update!"); }); 마운트 시점에서 동작하는 프로세스가 마무리 된 후 isMount를 갱신하고, 그 다음 update 시점은 이미 마운트가 되어야지만 동작하는거니 별도의 mount 체크 필요없이 update 프로세스를 작성하면 되지 않나 싶었습니다. 물론 이렇게 되면 isMount 자체를 현 시점에서 사용 할 이유가 없으니 애매해지긴 하겠지만요.. 글 재주가 없어서 질문이 좀 난해해서 죄송합니다 ㅠㅠ 강사님께서는 이에 대해 어떻게 생각하시는지 질문 드립니다!
[질문 내용] 제네릭의 상한 설정을 소개하시기 전에 어떻게 특정 타입만을 받도록 할지 혼자 고민을 해 보았는데, 클래스 생성 시 생성자를 통해 받을 타입을 제한하면 어떨까 생각했습니다. public class Box<T> { private T animal; public Box(Animal animal) { this.animal = (T) animal; } } 결과적으로 문제를 해결하기는 했는데, 이 방법에도 여전히 문제가 있기 때문에 extends를 이용하는 거겠죠? 상기한 방법이 extends를 이용하는 방법보다 못한 점이 무엇인지 궁금합니다.
