inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

노란색 경고줄

해결됨

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

노란색 경고줄이 안뜨는데 뜨게 하는 방법이 무엇인가요??

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

백엔드 서버 연결 중 npm run seed 에러 확인 부탁드립니다ㅜ

미해결

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

백엔드 서버 연결 환경 세팅 중 npm run seed를 CLI창에 입력하였는데 오류가 발생되어 확인 부탁드립니다. 깃허브 레포지토리 링크 : https://github.com/hyunji1117/onebite-books-server-main

  • react
  • typescript
  • next.js
  • backendserver
해삼말미잘 댓글 3 좋아요 1 조회수 129

섹션별 강의 코드(자료)가 있을까요?

해결됨

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

자바스크립트 강의때 하단에 있는건 확인했는데 리액트 강의에서 짬짬히 듣느라 직접 코드 수정하지 못했더니 다음 강의까지 연계되는 파일이 많아 이전 강의를 다시 수강해야하는 귀찮음이 있습니다 깃허브에 따로 올려두신 게 있으신지요?

  • react
abc defg 댓글 2 좋아요 0 조회수 109

클로드 3.5 or 4.0 유료 구매를 해야 하나요^^

미해결

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

안녕하세요. Cursor 실습에 사용하기 위해서 클로드 3.5 or 4.0을 사용하기 위해서 유료로 구매를 하고 강의를 따라 가야하는지 문의 드리오니 답변 부탁드립니다. 클로드 3.5도 유료로 되어 있군요. ㅠㅠ 그리고, 혹시 클로드 3.5 무료로 실습 할 수 있는 방법이 있으면 갈켜주세요. 감사합니다.

  • react
  • 웹앱
  • next.js
  • cursor
  • 인공지능(ai)
누리짱 댓글 1 좋아요 0 조회수 294

Todos list map 관련

해결됨

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

<div className='todos_wrapper'> {filterTodos.map((todo) => { return <TodoItem key={todo.id} {...todo} />; })} </div> 위에서 검색어 검색 기능을 보여 주기 위해서 filterTodos로 map 해 주는 건 이해가 가는데 처음에 초기값 보여 주는 건 어디에서 하는 건지 궁금합니다 초기값도 저기서 기능을 해 주는 거 아닌가요? 초기값은 애초에 filter 하지 않았기 때문에 todo.id에 따른 모든 값들을 보여 주는 걸까요 ??? 초기에 모든 값을 보여 주는 건 어디서 하는 건지 이해가 안 됩니다 ㅠ

  • javascript
  • react
  • node.js
immof 댓글 3 좋아요 0 조회수 143

