inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

9.1 이미지 최적화(13:36)에서 webp로 바뀌지 않습니다.

해결됨

한 입 크기로 잘라먹는 Next.js

https://github.com/kimyoda/Next.js15_-.git 해당 깃 주소입니다!! 13분전까지 모든 세팅과 설정을 바꿨는데도, 계속 위와 같이 작동합니다. book/[id]/page.ts import Image from "next/image"; <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }} > <Image src={coverImgUrl} width={80} height={105} alt={`도서 ${title}의 표지 이미지`} /> next.config.ts까지 강의와 똑같으나 위 화면처럼 계속 jpeg로 나오는데 도저히.. 이유를 못찾아서 문의드립니다!! import type { NextConfig } from "next"; const nextConfig: NextConfig = { /* config options here */ logging: { fetches: { fullUrl: true, }, }, images: { domains: ["shopping-phinf.pstatic.net"], }, }; export default nextConfig;

  • react
  • typescript
  • next.js
ssi02014 댓글 3 좋아요 0 조회수 173

Test 질문입니다.

해결됨

인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트

Test 질문입니다.

  • aws
  • docker
  • next.js
  • nestjs
  • prisma
Lopun Inflearn 댓글 0 좋아요 0 조회수 88

vscode 확장 vscode-stlyedcomponent 적용 안되는 오류

미해결

한 입 크기로 잘라먹는 Next.js

안녕하세요. 지금 Next.js강의중 글로벌 레이아웃강의를 듣고있는데 css를 자동완성해주는 styledcomponent가 적용이 안되서 문의드립니다. 구글링을 통해 vscode-styled component의 버전을 낮춰보기도하고 typescripts에 버전을 낮추니 next.js가 적용이 안되어서 다시 돌려놓긴했는데 여전히 적용이 안돼서 뭐가 문제인지 몰라서 질문드립니다. 혹시몰라 제가 설치한 모든 확장프로그램들을 보내드립니다.

  • react
  • typescript
  • next.js
hiiiiiiiii2696 댓글 2 좋아요 0 조회수 102

dirzzle-kit push error

미해결

Next.js 15로 완성하는 실전 YouTube 클론 개발

bunx drizzle-kit push 명령어 실행 시 이런 오류가 발생합니다. 어떻게 해결해야할까요?

  • react
  • postgresql
  • 클론코딩
  • next.js
  • tailwindcss
  • drizzle
임규리 댓글 2 좋아요 0 조회수 139

"Create-투두 추가하기" 강의에서 onKeyDown에 관련된 질문

해결됨

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

"Create-투두 추가하기" 강의 11분쯤에 나오는 엔터로도 버튼 실행하기에 관해 질문이 있습니다. onKeyDown 함수를 추가하기전엔 input박스에서 한버튼을 꾹 누르고있으면 연속해서 값이 입력 되었었는데, 강의와 같이 onKeyDown 함수를 추가하고 나면 한가지 키를 꾹 누르고 있어도 하나만 입력 됩니다. (ex. E버튼을 꾹 누르는 경우, "EEEEEEEEEEEEE" 이렇게 입력 되었었는데, onKeyDown을 추가하면 "E" 이렇게 하나만 입력됩니다.) 엔터로 버튼을 실행하면서 한가지 키를 꾹 눌러서 연속적으로 값도 입력할 수 있는 방법이 있는지 궁금합니다. 감사합니다.

  • javascript
  • react
  • node.js
댓글 2 좋아요 0 조회수 107

존재하지 않는 수업이라고 떠요

미해결

처음 만난 리액트(React)

이라고 뜨고 첫번째 수업으로 이동도 되지않아요

  • HTML/CSS
  • javascript
  • react
design_team 댓글 1 좋아요 0 조회수 214

5.8) State로 사용자 입력 관리하기 1

미해결

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

강의 6분쯤에 "" 으로 공백이었던 useState의 초깃값을 "이름"으로 바꿔주면서 value={name} 구문을 추가해주셨는데요, 공백일 때에는 같은 문자열임에도 해당 구문 없이도 잘 작동했는데 "이름"으로 설정했을 때에는 해당 구문이 필요한 이유는 무엇인가요? 지피티에 물어보니 Uncontrolled와 controlled input이라는 새로운 개념을 언급하길래 잘 이해가 안 되어 여쭤봅니다!

  • javascript
  • react
  • node.js
차예린 댓글 2 좋아요 0 조회수 115

npm init이 안됩니다 ㅠ

해결됨

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

해당 오류 발생하여 아래와 같이 power shell에서 RemoteSigned 으로 변경하였습니다.. 다른 방법이 있을까요 ㅠ

  • javascript
  • react
  • node.js
kmh880507 댓글 2 좋아요 0 조회수 194

jQuery

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

[입중급] CSS&JS 마스터 수강 중 입니다. 그런데 jQuery는 안배우는건가요?! 안배워도 되는건지? 아니면 잘 사용 안해서 인지? 궁금합니다!!

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
skykwj0422 댓글 1 좋아요 0 조회수 69

vercel 배포중 문제가 생겼습니다

해결됨

한 입 크기로 잘라먹는 Next.js

vercel 배포중 문제가 발생합니다 빌드중에는 아무런 문제가 없는데 해당이미지 처럼 빌드에서 문제가 생긴다고 합니다 빌드 로그 부분인데 해당부분을 오른쪽 부분처럼 promise로 바꿔도 보고 왼쪽처럼 사용을해봐도 똑같아서 그러는데 제가혹시 다른부분을 고치고 있는건지 어떻게 고쳐야할지 궁금해서 문의해봅니다

  • react
  • typescript
  • next.js
나라찬 댓글 2 좋아요 0 조회수 164

나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.

해결됨

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

안녕하세요! 섹션3에서 나만의 쇼핑몰 샘플 페이지 접속 시 404에러가 발생해 확인 부탁드립니다. ( https://jooeun-k.github.io/css_my_shop ) 더 이상 접속을 할 수 없는 걸까요? 미리 답변 감사드립니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
hyunah10 댓글 1 좋아요 0 조회수 102

useActionState 사용 시 라우팅 처리 방법

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요! 회원가입 시 서버 액션을 작성 중인데 궁금한 점이 있어 질문드립니다. 현재 서버 액션 함수는 아래와 같이 작성하였고, 클라이언트에서는 useActionState를 사용하여 액션의 반환 값을 받아 에러 메세지를 처리하고 있습니다. if (!id || !nickname || !password) { return { status: false, messages: "정보를 입력해주세요." } } try { const response = await fetch(`${baseUrl}/api/users`, { method: "POST", body: formData, }) return { status: true, messages: "" } } catch (err) { return { status: false, messages: "회원가입에 실패했습니다." } } // redirect("/home")을 여기에 위치 했었음 } 회원가입 성공 시에는 /home 으로 이동시키고 싶어서 redirect를 사용하려고 하는데, redirect는 return문 때문에 실행되지 않는 문제가 있습니다. 이런 상황에서는 다음 중 어떤 게 더 적절한 방법인지 궁금합니다..! 1) 서버 액션에서 회원가입 성공 시 return { status: true, messages: "" } 형태로 값을 반환하고, 클라이언트에서 성공 여부를 판단해 라우팅을 처리하는 방식 2) 서버 액션 내부에 let isSignupSuccess = false 같은 변수를 선언한 뒤, 회원가입 성공하면 return문 없이 isSignupSuccess = true 로 값을 변경하고, try-catch문 이후에 if (isSignupSuccess) redirect("/home") 형태로 라우팅을 처리하는 방식

  • react
  • typescript
  • next.js
개미 댓글 1 좋아요 0 조회수 103

커맨드 패턴 적용

미해결

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기

디자인 패턴을 공부하면서 실제 구현중인 서비스에 적용해보려고 노력중인데(위 이미지는 예시 코드) 예시 처럼 작성했을 때의 실효성이 invoker에서 audit log 같은 공통 코드 추출하는것 이외에 잘 느껴지지 않는데, 적절하지 않은 부분에 적용하려해서 그런것일까요? -> 단축키 예시처럼 해당 커맨드를 다른곳에서'도' 사용한다면 유용할것도 같네요!! 추가로 ValidateLeadFieldCommand, CreateLeadCommand 이런식으로 여러 커맨드가 순차로 실행해야하는 경우에 invoker도 커맨드마다 만들어야할까?하는 고민도 듭니다!

  • javascript
  • typescript
  • 객체지향
  • 디자인-패턴
  • canvas
이충현 댓글 1 좋아요 0 조회수 129

Link component의 legacyBehavior 속성이 deprecated

미해결

Next.js 15로 완성하는 실전 YouTube 클론 개발

next15 의 Link component의 legacyBehavior 속성이 deprecated 되었습니다. 대체하기 위해 강의영상에서처럼 useRouter 를 사용하면 될까요?

  • react
  • postgresql
  • 클론코딩
  • next.js
  • tailwindcss
  • drizzle
hanbrang 댓글 1 좋아요 0 조회수 101

안녕하세요 수업진행관련 질문이 있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

안녕하세요. 우선 매번 좋은 강의 감사드립니다! 다름이 아니라, 이 강의 전 버전에서 html,css,js를 수강하여 이번 버전에선 섹션3. [중급] 웹 프론트엔드 부트캠프 부터 수강중입니다! 수업노트에 있는 노션에 들어가보니 [과제] 탭이 따로 있더라구요! 과제01이 섹션01이랑 같은 부분이라서 섹션01을 수강 후 과제01을 해보는 식으로 진행하면 되는건가요? 섹션12까지 수강하였는데 강의중에는 따로 말씀이 없으셔서 그냥 강의만 듣고 자체적으로 복습만 했습니다. 저게 아니라면 과제는 언제부터 시작하는건지 알 수 있을까요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
k-geun 댓글 2 좋아요 0 조회수 64

반복문 최소화하고 indexOf 사용해서 풀어봤습니다

미해결

자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)

