inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

강의 1.3 백엔드 서버 세팅하기에서 빌드시 에러

해결됨

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

12:22 npm run build 시에 에러가 validator 모듈이 없다고 나오네요 validate-decoration.ts 파일에서 import * as validator from 'validator'; packae.json에 업데이트가 안되어 있는 것 같아요.

  • react
  • typescript
  • next.js
여어 댓글 3 좋아요 0 조회수 310

카운터앱 구현하기에서 커스텀훅으로 관리하는 방법은 어떤가요?

미해결

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

안녕하세요! 카운터앱 구현하기를 조금 다르게 코드를 짜보았는데, 커스텀훅을 활용법에 익숙하지 않아서, 이렇게 구현하는 방법이 적절한지 감이 안와요.. 바쁘신데 죄송하지만 아래와 같은 커스텀훅 구현방식의 장단점에 대해서 알려주시면 감사하겠습니다! 먼저 useCount.jsx를 아래와 같이 작성하였구요 import { useState } from 'react'; function useCount() { const [num, setNum] = useState(0); const onClinkCount = (e) => { setNum(num + Number(e.target.value)) } return [num, onClinkCount]; } export default useCount; 아래는 넘버 조작 부분인 Controller.jsx const Controller = ({ onClinkCount }) => { return ( <div> <button onClick={onClinkCount} value="-1">-1</button> <button onClick={onClinkCount} value="-10">-10</button> <button onClick={onClinkCount} value="-100">-100</button> <button onClick={onClinkCount} value="+100">+100</button> <button onClick={onClinkCount} value="+10">+10</button> <button onClick={onClinkCount} value="+1">+1</button> </div> ) } export default Controller 카운트 넘버 표시부분인 Viewer.jsx const Viewer = ({ num }) => { return ( <div> <div>현재 카운트:</div> <h1>{num}</h1> </div> ) } export default Viewer 그리고 부모 컴포넌트인 App.jsx 입니다. import "./App.css" import Controller from './components/Controller' import Viewer from './components/Viewer' import useCount from './hooks/useCount' function App() { const [num, onClinkCount] = useCount(); return ( <div className='App'> <h1>Simple Counter</h1> <section> <Viewer num={num} /> </section> <section> <Controller onClinkCount={onClinkCount} /> </section> </div> ) } export default App 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

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

article / section 태그에 관해

해결됨

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

article 과 section tag 를 자주 사용하시는데, 혹시 어떤 기준으로 사용하시나요?

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
femaster1 댓글 1 좋아요 0 조회수 196

혹시 MUI에 대한것도 배우나요?

해결됨

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

이 강의에서 MUI에 대한 것도 배우는지 궁금합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
minchoi9979 댓글 2 좋아요 0 조회수 170

섹션25

해결됨

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

이건 무슨 오류 일까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
imhj11777 댓글 2 좋아요 0 조회수 107

여기까지 하고나니 Product가 깨집니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

해당 회차까지 하고 나니 Product도 확인해 볼겸 들어가보니 사진도 안나오고 pname도 undefied로 나오네요 server 쪽에서 Authorization 의 값이 null이라고 뜨는게 이유 인거 같은데 제가 잘못 한게 있을까요? 아니면 뒤의 회차에서 해결하는 방법이 제시가 되는건가요??

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
김재원 댓글 2 좋아요 0 조회수 131

2.20 강의 Vercle 에 벡엔드 배포 후 미출력

해결됨

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

안녕하세요. 강좌 잘 보고 있습니다. 다름이 아니라 vercel 에 onebite-books-server 를 배포하였습니다. 로컬에서는 작동을 확인하였습니다. 첫 화면은 잘 나오는데 /api 폴더로 접근시 화면에 swagger 가출력이 안되고 있네요. ㅠㅠ; vercel 로그는 정상 배포 되었구요. 첫화면은 잘 나옵니다. 혹시 환경변수를 셋팅해야 하는가 해서 검토해 보았지만 필요없으시다고 하셔서 그냥 두었습니다. 에러 메시지는 콘솔창에 Failed to load resource: the server responded with a status of 404 () 이런 메시지가 여러개 출력 중입니다. 확인좀 부탁드립니다. 감사합니다.

  • react
  • typescript
  • next.js
억수 댓글 2 좋아요 1 조회수 514

카테고리 변경 시 이미지 로딩

해결됨

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

카테고리 관련 강의를 수강 중입니다. 카테고리 변경 시 백그라운드 변경되는 부분이 있는데요 해당 부분이 이미지 로딩(변경?)이 매우 늦게 되더라구요 해당 부분 개선해보려면 어떤 것을 시도해보면 좋을까요?

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
femaster1 댓글 2 좋아요 1 조회수 227

무한스크롤(React Infinite Scroller)의 pageStart

해결됨

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

16-02-infinite-scroller 강의 중에 이해가 가지 않는 코드가 한줄 있어서 질문드립니다! InfiniteScroll에 pageStart 옵션이 걸려있는데, 이게 어디에 영향을 주는건가요? 초기 페이지 번호라기에는 이 옵션을 999999 처럼 의미 없는 값을 줘도 문제 없이 작동하고 그러네요.. 딱히 의미가 없는 코드 같은데 pageStart라는게 어떤식으로 작동되는건지가 좀 궁금합니다..

  • react
  • node.js
  • seo
  • graphql
  • next.js
ten 댓글 2 좋아요 0 조회수 159

3-3강 레이아웃 구성하기 강의 오류

해결됨

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

3-3강에 레이아웃 구성하기 강의 앞부분이 잘린거같은데 저만 그런가요..? 학습에 관련된 질문만 해주세요. 질문은 상세하게 무엇이 궁금한지 작성해주세요. 질문은 '마크다운'을 사용하여 할 수 있습니다. 유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

  • javascript
  • react
  • node.js
  • react-native
  • typescript
