inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

컴포넌트 렌더링 최적화 관련해서 질문드립니다.

해결됨

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

10.3) React.memo와 컴포넌트 렌더링 최적화 강의를 보고, 투두 리스트 아이템에 체크박스를 클릭했을 때, Header 컴포넌트 외에 Editor 컴포넌트도 불필요하게 리렌더링이 되고 있어 리렌더링 되지 않도록 코드를 수정하였습니다. 코드를 수정해서 더 이상 리렌더링이 되지 않고 있는데 이러한 성능 최적화가 정말 필요한 건지에 대한 의문이 듭니다. 거대한 컴포넌트의 경우 불필요한 리렌더링을 막는 것은 정말 필요하고 좋을 것 같은데 Editor 컴포넌트나 Header 컴포넌트 정도의 작은 컴포넌트의 리렌더링도, 불필요하게 일어난다면 막는 것이 좋은 건지 아니면 굳이 최적화가 필요 없는 지 실무 관점에서 궁금합니다.

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

selenium 업그레이드됨... 문법도 바뀜

미해결

파이썬 무료 강의 (활용편3) - 웹 스크래핑 (5시간)

기존 강의에서 elem = browser.find_element_by_id("query") 였는데 이제는 elem = browser.find_element("id","query") 이렇게 작성해야함 ㅜㅜ 계속 AttributeError 떠서 미치는줄 알았는데 구글링해서 찾다보니 나와서 써보니 문법이 바뀐거였음

  • python
  • 웹-크롤링
  • selenium
  • 웹-스크래핑
우성 댓글 1 좋아요 1 조회수 324

eslint를 추가하였지만 동작을 안합니다.

미해결

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

'react/self-closing-comp': 'warn' 해당 문구를 추가했음에도 동작하지 않습니다. 재부팅도 해보았습니다만 동작하지 않습니다. 제가 잘못한 것이 있을까요?

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
  • eslint
조준희 댓글 3 좋아요 0 조회수 220

vite로 리액트 빌드한 후 깃허브에 배포하는 방법

미해결

만들면서 배우는 리액트 : 기초

강사님 강의 보면서 저는 vite 를 이용해서 했는데요, 그런 경우는 깃허브에 배포를 어떻게 해야 하나요? npm run build npm install gh-pages 그 다음에 package.json 파일도 아래처럼 수정을 했습니다. "homepage": " 깃허브주소 넣음 ", "deploy": "gh-pages -d dist" 그다음에 다시 npm run build npm run deploy 하면 깃허브에 gh-pages 가 생겨야 하는데 생기지를 않아서요.... 어디 부분을 잘못 한걸까요?

  • javascript
  • react
gangsugi 댓글 1 좋아요 0 조회수 365

빌드할때 dist 폴더가 만들어지는데요,

미해결

만들면서 배우는 리액트 : 기초

마지막에 빌드를 하려고 하는데요, 저는 vite를 이용해서 했구요, 깃허브에 페이지 올리고 pages까지 오픈을 했습니다. 그리고 나서 npm run build 를 하면 강사님하고 다르게 build 폴더가 아니고 dist폴더가 만들어지는데요, 혹시 그럴경우엔 깃허브에 배포할때 명령어가 혹시 강의내용과 다르게 해야 하는 부분이 있는지요? npm install gh-pages package.json 파일에서 소스 추가할때 "deploy": "gh-pages -d build" 위의 파일을 수정한 후 다시 npm run build npm run deploy 여기까지 해도 깃허브 저장소에서 gitpages가 생기기 않습니다...

  • javascript
  • react
gangsugi 댓글 1 좋아요 0 조회수 845

12.11) Home 페이지 구현하기 2. 기능

해결됨

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

해당 챕터에서 강의대로 진행했고 몇번을 다시 확인해봐도 차이점을 도통 찾지 못해서 문의드립니다. Home.jsx에서 데이터를 필터걸어도 걸리지않는 상황 DiaryList.jsx에서 DiaryItem으로 데이터를 보내도 받는쪽에서 받지 못하는 상황(개발자도구에서는 워닝으로 hook.js:608 Warning: Each child in a list should have a unique "key" prop) 발생 이하 소스첨부 드립니다. App.jsx import './App.css' import { useReducer, useRef, createContext } from 'react'; import { Routes, Route } from 'react-router-dom'; import Home from './pages/Home'; import Diary from './pages/Diary'; import New from './pages/new'; import Edit from './pages/Edit'; import Notfound from './pages/Notfound'; const mockData =[ { id : 1, createdDate : new Date("2024-12-6").getTime(), emotionId : 1, content : "1번 일기내용", }, { id : 2, createdDate : new Date("2024-12-5").getTime(), emotionId : 2, content : "2번 일기내용", }, { id : 3, createdDate : new Date("2024-11-15").getTime(), emotionId : 3, content : "3번 일기내용", }, ] function reducer(state, action){ switch(action.type){ case 'CREATE' : return [action.data, ...state] case 'UPDATE' : return state.map((item)=> String(item.id) === String(action.data.id) ? action.data : item) case 'DELETE' : return state.filter((item) => String(item.id) !== String(action.id)); default : return state; } } export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, [mockData]); const idRef = useRef(3); const onCreate =(createdDate, emotionId, content) => { dispatch({ type:"CREATE", data : { id : idRef.current++, createdDate, emotionId, content, }, }) } const onUpdate = (id,createdDate , emotionId, content) => { dispatch( { type : "UPDATE", data : { id, createdDate, emotionId, content, }, } ) } const onDelete = (id) => { dispatch( { type : "DELTE", data : { id, } } ) } return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete, }} > <Routes> <Route path="/" element={<Home />}></Route> <Route path="/new" element={<New />}></Route> <Route path="/diary/:id" element={<Diary />}></Route> <Route path="/edit/:id" element={<Edit />}></Route> <Route path="*" element={<Notfound />}></Route> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); }; export default App Home.jsx import { useState, useContext } from "react"; import { DiaryStateContext } from "../App"; import Button from "../components/button"; import Header from "../components/Header" import DiaryList from "../components/DiaryList"; const getMonthlyData = (pivotDate, data) =>{ const beginTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth(), 1, 0, 0, 0 ).getTime(); const endTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth() + 1, 0, 23, 59, 59 ).getTime(); console.log('필터시작일자 : ' + beginTime + '필터종료일자' + endTime) return data.filter((item)=> beginTime <= item.createdDate <= endTime); } const Home = () => { const data = useContext(DiaryStateContext); const [pivotDate,setPivotDate] = useState(new Date()); const monthlyData = getMonthlyData(pivotDate, data); console.log(monthlyData); const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1) ); }; const onDecreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() - 1) ); }; return <div> <Header title = {`${pivotDate.getFullYear()} 년 ${ pivotDate.getMonth()+ 1 }월`} leftChild={<Button onClick={onDecreaseMonth} text="<" />} rightChild={<Button onClick={onIncreaseMonth} text=">" />} /> <DiaryList data={monthlyData} /> </div>; } export default Home; DiaryList.jsx import './DiaryList.css' import Button from "./button"; import DiaryItem from './DiaryItem'; import { useNavigate } from 'react-router-dom'; import { useState } from 'react'; const DiaryList = ({data}) => { const nav = useNavigate(); const [sortType, setSortType] = useState("latest"); const onChangeSortType = (e) => { setSortType(e.target.value); }; const getSortedDate = () => { return data.toSorted((a, b) => { if(sortType ==='oldest'){ return Number(a.createdDate) - Number(b.createdDate); } else { return Number(b.createdDate) - Number(a.createdDate); } }); } const sortedData = getSortedDate(); return ( <div className="DiaryList"> <div className="menu_bar"> <select> <option value={"latest"}>최신순</option> <option value={"oldest"}>오래된순</option> </select> <Button onClick = {() => nav("/new")} text={"새 일기 쓰기"} type={"POSITIVE"} /> </div> <div className="list_wrapper"> {sortedData.map((item)=><DiaryItem key={item.id} {...item}/>)} </div> </div> ); }; export default DiaryList; DiaryItem.jsx import getEmotionImage from "../util/get-emotion-image" import Button from "./button"; import "./DiaryItem.css"; import { useNavigate } from "react-router-dom"; const DiaryItem = ({id, emotionId, createdDate, content}) => { const nav = useNavigate(); return ( <div className="DiaryItem"> <div onClick={()=>nav(`/diary/${id}`)} className={`img_section img_section_${emotionId}`} > <img src={getEmotionImage(1)} /> </div> <div onClick={()=>nav(`/diary/${id}`)} className="info_section"> <div className="created_date"> {new Date(createdDate).toLocaleDateString()} </div> <div className="content">{content}</div> </div> <div className="button_section"> <Button onClick={()=>nav(`/edit/${id}`)} text={"수정하기"} /> </div> </div> ) }; export default DiaryItem;

  • javascript
  • react
  • node.js
