inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

Image 컴포넌트 width, height 속성

해결됨

Next.js 시작하기

Image 컴포넌트에 css 모듈 방식으로 width와 height 값을 설정하면 width, height 속성을 빼도 되는 줄 알았는데 빼보니까 width 속성이 필요하다고 에러가 나네요. Image 컴포넌트는 무조건 크기를 지정해서 사용해야하나봅니다. .item { display: inline-block; width: 300px; height: 300px; margin: 12px; } .img { width: 300px; height: 250px; } import axios from 'axios'; import Image from 'next/image'; import { useEffect, useState } from 'react'; import styles from './ProductList.module.css'; function ProductList() { const [products, setProducts] = useState(); useEffect(() => { axios.get('http://localhost:4000/products').then(response => { setProducts(response.data); }); }, []); return ( <ul> {products && products.map(product => ( <li key={product.id} className={styles.item}> <div> <Image src={product.imageUrl} alt={product.name} className={styles.img} /> </div> <div>{product.name}</div> </li> ))} </ul> ); } export default ProductList;

  • javascript
  • react
  • next.js
ys5133 댓글 2 좋아요 1 조회수 261

RSC 주의사항 4번째 질문이요

해결됨

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

서버 컴포넌트에서 클라이언트 컴포넌트에게 직렬화 되지 않는 Props는 전달 불가하다. 라고 하셨는데 서버에서 -> 서버로 함수 props를 넘겨주는 경우에는 괜찮은 걸까요?? RSC payload로 변환되는 과정에서 결국 그 함수 Props도 직렬화되는 거 아닌가요?? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • react
  • typescript
  • next.js
앙엉 댓글 2 좋아요 1 조회수 336

5.2) 빌드 시 searchbar 컴포넌트 에러 관련 질문

해결됨

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

강의에서 처음 build 할 때 searchbar 컴포넌트에서 suspense 에러가 나타나는데, 이 때 suspense를 하고 다시 build를 하면 인덱스 페이지는 dynamic page로 빌드 됩니다. dynamic page는 빌드 타임에서 생성하지 않는 것으로 전 강의에서 이해했습니다. 그런데 왜 빌드 타임에서 생성하지 않는 인덱스 페이지에서(dynamic) useSearchParams() 를 실행하는데 에러가 나타나는 건지 잘 모르겠습니다. 질문 드립니다

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

Nextjs에서 tailwind를 사용할 때

해결됨

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

Tailwind 꿀팁 알려주시면서 사전에 정의한 css들을 nextjs 프로젝트를 사용하면 tailwind를 지원하니 빌드할 때 스타일을 포함 안해도될 것 같다 라고 말씀하신 부분이 잘 이해가 안되어서 질문 드립니다...ㅜㅜ 어떻게 활용할 수 있다는 것인지 궁금합니다!

  • react
  • typescript
  • tailwind-css
  • storybook
  • ui-testing
김수인 댓글 2 좋아요 0 조회수 299

12.11) Home 페이지 구현하기 2.기능 - 버튼 기능 질문

해결됨

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

안녕하세요 강사님! 12.11) Home 페이지 구현하기 2.기능 강의에서, getMonth( ) 함수는 월이 0부터 시작된다고 말씀하셨습니다. 따라서 아래 코드처럼 Header 컴포넌트에 title의 props 값으로 +1을 하여 전달해야 한다는 것을 이해했습니다. <Header title={`${pivoDate.getFullYear()}년 ${pivoDate.getMonth() + 1}월`} leftChild={<Button text={"<"} onClick={onDecreaseMonth} />} rightChild={<Button text={">"} onClick={onIncreaseMonth} />} /> 그런데 버튼을 누르면 저번 달, 다음 달로 이동하는 함수를 만들 땐 getMonth( ) 함수를 불러오고 각각 1을 더하거나 빼는 함수로 설정한 점이 이해가 가지 않습니다. 0월부터 시작하기 때문에 각각 2를 더하거나 빼야 한다고 생각했는데 왜 1을 더하고 빼는지 모르겠습니다. ㅠㅠ const onIncreaseMonth = () => { setPivoDate(new Date(pivoDate.getFullYear(), pivoDate.getMonth() + 1)); }; const onDecreaseMonth = () => { setPivoDate(new Date(pivoDate.getFullYear(), pivoDate.getMonth() - 1)); }; 항상 좋은 강의 만들어주셔서 감사합니다!

  • javascript
  • react
  • node.js
강두희 댓글 1 좋아요 1 조회수 148

components 폴더 내 파일명 관련 질문 드립니다!

해결됨

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