SEON 댓글 2 좋아요 0 조회수 176

상세 페이지 api관련 궁금증

해결됨

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

책의 정보 상세 페이지에 접근하게 되면 책의 상제 정보 요청과, 책의 리뷰에 대한 api 요청이 이렇게 두가지를 하는데요 혹시 현업에서도 이런 상세 페이지(상품 정보, 댓글이나 상품평 이 필요한 페이지)에서 api요청을 여러번 하게 백엔드 api를 설계 하는 것인가요?? 아니면 두번 요청이 필요한 페이지에 대한 예를 만들기 위해 분리를 해 놓은 것인가요???

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

스토리 내 args에서 에러가 발생합니다.

미해결

실무에 바로 적용하는 스토리북과 UI 테스트

안녕하세요, 일단 이해하기 쉽게 강의 만들어주셔서 감사드린다는 말씀드리고 싶습니다. 현재 next app router에서 진행중인데요, primary라는 스토리를 생성하고, 그 내에 사용하는 Props들을 추가하였습니다. 다만 강의(DefaultTextField 컴포넌트 생성과 스토리 생성 부분)에서는 onIconClick() 이라던지, onChange와 같은 함수들에 대해서는 스토리에 추가를 하지 않아도 에러가 뜨지 않던데, 저는 args 부분에 에러 라인이 그어지더라구요. 혹시 이 이유 알 수 있을까요? 감사합니다!

  • react
  • typescript
  • tailwind-css
  • storybook
  • ui-testing
austin-verse 댓글 2 좋아요 0 조회수 234

next zustand 사용 시 문의

미해결

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

next zustand 세팅 시, provider 를 사용해야한다는 글이 있어서요. 현재 강의처럼 이후에 서비스 개발 시 사용해도 이슈가 없는 부분일까요? https://zustand.docs.pmnd.rs/guides/nextjs#providing-the-store https://leonkong.cc/nextjs-zustand-

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
femaster1 댓글 2 좋아요 0 조회수 511

getStaticPaths

해결됨

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

getStaticPaths함수는 async키워드를 안붙이는 함수인가요?

  • react
  • typescript
  • next.js
이태관 댓글 2 좋아요 0 조회수 278

강의에 대해 질문있습니다.

해결됨

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

안녕하세요 강의를 열심히 보면서 하고 있습니다 궁금한 점이 커리큘럼이 html, css, js를 하고 리액트 강의도 있는 건가요? 아니면 리액트 없이 바로 Next.js 강의인가요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
부드러운 족제비 댓글 2 좋아요 0 조회수 252

섹션2 사전 렌더링에 대해 궁금한 것이 있습니다.

해결됨

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

Next.js의 사전 렌더링에 대해서 설명을 하실때, 유저가 브라우저를 통해 서버에 초기 접속 요청을 할때, 자바스크립트 코드를 실행하여 html을 렌더링한다고 하셨는데 이 html은 해당 서비스의 특정 경로에 대해서만 html을 렌더링하는 것인가요? 아니면 그 서비스에 있는 모든 페이지의 html을 렌더링하는 것인가요?

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

빌드 상의 문제

미해결

포트폴리오 초간단 배포하기

안녕하세요, 강의를 잘 듣고 있는 와중에 이클립스만 사용하다가 인텔리제이를 처음 사용해보려고 하는데 어디서 문제가 생긴건지 모르겠어서 질문드립니다. 현재, 섹션4의 프론트엔드가 포함된 백엔드 프로젝트 배포하기 과정을 듣고 있는 와중 원래는 m 이라는 탭 또한 없어서 https://insertintoblog.tistory.com/32 을 참조하여 탭을 생성하기는 했습니다. 이후에 빌드를 했으나 용량이 MB 단위가 아닌 KB 단위로 측정되며 Github에도 동일한 용량으로 커밋되고 있습니다 ㅠㅠ 무시하고 putty 통해서 wget 이후 java -jar shorten ~ 명령어를 작성하자 no main manifest attribute, in shroten-url-service-1.0-SNAPSHOT.jar 라는 문구와 함께 이후 진행이 불가능하여 질문드립니다... ㅠ

  • linux
  • github
  • nginx
댓글 4 좋아요 1 조회수 301

라우팅 관련 질문 있습니다!

해결됨

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

안녕하세요 강의 잘 보고 있습니다. 한가지 질문이 있는데요! 라우팅 테스트 중에 (beforeLogin) 하위로 추가 생성되는 라우트는 Link로 접속하면 잘 되는데, 직접 URL로 치고 가면 not-found 페이지가 뜨는데 어떤 이유일까요 ? 질문1) 아래 이미지의 itest 폴더 인터셉팅 잘됨. 하지만 새로고침 하거나 직접 localhost:3000/itest 치고 들어가면 페이지 없음. (원래는 새로고침 시 page.tsx 내용이 보여야 하지 않나요?) 질문2) 테스트겸 localhost:3000/dkwlsWK 라우트를 생성해서 직접 URL치고 들어가니 역시 없는 페이지로 뜹니다. 혹시 (그룹핑) 하거나 페레럴을 사용한 것과 연관이 있을까요 ? 질문3) 아래 이미지 중 @modal/(.)itest 에 default.tsx 로 하면 에러가 나더라구요! (page.tsx로 하면 괜찮지만 페이지를 찾을 수 없음)

  • react
  • next.js
  • react-query
  • next-auth
  • msw
jjongrrr 댓글 2 좋아요 0 조회수 234

인기 태그

인프런 TOP Writers

주간 인기글