inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

useRef, useState count 비교

해결됨

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

안녕하세요 강사님! 강의에서 useRef는 값이 변경되었을 때 리렌더링을 발생시키지 않으므로 값이나 DOM 요소를 참고하고 싶을 때 사용한다고 하셨는데요. 1) 강의 예제 중, 수정이 일어난 횟수를 countRef에 담기도록 하셨는데, 이 때 값이 변경되어 ' onChange 함수에서 setInput 함수를 호출함으로써 리렌더링이 발생하는 것이고, countRef.current++는 리렌더링이 발생함과 동시에 값이 증가 되는 것 뿐이다 '라고 이해하면 되는 것일까요? 1번 코드 참고하시면 됩니다! 2) 위처럼 이해를 하다가 문득 궁금한 것이 생겼는데, 2번 코드 처럼.. useState의 input 객체에 count 프로퍼티를 추가하여 0으로 초기화 해주었습니다. 그리고 onChange 함수에서 setInput으로 count를 +1 시켜주었는데요. 1번 예제처럼 수정할 때 마다 count가 +1 되는 것을 의도하였는데, 이 때 textarea에서 ㄱ을 입력했다면, setInput 함수는 한 번 호출되며 textarea 수정과 count 증가가 동시에 발생하고 'textarea 수정 + count 증가' 이렇게 리렌더링이 한 번 발생하는 걸까요? 3) 만약 2번 질문의 답이 '결국 setInput 함수가 한 번 호출되며 작동하는 것이므로 리렌더링은 한 번이다.' 라면, 1번과 2번 코드는 '리렌더링이 발생할 때 마다 count 증가' 라는 점에서 같은 결과인 걸까요..? 질문이 좀 복잡하지만.. 답변해주시면 감사하겠습니다..! 1) useRef 사용하여 count import { useRef, useState } from "react"; export default function Test() { const [input, setInput] = useState({ name: "", bio: "", }); const countRef = useRef(0); console.log(input); console.log(countRef.current); const onChange = (e) => { countRef.current++; setInput({ ...input, [e.target.name]: e.target.value, }); }; return ( <div>...</div> ) } 2) useState로 count import { useState } from "react"; export default function Test() { const [input, setInput] = useState({ name: "", bio: "", count: 0, }); console.log(input); const onChange = (e) => { setInput({ ...input, [e.target.name]: e.target.value, count: input.count + 1, }); }; return ( <div>...</div> ) }

  • javascript
  • react
  • node.js
onus 댓글 2 좋아요 0 조회수 84

섹션 2. 11강 3분 12초

해결됨

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

printf("a%%b = %d\n", remainder_result); 에서 왜 %% 가 들어가는데 출력값은 a%b=1 인건가요? a%%b = 1 이 아닌 이유가 있나요~?

  • python
  • java
  • c
  • 정보처리기사
maritime23 댓글 2 좋아요 0 조회수 50

안녕하세요. 코드 공개가 불가능하면 어떻게 해야할까요

미해결

데이터분석가 서류탈락? 알려드릴게요, 되는 포트폴리오

안녕하세요. 강의 잘 들었습니다. 기업에서 인턴할때 진행했던 프로젝트라 코드 공개가 불가능하면 어떤식으로 만드는게 좋을까요.

  • python
  • sql
  • mysql
kgy1607 댓글 2 좋아요 1 조회수 116

안된다고했던 이유가 무엇이었는지 모르겠습니다

해결됨

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

영상 8분 57초에 onClick 이벤트에 결과값을 넣으면 안된다고 배웠는데 그게 어디에서 그랬는지 기억이 안납니다 ㅠㅠ

  • javascript
  • react
  • node.js
logipick 댓글 2 좋아요 0 조회수 108

app.config["MONGO_URI"] = "mongodb://localhost:27017/pm_db"

해결됨

남박사의 파이썬으로 실전 웹사이트 만들기

app.config["MONGO_URI"] = "mongodb://localhost:27017/pm_db" 여기에 MS-SQL 연결이 가능할까요 몽고를 사용요하지 않고... 예) ConnString = "Provider=SQLOLEDB;Data Source= 서버 주소 ;Initial Catalog=Board;User ID=아이디;Password=암호;"

  • python
Bokhee Hong 댓글 2 좋아요 0 조회수 84

파일 생성 방법이 다른건가요?

미해결

Vue 3 시작하기

안녕하세요 회사에서 vue를 사용해 퍼블을 해야돼서 인강을 구매했는데, 제가 생성한 파일이랑 형식이 달라서 어떻게 따라가야 할 지 문의드립니다. 제가 알고 있는 화면 구성은 아래 사진인데 Vue.create 이런건 어떻게 바꿔야 하는지 모르겠습니다ㅜ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>vue-project</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html>

  • javascript
  • vue.js
  • vue-3
희나 댓글 1 좋아요 0 조회수 79

오브젝트에의 이벤트 감지 vs 레이캐스팅

해결됨

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

안녕하세요. 경험이 더 쌓이거나 혹은 뒤에 진행될 프로젝트를 통해 해소될 수도 있지만 짚고 넘어가고 싶어서 여쭙습니다! 이벤트 객체를 통해서도 다양한 인터랙션을 만들어낼 수 있는데, raycaster를 반드시 써야 하는 상황의 예시가 어떤 것이 있는지 궁금합니다.

  • javascript
  • react
  • typescript
  • 인터랙티브-웹
  • three.js
  • webgl
  • react-three-fiber
literate_t 댓글 2 좋아요 0 조회수 99

n8n 개인컴으로 호스트할 때

해결됨

원클릭으로 AI가 생성해주는 Youtube 쇼츠 만들기 자동화(with n8n)

구글시트는 동영상 따라 하긴 했는데.... n8n하고 openai 연동 api랑 baseurl 설정 어떻게 하는지 좀 알려주세요.ㅜㅜ

  • python
  • youtube-api
  • n8n
  • ai-활용-(ax)
박성연(생성AI 10회차) 댓글 2 좋아요 0 조회수 87

실전 반응형 웹사이트 이미지 다운

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)

안녕하세요 선생님! 매일매일 선생님의 강의를 수강하고 있는 제자입니다. 다름이 아니라 실전 반응형 웹사이트 제작 전 해당 웹사이트에 접속해서 크롬 확장 프로그램을 이용해 이미지 다운을 받으려고 합니다. 근데 현재 시점에서 넷플릭스, 크롬 사이트의 구성과 이미지 파일이 선생님의 강의와 많이 달라져서 수업을 잘 따라갈 수 있을지 걱정이 됩니다. 현재 각 웹사이트들의 이미지 소스들을 다운받아서 현 시점 웹사이트와 똑같이 혼자 만들려면 너무 어렵지 않을까 걱정되어서요ㅠㅠ 또 선생님 강의를 못따라 갈까봐 걱정도 되구요ㅠㅠ 현시점에서 어떤식으로 학습해야하는지 방향제시 부탁드립니다.ㅠㅠ

  • HTML/CSS
  • javascript
  • jquery
SOO 댓글 2 좋아요 1 조회수 96

6.3.3 계좌 보우 종목 조회하기 부분/ 보유종목 리턴 건 관하여

해결됨

파이썬 주식 매매 봇으로 주식시장 자동사냥하기

안녕하세요 강의 잘듣고 있습니다. 덕분에 퀀트에 대해 많이 배우고 있습니다. 다름이 아니라, 6.3.3 계좌 보우 종목 조회하기 부분에서 보유종목 리턴 건 관하여 질문이 있습니다. 거래 내역이 없는 최초 생성된 계좌에 경우 계좌 주식이 아예 없을 경우에 리스트 형태로 []로 터미널로 보여지는데 정상인지 여쭤보고싶습니다.보유 주식 0 + 예수금 0인 경우 (완전 빈 계좌) 이때 한국투자 주식잔고조회(TTTC8434R) 응답은 보통 이렇게 옴: ✅ output1 (보유종목 목록) 빈 리스트 또는 아예 필드 자체가 없음 GPT에게 물어보니, 모의계좌, 실전계좌 모두같은 상황이라서, 여쭤봤습니다. 답변주시면감사하겠습니다!

  • python
  • pandas
  • 차트분석
  • 퀀트
  • trading
sungjun12110 댓글 1 좋아요 0 조회수 96

안녕하세요 환불관련문의드립니다

미해결

AI와 함께 배우는 Next.js

안녕하세요. 전날 저녁에 구매했는데, 섹션2 첫번쨰까지 들었습니다. 거의 프로그램세팅하는 부분만 들은건데, 강의가 저와 잘 맞지않아서 환불하고싶습니다. 그런대 인프런자체에서는 전체의 14퍼센트를 들었다고 환불이 불가능하다고하는데요. 혹시 강사님 권한으로 환불이 가능한지 여부를 알고싶습니다.

  • javascript
  • react
  • next.js
  • cursor
  • 인공지능(ai)
배움이 댓글 1 좋아요 0 조회수 123

섹션1 switch-case문 질문

해결됨

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

6분경 Java에서 int i=3; int k=1; 이라고 초기화를 시켜주었는데 case 3: k=0일 때 초기화 한 값 k=1이 들어와야 하는거 아닌가요?? 그래서 정답은 -8이 아니고 -7

  • python
  • java
  • c
  • 정보처리기사
김가현 댓글 2 좋아요 0 조회수 46

섹션1에 10강 17분 38초 질문

해결됨

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

Java 함수의 예시 살펴보기-4를 보고있습니다. 반복문에서 for(int i = str.length()-1 ; i>=0 ; i--)일 때에 "Hello World" 띄어쓰기 포함해서 총 11글자라서 반복문에 대입하면 lroW olleH 가 되야하는거 아닌가요?? str.length()-1 초기식에서 -1을 하는데 어떻게 d도 출력이 되는거죠?

  • python
  • java
  • c
  • 정보처리기사
김가현 댓글 2 좋아요 0 조회수 49

비교연산자와 반복문+조건문 문제 풀이 강의 질문

해결됨

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

16분 50초쯤 출력값에 대해서 설명을 해주셨는데 정답이 이상하다고 생각됩니다. i%2 == 0 에서 i가 0일 경우에는 0%2= 나눌 값이 없으니 나머지가 2가 그대로 다시 나오는거 아닌가요? 필기 공부할 때 책에서 봤던 것 같습니다.

  • python
  • java
  • c
  • 정보처리기사
김가현 댓글 2 좋아요 0 조회수 65

추천패턴

미해결

프론트엔드 마스터클래스

디자인 패턴을 공부중에 궁금한게 생겨서 질문 드립니다. 채팅 같은걸 구현할때 응답이 엄청 다양한 형태로 온다면 어느 패턴이 좋을까요?

  • javascript
  • react
  • 함수형-프로그래밍
  • 객체지향
  • next.js
swyoo753 댓글 1 좋아요 0 조회수 94

11강 numpy의 axis 축 질문 드립니다.

미해결

[개정판] 파이썬 머신러닝 완벽 가이드

안녕하세요. 먼저 좋은 강의를 해주시는 것에 대해 감사 인사드립니다. 강의 잘 듣고 있습니다. 감사합니다. 다름이 아니라, 11강 동영상 강의 내용 중 numpy의 axis 축은 가장 기본이 되는 단일 단위 먼저 뒤의 숫자가 부여된다고 하셨습니다. 그 예시로 3차원배열을 보여주시면서 axis 2가 열 방향성, axis 1이 행 방향성, axis 0이 높이라고 설명해주셨는데요. 다만, 강의 교재 26쪽에서는 "3차원 ndarray의 경우 axis 0, axis 1, axis 2로 3개의 축을 가지게 됩니다.(행, 열, 높이로 이해하면 됩니다.)"라고 나와있습니다. 이 부분이 강의 내용과 교재 내용이 살짝 다른듯한 느낌이 들어 질문 드립니다. 감사합니다.

  • python
  • 머신러닝
  • 통계
이주호 댓글 2 좋아요 0 조회수 131

콜백 함수 메서드 등록

해결됨

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

export default function CityList({ $app, intialState, handleLoadMore }) { this.state = intialState; this.$target = document.createElement("div"); this.$target.className = "city-list"; this.handleLoadMore = handleLoadMore; $app.appendChild(this.$target); this.template = () => { let temp = `<div class="city-items-container">`; if (this.state) { this.state.cities.forEach((elm) => { temp += ` <div class="city-item" id=${elm.id}> <img src=${elm.image}></img> <div class="city-item-info">${elm.city},${elm.country}</div> <div class="city-item-score">❤️${elm.total}</div> </div> `; }); } temp += `</div>`; return temp; }; this.render = () => { this.$target.innerHTML = this.template(); if (!this.state.isEnd) { const $loadMoreBtn = document.createElement("button"); $loadMoreBtn.className = "add-items-btn"; $loadMoreBtn.textContent = "더보기"; this.$target.appendChild($loadMoreBtn); $loadMoreBtn.addEventListener("click", this.handleLoadMore); } }; this.setState = (newState) => { this.state = newState; this.render(); }; this.render(); } 이 코드에서 this . handleLoadMore = handleLoadMore ; 이부분이 왜 필요한지 이해가 되지 않아서 질문드립니다. 콜백 함수를 이벤트 리스너에 등록 해도 되지 않나요? this로 메서드 등록해서 사용하는 이유가 궁금합니다. 추가적으로 바닐라 js 로 spa 구현하는 개념들이 매우 어렵고 복잡하게 느껴지는데 바닐라 js로 spa를 구현해보는 프로젝트를 해보고 프레임워크로 넘어가야 하는것일까요..

  • javascript
  • rest-api
  • spa
  • dom
감코 댓글 2 좋아요 0 조회수 123

인기 태그

인프런 TOP Writers

주간 인기글