안녕하세요. 강사님! 강의에서는 폴더에 상관없이 파일명을 모두 소문자로 하셨는데 이게 혹시 next에서 관례인가요? 제가 components 폴더 내 컴포넌트들 이름을 그동안 리액트에선 파스칼 케이스를 따라서 습관적으로 최근 next 과제에도 그렇게 제출했는데 이게 모던하지(?)않은 방식이었나 싶어서요!! 스타일의 차이인지 아니면 더 유용한 쪽이 있는지 궁금합니다. 🧐

  • react
  • typescript
  • next.js
  • 한크넼
sihyeon982 댓글 2 좋아요 0 조회수 598

sort 콜백함수

해결됨

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

강의 2.9 ) 배열 메서드 3.배열 변형 11분이후 sort에 콜백함수에서 조건문으로 return 1을 반환하면 두 자리를 교환하는걸로 이해했는데요 -1을 반환하면 자리 교환이 일어나지 않는것 같구요 0을 반환했을때랑 차이점이 있나요??

  • javascript
  • react
  • node.js
yh J 댓글 1 좋아요 0 조회수 244

msw 를 사용하는 이유

미해결

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

결국 next js 에서만 http.ts 를 만들어주어서 express 서버로 mock server(?)를 직접 띄우는 형식인것 같은데 맞나요? 또 제 생각에는 이렇게 msw 를 사용하면, 내가 백엔드 서버로 요청을 보내도 그 요청을 중간에 가로채서 mock api 로 요청이가고 내가만든 가짜응답을 보내주는것이 되어야 할것같은데, 지금은 저희가 띄운 9090으로 요청을 보내고 있네요. (이 내용도 맞는지 궁금합니다, next 프로젝트가 아니라면 localhost:8888(실제 나의 백엔드 서버)로 요청을 보냈다고 가정할때 msw가 요청을 가로채가나요?) 그렇다면 굳이 msw 를 사용하는 이유가 무얼까요..? 혼자 express 서버를 만들어서 가짜응답 전해주는것과 차이를 모르겠습니다..! 감사합니다

  • react
  • next.js
  • react-query
  • next-auth
  • msw
김민정 댓글 1 좋아요 0 조회수 346

날짜 비교 방법에 관해서 문의드립니다.

해결됨

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

안녕하세요 이정환님!! 강의 잘듣고 있습니다. 12.11) Home 페이지 구현하기 2. 기능 강의 수강중에 궁금한 점이 생겨 문의드립니다. 두개의 날짜를 정보를 비교를 하기 위해서는 Date의 객체 형식을 timestamp 형식으로 변경을 한후 두개의 날짜 정보를 비교를 해야 하는 것으로 알고 있습니다. 강의에서 pivotDate에 저장이 되어있는 state 날짜 기준으로 data를 필터링 하기 위해서는 시작시간과 끝시간을 timestamp 형식으로 만들고 시작시간과 끝시간 사이에 있는 data 객체 안에 있는 createDate의 값을 필터링 하셨습니다. 여기서 궁금한점이 startDate와 endDate 변수에는 timestamp형식의 날짜 정보가 들어가 있지만 data.createDate 정보에는 객체형태의 날짜 정보가 들어가 있습니다. 어떻게 객체 형태의 날짜 정보와 timestamp 형식의 날짜 정보가 비교가 가능한지 궁금합니다. 제가 어떤 부분에서 착각을 하고 있는지 궁금합니다. 감사합니다.^^

  • javascript
  • react
  • node.js
노란배추잎 댓글 1 좋아요 0 조회수 211

2.18) on-demand ISR 질문입니다

해결됨

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

강의에서는 handler를 만들어서, 직접 api를 입력할 때마다 갱신하도록 예시를 보여주셨는데, 실제로는 어떻게 사용하는 건가요??(어느 시점? 어느 곳에서 트리거 되는 건가요??)

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

트워터 홈페이지에서 svg 복사하는 방법

미해결

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

강의에서 svg 복사하는 방법을 알려줬는데 어디 강의인지 기억이 나지 않아서 질문합니다. 알려주세요 ㅠ

  • react
  • next.js
  • react-query
  • next-auth
  • msw
박명재 댓글 2 좋아요 0 조회수 613

Pre-Rendering 이라는 것이 크게보면 결국 SSR 인가요?

해결됨

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

CSR 과 다르게 서버에서 렌더링 과정을 거쳐 보여주는 것이라면.. 결국 이 과정이 SSR 이라는 것으로 이해를 했는데요. 강의 목차를 보니 SSR, SSG(?) 는 또 따로 나와있어서요.. 궁금해서 질문 드립니다 !!! 추후 배울 내용이라 지금 시점에서는 SSR 과는 다르게 Next.js 에서는 "사전 렌더링"이라는 것이 따로 존재한다고 이해하면 되는걸까요?

  • react
  • typescript
  • next.js
티라미수 댓글 2 좋아요 0 조회수 306

제공해주시는 Figma 색상 코드가 강의와 달라 글 남깁니다!

해결됨

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

Figma에서 mono100 의 색상코드가 #f1f1f1 이 아닌 #f52c50 으로 설정되어 있습니다. 확인부탁드립니다...!

  • react
  • typescript
  • tailwind-css
  • storybook
  • ui-testing
42 댓글 2 좋아요 0 조회수 161

로그인 성공과 실패 처리 강의중 에러 발생하여 문의드립니다.

해결됨

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

안녕하세요. user(1~9)@aaa.com 계정 생성 후 postman 으로 /api/member/login 호출하여 로그인 성공 후, ApiLoginSuccessHandler 으로 빠지는 부분을 확인 하려는 참입니다. 그런데 postman 으로 호출시 loadUserByUsername 에서 return 이후 successHandler 가는 도중 실패가 뜹니다. Failed to process authentication request org.springframework.security .authentication.BadCredentialsException: 자격 증명에 실패하였습니다. DB에 있는 패스워드와 1111을 매칭해봐도 true 로 반환됩니다. 어떤부분이 문제 일까요...?

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
Yoo Jong-Sun 댓글 3 좋아요 0 조회수 255

수정페이지의 작성완료 누를떄 에러가 납니다

해결됨

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

Edit 페이지 구현하기 챕터의 작성완료 누를때 에러가 나는데 이유를 모르겠어요 https://github.com/dajungleee/section12 확인 한번 부탁드려요ㅠㅠ

  • javascript
  • react
  • node.js
다정 댓글 3 좋아요 0 조회수 263

6.5 에러핸들링) startTranstion 질문입니다!

해결됨

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

안녕하세요, 선생님! 강의를 듣다가 startTransition에 대해 더 찾아봤는데, startTransition()은 우선순위가 낮은 상태 업데이트나 비동기 작업을 처리할 때, 고우선순위 비동기 작업보다 나중에 실행되도록 하는 함수라고 이해했습니다. 그런데, startTransition()이 비동기 작업을 동기적으로 처리하도록 사용된다는 이야기는 찾지 못했습니다. startTransition()을 비동기 작업을 동기적으로 처리하기 위해 사용해도 괜찮은 건가요?

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

Module not found: Error: Can't resolve './App' 에러

미해결

Slack 클론 코딩[실시간 채팅 with React]

안녕하세요. 강의에서 배운 내용 응용해서 사이드 프로젝트 만드는 중인데 Module not found: Error: Can't resolve './App' in '/Users/taetae/Documents/github/PicKIvy/frontend/src' 오류가 고쳐지지 않아 질문드립니다. (시도해본 해결방법들) [ Tsconfig.json ] “jsx": "react-jsx" 으로 설정됐는지 확인 -> 그래도 안됌 “paths" 확인 > "baseUrl": "src", (원래 “.”이었음) "paths": { "@pages/*": ["pages/*"], "@components/*": ["components/*"], "@layouts/*": ["layouts/*"], "@hooks/*": ["hooks/*"], "@utils/*": ["utils/*"], "@typings/*": ["typings/*"] }, 패스에 전부 src/붙여서 "@pages/*": [“src/pages/*"], 해봤는데 안됨 “moduleResolution": "node", 확인 -> 그래도 안됌 [ Web pack.config] Extensions: [ “.tsx”] 으로 설정됐는지 확인 -> 그래도 안됌 package-lock.json지우고 다시 Npm install 안됌 ( rm -rf node_modules package-lock.json -> npm cache clean --force -> npm install ) [ index.tsx ] import App from './App'; 을 import App from './App.tsx; ‘ 로 해봤는데 안됌 [ 폴더구조, tsconfig ] [ 웹팩 ] import path from 'path'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import webpack, { Configuration as WebpackConfiguration } from 'webpack'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; // import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'; interface Configuration extends WebpackConfiguration { devServer?: WebpackDevServerConfiguration; } const isDevelopment = process.env.NODE_ENV !== 'production'; const config: Configuration = { name: 'PicKivy', mode: isDevelopment ? 'development' : 'production', devtool: isDevelopment ? 'inline-source-map' : 'hidden-source-map', resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], alias: { '@hooks': path.resolve(__dirname, 'src/hooks'), '@components': path.resolve(__dirname, 'src/components'), '@layouts': path.resolve(__dirname, 'src/layouts'), '@pages': path.resolve(__dirname, 'src/pages'), '@utils': path.resolve(__dirname, 'src/utils'), '@typings': path.resolve(__dirname, 'src/typings'), }, }, entry: { app: './src/index.tsx', }, target: ['web', 'es6'], module: { rules: [ { test: /\.tsx?$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: [ [ '@babel/preset-env', { targets: { browsers: ['> 0.25%', 'not dead'] }, // 최신 브라우저 타겟팅 debug: isDevelopment, }, ], '@babel/preset-react', '@babel/preset-typescript', ], plugins: [ '@babel/plugin-transform-runtime', isDevelopment && 'react-refresh/babel', '@emotion/babel-plugin', ].filter(Boolean), }, }, { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.(png|jpg|gif|svg)$/, type: 'asset/resource', }, ], }, plugins: [ new ForkTsCheckerWebpackPlugin({ async: false, }), new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }), ], output: { path: path.join(__dirname, 'dist'), filename: '[name].[contenthash].js', publicPath: '/dist/', }, devServer: { historyApiFallback: true, port: 3000, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname, 'public') }, proxy: { '/api/': { target: 'http://localhost:3000', changeOrigin: true, ws: true, }, }, }, }; if (isDevelopment && config.plugins) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); config.plugins.push( new ReactRefreshWebpackPlugin({ overlay: { useURLPolyfill: true, }, }), ); // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: false })); } if (!isDevelopment && config.plugins) { config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true })); // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' })); } export default config; 코드 복붙하니까 코드가 이상하게 나와서 캡쳐본도 올립니다. (test: /\.tsx? 아래부분부터) [ App, index ] @page 하니까 에러떠서 ./로 했습니다. 이것때문에 계속 못하고 있는데 저에게 답을 알려주시면 감사하겠습니다...ㅠ.ㅜ

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
바옹 댓글 1 좋아요 0 조회수 986