export default function solution(arr) { let answer = 0; const m = arr.length; const n = arr[0].length; for (let i = 0; i < n; i++) { for (let j = i + 1; j < n; j++) { let cnt = 0; for (let k = 0; k < m; k++) { if (arr[k].indexOf(arr[0][i]) < arr[k].indexOf(arr[0][j])) cnt++; if (cnt === m) answer++; } } } return answer; }

  • javascript
  • 코딩-테스트
류호이 댓글 1 좋아요 0 조회수 91

3.3) 레이아웃 설정하기

해결됨

한 입 크기로 잘라먹는 Next.js

5분55초쯤 설명하고 계시는 layout.tsx를 삭제하면 파일이 자동생긴다는 부분이 저는 생기지않는데 chatGPT한테물어보니 딱히 그런 기능은 Next에 없다고하는데 확장프로그램 차이일까요?

  • react
  • typescript
  • next.js
상상 댓글 1 좋아요 0 조회수 119

몇가지 질문드립니다.

해결됨

이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의

안녕하세요 우선 좋은 강의 정말 감사합니다. 풀스텍 강의라서 더 좋은거 같은데, 메일로 알람을 받았는데 선생님 강의 25%할인은 언제까지인가요? 지금 유료 강의 25%해서 24000원대 할인 기간이 안나와 있어서 기간이 궁금합니다. 아직 들어보지 못해서 무료 강의 한번 들어보고 유료강의도 진행하고 싶어서요 그리고 프로그램은 이클립스만 사용하시는거 같은데, 저는 인텔리제이 사용중인데 프로그램이 달라서 인텔리제이 사용자도 괜찮을까요?

  • HTML/CSS
  • javascript
  • jsp
  • spring
  • spring-boot
  • spring-security
zoseonghun 댓글 2 좋아요 0 조회수 213

npm run build 시 search 쪽에서 에러로 인해 build가 안됩니다.

미해결

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

git : https://github.com/ture403/next_appRoute 입니다. 현재버전 : 에러: 이건 search/page.tsx 입니다. import BookItem from "@/components/book-item"; import BookListSeletion from "@/components/skeleton/book-list-seletion"; import { BookData } from "@/types"; import { delay } from "@/util/delay"; import { Suspense } from "react"; async function SearchResult({ q }: { q: string }) { await delay(1500); const res = await fetch(`${process.env.NEXT_PUBLIC_API_SEVER_URL}/book/search?q=${q}`); if (!res.ok) { return <div>오류가 발생했습니다.</div>; } const searchDatas: BookData[] = await res.json(); console.log(searchDatas); return ( <div> {searchDatas.map((book) => ( <BookItem key={book.id} {...book} /> ))} </div> ); } export default async function Page({ searchParams }: { searchParams: Promise<{ q?: string }> }) { const params = await searchParams; // searchParams Promise를 await 합니다. const query = params.q || ""; // q 값을 추출하고, 없으면 빈 문자열을 사용합니다. return ( <Suspense key={query} fallback={<BookListSeletion count={3} />}> <SearchResult q={query} /> </Suspense> ); } 봐주시면 감사겠습니다.

  • javascript
  • react
  • node.js
레디온 댓글 2 좋아요 0 조회수 77

ios 배포관련 질문있습니다.

해결됨

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

카메라와 위치정보만 네이티브에서 권한 요청하고,화면이 전부 웹뷰로 구성되어있는 앱을 배포한다고 가정 했을때 ios 심사통과 가능성이 높은지 낮은지 궁금합니다.

  • react
  • react-native
  • next.js
  • expo
징니 댓글 2 좋아요 0 조회수 112

인기 태그

인프런 TOP Writers

주간 인기글