분명히 코드를 그대로 따라 쳤는데 1초에 두 번씩 알림이 나오는 경우도 존재하나요?Warning: Each child in a list should have a unique "key" prop. 오류도 떴습니다. 각각 notification.jsx, notificationList.jsx 코드입니다import React from "react" const styles = { wrapper: { margin: 8, padding: 8, display: 'flex', flexDirection: 'row', border: '1px solid grey', borderRadius: 16 }, messageText: { color: 'black', fontSize: 16 } } class Notification extends React.Component { constructor(props) { super(props) this.state = {} } render() { return ( <div style={styles.wrapper}> <span style={styles.messageText}>{this.props.message}</span> </div> ) } } export default Notificationimport React from 'react' import Notification from './notification' const reservedNotifications = [ { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, ] var timer class NotificationList extends React.Component { constructor(props) { super(props) this.state = { notifications: [] } } componentDidMount() { const { notifications } = this.state timer = setInterval(() => { if(notifications.length < reservedNotifications.length) { const index = notifications.length notifications.push(reservedNotifications[index]) this.setState({ notifications: notifications }) } else { clearInterval(timer) } }, 1000) } render() { return ( <div> {this.state.notifications.map(v => { return <Notification message={v.message}/> })} </div> ) } } export default NotificationList

props 강의 관련 질문입니다!1)어떻게 컨테이너 컴포넌트에 프롭스 형태로 전달하지 않아도,<Container children = { <Counter {...counterProps} />} />2)jsx 자체를 컨테이너 아래에 중첩?! 시키는 방법만으로도 children prop으로 작용할 수 있게되는지 그 이유? 원리가 궁금합니다!!<Container> <div className='App'> <Counter {...counterProps} /> </div> </Container> import './App.css'; import Container from './Container'; import Counter from './Counter'; function App() { const counterProps = { // initialValue: 7, a: 1, b: 2, }; return ( <Container> <div className='App'> <Counter {...counterProps} /> </div> </Container> ); } export default App; 저는 예를 들어 아래와 같은 방식으로 children prop을 전달하는 걸로 생각하고 있었습니다. <Container children={<OddEvenResult count={count} />} /> 1), 2) 방식의 차이는 무엇이고(어떤 게 더 나은 방식이고?), 2)방식의 동작원리에 대해 질문드립니다!!

12줄에 @ts-check 적어서 25줄에 넘버타입 아니라고 알려주어야 하는데 안뜨네요 어떤 게 문제인가요?

같은 폴더 안에 sample.js, sample.ts가 있는데요index.html에 <script> sample.js 추가했고 콘솔 찍어보면서 강의듣고 있었는데 sample.ts는 콘솔에 안 나오더라구요 어떻게 하면 연결할 수 있을까요? 회사 컴퓨터라 이미 타입스크립트 쓰고 있어서 컴파일은 깔려있을 것 같습니다

beyond insight > 피그마 원본 > 수강생 참고자료, 파일 임포팅이 되지 않습니다 ㅜ 파일명이 수강생 참고자료(Beyond Insight).fig..fig..fig 입니다.   

2. 영상에서 설치하라는 것 다 똑같이 따라했는데 이부분 영상에서처럼 상자모양?별모양?으로 나오지 않습니다. 어떻게 해야할까요? 두번째 사진에 city도 나오지 않습니다 ㅠ 스크립트 전문입니다 // api url var url = "https://jsonplaceholder.typicode.com/users/1"; // dom var username = document.querySelector("#username"); var email = document.querySelector("#email"); var address = document.querySelector("#address"); // user data var user = {}; function fetchUser() { return axios.get(url); } /** * @typedef {object} Address * @property {string} street * @property {string} city */ /** * @typedef {object} User * @property {string} name * @property {string} email * @property {Address} address */ /** * @returns {Promise<User>} */ fetchUser().then(function (response) { response.address; }); function startApp() { // axios // .get(url) fetchUser() .then(function (response) { // console.log(response); user = response.data; // TODO: 이름, 이메일, 주소 표시하기 console.log(user); username.innerText = user[0].name; email.innerHTML = user[0].email; // 그냥 문자열이 아니라 객체였음(키:밸류 값) address.innerHTML = user[0].address.street; }) .catch(function (error) { console.log(error); }); } startApp(); // /** // *@param {number} a // *@param {number} b // * // */ // function sum(a, b){ // return a+b; // } // SubmitEvent(10,20)

 파이널 과제말고 수업도중에 회원가입 과제가있는데 그거 정답지를 좀 알고싶어요

var로 생성 했을때 block스코프 생성 되지 않음var funcs = []; for (var i = 0; i < 10; i++) { funcs.push(function () { console.log(i); }); } funcs.forEach(function (f) { f(); }); let으로 생성 했을 때 block스코프인해 변수의 유효범위가 생김.즉, for문의 { } 블록 스코프로 변수의 유효범위로 인해서funcs.push(function(){console.log(i)})에서 i가 for문의 i를 가져올 수 있게 됨.let funcs = []; for (let i = 0; i < 10; i++) { funcs.push(function () { console.log(i); }); } funcs.forEach(function (f) { f(); }); 마찬가지로 var를 사용시 똑같은 코드지만 var는 블록스코프로 인해 유효범위가 없기 때문에 for문의 i의 변수의 유효범위로 console.log(i)에 영향을 가지지 못함.  

프론트는 react이고 백엔드는 스프링 부트입니다 .리액트 소스입니다 .import "./App.css"; import { useState, useEffect } from "react"; import SERVER_URL from "./config/config"; function App() { const [hello, setHello] = useState([]); useEffect(() => { if (!hello.length) { console.log(`서버주소는 ::::::::::::::${SERVER_URL}`); fetch(`${SERVER_URL}/api/headers`) .then((response) => response.json()) .then((data) => { console.log("데이터:::::::::::", data); // 데이터 출력 setHello(data); // 데이터를 상태에 설정 }) .catch((error) => console.log("Error:", error)); } }, []); return ( <div className="App"> <div>백엔드에서 가져온 데이터입니다</div> <ul> {hello.map((item) => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ); } export default App;  config.js 소스입니다. const SERVER_URL = "http://localhost:8080"; export default SERVER_URL;  백단입니다. package com.service.com.controll; import java.util.HashMap; import java.util.List; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import com.service.com.domain.User; import com.service.com.service.MainService; import lombok.RequiredArgsConstructor; @RequiredArgsConstructor @RestController public class MainController { private final MainService mainService; @GetMapping("/api/headers") public ResponseEntity<List<User>> getHeaders() { List<User> headerList = mainService.findAll(); System.out.println(headerList.toString().toString()); return ResponseEntity.status(HttpStatus.CREATED).body(headerList); } } 백단 로그입니다 . [User(id=1, name=a), User(id=2, name=b), User(id=3, name=c), User(id=4, name=d), User(id=5, name=e)] 궁금한 질문입니다 .서버주소는 ::::::::::::::http://localhost:8080서버주소는 ::::::::::::::http://localhost:8080데이터::::::::::: (5) [{…}, {…}, {…}, {…}, {…}]데이터::::::::::: (5) [{…}, {…}, {…}, {…}, {…}]왜 2번씩 둘다 찍히는걸까요 ..빈배열 넣었고 처음에만 작동하라고 hello배열의 길이가 없을떄?? useEffect가 작동하라고 코딩했는데 ..궁금합니다.

안녕하세요, 수식 설명 강좌까지도 몇번이고 돌려봐도, 브러우저 스크롤 관점에서도, 애니메이션되는 요소 관점에서도 당최 명확하게 이해가 되지 않아서요,브라우저 스크롤 애니메이션 관련해서 이 강좌만큼 자세한 내용의 것이 없어서, 꼭 이해하고 싶어 이렇게 문의 드립니다.제가 이해한 것은1. 요소의 offsetTop과 scrollTop 값을 통해서 계산한 위치값 포인트에서, 모든 애니메이션이 시작한다(모든 애니메이션의 시작)2. 패럴럭스 애니메이션을 위해서, 해당 이미지가 일어날 섹션이 아닌, 그 위의 섹션 위치에서 애니메이션을 실행한다.3. 값은 1000이든 2000이든 어떤 값에서 0으로 줄어드는 로직으로 계산한다.이 세가지 내용입니다. parallaxThisTop = winScrollTop - parallaxOffsetTop; //패럴럭스가 시작될 위치값을 구함.해당 구문 이후로는 계속 이해가 가질 않아서요 텍스트로 길게 장황하게 라도 설명해주시면, 작성해주신 텍스트 내용 안에서 다시 이해해보는데 큰 도움이 될 듯합니다. 감사합니다.var parallaxSpeed = 1200; // 패럴럭스 요소의 스피드[질문]parallaxSpeed를 거리라고 강좌에서 말씀해주셨는데, 1200로 초기화 될 때, 이때 1200이란 어디를 start로, 기준으로 해서 이미지 요소가 반응하는 걸까요?숫자 1200은 브라우저를 스크롤 할 경우, 이미지 요소들이 반응?하기까지의 간격, 거리 라고 이해하고 있습니다.혹시 이 1200이란 숫자가 작동하기 시작하는 출발점이 parallaxThisTop인가요?거리라고 말씀하셨는데, parallaxSpeed 어디에서 어디까지의 거리를 의미하는지 궁금합니다.parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음[질문]여기서 이동할 거리가 브라우저 스크롤를 할 수 있는 거리라는 의미일까요?,이동하는 거리라면, 어디를 출발점으로 시작되는 간격(거리)일까요?강의에서 말씀하시는 거리라는 의미가 브라우저가 스크롤되는 거리와 이미지 요소가 반응하는 거리를 구분해서 의미하면 될까요var parallaxStartValue = 1000; //패럴럭스요소가 200 위치에서 시작하도록 설정합니다.[질문]패럴럭스 요소라 함은 이미지 요소라고 이해하고 있는데요, 200 위치라고 하는 게 어디를 시작점으로 200만큼 y축 아래로 내려온 것인가요?변수명의 의미와 용도에 대해서 다시 한번 설명 해주실 수 있을까요?패럴럭스가 시작할 위치라고 강좌에서 설명해주셨는데요, parallaxThisTop도 패럴럭스가 시작된 위치인 것과 어떤 차이점이 있는지요?var parallaxSpeed = 1200; // 패럴럭스 요소의 스피드var parallaxMoveDistance; // 패럴럭스 요소가 움직일 거리를 담을 변수 선업합니다[질문]첫번째 변수(parallaxSpeed)를 강좌에서 거리라고 설명해주셨는데, 변수명 parallaxMoveDistance의 거리랑 각각 어떤 다른의미의 거리인가요?parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음parallaxMoveDistance = Math.max(parallaxStartValue - parallaxStartValue, Math.min(parallaxStartValue, parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)))); //패럴럭스 요소가 움직일 거리를 구함[질문]parallaxPercent는 브라우저의 스크롤되는 거리는 구하는 것이고,parallaxMoveDistance는 브라우저 스크롤 할때, 패럴럭스 되는 요소의 거리를 구하는 것인지요? 모든 변수명에 para~가 있어서 어떤 요소의 거리를 의미하는지 헷갈립니다. 

10월 30일 이후에 html과 javascript강의도 삭제 되나요??

<html> <head> <meta charset="UTF-8" /> <title>출력결과</title> </head> <body> <script> function solution(n) { let answer = 0; let i = 1; while (i <= n) { answer += i; i++; } return answer; } console.log(solution(10)); </script> </body> </html>

같은 실습 코드를 mac에서 돌렸을 경우에는 잘 작동되고 윈도우에서 돌리면 오류는 뜨지 않으나 작동되지 않고 빈화면만 출력되는데 이유가 무엇인가요?

 post 요청시 헤더 관련 아래 에러 발생하는데, apollo-require-preflight: true등을 넣으면 정상 작동 하네요. 혹시 이 에러가 강의 중에는 안 나던데, 이유 알 수 있을까요? { "errors": [ { "message": "This operation has been blocked as a potential Cross-Site Request Forgery (CSRF). Please either specify a 'content-type' header (with a type that is not one of application/x-www-form-urlencoded, multipart/form-data, text/plain) or provide a non-empty value for one of the following headers: x-apollo-operation-name, apollo-require-preflight\n", "extensions": { "code": "BAD_REQUEST", "stacktrace": [ "BadRequestError: This operation has been blocked as a potential Cross-Site Request Forgery (CSRF). Please either specify a 'content-type' header (with a type that is not one of application/x-www-form-urlencoded, multipart/form-data, text/plain) or provide a non-empty value for one of the following headers: x-apollo-operation-name, apollo-require-preflight", "", " at new GraphQLErrorWithCode (/Users/hojeongpark/Develop/study/backend-bootcamp/class/section13/13-01-single-image-upload/node_modules/@apollo/server/src/internalErrorClasses.ts:15:5)", " at new BadRequestError (/Users/hojeongpark/Develop/study/backend-bootcamp/class/section13/13-01-single-image-upload/node_modules/@apollo/server/src/internalErrorClasses.ts:116:5)", " at preventCsrf (/Users/hojeongpark/Develop/study/backend-bootcamp/class/section13/13-01-single-image-upload/node_modules/@apollo/server/src/preventCsrf.ts:91:9)", " at ApolloServer.executeHTTPGraphQLRequest (/Users/hojeongpark/Develop/study/backend-bootcamp/class/section13/13-01-single-image-upload/node_modules/@apollo/server/src/ApolloServer.ts:1047:20)", " at processTicksAndRejections (node:internal/process/task_queues:95:5)" ] } } ] }

강의 중간 중간에 참고 문서 링크가 있다고 하셨는데, 링크는 어디를 보면 될까요? 잘 못 찾겠습니다. ㅠㅠ

3번째 줄 "./Notification"에 왜 경고창이 뜨는걸까요? 실행은 잘 됩니다

queryRunner.manager.findOne의 리턴 타입이 {id: string} | null 로 추론되는데 저만 이렇게 추론되는 걸까요? (webstorm 사용 중입니다!) 

아 네네...그렇제 않아도 제가 안눌렀는데 해결로 되어 있어써.ㅡㅡ파일은 첨부가 안되는 거 같아서 깃허브에 올려서 링크를 연결해두었습니다.강사님 수업을 듣고 나름대로 조금 수정을 해봤습니다. 우선 삭제버튼을 아이콘폰트로 바꾸고 전체 개수와 전체 삭제등을 추가했구요,근데, 문제가 발생한것이 처음엔 목록을 몇개 만들어보고 삭제버튼을 클릭해보면 화면로 로컬스토리지가 잘 삭제가 돌일하게 잘 되었구요, 그런 다음 새로고침을 눌러도 변함없는 확인하기 위해 새로고침을 누르고 다시 아무거거 한개 삭제버튼을 한번 더 눌러보면 화면에서는 누른것만 지워졌는데, 로컬스토리지에서는 어떤 항목의 삭제버튼을 눌어도 무조건다 지워진 빈 배열이 되어서요....  https://github.com/web1004/ask  

그런게 있으면 계획을 세우는데 도움이 될듯합니다~감사합니다~

 안녕하세요 import.service.ts의 checkPaid 메서드 부분입니다.axios와 http 예외를 통합하기 위해서 다음처럼 작성하였는데옵셔널 체이닝부분 관련 질문이 있습니다.throw new HttpException( error.response.data?.message || error.response.message, error.response.status || error.response.statusCode, ); 옵셔널 체이닝이 data가 있는지 여부를 보고 있으면 다음을 보내고error.response.data.message없으면 다음을 보내는데error.response.message다음처럼 옵셔널 체이닝 없이 작성한다면 오류가 발생하나요?throw new HttpException( error.response.data.message || error.response.message, error.response.status || error.response.statusCode, );