선생님 수업 따라서 열심히 따라 왔는데 여기서 막히네요.해결 좀 부탁드립니다.제가 나이가 53인데 사다리차 운전 하면서 자영업 하는데 다른길좀 가보려고 공부하는 중이거든요. 다른 분들한테는 쉬운걸 텐데 저한테는 어렵네요.구글링 해보고 네이버 도 찾아봣는데 찾을수가 없네요.이걸 해결해야 앞으로 나갈수 있을것 같은데 도와주세요.감사합니다

 이 강의만 들으면 되나요?아니면 파이썬이나 자바는 제가 따로 공부해야하나요?

chapter 15 실습에서 막힙니다.styled-components를 @latest 붙여서 다운받았는데도 실행이 안됩니다.그냥 빈 하얀 화면만 뜹니다...다른 챕터는 확인해보니까 다 되던데, 왜 styled-components 실습만 왜 안될까요?Blocks.jsx 파일 코드import styled from "styled-components"; const Wrapper = styled.div` padding: 1rem; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; background-color: lightgrey; `; const Block = styled.div` padding: ${(props) => props.padding}; border: 1px solid black; border-radius: 1rem; background-color: ${(props) => props.backgroundColor}; color: white; font-size: 2rem; text-align: center; `; const blockItems = [ { label: "1", padding: "1rem", backgroundColor: "red", }, { label: "2", padding: "3rem", backgroundColor: "green", }, { label: "3", padding: "2rem", backgroundColor: "blue", }, ]; function Blocks(props) { return ( <Wrapper> {blockItems.map((blockItem) => { return ( <Block padding={blockItem.padding} backgroundColor={blockItem.backgroundColor} > {blockItem.label} </Block> ); })} </Wrapper> ); } export default Blocks; index.js 파일 코드import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; // import Library from "./chapter_03/Library"; // import Clock from "./chapter_04/Clock"; // import CommentList from "./chapter_05/CommentList"; // import NotificationList from "./chapter_06/NotificationList"; // import Accomodate from "./chapter_07/Accommodate"; // import ConfirmButton from "./chapter_08/ConfirmButton"; // import LandingPage from "./chapter_09/LandingPage"; // import AttendanceBook from "./chapter_10/AttendanceBook"; // import SignUp from "./chapter_11/SignUp"; // import Calculator from "./chapter_12/Calculator"; // import ProfileCard from "./chapter_13/ProfileCard"; // import DarkOrLight from "./chapter_14/DarkOrLight"; import Blocks from "./chapter_15/Blocks"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <Blocks /> </React.StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();빈 하얀 화면에서 F12 눌러서 오류 확인해보니까 이렇게 뜹니다.Warning: Each child in a list should have a unique "key" prop.Check the render method of Blocks. See https://reactjs.org/link/warning-keys for more information. at O (http://localhost:3000/static/js/bundle.js:43804:6) at BlocksprintWarning @ react-jsx-dev-runtime.development.js:872react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same appSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.printWarning @ react.development.js:209react.development.js:1618 Uncaught TypeError: Cannot read properties of null (reading 'useContext') at Object.useContext (react.development.js:1618:1) at StyledComponent.ts:124:1 at O (StyledComponent.ts:190:1) at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1) at beginWork (react-dom.development.js:21636:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1)2react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same appSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.printWarning @ react.development.js:209react.development.js:1618 Uncaught TypeError: Cannot read properties of null (reading 'useContext') at Object.useContext (react.development.js:1618:1) at StyledComponent.ts:124:1 at O (StyledComponent.ts:190:1) at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1) at beginWork (react-dom.development.js:21636:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1)react-dom.development.js:18687 The above error occurred in the <styled.div> component: at O (http://localhost:3000/static/js/bundle.js:43804:6) at BlocksConsider adding an error boundary to your tree to customize error handling behavior.Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.logCapturedError @ react-dom.development.js:18687react-dom.development.js:26923 Uncaught TypeError: Cannot read properties of null (reading 'useContext') at Object.useContext (react.development.js:1618:1) at StyledComponent.ts:124:1 at O (StyledComponent.ts:190:1) at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1) at beginWork (react-dom.development.js:21636:1) at beginWork$1 (react-dom.development.js:27426:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1) at renderRootSync (react-dom.development.js:26434:1) 뭐가 문제일까요?

npm start 하고 localhost:3000으로 접속이 되었고, 리액트 로딩창만 나오고 다음창이 로드가 안됩니다. 터미널에서도 successfully 뜨고 코드도 오류가 없습니다. 왜 로딩이안될까요 ? 단순 컴퓨터문제일까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.function solution(arr) { let answer = 0; let dx = [-1, 0, 1, 0]; let dy = [0, -1, 0, 1]; for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr.length; j++) { console.log(arr[i][j]); for (let k = 0; k < 4; k++) { let nx = i + dx[k]; let ny = j + dy[k]; if ( nx >= 0 && nx < arr.length && ny < arr.length && ny >= 0 && arr[i][j] > arr[nx][ny] ) { answer++; } } } } return answer; }알려주신 것처럼 flag 변수로 아닌 것을 찾아서 숫자를 늘려주는 것과 맞는 경우에 늘려주는 것이 어떤 차이가 있는건지 헷갈리네요...

- 인프런 아이디: kdkj1234@naver.com- 인프런 이메일: kdkj1234@naver.com- 깃허브 아이디: kdkj1234@gmail.com- 깃허브 username: juheeeeeee12

main/index.js 에서는setProducts(result.data.products); 로 써야하고product/index.js 에서는setProducts(result.data); 로 써야하는데두 파일에서 return문에서는 동등하게 {product.name} , {product.price} 등으로 사용됩니다. 둘의 차이를 알려주시면 감사하겠습니다.

import axios from 'axios'; 에서는 중괄호가 없고import {Link} from 'react-router-dom' 에서는 중괄호가 있는데 차이가 뭔지 잘 모르겠습니다.axios는 'axios' 안에 있는 함수를 import 하는 것이고 {Link} 는 'react-router-dom' 안에 많은 컴포넌트 중 Link만 import 하기 위함인가요?

 버전1으로 듣다가 버전2가 있다는 걸 알게 되어서 버전 1 말고 버전2으로 들어도 되나요?버전2는 처음부터 들으려고요

빈 배열을 선언해서 빈 배열에 (axios 통신을 통해 전달받은) result.data를 대입해서 사용하는 것이 아니라 useState를 사용하는 이유는 무엇인가요?제가 이해한 것은 서버에 새로운 데이터가 업로드되면 그때마다 바로바로 업로드 된 데이터를 화면에 보여주기 위함인 것 같은데(예를 들어 상품이 3개로 보이다가 관리자가 상품을 한 개 추가하면 새로고침을 안해도 4개로 보임), 올바르게 이해한 것이 맞을까요?

 안녕하세요. 강의 잘 듣고 있습니다.user - service - google가 있다고 했을 때,user가 oauth code grant방식으로 login을 하면 service가 callback을 통해 code를 받게되고, 그 정보와 다른 정보를 조합하여 google로 부터 access token과 refresh token을 받아올텐데요.여기서 token을 어떤식으로 처리하는지 궁금합니다.service가 google로 부터 받은 token들을 app으로 전달하는 건가요? 그렇다면 app은 token이 만료되면 google에 직접 토큰을 다시 요청하는걸까요? 아니면 service를 통해 relay를 해서 토큰을 다시 요청할까요? service는 token이 올바른건지는 검증할 수 없으니 db에 저장을 해 두고 나중에 같은 토큰을 user로부터 받았을때 같은지 비교해서 허용할 지 말지 알 수 있을거 같은데 이렇게 하는건가요?아니면 service가 직접 새로운 토큰들을 생성해서 관리하는게 좋을까요?그리고 public app에서 보안을 더 강화하기 위해 pkce방식도 쓰는거 같던데 실제 많이 쓰시는지 궁금하네요.답변 부탁드립니다.감사합니다.

certbot을 통해 https를 적용한 뒤에 front 파일에 변경, 추가할 파일이 있어서 git pull origin main으로 시도해 봤지만 타임 아웃 에러가 걸리고 혹시 clone으로 하면 될까 해서 해봤지만 역시 타임아웃 에러가 걸렸습니다. 방법을 찾아보려고 열심히 구글링 2일간 해봤지만 도무지 개선이되질 않아서 ㅠㅠ 혹시 문제원인이나 해결방안 귀뜸해 주시면 감사하겠습니다.

08-ESLint & Prettier 강의를 보는 중인데 5분 27초 경에 강의 에서 나오는 eslint 에러가 저는 안나옵니다. eslint가 적용이 안되고 있는걸까요?강의 화면제 vscode 화면   

학습한 것 중 loading..부분에 궁금한게있습니다.button을 component를 만들어서 body에 넣어준 후 button을 통해서 data loading의 값을 false로 변경할 수 있게 컨트롤 해보고 싶은데해당 경우에도 v-bind와 v-on이용하여 상위컴포넌트로 올려준 후 다시 하위컴포넌트로 보내주어야하나요?

function solution(arr){ let copy = arr.slice().sort((a, b) => b - a); return copy.map(it => arr.indexOf(it) + 1) } let arr=[87, 89, 92, 100, 76]; console.log(solution(arr)); 제가 코테공부는 거의 안해서 잘 모르는데 시간복잡도가 연관이 있을것 같습니다 2중 for문을 돌아야 하는 이유가 있을까요? 

안녕하세요 강사님 :)강의 수강 중, author, emotion부분은 저장 이후 초기화가 되나, content부분은 초기화가 되지 않습니다! 🥲 아무리 오타 있나...확인을 해보고 ㅠ_ㅠ..어떤 오류가 있는건지 찾아아도 더 이상 모르겠어서 글을 남깁니다! 샌드박스 포크(?) 주소를 함께 남겨요. 감사합니다! https://codesandbox.io/s/chapt-2-forked-dc3sm8

<html> <head> <meta charset="UTF-8" /> <title>출력결과</title> </head> <body> <script> function solution(n, f) { let answer = 0 let flag = 0 let dy = Array.from({ length: 11 }, () => Array(11).fill(0)) let check = Array.from({ length: n + 1 }, () => 0) let temp = Array.from({ length: n }, () => 0) let b = Array.from({ length: n }, () => 0).map((v, i) => combination(n - 1, i)) function combination(n, r) { if (dy[n][r] > 0) return dy[n][r] if (r === 0 || n === r) return 1 return (dy[n][r] = combination(n - 1, r - 1) + combination(n - 1, r)) } function DFS(index, sum) { if (flag) return if (index === n && sum === f) { answer = temp.slice() flag = 1 } else { for (let i = 1; i <= n; i++) { if (check[i] === 1) continue temp[index] = i check[i] = 1 DFS(index + 1, sum + b[index] * temp[index]) check[i] = 0 } } } DFS(0, 0) return answer } console.log(solution(4, 68)) </script> </body> </html>선생님께서 올려주신 답안을 보면DFS 함수 안에서 수열을 만들 때 for문 조건이 i <= n 이므로 만들 수 있는 수열은 [4, 4, 4, 4]가 마지막 값일 것으로 예상됩니다.만약 문제 조건을 N=4, F=68로 바꾸면 답안 코드로는 답을 얻을 수 없습니다. N값이 가장 윗줄에 나오는 숫자의 갯수를 의미하기 때문에 가능한 조건이라 생각됩니다. 이 경우 for문 조건의 n을 더 큰 값으로 바꾸고, 강의에서 알려주신 push, pop을 이용한 코드로 작성하면 답을 얻을 수 있었습니다. 하지만 n값이 10인 경우, 11인 경우 등 n값에 따라 나올 수 있는 답이 다르기 때문에 사전순으로 가장 앞에 오는 것이 무엇인지 판별하려면 또 문제가 생깁니다. N=4, F=68의 문제 조건에서 for문의 n값이 10인 경우 답이 [3, 9, 10, 8]가 나오며, 11인 경우 [1, 8, 11, 10]이 나오기 때문에 11인 경우가 답이 되어야 할 것으로 생각됩니다.n값이 너무 커지면 실행시간이 오래걸리기 때문에 문제 조건에 맞는 적절한 값이 필요할 듯 싶은데, 이걸 잘 모르겠습니다. 제가 이해를 잘못 하였을 수도 있습니다. 선생님께서 조언해 주시면 감사하겠습니다.

console.time("지연평가"); go( users, L.map((u) => u.family), L.flatten, L.filter((u) => u.age < 20), L.map((u) => u.name), take(3), log ); console.timeEnd("지연평가"); console.time("프로토타입"); const res = users .map((e) => e.family) .flat() .filter((e) => e.age < 20) .map((e) => e.name); const result = []; for (let i = 0; i < 3; i++) { result.push(res[i]); } log(result); console.timeEnd("프로토타입");같은 동작을 하는 코드를 이터러블 / js 프로토타입 으로 코드를 작성했을 때js 기본 프로토타입을 사용한 코드가 소요시간이 조금 더 적게 걸리던데혹시 제가 놓치고 있는 부분이 있거나 효율부분에서는 프로토타입 사용하는게 더 나은건가요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. count 함수에서 sum + x > capacity 조건에서 sum이 왜 x가 되는지 잘 이해가 가질 않습니다. sum + x이 capacity를 초과하니 x를 더하지 않아야되므로 sum의 값은 변화하지 않고 그대로 원래 sum값을 가져야 하는거 아닌가요?

미니블로그 다 따라하고 실행하면 에러가 발생합니다.어떤 문제일까요?