horlove86 댓글 1 좋아요 0 조회수 150

fetch() 사용 관련 질문입니다.

해결됨

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

안녕하세요. 강의를 전부 수강한 수강생입니다. 강사님의 강의를 보다가 궁금한 것이 있어서 질문 남깁니다. 강의에서는 API 요청 방식을 fetch를 사용하여 전부 Next 서버에서 요청을 보내는 방식이던데 클라이언트 컴포넌트에서 fetch를 사용하여 브라우저를 통해 요청하는 방법과 강의와 같이 사용하는 방법, API Route(Handle) 방식을 사용하는 방법의 차이를 알 수 있을까요?? 또한 Next 서버의 부하는 괜찮은지 궁금합니다.

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

동영상 플레이 에러

미해결

iOS 개발 찍먹하기 - SwiftUI

안녕하세요? '개발할 때 도움이 되는 맥앱 추천' 강의부터 'Sign in to confirm you're not a bot' 메세지와 함께 플레이가 안됩니다. 확인 부탁드립니다.

  • ios
  • swift
  • swiftui
espressohn 댓글 1 좋아요 0 조회수 136

book_scraper.py 에서 import get_secret 관련 질문

미해결

파이썬 동시성 프로그래밍 : 데이터 수집부터 웹 개발까지 (feat. FastAPI, async, await)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. from app.config import NAVER_API_ID, NAVER_API_SECRET 가 아닌 from app.config import get_secret 로 import 한 이유가 궁금합니다. 클래스 내에 NAVER_API_ID = get_secret("NAVER_API_ID") NAVER_API_SECRET = get_secret("NAVER_API_SECRET") 로 변수 선언한 이유가 있을까요? get_secret은 config 파일에서 이미 수행해 NAVER_API_ID와 NAVER_API_SECRET을 변수로 가지고 있으니, 위처럼 클래스 내에 변수롤 또 선언하면 config 파일에서 get_secret 함수를 이용해 변수를 만든 이유가 없다고 생각이 들었습니다. from app.config import NAVER_API_ID, NAVER_API_SECRET config 파일에서 NAVER_API_ID와 NAVER_API_SECRET을 import해서 바로 사용하면 어떤 차이가 있나요?

  • python
  • 동시성
  • FastAPI
종마 댓글 1 좋아요 0 조회수 128

한글 2024에서는 한글 문서 열기가 안되는데 다른 방법을 써야 하나요?

해결됨

직장인에게 꼭 필요한 파이썬-아래아한글 자동화 레시피

한글2024 버전에선 이 코드로 한글 문서가 안열리는데 다른 방법을 써야 하나요? import win32com.client as win32 hwp = win32.gencache.EnsureDispatch("hwpframe.hwpobject") hwp.XHwpWindows.Item(0).Visible = True

  • python
  • 한컴오피스
김재영 댓글 1 좋아요 1 조회수 335

2025 강의

해결됨

(2026 최신!) 일주일만에 합격하는 정보처리기사 실기

질문은 동영상 강의에 들어가서 오른쪽에 커뮤니티 버튼을 통해 해주세요. 그래야 어떤 강좌에서 질문하셨는지 알 수 있습니다. 영상에서 몇 분 몇 초 대를 알려주셔야 제가 한 번에 질문 내용 확인이 가능합니다. 이미 다른 누군가가 질문을 한 이력 이 있을 수 있습니다. 질문 게시판을 한 번 확인 부탁드립니다. 학교의 과제나 타 강사의 코드 등 외부 수업 자료에 대해서는 답변하지 않습니다. 제가 다루는 커리큘럼 외의 이론이나, 너무 디테일한 컴퓨터 이론에 대해서는 답변 드리지 않습니다. 시험에 안 나오는 경우가 많고, 나와 봤자 1문제 나오는데 외워야 할 부분이 많은 것 등 (예시: 서브넷 마스크 계산) 질문을 올릴 때 이 글은 모두 지우고 내용을 입력해주세요. 유튜브로 3회차 합격률 영상보다가 20프로 할인한다는 거 보고 구매했습니다. 2025년도 되면 강의라든가 24년도 3회차 기출문제 풀이 이런것도 최신화가 되나요??

  • python
  • java
  • c
  • 정보처리기사
김기환 댓글 3 좋아요 0 조회수 123

엑셀문서 값을 필드에 입력하기 관련 문의

미해결

직장인에게 꼭 필요한 파이썬-아래아한글 자동화 레시피

저는 한글 2014를 사용하고 있습니다. 엑셀문서 값을 필드에 입력하기를 실행했을때 강의에 올라온 영상처럼 엑셀에 있는 자료가 페이지별로 하나하나 생성 되는것이 아닌 마크만 입력되고 나머지는 입력이 되지 않습니다. 제가 타이핑한것이 잘못 됐나 싶어서 강의에 있는 소스를 붙여 넣기 해서 실행을 해봐도 마크만 입력되고 나머지 자료들은 입력이 되지 않는데 왜 그럴까요?

  • python
  • 한컴오피스
김재영 댓글 4 좋아요 1 조회수 319

한 파일의 변경사항을 다수의 파일에 동일하게 반영하고 싶습니다.

해결됨

직장인에게 꼭 필요한 파이썬-아래아한글 자동화 레시피

질문 남겨주셔서 감사합니다. 막히면 언제든 무엇이든 자주 질문 던져주세요. 수학/과학이나 알고리즘과는 달리 업무자동화 코딩은 고민해서 풀리는 경우가 정말 드뭅니다. 다시 말씀드리지만, 질문을 자주자주 남겨주세요. 저도 최대한 빠르게 회신 드리겠습니다. 당부드릴 두 가지가 있습니다. ① 가급적 구체적으로 설명해주세요. ② 특정 챕터 관련 질문 남겨주실 때는, 어느 챕터인지 알려주세요ㅜ ==================================== 기본 파일이 하나 있습니다. 그리고, 예를 들면 앞부분이 동일한 파일을 여러개 같이 관리하고 있습니다. 이때 기본파일의 앞부분에 3조의 내용(법령 관련 지침이라 1,2,3,4,~조로 구성)이 변경되었을 때, 기본파일의 변경사항을 바꿀파일에 적용할 수 있을 지 문의 드립니다. 파일 첨부가 안되어서 이미지로 첨부해봅니다. [기본파일 내용] [바꿀파일1] [바꿀파일2]

  • python
  • 한컴오피스
류금열 댓글 2 좋아요 1 조회수 422

데이터베이스 초기화(npx prisma db push) 이슈입니다.

해결됨

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

npm install 해서 의존성 설치후에 npx prisma db push를 했는데 $ npx prisma db push Environment variables loaded from .env Prisma schema loaded from prisma\schema.prisma Datasource "db": PostgreSQL database "postgres", schema "public" at " aws-0-ap-northeast-2.pooler.supabase.com:5432 " Error: P1001: Can't reach database server at aws-0-ap-northeast-2.pooler.supabase.com : 5432 Please make sure your database server is running at aws-0-ap-northeast-2.pooler.supabase.com : 5432 . 이렇게 나옵니다. 챗지피티랑 스택 오버플로우 이런거 봐도 잘 안돼서 질문드립니다.

  • react
  • typescript
  • next.js
한태현 댓글 2 좋아요 0 조회수 831

corr()이 작동하지 않는 문제

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

안녕하세요. 먼저 좋은 강의 감사드립니다. 저는 이번 9회 시험에서 1유형 30점, 2유형 40점, 3유형 20점 총 90점으로 합격했습니다. 퇴근후딴짓 선생님의 좋은 강의 덕분이라고 생각합니다. 다만 시험 중에 이상한 일이 있었습니다. 이번 3유형에 상관계수를 구하는 문제가 있었는데요, 제가 시험장에서 corr() 메서드를 사용했을 때 작동하지 않았습니다. 자료형이 틀렸거나 옵션 문제 등의 오류가 아니라, 확실히 not defined로 기억합니다. corr() 메서드 호출 자체가 불가능했습니다. 몹시 당황해서 이런저런 라이브러리를 불러도 보고, dir, help 등도 시도해봤지만 호출 자체가 안 되니 할 수 있는 방법이 없더라고요. 마지막으로 통계학 지식을 동원해 수작업 계산을 시도했지만, 결국 시간 부족으로 corr()이 필요했던 두 문제를(각 5점) 틀리게 되었습니다. 혹시 이런 문제가 발생하는 경우에 대해 아시는 바가 있을까요? 합격과는 별개로 너무 궁금하고 답답해서 문의를 드립니다.

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
조현재 댓글 2 좋아요 0 조회수 134

여러줄의 블록설정한 text를 파이썬 변수에 할당하기

해결됨

직장인에게 꼭 필요한 파이썬-아래아한글 자동화 레시피

질문 남겨주셔서 감사합니다. 막히면 언제든 무엇이든 자주 질문 던져주세요. 수학/과학이나 알고리즘과는 달리 업무자동화 코딩은 고민해서 풀리는 경우가 정말 드뭅니다. 다시 말씀드리지만, 질문을 자주자주 남겨주세요. 저도 최대한 빠르게 회신 드리겠습니다. 당부드릴 두 가지가 있습니다. ① 가급적 구체적으로 설명해주세요. ② 특정 챕터 관련 질문 남겨주실 때는, 어느 챕터인지 알려주세요ㅜ ==================================== 안녕하세요 일코님~ 블럭처리를 한 상태에서 실행하면 그 블럭의 텍스트를 반환해주는 함수를 쓰고있는데요. def extract_text_from_block(): hwp.InitScan(range=0xff) # 0xff <<선택된 범위 내에서 검색 _, text_blokced = hwp.GetText() # 텍스트만 추출 hwp.ReleaseScan() # 스캔을 해제. return text_blokced # 이경우, 해당 target이 text에 포함되어있으면 True, 아니면 False를 반환. 어떻게 하다보니깐 만들어서 쓰고있는데.. 문제는 이게 para 1개를 넘어가면 \r\n을 반환하고 아무것도 반환하지 않네요.. 단락 하나를 넘어가지 않게 블럭설정하면 잘 작동하는데요. 여러줄에는 먹히지가 않네요.. (1) 일단 블록설정한 text를 변수에 할당할 때 이런식으로 함수를 쓰는게 효율적인 방법인지? (2) 만약 괜찮은 방법이라면, 여러줄을 블록설정한뒤에 변수에 할당하려면 어떻게 해야하는지? 이렇게 두가지가 궁금합니다! 감사합니다!!

  • python
  • 한컴오피스
윤병현 댓글 1 좋아요 1 조회수 117

리스트 선언

미해결

파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)

cnt =[0]*(n+m+3)로 리스트를 선언하셨는데, 저는 문제 풀때 cnf = list()로 선언했는데 Traceback (most recent call last): File "C:\Users\User\Desktop\파이썬 TEST\ AA.py ", line 38, in <module> cnt[i+j] += 1 IndexError: list index out of range 오류가 나더라고요 해당 선언을 하면 왜 오류가 나는것인가요..? 이렇게 해도 문제는 풀려야하지 않나요..? 의문점이 남아서 질문올립니다

  • python
  • 코딩-테스트
heewon221 댓글 1 좋아요 0 조회수 133

파이썬 Class Method 질문

해결됨

실리콘밸리 엔지니어가 가르치는 파이썬 기초부터 고급까지

안녕하세요 ! 섹션 8 듣는 중에 질문 드립니다. 제가 Class의 개념이 조금 부족한 것 같아서 이해를 잘 못했을 수 있습니다. Class Method는 instance의 상태를 변화시킨다고 말씀주셨는데, instance가 여러 개인 경우, 특정 instance만 변경하고 싶을 때는 해당 instance를 지정해주면 되는 걸까요 ? Class Method는 주로 어떨 때 사용하나요 ? Class 내에서 이미 선언된 instance 값을 변경시킬 일이 어떤게 있나 궁금합니다.

  • python
  • 알고리즘
Yoo bo hyun 댓글 2 좋아요 0 조회수 182

docker container network 관련 질문

미해결

Airflow 마스터 클래스

안녕하세요 강사님 강의 잘 보고 있습니다. spark 관련된 질문을 드려도 될까요..? 도커에 spark 컨테이너를 띄워서 airflow의 bash operator로 spark-submit을 해보려 하는데 로그가 다음과 같이 나오면서 spark-submit이 안됩니다. compose 파일도 network 설정을 다시했고, docker network inspect 로 확인해보니 잘 연결된 것이 확인됐습니다. spark submit도 master container 내부에서 잘 실행이되는 상황입니다. shell 파일을 이런식으로 작성한다고 해서 airflow dags로 spark-submit을 할 수 있는건 아닌가요 ? #!/bin/bash script=$1 echo "${script}" echo "start spark submit with bash operator" spark-submit \ --master spark://spark-master:7077 \ ${script}

  • python
  • 데이터-엔지니어링
  • airflow
댓글 3 좋아요 0 조회수 187

인기 태그

인프런 TOP Writers

주간 인기글