git 저장소 주소가 어디있나요?
미해결
바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기
강의 잘 듣고 있습니다. git 주소를 찾을 수 없네요. 감사합니다.
- next.js
- FastAPI
- whisper
- openai-whisper
jino
댓글 2
좋아요 0
조회수 196
묻고 답해요
172만명의 커뮤니티!! 함께 토론해봐요.
msw ssr 관련 질문입니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님 next 15버전으로 바뀌고나서 새로 처음부터 다시 강의를 들으면서 만들어 보고 있습니다. next 15버전으로 바뀌고 나서 옛날꺼랑 msw 설정이 바뀌었더라구요 그런데 강의대로 msw 설정을 하니 ssr 적용이 제대로 안되는 것 같습니다. msw 설정 후 페이지의 network 탭에 localhost document의 미리보기 내용이 없습니다. ssr이 된다면 document에 미리보기에 내용이 넘어와야 하는데 msw 설정 후에 없습니다. 옛날에 만들어 놓았던, next14 버전으로 했었던 프로젝트에서는 미리보기에 내용이 잘 담겨 ssr이 잘되고 있고, 15버전으로 진행한 프로젝트에서 layout에 있는 mswprovider 컴포넌트를 없애주니 다시 미리보기에 내용이 생기는 것으로 보아 msw 설정에서 문제가 생긴 것으로 추측됩니다. 아래는 옛날 14 버전으로 진행했던 코드입니다. msw 2.1 버전입니다. "use client"; import { useEffect } from "react"; export const MSWComponent = () => { useEffect(() => { if (typeof window !== "undefined") { if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") { require("@/mocks/browser"); } } }, []); return null; }; 아래는 지금 하고있는 코드입니다. msw 2.7.3 버전입니다. "use client"; import { Suspense, use } from "react"; import { handlers } from "@/mocks/handlers"; const mockingEnabledPromise = typeof window !== "undefined" // browser일 때 ? import("@/mocks/browser").then(async ({ default: worker }) => { if (process.env.NODE_ENV === "production") { return; } await worker.start({ // msw가 처리할 수 없는 요청이 들어왔을 때 onUnhandledRequest(request, print) { if (request.url.includes("_next")) { // next가 내부적으로 처리하는 url이기 때문에 msw가 처리할 필요 없음 그래서 return return; } print.warning(); }, }); worker.use(...handlers); (module as any).hot?.dispose(() => { worker.stop(); }); console.log(worker.listHandlers()); }) : Promise.resolve(); export function MSWProvider({ children, }: Readonly<{ children: React.ReactNode; }>) { // If MSW is enabled, we need to wait for the worker to start, // so we wrap the children in a Suspense boundary until it's ready. return ( <Suspense fallback={null}> <MSWProviderWrapper>{children}</MSWProviderWrapper> </Suspense> ); } function MSWProviderWrapper({ children, }: Readonly<{ children: React.ReactNode; }>) { // use 사용해서 promise 실행 기다리고 children return use(mockingEnabledPromise); return children; } 제 추측으로는 MSWProvider에 있는 Suspense때문에 ssr 이 안되는 것 같은데, 맞는지 궁금합니다. 그리고 맞다면 next 사용시 msw로 데이터를 mocking 하게 되면 ssr 확인을 어떻게 해야 할까요??
- react
- next.js
- react-query
- next-auth
- msw
강주호
댓글 1
좋아요 0
조회수 204
상호작용 구분 질문
해결됨
한 입 크기로 잘라먹는 Next.js
어떤 사이트들을 보면 스크롤 하면 그 화면에 맡게 자동으로 그 다음 리스트들이 로딩해서 보여주던데요 이방식은 상호 작용이 있는것인지 상호 작용이 없다고 봐야 하는지 궁금하네요
- react
- typescript
- next.js
Ming
댓글 2
좋아요 0
조회수 84
배포 하다 보니 궁금해서요 (초보 입장)
해결됨
한 입 크기로 잘라먹는 Next.js
2.20 배포하기를 하다 보니 현재 api 서버를 미리 만들어 주셔서 테스트 했는데 사실상 section2 프로젝트 안에서 db 연결해서 진행되게 allinone으로 개발하는게 더 초보 입장에서 이해하기 쉬운데 원래 이렇게 구분해서 작업해야 하나요
- react
- typescript
- next.js
Ming
댓글 3
좋아요 0
조회수 205
2.19 파비콘이 안보여요
해결됨
한 입 크기로 잘라먹는 Next.js
import { Html, Head, Main, NextScript } from "next/document"; export default function Document() { return ( <Html lang="kr"> <Head /> {/* favicon 설정 */} <link rel="icon" href="/public/favicon.ico" /> <body> <Main /> <NextScript /> </body> </Html> ); } 파비콘 설정 설명이 없어서 chatgpt가 알려줘서 이렇게 했는데 안보이네요
- react
- typescript
- next.js
Ming
댓글 2
좋아요 0
조회수 84
fallback상태일때 메타태그
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 강사님 질문이 있습니다. fallback 상태일때는 SEO가 적용이 되지 않는것은 이해가 됐는데 서버에서 요청한 페이지(book/4)를 내려주면 결국 해당 페이지에 대한 SEO가 다시 잘 적용이 되는데 굳이 fallback 상태일때도 SEO를 신경써줘야하는 이유가 있나요?
- next.js
어차피 마늘
댓글 2
좋아요 0
조회수 97
값이 없으면 예외를 던지는 것이 더 자연스러운 상황에 대한 질문
미해결
김영한의 실전 자바 - 고급 3편, 람다, 스트림, 함수형 프로그래밍
베스트 프랙티스 6.무조건 Optional이 좋은 것은 아니다 부분을 설명 하실 때 "값이 없으면 예외를 던지는 것"이 더 자연스러운 상황에 대한 설명 부분에서 궁금한 것이 생겨서 질문드립니다. 예를 들어 특정 ID 기반으로 User 엔티티를 찾는 DBA 코드가 있다고 할 때 반환타입을 Optional<User>가 아닌 User로 했을 때 클라이언트 코드쪽에서는 if (user == null) { throw new NotFoundException("..."); } 아래와 같은 Optional을 사용한 코드보다 위와 같은 이런 코드가 더 낫다는 걸로 받아들이면 될까요?? findUserById(userId) .orElseThrow(() -> new NotFoundException("..."));
- java
- 함수형-프로그래밍
- lambda
- optional
service
댓글 2
좋아요 0
조회수 153
Optionl.of에 대한 질문
미해결
김영한의 실전 자바 - 고급 3편, 람다, 스트림, 함수형 프로그래밍
Optinal은 "값이 없을 수도 있다" 라는 의도를 드러내기 위해 사용하잖아요. 근데 Optional의 정적 생성자 메서드 중에 Optional.of()를 보면, null일 경우 NPE가 발생하는데, 그럼 Optional을 사용하는 의미가 없지 않나요? Optional.ofNullable과 empty는 사용의도라던가 언제 사용하면 되겠다에 대한 인사이트가 확 오는 반면에 Optional.of는 언제 사용하면 좋을지에 대한 감이 안오네요.
- java
- 함수형-프로그래밍
- lambda
- optional
service
댓글 1
좋아요 1
조회수 125
저도 람다에 파라미터 힌트를 키고싶어요,,
미해결
김영한의 실전 자바 - 고급 3편, 람다, 스트림, 함수형 프로그래밍
저도 람다 사용할 때 o -> o.getDelivery() 이거 사용할 때 파라미터 힌트로 Order 같은걸 띄우고싶습니다. 옵션에 Inlay Hints 에서 자바쪽도 다 켜보고 했는데 저는.. 왜 안켜질까요 ㅠㅠ
- java
- 함수형-프로그래밍
- lambda
- optional
ppj2130
댓글 2
좋아요 0
조회수 182
react-query enabled 옵션
미해결
Next + React Query로 SNS 서비스 만들기
react-query 사용 시 enabled 옵션이 true인 경우 queryFn을 실행하지는 않지만 queryKey는 생성되는데 queryKey가 안 생기게 하자니 Hook을 조건부로 작성할 수 없어서 이런 방법은 불가능하고 queryFn은 실행하지 않으니 괜찮다는 생각도 드는데 예를 들면 ["post", id]가 있고 id가 null인 경우 queryKey는 ["post", null]로 무조건 생성이 되더군요. Observe도 많은 곳에서 쓸 수록 2 or 3 이런 식으로 증가하고요. 이게 성능에 문제가 없을지 아니면 queryKey 생성까지 막을 수 있는 방법이 있는지 궁금합니다.
- react
- next.js
- react-query
yskim
댓글 2
좋아요 0
조회수 270
쿠폰 다시 부탁드려도 될가여?
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
기존강의 업데이트 된 정보를 이제 봐서 쿠폰 정보를 놓쳤는데 혹시 쿠폰 다시 보내주실 수 있으신가여?
- react
- node.js
- seo
- graphql
- next.js
Tay
댓글 2
좋아요 0
조회수 152
prefetch 속성 질문
해결됨
한 입 크기로 잘라먹는 Next.js
강사님의 강의를 들으면서 test 페이지가 프로그래메틱하게 이동하기 때문에 따로 useEffect를 사용해 프리페칭되도록 만드는 것과, Link 컴포넌트에 prefetch 속성을 false로 하여 프리페칭되지 않게 만들 수 있다고 이해했습니다! 그런데 직접 코드를 작성하고 npm run start로 재실행한 뒤 새로고침을 했는데도 search 페이지에 필요한 js번들이 남아있고 test 페이지의 번들은 프리페칭되지 않았는데 어디가 문제인지 알 수 있을까요?
- react
- typescript
- next.js
고은
댓글 2
좋아요 0
조회수 167
Stream과 디버깅
미해결
김영한의 실전 자바 - 고급 3편, 람다, 스트림, 함수형 프로그래밍
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 안녕하세요. 강의 정말 잘 보고 있습니다. Stream관련하여 질문이 있는데요. Stream 같은 경우에는 파이프라인을 작성하면서 연산마다 body부가 추가될 수도 있고 중간 연산이 계속 체이닝 되는 형태로 구성이 될 수도 있습니다. 이럴 때 어느 연산에서 문제가 생기는지 디버깅을 하는게 참 번거롭다는 생각이 들곤했습니다. 저 같은 경우에는 이럴 때 peek 와 sout을 활용해서 어떻게든 값을 확인하는 식으로 디버깅을 해왔는데 더 좋은 방법이 없을까요? 브레이크 포인트를 잡기도 명령형 프로그래밍 방식보다 어려운 점이 있는 거 같아서요 ㅠㅠ
- java
- 함수형-프로그래밍
- lambda
ykm8864
댓글 1
좋아요 0
조회수 81
[수정 제안] 10. Optional.pdf - p.24 - orElse() 사용 용도
해결됨
김영한의 실전 자바 - 고급 3편, 람다, 스트림, 함수형 프로그래밍
공부하던 중에 이 부분은 이렇게 수정해야 되는 것 아닌가..? 싶어서 글 남겨봅니다. [수정 제안 정보] 대상 강의록: 10. Optional.pdf 대상 위치: 강의록 p.24의 최상단 부분 , 영상의 10분 50초~ 수정 제안 수정 전: 사용 용도 orElse(T other) - 값이 이미 존재할 가능성이 높거나, ... 수정 후: 사용 용도 orElse(T other) - 값이 존재하지 않을 가능성이 높거나, ... 수정 제안에 대한 근거 orElse(T other) 는 other의 생성 비용이 높은 경우 에 "값이 이미 존재함에도 불구하고 생성 연산을 수행해야됨" 으로 인해서 비효율이 발생합니다. 이는 바꿔 말하면 "값이 존재하지 않는 경우에는 생성 연산이 필수적임" 이기 때문에 "값이 존재하지 않는 경우에는 비효율이 발생하지 않음" 이라고 해석할 수 있을 것 같습니다. 이때 강의에서 말하고자 하는 바는 "orElse()는 비효율이 발생할 수도 있다. 하지만 발생하지 않는 경우에는 사용해도 좋다." 라고 이해했는데, 이때 "비효율이 발생하지 않는 경우" 를 "값이 존재하지 않는 경우(생성 연산이 꼭 필요한 경우)" 라는 표현으로 대체 할 수 있기 때문에 "값이 존재하지 않을 가능성이 높은 경우(= 비효율이 발생하지 않는 경우)에는 orElse()를 사용해도 괜찮다." 라고 수정해야 하는 것이 아닌가 싶어서 제안합니다.
- java
- 함수형-프로그래밍
- lambda
- optional
dev.rudevico
댓글 2
좋아요 0
조회수 138
[오타 제보] 10. Optional.pdf - p.11
해결됨
김영한의 실전 자바 - 고급 3편, 람다, 스트림, 함수형 프로그래밍
[오타 정보] 대상 강의록: 10. Optional.pdf 대상 위치: 강의록 p.11의 2. ifPresentOrElse() 코드 부분 , 영상의 5분 ~ 오타 내용 수정 전 public class OptionalProcessingMain { ... System.out.println("=== 2. ifPresentOfElse() ==="); // Of라고 오타 ... 수정 후 public class OptionalProcessingMain { ... System.out.println("=== 2. ifPresentOrElse() ==="); // 'Of' -> 'Or' 수정 ...
- java
- 함수형-프로그래밍
- lambda
- optional
dev.rudevico
댓글 2
좋아요 0
조회수 105
서버 에러가 납니다.
해결됨
한 입 크기로 잘라먹는 Next.js
const { id } = await params; const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${id}}`); const book = await response.json(); book { statusCode: 500, message: 'Internal server error' } nest가 실행중인곳에는 Argument id is missing. PrismaClientValidationError: Invalid this.prisma.book.findUnique() invocation in /Users/leecho/dev/onebite-books-server/src/book/book.service.ts:55:41 52 } 53 54 async findOneBook(id: number) { → 55 const book = await this.prisma.book .findUnique({ select: { id: true, title: true, subTitle: true, description: true, author: true, publisher: true, coverImgUrl: true }, where: { + id: Int } }) Argument id is missing. 이런 에러가 나는데 왜 이럴까요..?
- react
- typescript
- next.js
초랑이
댓글 2
좋아요 0
조회수 255
ssg와 프리패칭에 대해 질문이 있습니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. 강의 잘 듣고 있습니다. Next.js는 오직 초기 접속시에만 HTML 파일을 불러와 Hydration 하고 그 이후의 페이지 이동은 리액트의 CSR(Client Side Rendering) 방식으로 처리하게 됩니다. 따라서 새롭게 HTML이 요청되지 않고 오직 브라우저측에서 JS Bundle을 실행해 컴포넌트를 교체하는 방식으로만 페이지 이동이 처리됩니다. 라고 설명주셨는데요. 하지만 ssg 파트에서는 페이지 요청시 이미 빌드된 html 을 반환한다고 하셨는데 이 부분이 잘 이해가 되지 않습니다. 빌드를 하면 SSR를 설정하지 않은 페이지는 기본적으로 SSG로 작동하고, 그렇다면 굳이 프리페칭을 하지 않더라도 이미 완성된 페이지를 반환해주는게 아닌가 싶어서 질문드립니다. 라우터를 이용하여 페이지를 이동할때는 CSR로 작동하고 url에 직접 경로로 접속 요청을 할때 SSG로 작동하는건가요?? 두 가지 개념이 헷갈립니다
- react
- typescript
- next.js
CLV
댓글 2
좋아요 0
조회수 98
프리패칭에 관한 간단한 질문이 있습니다
해결됨
한 입 크기로 잘라먹는 Next.js
prefetch 를 명시적으로 false 로 설정하면, 예상대로 해당 링크에 대한 프리패칭이 발생하지 않는 것이 확인되었습니다. <Link href={"/search"} prefetch={false}>Search</Link> 그런데 신기한 점은, 해당 링크에 마우스를 호버했을 때 네트워크 탭에서 /search 관련 리소스들이 프리패칭되는 현상이 보였다는 것입니다. 혹시 이러한 동작은 Next.js에서 어떻게 정의되거나 불리고 있는지 궁금합니다!
- react
- typescript
- next.js
정규환
댓글 2
좋아요 0
조회수 107
SSG의 fallback 옵션
미해결
한 입 크기로 잘라먹는 Next.js
SSG의 fallback 옵션에 따른 렌더링 방식에 대해 좀 더 구체적으로 알고 싶습니다. fallback: "blocking" 일 때, 빌드 타임에 사전 생성하지 않았던 경로에 대해서, 이후 접속 요청이 들어와 사전 렌더링되고, .next 서버에 저장되는 걸 확인했는데요. 1) 저장되는 걸 캐싱이라고 이해해도 될까요? 2) 그러면 그 이후의 요청에서는 더이상 재생성되지 않고, 이 페이지를 클라이언트에게 전달 하나요? fallback: true 일 때, 빌드 타임에 사전 생성하지 않았던 경로의 접속이 들어왔습니다. 그 때, getStaticProps로 불러오는 데이터를 제외하고, 먼저 레이아웃을 내려준다고 이해했습니다. 그리고 추후에 Props만 따로 반환받아 페이지를 렌더링한다고 했는데, 그럼 받은 데이터를 가지고, CSR이 되는 건가요? 위 상황에서 CSR이 맞다면, 해당 내용은 검색 크롤러가 알아내지 못해 SEO에 불리할 것 같은데요. 아니면 검색 크롤러가 getStaticProps 데이터가 올때까지 기다리고 해당 내용도 반영해서 문제가 없나요? 감사합니다.
- react
- typescript
- next.js
Gyuri Kim
댓글 1
좋아요 0
조회수 107
수업내용의문
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 [CSS 09-2-3] 폰트 - 폰트와 크로스브라우징 강의 마지막에 다음강의에 안내된 그림,차트 모달 관련 강의가 없습니다. 섹션 09 => [JS 09-1-1] 수업내용이 [ CSS 09-1-1] 과 같습니다. 중복업로드된것이 아닌지요 ?
- react
- react-native
- 하이브리드-앱
- graphql
- next.js
Lia
댓글 2
좋아요 0
조회수 98
인기 태그
인프런 TOP Writers
- 정현섭 8
- eggmun(문성진) 4
- 닉네임 4
- 김보노 3
- 박효정 3
- Like me black 3
- 코코리코코 3
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- [프로젝트] 앱 출시 목표 6개월간 함께할 사이드 프로젝트 팀원 모집 vsvx13
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv