목데이터 불러오는 단계에서부터 막혔어요
해결됨
한 입 크기로 잘라먹는 Next.js
2.9> 한입북스 UI 구현하기 13분 강의하고 똑같이 따라해보고 안 되길래 깃헙에서 복붙에서 붙여 놔도 안되는데 이러면 다른 파일이 틀렸을 가능성이 있나요?
- react
- typescript
- next.js
댓글 2
좋아요 0
조회수 200
묻고 답해요
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
조회수 509
커서가 한글로 진행 내역을 한글로 보이게 하는 방법?
미해결
[AI] 프롬프트만으로 아이디어 구현하기_바이브코딩 입문
이와 같이 커서가 한글로 보여주려면 어떻게 해야 하나요?
- python
- 업무-생산성
- 인공지능(ai)
clubbob
댓글 1
좋아요 0
조회수 2519
작업형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
조회수 133
1090번 문제 질문
미해결
2주만에 통과하는 알고리즘 코딩테스트 (2024년)
문제에 대한 정리가 필요해 질문 남깁니다. 결국 문제는 1명, 2명, 3명 이렇게 차례대로 모였을 때 1명 모이면 이동거리 최소 이동 거리 합 : n1 2명 모이면 이동거리 최소 이동 거리 합 : n2 n명 모이면 이동거리 최소 이동 거리 합 : nn 이런 최소값을 원하는 문제인거죠? 그래서 1번 아이디어로 구현 했을 경우에는 모든 좌표에 대해서 1명 모일 때 , 2명 모일 때 반복하면서 모든 경우의 수를 찾아가는 가는 방법이고 2번 아이디어의 경우는 모든 좌표를 볼 필요 없이 각각의 집 좌표만 보면 된다라는 생각을 해서 각각의 집 좌표로 비교해서 경우의 수를 찾는 방법이고 3번 아이디어는 각각의 집 좌표들을 모두 비교할 필요 없이 정렬 후 인원의 수 만큼 돌면서 작은 값이면 바꿔준다 방법이고 이런 느낌으로 접근을 한게 맞는 걸까요?
- python
- 코딩-테스트
- 알고리즘
ybs1121
댓글 1
좋아요 0
조회수 171
작업형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
수강 연장 문의
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
안녕하세요. 교수님 10회 실기시험 목표로 하고 있는 수강생 입니다. 제가 5월 중순에 수강 기간이 만료인데 10회 실기시험 전까지만 연장 가능할까요?ㅠㅠ 이메일은 lbk375@naver.com 입니다.
- python
- 머신러닝
- 빅데이터
- pandas
- 빅데이터분석기사
이복기
댓글 2
좋아요 0
조회수 72
강사님의 로그와 저의 리퀘스트 메모이제이션 로그가 달라요!
미해결
한 입 크기로 잘라먹는 Next.js
넥스트 서버에서 찍히는 로그가 달라서 문의드립니다. 다만 제가 백엔드쪽에서 콘솔을 찍어보니까 넥스트 로그와는 별개로 한번씩만 호출되는걸로 보여지는데 리퀘스트 메모이제이션이 잘 동작하는게 맞는지 궁금합니다 넥스트 로그 네스트 컨트롤러 로그
- react
- typescript
- next.js
baby4
댓글 3
좋아요 1
조회수 308
모듈 에러
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 모듈 에러가 뜨는데 수파베이스 설치를 잘못 한 것일까요? 검색해서 이리 저리 해보아도 잘 해결이 되지 않네요. 도와주세요~
- firebase
- next.js
- tailwindcss
- react-query
- supabase
댓글 2
좋아요 0
조회수 181
작업형1 모의문제1의 문제3
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
문제3을 풀다가 궁금한 부분이 생겨서 질문합니다. f3 컬럼의 결측치는 0, silver는 1, gold는 2, vip는 3 으로 변환하는 과정에서 1,2,3을 문자형으로 했을 때는 제대로 나오는데, 숫자형으로 진행하면 오류가 납니다. 아래 제 제가 작성한 코드와 오류 내용입니다. # your code import pandas as pd df = pd.read_csv("https://raw.githubusercontent.com/lovedlim/inf/main/p1/members.csv") #views 컬럼에 결측치가 있는 데이터(행)을 삭제하고, # print(df.isnull().sum()) # print(df.shape) df=df.dropna(subset=['views']) # print(df.shape) # f3 컬럼의 결측치는 0, silver는 1, gold는 2, vip는 3 으로 변환한 후 # print(df.head(10)) df['f3']=df['f3'].fillna(0) df['f3']=df['f3'].replace('silver',1) df['f3']=df['f3'].replace('gold',2) df['f3']=df['f3'].replace('vip',3) # print(df.head(10)) #총 합을 정수형으로 출력하시오 # print(df.info()) df['f3']=df['f3'].astype('int') # print(df.info()) print(sum(df['f3'])) 출력값 =>133 <ipython-input-136-3e83f178c7e6>:20: FutureWarning: Downcasting behavior in `replace` is deprecated and will be removed in a future version. To retain the old behavior, explicitly call `result.infer_objects(copy=False)`. To opt-in to the future behavior, set `pd.set_option('future.no_silent_downcasting', True)` df['f3']=df['f3'].replace('vip',3) 마지막 방법으로 알려주신 sum의 방법의 경우 문제에서 제시하는 값을 변환하고 총 합을 출력하라는 지시에서 값을 실제로 변환하지는 않은 것 같은데.. 답만 맞으면 괜찮은 걸까요? # your code import pandas as pd df = pd.read_csv("https://raw.githubusercontent.com/lovedlim/inf/main/p1/members.csv") #views 컬럼에 결측치가 있는 데이터(행)을 삭제하고, # print(df.isnull().sum()) # print(df.shape) df=df.dropna(subset=['views']) # print(df.shape) # f3 컬럼의 결측치는 0, silver는 1, gold는 2, vip는 3 으로 변환한 후 r1=sum(df['f3']=='silver')*1 r2=sum(df['f3']=='gold')*2 r3=sum(df['f3']=='vip')*3 print(r1+r2+r3) => 133
- python
- 머신러닝
- 빅데이터
- pandas
- 빅데이터분석기사
신수아
댓글 2
좋아요 0
조회수 82
Parallel Route를 사용한 모달에 대해 질문이 있어요.
해결됨
Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로
하드 내비게이션(새로고침, 직접 URL 접근) 불가라고 하셨는데, default.js를 활용하면, 딥 링킹과 공유 가능 URL을 지원할 수 있는걸까요??
- react
- typescript
- next.js
주구름
댓글 2
좋아요 0
조회수 131
판다스 updated 강의 순서 문의
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
안녕하세요. 현재 섹션 3 [작업형1] 판다스 updated 2025.4를 학습중입니다. 판다스 6,7은 시계열 데이터 인데.. 자료에는 ["시계열 데이터" 부분은 마지막으로 옮겼습니다.]고 되어있고 Section19~21 내용은 어떤 강의를 보아야 하는지 모르겠습니다.
- python
- 머신러닝
- 빅데이터
- pandas
- 빅데이터분석기사
신수아
댓글 1
좋아요 0
조회수 130
서버 컴포넌트 console.log
해결됨
한 입 크기로 잘라먹는 Next.js
앱 라우터의 데이터 패칭 수업 중 서버 컴포넌트에서 찍은 콘솔창은 브라우저에서는 보이지 않는다고 하시는데 브라우저 콘솔에 아주 잘보이거든여? 제가 잘 못 이해한걸 까요? // 랜덤으로 추천도서 가져옴 async function RecoBooks() { //api로 데이터를 불러오면 타입스크립트는 어떤 결과값을 가져올지 몰라 타입정보를 지정해줘야한다. const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/random` ); //예외처리 필수 if (!response.ok) { return <div>오류가 발생했습니다...</div>; } const recoBooks: BookData[] = await response.json(); //타입 : BookData[] console.log("랜덤 => ", recoBooks); //정상적으로 불러와서 렌더링까지 확인할 수 있다. return ( <div> {recoBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </div> ); } export default function Home() { //async 제외 // 인덱스 페이지 return ( <div className={style.container}> {/* section 태그는 div 태그와 이름만 다른뿐 기능은 같다 */} <section> <h3>지금 추천하는 도서</h3> {/*books은 mock폴더안에 임시 배열데이터, list 형태로 렌더링 */} <RecoBooks /> </section> <section> <h3>등록된 모든 도서</h3> <AllBook /> </section> </div> ); }
- react
- typescript
- next.js
ddobbi
댓글 1
좋아요 -1
조회수 179
슬라이싱 관련 질문
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
안녕하세요. 슬라이싱에서 마지막 앞 단어 추출할 때 listbox[7:-1] 이렇게 입력하면, '-1'이 마지막 값(9)이니까 listbox[7:9]와 같은 결과가 나와야 하지 않나요? 왜 listbox[7:8]과 같은 결과가 나오는 걸까요?
- python
- 머신러닝
- 빅데이터
- pandas
- 빅데이터분석기사
BD (BD)
댓글 2
좋아요 0
조회수 70
서버 컴포넌트의 렌더링 과정
해결됨
한 입 크기로 잘라먹는 Next.js
Next.js의 App Router 강의를 듣다가 헷갈리는 부분이 있어서 질문 드립니다! 서버 컴포넌트로 초기 접속을 하게 되면 서버에서 RSC Payload와 HTML을 렌더링해서 브라우저에 보여주는걸까요? 아니면 RSC Payload가 직렬화한 HTML 정보를 가지고 있어서 바로 브라우저에 보내지는걸까요? 공식 문서에는 하이드레이션을 한다고 되어 있는데 하이드레이션을 하게 되면 두 번 렌더링이 되는거 아닌가요?? Link를 통해 서버 컴포넌트로 이동하게 되면 클라이어트 컴포넌트가 이동하는 것처럼 CSR 방식으로 동작을 하는건가요? 만약 동작을 한다 그러면, prefetch된 RSC Payload를 통해서 브라우저가 새로운 UI를 구성하는건가요?
- react
- typescript
- next.js
gayeongx0916
댓글 2
좋아요 0
조회수 121
강의연장 문의드립니다
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
안녕하세요! 필기 8회 합격후 작년에 시험일때마다 일정이 겹쳐 접수만해놓고 실기 시험을 못쳤습니다.. 그래서 올해 10회차 실기시험을 보려하는데 만료까지 일주일남아서요ㅜㅜ 혹시 연장가능할까요?! 메일주소는 tmfql7473@naver.com 입니다.
- python
- 머신러닝
- 빅데이터
- pandas
- 빅데이터분석기사
kor0227
댓글 2
좋아요 0
조회수 65
강의 기간 연장 요청 드려도 될까요?
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
선생님~ 매번 55점, 50점 이렇게 탈락해서 ㅠㅠ 이번에는 꼭 합격 하려고 하거든요 작업2는 매번 만점이었는데 ,1/3 유형에서 조금만 응용되어 나오면 멘붕오면서 잘 안되더라고요ㅠ moonsj@kakao.com 이게 등록된 메일인데, 연장 부탁드립니다! 10회에는 꼭 합격하길 바라며ㅠㅠ
- python
- 머신러닝
- 빅데이터
- pandas
- 빅데이터분석기사
moonwrd
댓글 2
좋아요 0
조회수 130
인기 태그
인프런 TOP Writers
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv