묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
usecallback과 usememo를 중복해서 쓰는 이유(context 분리하기 챕터)
안녕하세요 강의를 잘 듣고있습니다.하지만 개념이 잘 이해가 되지 않은 부분들이 있어서 질문드립니다.context 분리하기 강의 부분입니다!!!이부분에서 이미 전 시간에 만들었던 useCallback으로 선언했던 함수들이 있습니다. 하지만 왜 app컴포넌트의 렌더링으로 인해 또 함수 선언이 되어 usememo를 써야한다고 하셨는지 문의드려요. const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", targetId: targetId, }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", targetId: targetId, }); }, []);const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []);그동안 다른 컴포넌트에 props를 줄때는 color={color}식으로 주고, 이는 객체형태라고 합니다. 받는 자식 컴포넌트에서는 {color} 이런식으로 구조분해할당을 합니다. 하지만 createContext로 만든 provider value ={} 는 기본적으로 객체형태가 아닌걸까요? 기본적으로 구조분해할당을 하지 않는거같아서 뭐지싶었습니다<TodoDispatchContext.Provider value={memoizedDispatch}>useEffect, useMemo의 차이점은 무엇인가요? 기본적으로 의존성 배열을 []로 둘때는 처음으로 컴포넌트가 mount 될때만 실행하고 , [todos]를 넣으면 이 변수 state가 바뀔때만 실행하는거같아서 똑같은거같아요
-
미해결레디스의 모든 것 (feat. Node.js)
강의 소리가 너무 작아요.. 사운드 편집 불가하신지요?
강의가 너무 작아서 스피커 크게 켜놓고 듣다가..카톡 오면 소리에 깜짝깜짝 놀라네요..ㅎ_ㅎ;;;;;;;혹시 수고스러우시겠지만 사운드 편집 안되나요? ㅡ,.ㅡ;;
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
플레이 그라운드 퀴즈 문제 질문이 있습니다.
위와 같이 입력했을 때 fetchBoard 가 null로 나오는데제가 어느부분에서 실수했는지 감이 안잡혀서 질문드립니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
이벤트 선언 관련 질문입니다.
해당 이벤트에서 클릭 시 useNavigate 함수를 호출하라 인데 이 둘의 동작에서 차이가 발생했습니다.그 이유를 설명해주실 수 있으신가요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
복합 대입 연산자
안녕하세요.1.7) 복합대입 연산자 관련 질문입니다.예제) num7 -= 20; 부분입니다.바로 위에 있는 num7 += 20;은 num7에 할당 되어 있는 값에 20만큼 더해서 console result 값은 30이 반환이 될 것이었고, 반환이 되었습니다.그런 논리라면 num7 -= 20; 이면단순 수식으로 생각을 하였을 때, 10 -20 = -10이 되어야 하는게 아닌가 싶습니다.num7 -= 20; 에서 20; 이 부분이 앞에 오게 되는 이유가 있을까요?기본 연산자에서는 정수만 취급하기 때문에 앞뒤의 순서가 바뀐 것일까요? 단순 JS의 구조적인 문제일까요?이에, 설명하셨던 부분과 약간 상이 한 내용인 거 같아서 질문 남겨드립니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
콜백함수-호출 시 인수 값을 안 넣어도 되는건지 궁금합
// 2. 콜백함수의 활용 function repeat(count, callback){ for(idx=0; idx<count; idx++){ callback(idx); } } repeat(4, function callback(){ console.log(idx * 2)}); repeat(4,(idx)=>{ console.log(idx * 4); }) repeat(5,()=>{ console.log(idx * 5); })repeat()으로 호출할 때 콜백함수까지 같이 불러오는 부분에 대해 궁금증이 생겼습니다. repeat(인수, 콜백함수)=> 이 부분에서 콜백함수에 매개변수로 idx를 안 넣어도 콘솔창에 결과가 잘 나옵니다. 그런데도 콜백함수 인수를 작성할 때 idx를 꼭 적어줘야 하나요? repeat(4, (idx) // idx를 넣고 메인 함수 콜백 호출 부분인 callback(idx); 에서 idx를 뺏더니 출력결과가 Nan이 나옵니다. repeat(4, () => 이렇게 idx가 없는 호출문? 에서는 정상적으로 값이 잘 나오는데 저 부분은 왜 안나오는지 궁금합니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
함수- return으로 결과값 반환
// 함수선언 함수를 생성하는 것 function greeting(){ console.log("안녕하세요"); } greeting(); let area1 = getArea(20, 30); console.log(area1); getArea(40, 200000); // 함수 호이스팅 // -> 끌어올리다 라는 뜻. //함수가 선언되는 순서는 중요하지 않다! function getArea(width, height){ function another(){ //증첩함수 console.log('another'); } another(); let area = width*height; // console.log(area); return area; <------------------------- 여기 return이 반환값이라고 하셨잖아요. getArea(40, 200000) = area 와 같다고 생각하면 되는거죠? 그리고 그걸 화면에 출력하기 위해서는 꼭 변수에 담아야 하는거죠? 그건 알겠는데 왜 변수에 담아야 나오는 건지 궁금합니다!! }
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
ipify.org api 호출 시 클라이언트 ip주소를 반환하는지?
ch-7-2에서포스트 상세 조회 router 안에서 ipify.org api를 호출하는데포스트 상세 조회 API를 클라이언트에서 호출할 경우서버에서 ipify.org api를 호출하기 때문에 의도한바와 다르게 서버 ip 주소가 나오고 클라이언트 IP는 req.ip를 통해서만 얻을 수 있지않나요??const response = await axios.get("https://api.ipify.org?format=json"); ip = response.data.ip;
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Promise 의 reject 관련 오류
2.13) 비동기 작업 처리하기 2. Promise 강의에서, if 문을 활용한 타입 검증 시 오류인 상황(else) 에서의 reject 가 정상 동작하지 않습니다. /* Promise */ const promise = new Promise((resolve, reject) => { // 비동기 작업 실행 함수 : executor setTimeout(() => { let num = 10; num = '10'; console.log(num); if (typeof num === 'number') { // 성공일 때 호출 resolve(`${num}은 숫자입니다.`); } else { // 실패일 때 호출 reject(`${num}은 숫자가 아닙니다.`); } }, 1000 * 1); }); 위 코드에서, num 타입을 string 으로 변경했을 때 else 문이 진행되는 것으로 기대했습니다. 이때, 브라우저의 디버거에서 오류를 발생시키면서 정상 동작되지 않습니다. 터미널에서는 UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). 라는 오류가 발생됩니다. catch 문 없이 reject 를 단독으로 사용하는 것에 문제가 있는 것 같은데, 예제와는 다르게 동작하는 것 같아 문의드립니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
node.js 버전 및 typescript 적용 문의
안녕하세요 강사님.node.js 강의 수강을 이제 막 시작한 프론트엔드 개발자 수강생입니다.1. 모든 강의는 node.js 14 버전 기준으로 녹화가 된게 맞나요? 맞다면 22LTS 버전으로 설치해도 강의를 수강하는데 문제는 없을까요? 2. 그리고 프로젝트 생성 처음부터 typescript 적용하고 싶은데, 초보자에게 괜찮을까요?비추천이시라면 typescript 없이 시작하려고 합니다.감사합니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
prettier 적용 안됨
javascript prettier 패키지 visual studio code 에 설치 하고설정부분에서도 format on save 부분 editor 체크했는데 적용이 안되네요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
기존강의 구매자, 업데이트 끝인가요?
이 강의를 이전에 구입했었고이제 들으려 하니 코드도 강의도 옛날 그대로고 업데이트도 끝난것 같네요
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
백앤드서버랑 연동하는
백앤드 서버랑 연동하는 실습은없나요? 저도 잘 모르지만 axios?이걸로 api보내는 형식으로 백앤드서버랑 통신하는 그런 실습은업을까여ㅛ?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트 실습 준비하기에서 브라우저 콘솔에 오류
리액트 실습 준비하기에서npm install 까지 마치고 라이브 서버로 열려고 하는데 빈 공백만이 뜹니다.브라우저의 개발자용 콘솔에는Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec.라고 떠있어요.제미니한테 물어보니까 브라우저가 jsx를 못 읽어서라고 하네요. 열심히 여러가지 시도 해봤으나 잘 안되서 도움 요청드립니다ㅠㅠ
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
List.jsx에서 검색어를 입력 시 getAnalyzedData() 함수가 지속적으로 호출되는 이유가 뭔가요
안녕하세요. 강의 잘 보고 있습니다.웹 페이지 중 List영역의 검색창에 단어를 입럭할 때 마다 getAnalyzed() 함수가 호출되는 이유가 궁금합니다.저의 부족한 실력으로나마 추측을 했을 때, 검색창에 해당하는<input>태그에 입력이 발생할 때 마다 search라는 내부 state의 값이 바뀌게 되어 랜더링이 다시 진행되고, 이에따라 getAnalyzed()가 실행되는 것 같습니다.답변 기다리겠습니다. 감사합니다!
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
404 에러
Request failed with status code 404 AxiosError: Request failed with status code 404 at settle (http://localhost:3000/main.6a808547f5f7e45e28ea.hot-update.js:1702:12) at XMLHttpRequest.onloadend (http://localhost:3000/main.6a808547f5f7e45e28ea.hot-update.js:338:66) at Axios.request (http://localhost:3000/main.6a808547f5f7e45e28ea.hot-update.js:832:41)저의 경우는, client에서 npm install http-proxy-middleware@2 로 다운로그레이드를 한 뒤 해결되었습니다. @3 버전이 깔렸는데 cra와 이게 호환성 이슈가 있는 것 같습니다.
-
미해결Spring Boot + React.js 로그인 (+소셜) 서비스 이해하기
Access Token 30분 오타요..
1000L * 60 * 30 해야 30분아닌가요 1초 * 60 -> 1분1분 * 30 -> 30분
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useRef를 사용하는 이유
todo list 구현 중 id 값을 변경할 때 useState가 아닌 useRef를 사용하는 이유가 무엇인가요? useRef를 사용하는 이유와 사용되는 경우를 아직 이해하지 못해 조금 더 자세하게 알려주시면 감사하겠습니다ㅠ
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
12.7. 방장기능(강퇴) 질문드립니다.
socket.on('kicked', (data) => { console.log('강퇴 이벤트 수신'); alert(data.message); window.location.href = data.redirectUrl; }); socket.on('kickUser', (userId) => { console.log('강퇴 요청 받음:', userId); const targetSocket = chat.sockets.get(userId); if (targetSocket) { console.log('강퇴 대상 소켓 찾음'); targetSocket.emit('kicked', { message: '강퇴되었습니다.', redirectUrl: '/' }); setTimeout(() => { // 강퇴된 소켓 연결 해제 targetSocket.disconnect(true); console.log(`사용자 ${userId} 강퇴 완료`); }, 100); } else { console.log(`사용자 ${userId} 소켓을 찾을 수 없음`); } }); socket.on('kicked',가 작동을안하네요 서버쪽에서는 targetSocket.disconnect(true)정상작동합니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
프로젝트 1 카운터앱만들기에서 props로 넘겨주기 궁금한부분이잇습니다.
6.3)기능 구현하기 부분에서<Controller/>에서 <Viewer/>로 count를 넘겨주는게 불가능하다고하셨는데const Viewer = ({ count }) => {}로 props로 넘겨주는거 가능하지않나여 ?그렇게 해서 잘넘어와서 카운터앱만들기 성공했는데 왜 안된다구하신건지 이렇게하면 안되는 이유가 궁금합니다!이전강의해서 배운대로 사용했는데 이부분에서 갑자기안된다고하셔서 궁금해서 여쭤봅니다.