[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요 , 1. 그랩 선생님 소스 코드와 동일 하게 아래 작성한 index.js 소스 첨부 하는데요, 실행 하면 , 1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이 에러가 발생 합니다. 이 에러는 어떻게 해결 할 수 있을까요? -------- 2. index.js 소스 아래에 작성 첨부 합니다. import './index.css'; import axios from "axios"; import React from 'react'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("이곳에는 제 목 mock 서버 주소를 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage; 그리고, 추가적으로 아래 그랩님 답변 본 뒤 다시 시도해 본 후 질문이 있어 추가적으로 글을 적습니다. 현재 postman을 실행하고요, 제 해당 목 mock 서버 주소를 입력 후 끝에 /products까지 하면요, 아래와 첨부한 사진과 같이 잘 데이터를 받아오는 것 같은데요, 위에 에러 화면이 그대로 표시되어 어떻게 해결해야 하는지 방법을 모르겠습니다. 조금 구체적으로 어떻게 해결해야 하는지 단계별로 친절한 설명 부탁 드립니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
isbcom1004 댓글 1 좋아요 0 조회수 119

template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈

미해결

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

아래 코드와 같이 template.tsx에서 서버fetch 후 사용처인 클라이언트 컴포넌트로 props 넘겨주도록 세팅해놓았습니다. //template.tsx 자식 컴포넌트 export default async function Sidebar() { const { isSucceed, body } = await getUserGetInfo(params); return ( <SidebarLayout> <GiftIcon isNewGift={!!body?.info.new_gift} /> 'use client' export default function GiftIcon({ isNewGift }: { isNewGift: boolean }) { const { onClose } = useModal('SIDEBAR'); return ( <Link className={isNewGift ? cn(st['active']) : ''} /// <Icon type="Present" title="선물함" w={25} h={25} /> 이 상태에서 next 페이지 이동 시 서버fetch는 리렌더링 되는것을 확인했는데 이상하게 클라이언트는 리렌더링이 되지 않습니다. 즉 서버 응답값은 상태가 바뀌어도 클라이언트 상태값은 바뀌지 않더라구요... 왜 이런걸까요ㅠㅠㅠ

  • react
  • next.js
  • react-query
  • next-auth
  • msw
변재정 댓글 2 좋아요 0 조회수 93

template.tsx 에서 서버 fetch 후 클라이언트 컴포넌트로 넘겨주면 싱크가 맞는 이유

해결됨

Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

아래 코드와 같이 template.tsx에서 서버fetch 후 사용처인 클라이언트 컴포넌트로 props 넘겨주도록 세팅해놓았습니다. //template.tsx 자식 컴포넌트 export default async function Sidebar() { const { isSucceed, body } = await getUserGetInfo(params); return ( <SidebarLayout> <GiftIcon isNewGift={!!body?.info.new_gift} /> 'use client' export default function GiftIcon({ isNewGift }: { isNewGift: boolean }) { const { onClose } = useModal('SIDEBAR'); return ( <Link className={isNewGift ? cn(st['active']) : ''} /// <Icon type="Present" title="선물함" w={25} h={25} /> 이 상태에서 next 페이지 이동 시 서버fetch는 리렌더링 되는것을 확인했는데 이상하게 클라이언트는 리렌더링이 되지 않습니다. 즉 서버 응답값은 상태가 바뀌어도 클라이언트 상태값은 바뀌지 않더라구요... 왜 이런걸까요ㅠㅠㅠ

  • react
  • typescript
  • next.js
변재정 댓글 1 좋아요 1 조회수 107

TotalCounter을 작성할때

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

저는 처음에 과제를 할때 setTotal 을 직접 prop 으로 내렸는데 handleTotal 을 만들어서 함수로 내려준 이유가 있을까요?? 차이점과 장단점에 대해서가 궁금합니다. import Counter from "./Counter"; import React, { useState } from "react"; function Main() { const [Total, setTotal] = useState(0); return ( <main> <h2>Main Component</h2> <h1>{Total}</h1> <br /> <br /> <Counter Total={Total} setTotal={setTotal} /> <br /> <br /> <Counter Total={Total} setTotal={setTotal} /> </main> ); } export default Main;

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
조성경 댓글 2 좋아요 0 조회수 76

layout 컴포넌트 내 클라이언트 컴포넌트

해결됨

Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

안녕하세요~ 강의 내용 중 궁금한게 있는데요 layout에선 usepathname, usesearchparams 와 같은 값에 접근할 수 없기 때문에 'use client' 지시어를 활용해 클라이언트 컴포넌트를 통해 해당 값에 접근해야한다 라고 말씀해주셨는데 이 개념은 단순 서버 컴포넌트와 클라이언트 컴포넌트에 따른 차이점과 동일한 의미 아닌가요?? next.js 자체가 서버컴포넌트 일 경우 usepathname, usesearchparams 와 같은 훅을 사용할 수 없는데 Page.tsx 컴포넌트도 마찬가지 아닌가요?? 'layout에선' usepathname, usesearchparams 와 같은 값에 접근할 수 없기 때문에 'use client' 지시어를 활용해 클라이언트 컴포넌트를 통해 해당 값에 접근해야한다. 라는 말씀이 Page.tsx 에서의 사용법과 어떤 차이점이 있는지 잘 이해가 가질 않습니다... 아 참고로 next 클라이언트 페이지 라우팅 시 layout영역은 리렌더링 되지 않고 page.tsx 영역만 렌더링된다라는 partial rendering 개념은 이해했습니다. 강의랑 유튜브 항상 잘 보고있습니다. 양질의 영상 제공해주셔서 감사합니다!

  • react
  • typescript
  • next.js
변재정 댓글 2 좋아요 0 조회수 122

Kakao AdFit, Stripe 내용

미해결

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

광고 삽입법 (Google AdSense, Kakao AdFit) 결제 연동 (Toss Payments, Stripe) 강의 소개에 Kakao AdFit, Stripe 언급도 있었는데 강의를 쭉 봤을 땐 내용이 없더라구요. 혹시 제가 놓친 부분이 있을까요?

  • react
  • 웹앱
  • next.js
  • cursor
  • 인공지능(ai)
Donghoon Song 댓글 2 좋아요 0 조회수 93

모바일 화면 전환

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

네비게이션 바 만들 때, 데스크탑에서 모바일로 화면 전환하는 거 어떻게 해요?

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
yosemyti 댓글 1 좋아요 0 조회수 155

drizzle-zod로 변환한 videoUpdateSchema를 z.infer로 추론하면 타입에러가 나타납니다.

미해결

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

'BuildSchema<"update", { id: PgColumn<{ name: "id"; tableName: "videos"; dataType: "string"; columnType: "PgUUID"; data: string; driverParam: string; notNull: true; hasDefault: true; isPrimaryKey: true; isAutoincrement: false; ... 4 more ...; generated: undefined; }, {}, {}>; ... 15 more ...; updatedAt: PgColumn<...>...' 형식이 'ZodType<any, any, any>' 제약 조건을 만족하지 않습니다. 'ZodObject<{ id: ZodOptional<ZodUUID>; title: ZodOptional<ZodString>; description: ZodOptional<ZodNullable<ZodString>>; ... 13 more ...; updatedAt: ZodOptional<...>; }, { ...; }>' 형식에 'ZodType<any, any, any>' 형식의 type, parse, getType, getOrReturnCtx 외 7개 속성이 없습니다. 라는 에러 문구가 코드 에디터에 나타납니다.

  • react
  • postgresql
  • 클론코딩
  • next.js
  • tailwindcss
  • drizzle
차동민 댓글 1 좋아요 0 조회수 172

로그인 관련 커스텀 훅 만들기 -> 부분 질문입니다.

미해결

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

현재 loginSlice.tsx에서 오류가 나고 있습니다.. 아래와 같은 메세지를 접했습니다. useCustomLogin.tsx:2 Uncaught SyntaxError: The requested module '/src/store.tsx' does not provide an export named 'AppDispatch' (at useCustomLogin.tsx:2:10) 어느부분을 손 봐야할까요? vite 6.3버전으로 이용하고 있습니다. loginSlice.tsx import { createAsyncThunk, createSlice } from "@reduxjs/toolkit" import { loginPost } from "../api/memberApi" import { removeCookie, setCookie } from "../util/cookieUtil" export interface LoginInfo { email:string, nickname:string, accessToken: string, refreshToken: string, roleNames: string[], status: string } const initState:LoginInfo = { email: '', nickname: '', accessToken:'', refreshToken: '', roleNames: [], status: '' } export const loginPostAsync = createAsyncThunk('loginPostAsync', ({email, pw}: {email:string, pw:string}) => { console.log("---------------loginPostAsync---------------------") console.log(email, pw) return loginPost(email, pw) }) const loginSlice = createSlice({ name: 'loginSlice', initialState: initState, reducers: { save: (state, action) => { console.log("save...........") return action.payload }, logout: (state, action) => { console.log("logout..........") removeCookie("member") } }, extraReducers :(builder) => { builder.addCase(loginPostAsync.fulfilled , (state, action) => { console.log("loginPostAsync.fulfilled") const newState:LoginInfo = action.payload newState.status = 'fulfilled' setCookie("member", JSON.stringify(newState), 1) return newState }) .addCase(loginPostAsync.pending, (state, action) => { console.log("loginPostAsync.pending") state.status = 'pending' }) .addCase(loginPostAsync.rejected, (state, action) => { console.log("loginPostAsync.rejected") state.status = 'rejected' }) } }) export const { save, logout} = loginSlice.actions export default loginSlice.reducer useCustoLogin.tsx import { useDispatch, useSelector } from "react-redux" import { AppDispatch, RootState } from "../store" import { Navigate, useNavigate } from "react-router" import { loginPostAsync, logout, save } from "../slices/loginSlice" import { useEffect } from "react" import { getCookie } from "../util/cookieUtil" const useCustomLogin = () => { const dispatch = useDispatch<AppDispatch>() //로그인 상태 객체 const loginState = useSelector((state: RootState) => state.loginSlice) //로그인 여부 const loginStatus = loginState.status //fulfilled, pending, rejected useEffect(()=> { if(! loginStatus ) { const cookieData = getCookie("member") if(cookieData){ dispatch(save(cookieData)) } } }, []) const navigate = useNavigate() const doLogin = async (email:string, pw:string) => { dispatch(loginPostAsync({ email, pw })) } const doLogout = () => { dispatch(logout(null)) } const moveToLogin = () => { navigate("/member/login") } const moveToLoginReturn = () => { //--------로그인 페이지로 이동 컴포넌트 return <Navigate replace to="/member/login"/> } const moveToPath = (path:string) => { //----------------페이지 이동 navigate({pathname: path}, {replace:true}) } return {loginState, loginStatus, doLogin, doLogout,moveToLogin,moveToLoginReturn,moveToPath} } export default useCustomLogin store.tsx import { configureStore } from "@reduxjs/toolkit"; import loginSlice from "./slices/loginSlice"; const store = configureStore({ reducer: { "loginSlice": loginSlice, } }) export type AppDispatch = typeof store.dispatch export type RootState = ReturnType<typeof store.getState> export default store

  • react
  • typescript
  • spring-boot
  • jpa
  • jwt
별다방 댓글 2 좋아요 0 조회수 82

배포에 문제가 있네요. 로켓 아이콘은 어디있고, vercel배포는 어디있나요?

미해결

하루만에 배우는 ChatGPT API

다음과 같은 양식으로 남겨주세요. 질문을 한 배경 : 질문내용 : 진심으로 하나도 안보입니다. 도대체 어디서 배포하는거죠? 템플릿이 다르면 어떻게 다른지까지 정확히 알려주시면 감사하겠습니다. 찾지를 못하니, 강의 듣는데 중간 흐름이 너무 끊기네요

  • react
  • netlify
  • chatgpt
  • vercel
자,력/자소,쿠,CS지,올원,깃레 댓글 2 좋아요 1 조회수 96

181. [02-04] setState의 원리 질문

해결됨

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

setIsActive(false) 콘솔에는 찍히는데 backgroundColor: yellow가 gray로는 바뀌고 none으로 하면 바뀌지 않는 이유가 무엇일까요?!

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

tailwind css 설치 위치

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

홈페이지에서 tailwind 4.1버전을 다운 받으니 packge.json의 devDependencies가 아닌 dependencies에 tailwind가 생기는데요. 강의 내용 중엔 devDependencies에 생겨서 구글링을 해보니 배포용과 개발용의 차이라고 하는데, 그렇다면 그 둘을 따로 관리하는 이유가 뭔가요? 제 생각엔 어차피 개발을 완료한 다음에 배포를 할 테니 별도로 관리할 필요가 있을까 싶어서요. 또 한쪽에서 설치한 프레임워크를 다른 쪽으로 옮기려면 그냥 해당 부분을 복사 붙여넣기 하면 되는 건가요?

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
yosemyti 댓글 1 좋아요 0 조회수 240

pdf

해결됨

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

강의자료 pdf다운받아서 사용하려는데, 소유자 암호를 입력하지 않으면 이 문서를 저장할 권한이 없다는데 메모하면서 사용하고싶어서요. 비밀번호를 찾을수없는데 알수있을까요?

  • javascript
  • react
  • node.js
씩씩이 댓글 1 좋아요 0 조회수 83

무한 스크롤 중 스크롤 튐 현상

미해결

[리뉴얼] React로 NodeBird SNS 만들기

무한 스크롤에서 추가 데이터가 load되는 순간, 스크롤 영역이 늘어나게 되는데요. 이 때 유저가 보고 있던 스크롤 위치를 잃고 튀는 현상이 있습니다 당장 생각나는 방법은 이전 scrollY를 갖고 있다가 useLayoutEffect 걸어서 data가 변경될 때 scrollTo 해주는 것인데요, 혹시 더 나은 방법 고민해보셨는지 궁금합니다

  • react
  • redux
  • node.js
  • express
  • next.js
Eric J 댓글 1 좋아요 0 조회수 218

인기 태그

인프런 TOP Writers

주간 인기글