섹션16 husky

해결됨

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

git도 다운받았고 터미널도 git bash가 작동이 됩니다. 근데 husky 다운이 안되네요. .git can't be found 따라하는데 계속 이 문장만 자꾸 뜹니다. 그래서 인강에 나온 방법처럼 하지 않고 학습자료에 나와있는거 처럼 따라했는데 괜찮나요? 학습자료 방법으로 해도 괜찮나요 추가 질문) git 을 계속 재설치해서 husky를 깔아도 .git can't be found만 뜨는데요. 왜그런걸까요

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

Visual Test

해결됨

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

스토리북 자체에 Action 탭 오른쪽에 Visual Test라는 탭이 있는걸 확인했습니다. <Chromatic을 활용한 Visual 테스트> 강의와 같은 내용을 기능인가 해서 여쭤봅니다! 같은 기능인데 좀 더 확인하기 쉽게 탭으로 스토리북에서 제공하고있는건가 해서요..ㅎㅎㅎ

  • react
  • typescript
  • tailwind-css
  • storybook
  • ui-testing
김수인 댓글 1 좋아요 1 조회수 136

4.1) 빌드 시 오류 질문 드립니다.

해결됨

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

안녕하세요. 4.1) 앱 라우터의 데이터 페칭 강의를 수강하고 build를 진행했는데 Generating static pages (0/6) [ ] ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout 이런식으로 오류메시지가 출력돼서 메시지에 있는 공식문서를 참고하여 아래와 같이 searchbar.tsx를 수정하였는데요. // searchbar.tsx "use client"; import { Suspense, useEffect, useState } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import style from "./serachbar.module.css"; function Search() { const router = useRouter(); const searchParams = useSearchParams(); const [search, setSearch] = useState(""); const q = searchParams.get("q"); useEffect(() => { setSearch(q || ""); }, [q]); const onChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => { setSearch(e.target.value); }; const onSubmit = () => { if (!search || q === search) return; router.push(`/search?q=${search}`); }; const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Enter") { onSubmit(); } }; return ( <div className={style.container}> <input value={search} onChange={onChangeSearch} onKeyDown={onKeyDown} /> <button onClick={onSubmit}>검색</button> </div> ); } export default function Searchbar() { return ( <Suspense> <Search /> </Suspense> ); } 이런식으로 Suspense로 감싸줬는데도 동일한 오류메시지가 출력돼서 해결방법을 검색해보다가 // loading.tsx import React from "react"; export default function Loading() { return <div>Loading...</div>; } app 폴더 아래에 loading.tsx 파일을 생성하니 정상적으로 build가 되었습니다. 공식문서를 참고하여 Suspense를 감싸줬는데도 해결이 되지 않은 이유가 궁금합니다! 강사님께서 따로 Suspense 관련 언급을 안하신 건 next버젼과 관련이 있을까도 싶어 package.json 파일도 함께 첨부합니다. // package.json { "name": "section04", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "react": "19.0.0-rc-f994737d14-20240522", "react-dom": "19.0.0-rc-f994737d14-20240522", "next": "15.0.0-rc.0" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "15.0.0-rc.0" } } 답변해주시면 감사하겠습니다!! 그리고 혹시 다른 강의도 찍으실 계획이 있는지 궁금합니다! ㅎㅎ 강의 너무 잘 듣고 있습니다 좋은 강의 감사합니다!!^^

  • react
  • typescript
  • next.js
징니 댓글 1 좋아요 0 조회수 488

인기 태그

인프런 TOP Writers

주간 인기글