목데이터 불러오는 단계에서부터 막혔어요
해결됨
한 입 크기로 잘라먹는 Next.js
2.9> 한입북스 UI 구현하기 13분 강의하고 똑같이 따라해보고 안 되길래 깃헙에서 복붙에서 붙여 놔도 안되는데 이러면 다른 파일이 틀렸을 가능성이 있나요?
- react
- typescript
- next.js
댓글 2
좋아요 0
조회수 202
묻고 답해요
172만명의 커뮤니티!! 함께 토론해봐요.
재랜더링 최적화 문제
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 제가 직접 tailwind css v4를 이용해서 트위터 클론코딩을 진행하고 있는데 SearchForm에서 입력이 이루어지면, SearchForm의 영향으로 인해서 다른 영역에서도 재랜더링이 일어나는 것 같습니다. 먼저 묻고싶은 내용은 어떻게 하면 다른 영역은 재렌더링이 일어나지 않게 할까 입니다. 리엑트 개발자 도구로 렌더링이 일어날때 하이라이트 표시를 켰습니다. 이 때 SearchForm에 입력이 일어나면 위와같이 SearchForm만 아닌, 다른 영역에도 렌더링이 되는 모습이 보입니다. SearchForm 구성은 다음과 같이했습니다. 최대한 현재 트위터의 입력 방식을 맞추어 보았습니다. "use client"; import { useSearchParams } from "next/navigation"; import React, { useRef, useState, ChangeEventHandler, useEffect, memo, } from "react"; interface SearchFormProps { q?: string; } const SearchForm = () => { const [value, setValue] = useState(""); const inputRef = useRef<HTMLInputElement>(null); const searchParams = useSearchParams(); const search = searchParams.get("q"); const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => setValue(e.target.value); const handleClear = () => { setValue(""); inputRef.current?.focus(); }; useEffect(() => { setValue(search ?? ""); }, []); return ( <div className="relative w-inherit h-12 group min-w-0"> {/* Border 레이어 */} <div className={` absolute inset-0 border border-default-border rounded-full transition-all duration-75 group-focus-within:border-2 group-focus-within:border-twiiter-blue `} /> {/* 내부 요소 컨테이너 */} <div className="relative w-full h-full"> <form className="flex items-center w-full h-full px-4" autoComplete="off" onSubmit={(e) => e.preventDefault()} > {/* 검색 아이콘 (외부 div 기준 위치) */} <svg className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none" width={20} height={20} viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth={2} > <circle cx="11" cy="11" r="8" /> <line x1="21" y1="21" x2="16.65" y2="16.65" /> </svg> {/* Input */} <input ref={inputRef} type="search" placeholder="검색" value={value} onChange={handleChange} className=" w-full h-full pl-10 pr-10 bg-transparent text-base outline-none placeholder-gray-500 appearance-none " /> {/* Clear 버튼 (외부 div 기준 위치) */} {value && ( <button type="button" onClick={handleClear} className=" absolute right-3 top-1/2 -translate-y-1/2 w-7 h-7 flex items-center justify-center bg-gray-700 hover:bg-gray-800 rounded-full transition " tabIndex={-1} aria-label="Clear" > <svg width={16} height={16} viewBox="0 0 20 20" fill="white"> <path d="M10 8.586l4.95-4.95 1.414 1.414L11.414 10l4.95 4.95-1.414 1.414L10 11.414l-4.95 4.95-1.414-1.414L8.586 10l-4.95-4.95L5.05 3.636 10 8.586z" /> </svg> </button> )} </form> </div> </div> ); }; export default SearchForm; 이를 SearchHeader에 적용하였으며. import React from "react"; import SearchTab from "./SearchTab"; import SearchForm from "@/components/common/SearchForm"; const SearchHeader = () => { return ( <div className="w-[calc(100%-72px)] sm:pl-0 sm:max-w-[598px] fixed backdrop-blur-lg border-b-1 border-default-border bg-white/70 dark:bg-black/30"> <div className="w-full mt-2"> <SearchForm /> </div> <div className="w-full mt-1 h-[53px]"> <SearchTab /> </div> </div> ); }; export default SearchHeader; 최종적으로 /search 페이지에 이를 적용했습니다. import React from "react"; import Post from "../home/_components/Post"; import SearchHeader from "./_components/SearchHeader"; interface SearchPageProps { searchParams: Promise<{ q: string; f?: string; pf?: string }>; } const SearchPage = async ({ searchParams }: SearchPageProps) => { const { q } = await searchParams; return ( <main className="main-container"> <SearchHeader /> <div className="mt-[107px]"> <Post /> <Post /> <Post /> <Post /> <Post /> <Post /> <Post /> <Post /> <Post /> </div> </main> ); }; export default SearchPage; 관련된 layout.tsx는 다음과 같습니다. import Image from "next/image"; import Link from "next/link"; import React, { ReactNode } from "react"; import logo from "@/../public/twitter-logo.svg"; import SearchForm from "@/components/common/SearchForm"; import NavMenu from "./_components/NavMenu"; import LinkButton from "@/components/common/LinkButton"; import FollowCard from "./_components/FollowCard"; import TrendCard from "./_components/TrendCard"; import RightSection from "./_components/RightSection"; interface AfterLoginLayoutProps { children: ReactNode; modal: ReactNode; } const AfterLoginLayout = ({ children, modal }: AfterLoginLayoutProps) => { return ( <div className="overflow-y-scroll"> <div className="flex items-stretch"> <header className="flex items-end flex-col sm:flex-grow-1"> <section className="w-[72px] p-2 xl:p-0 xl:w-[275px] h-dvh"> <div className="flex flex-col w-inherit h-dvh fixed "> <Link href={"/home"}> <div className="w-14 h-14 rounded-[50%] flex justify-center items-center hover:bg-[rgba(15,20,25,0.1)]"> <Image src={logo} alt={"twitter logo"} width={40} height={40} /> </div> </Link> <NavMenu /> </div> </section> </header> <div className="flex items-start flex-col h-dvh flex-grow-1"> <div className="h-full w-[100%] sm:w-[600px] lg:w-[920px] xl:w-[990px] flex justify-between "> <main className="w-full sm:max-w-[600px] min-h-full h-fit border-l-1 border-r-1 border-default-border"> {children} </main> <div className="hidden lg:block lg:w-[290px] xl:w-[350px] h-fit relative"> <div className="flex flex-col w-inherit h-dvh fixed pt-1"> <RightSection /> </div> </div> </div> </div> </div> {modal} </div> ); }; export default AfterLoginLayout; SearchForm에 React.memo를 적용을 해보아도 변하지 않았습니다. (다른 영역, 예를 들어 main이 아닌 양 옆의 영역들에 대해서도 React.memo를 넣었지만 그래도 렌더링이 일어나고 있습니다.) 재랜더링 조건은 부모 컴포넌트가 재랜더링 되거나, props가 바뀌거나, state 변경이 일어났을 때인걸로 알고 있습니다. searchForm에서 Input만 영역에만 영향을 줘야할 것이 분명한데, 전체 영역에서 재랜더링이, 즉 layout.tsx에서 재랜더링이 일으키고 있는것 같습니다. (부모 영역) 혹시 렌더링이 어디까지 일어나는지 확인하는 (즉 최종 부모 컴포넌트까지) 방법이 있나요? 그리고 이런 문제가 있을때 어떻게 최적화 할 수 있나요? p.s. 코드상 w-inherit 클래스가 이면 제가 직접 tailwind css utility에 추가하여 기능하도록 만들었습니다. + 추가 console.log()로 재랜더링이 일어나는지 확인해 보았는데 콘솔이 뜨지 않아 재랜더링이 아닌 다른 무슨 활성화(?) 인것 같아 보입니다... 하지만 SearchForm 입력 가지고 무언가 활성화 되는 것 자체가 조금 이해가 되지 않아서... 일단 재랜더링이라고 표현으로 남겨두었습니다...
- react
- next.js
- react-query
- next-auth
- msw
피곤한개발자
댓글 2
좋아요 0
조회수 167
작업형2 모의문제2
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
작업형2 모의문제2 7분 31초에 나오듯이 train, test에서 cols를 삭제하려는데 저는 계속 이런 에러가 발생합니다. 강사님께서 제공해주신 코드를 복붙해도 오류가 발생합니다. 왜 그런걸까요?
- python
- 머신러닝
- 빅데이터
- pandas
- 빅데이터분석기사
김대현
댓글 2
좋아요 0
조회수 95
local host 접속이 안됩니다
미해결
[AI] 프롬프트만으로 아이디어 구현하기_바이브코딩 입문
local host 접속이 안됩니다. 막힌 것 같습니다
- python
- 업무-생산성
- 인공지능(ai)
clubbob
댓글 2
좋아요 0
조회수 513
커서가 한글로 진행 내역을 한글로 보이게 하는 방법?
미해결
[AI] 프롬프트만으로 아이디어 구현하기_바이브코딩 입문
이와 같이 커서가 한글로 보여주려면 어떻게 해야 하나요?
- python
- 업무-생산성
- 인공지능(ai)
clubbob
댓글 1
좋아요 0
조회수 2523
Context 분리하기 중에서 memoizedDispatch에 useMemo를 사용하는 이유가 궁금합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 리액트 초보입니다. 이해하기 쉽게 설명해주셔서 감사합니다. 11.3) Context 분리하기 강의 약 7분 쯤에서 궁금한 부분이 있어서 질문 남깁니다. <TodoDispatchContext.Provider> 를 통해 context를 전달할 때, 함수를 캐싱하기 위해 강의에서는 아래와 같이 useMemo를 사용해주셨는데요! const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []); 우선 최적화하고자 한 이유는 아래와 같다고 이해했습니다. onCreate, onUpdate, onDelete 모두 한 번 생성한 후에 바뀌지 않는 함수로, TodoDispatchContext를 참조하는 자식 컴포넌트들의 리렌더링 방지 그리고 useMemo를 사용하신 부분에서는 마운트 후 onCreate, onUpdate, onDelete는 변하지 않는 함수 이므로 "값을 캐싱한다"는 의미에서 useMemo를 사용해주셨다고 이해했습니다. 다만 useCallback도 mount 후 deps 변경 전에는 함수의 중복 생성을 방지한다는 점에서는 useCallback을 사용해도 좋을 것 같단 생각이 들었는데요, 결론적으로 제가 궁금한 부분은 아래와 같습니다. useMemo 대신 useCallback을 사용해서도 동일하게 최적화 할 수 있다고 이해했는데, 제가 이해한 게 맞을까요? 1번이 맞다면 강의에서 useMemo를 사용해주신 이유는 캐싱하기 위함(의도)을 표현하기 위함이라고 이해하면 될지도 궁금합니다! 실무에서는 useMemo와 useCallback을 모두 사용할 수 있는 경우 어떤 훅을 선택하시는지, 강의에서 useMemo를 통해 캐싱하신 이유가 궁금했습니다 ! 블로그를 찾아봐도 잘 이해가 되지 않아서 질문으로 남깁니다! 답변 주시면 감사하겠습니다!
- javascript
- react
- node.js
slothbear.hj
댓글 2
좋아요 0
조회수 231
6분23초 MainPage 코드와 자료 코드 불일치 관련 문
해결됨
코드로 배우는 React 19 with 스프링부트 API서버
안녕하세요, 강사님. React Router 설정 강의 중 6분 23초에 사용하신 MainPage 코드와 강의 자료에 제공된 MainPage 코드의 작성 방식이 서로 달라서 문의드립니다. 영상에서는 함수 선언식( function MainPage … )을, 자료에서는 화살표 함수( const MainPage = … ) 형태로 소개되어 다소 혼란이 있습니다. 혹시 두 방식 중 특별히 권장하시는 것이 있는지 , 아니면 단순히 문법 스타일 차이인지 알고 싶습니다 . 또한, React나 Spring Boot의 버전 차이 에 따라 코드 작성 방식이 달라지는 부분이 있는지도 궁금합니다. 앞으로는 강의 영상 기준의 코드 를 우선 따라 작성해도 괜찮을지 안내해 주시면 감사하겠습니다. 바쁘신 와중에 읽어주셔서 감사합니다. 답변 기다리겠습니다. 감사합니다.
- spring-boot
- jpa
- jwt
- redux-toolkit
- react
김지수
댓글 2
좋아요 0
조회수 147
작업형1 모의문제1 문제1
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
<앞에서부터 70% 데이터 중 views 컬럼의 3사분위 수에서 1사분위 수를 뺀 값을 구하시오> 이 문제 해결할 때, int앞에 : 은 왜 넣는건가요? df = df[:int(len(df) * 0.7)]
- python
- 머신러닝
- 빅데이터
- pandas
- 빅데이터분석기사
ssjmj0404
댓글 2
좋아요 0
조회수 58
5.동전분배하기 문제 밑에코드도 정답이될까요?
미해결
파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)
n = int(input()) c = [] for _ in range(n): b = int(input()) c.append(b) def DFS(L,first,second,third): global best a = max(first,second,third) - min(first,second,third) if a >= best: return if L == n: if a < best: best = a else: for i in range(n): if ch[i] == 0: ch[i] = 1 DFS(L+1,first+c[i],second,third) DFS(L+1,first,second+c[i],third) DFS(L+1,first,second,third+c[i]) ch[i] = 0 ch = [0] * n best = 10000000000000 DFS(0,0,0,0) print(best)
- python
- 코딩-테스트
yswo2100
댓글 1
좋아요 0
조회수 134
1090번 문제 질문
미해결
2주만에 통과하는 알고리즘 코딩테스트 (2024년)
문제에 대한 정리가 필요해 질문 남깁니다. 결국 문제는 1명, 2명, 3명 이렇게 차례대로 모였을 때 1명 모이면 이동거리 최소 이동 거리 합 : n1 2명 모이면 이동거리 최소 이동 거리 합 : n2 n명 모이면 이동거리 최소 이동 거리 합 : nn 이런 최소값을 원하는 문제인거죠? 그래서 1번 아이디어로 구현 했을 경우에는 모든 좌표에 대해서 1명 모일 때 , 2명 모일 때 반복하면서 모든 경우의 수를 찾아가는 가는 방법이고 2번 아이디어의 경우는 모든 좌표를 볼 필요 없이 각각의 집 좌표만 보면 된다라는 생각을 해서 각각의 집 좌표로 비교해서 경우의 수를 찾는 방법이고 3번 아이디어는 각각의 집 좌표들을 모두 비교할 필요 없이 정렬 후 인원의 수 만큼 돌면서 작은 값이면 바꿔준다 방법이고 이런 느낌으로 접근을 한게 맞는 걸까요?
- python
- 코딩-테스트
- 알고리즘
ybs1121
댓글 1
좋아요 0
조회수 171
AWS 배포 후 사이트 접속이 원할하지 않은 문제
해결됨
(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>
선생님! 안녕하세요! 제가 AWS에 배포 후 도메인을 붙이고 접속했을 때 첫 페이지는 잘 나왔습니다. 근데 테스트를 클릭하니 URL이 도메인 주소가 아닌 localhost로 바뀌면서 접속이 안됩니다. 어느 포인트를 수정해야할까요?ㅠ
- react
- aws
- Google-Analytics
- cloudflare
- adsense
- 수익화
asd
댓글 1
좋아요 0
조회수 143
삭제기능 구현부분에 대해 질문있습니다.
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
안녕하세요 삭제기능 구현 강의를 보다가 조금 어려운 부분이 있어 질문을 드립니다. canvas.js 파일에서 getCanvases함수와 createCanvas함수는 canvases.get, canvases.post앞에 return이 붙었고 이건 다른 곳에서 사용할 수 있다라고 알고 있습니다. 그럼 deleteCanvas는 왜 똑같이 return을 사용하지 않고 async await을 사용했는지 궁금하고 왜 위에 두 함수는 return을 사용했는지도 궁금합니다.
- react
- React-Context
- react-router
- tailwindcss
- react-query
부드러운 족제비
댓글 2
좋아요 0
조회수 84
도표 강의 자료 열람 불가능
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
안녕하세요 강의 잘 듣고 있습니다 도표강의자료 들어가면 파일을 찾지 못했다고 오류가 나옵니다
- react
- redux
- node.js
- 웹앱
- mongodb
sheepjune
댓글 1
좋아요 0
조회수 140
VS코드에러
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
VS코드에서 에러는 뜨는데 실행은 됩니다. 강의VS코드에서는 에러 안뜨던데 왜 제꺼에서만 에러가 뜰까요?
- javascript
- react
- node.js
H Hun
댓글 1
좋아요 0
조회수 118
<> </> 의미
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
여기서 에러떠서 리턴문 안에<> </> 추가했더니 해결됬어요 <> </> 의미가 뭐죠?
- javascript
- react
H Hun
댓글 3
좋아요 0
조회수 118
tailwind css 오류
미해결
코드로 배우는 React 19 with 스프링부트 API서버
postcss.config.js는 설정할 필요 없나요?
- react
- spring-boot
- jpa
- jwt
- redux-toolkit
이상영
댓글 2
좋아요 0
조회수 119
작업형1 모의문제3 문제9
미해결
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
작업형1 모의문제3 문제9관련 질문입니다. 해설을 보고 코드를 작성했는데, 결과값이 11이 아니라 np.int32(11)로 나옵니다. 무엇이 잘못되었을까요? 문제9 구독(subscribed) 월별로 데이터 개수를 구한 뒤 가장 작은 구독 수가 있는 월을 구하시오 # your code import pandas as pd df = pd.read_csv("https://raw.githubusercontent.com/lovedlim/inf/main/p1/members.csv") df['subscribed']=pd.to_datetime(df['subscribed']) df['year']= df['subscribed'].dt.year df['month']= df['subscribed'].dt.month df['day'] =df['subscribed'].dt.day df= df.groupby('month').count() df.sort_values('subscribed').index[0] =>np.int32(11)
- python
- 머신러닝
- 빅데이터
- pandas
- 빅데이터분석기사
신수아
댓글 2
좋아요 0
조회수 106
tailwind css 오류
미해결
코드로 배우는 React 19 with 스프링부트 API서버
'tailwind'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 떠서 수동으로 tailwind.config.js 파일 추가하고 index.css랑 기타 설정하고 실행했더니 ERROR in ./src/App.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/App.css) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration. at Le (C:\react\react_springboot\node_modules\tailwindcss\dist\lib.js:36:1984) at LazyResult.runOnRoot (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:361:16) at LazyResult.runAsync (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:290:26) at LazyResult.async (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:192:30) at LazyResult.then (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:436:17) ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration. at Le (C:\react\react_springboot\node_modules\tailwindcss\dist\lib.js:36:1984) at LazyResult.runOnRoot (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:361:16) at LazyResult.runAsync (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:290:26) at LazyResult.async (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:192:30) at LazyResult.then (C:\react\react_springboot\node_modules\postcss\lib\lazy-result.js:436:17) 위 오류가 뜨네요 ㅜ
- react
- spring-boot
- jpa
- jwt
- redux-toolkit
이상영
댓글 1
좋아요 0
조회수 622
캔버스 프로젝트에서 파일명에 대해 질문있습니다.
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
안녕하세요 현재 캔버스 프로젝트 부분을 공부중입니다. 공부를 하면서 파일에 대해 궁금한점이 생겼는데 컴포넌트에는 뒤에 .jsx를 작성했는데 api폴더에서 canvas와 http 파일에는 .js가 붙은 이유가 뭔지 궁금합니다.
- react
- React-Context
- react-router
- tailwindcss
- react-query
부드러운 족제비
댓글 1
좋아요 0
조회수 101
vitest 설치했는데
미해결
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
이렇게 발견된 테스트가 없다면서 8:39 화면처럼 테스트확장에 리스트가 출력되지않습니다.. 브랜치받고 npm ci 까지 한 상태입니다. 커서 ide 참고로 0.2.42 버전 없어서 제일낮은 0.3 버전사용해도 못찾습니다 .. Vitest v0.33.0 is not supported. Vitest v1.4.0 or newer is required. 이렇게 출려되는데 버전을 올릴까요 ?
- javascript
- react
- 소프트웨어-테스트
- vitest
댓글 2
좋아요 0
조회수 231
인기 태그
인프런 TOP Writers
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv