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

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, ); 

안녕하세요.동일 레벨 컴포넌트간에 데이터를 주고 받는 방법에 대해 레벨1 -루트레벨2 - 컴포넌트a, 컴포넌트b인경우컴포넌트a -> 루트 -> 컴포넌트b 라고 수업내용에서 배웠습니다.그렇다면 계층이 더 깊은 경우는 어떻게 되나요?예를 들어 컴포넌트 구조가 레벨1 -루트레벨2 - 컴포넌트a-1, 컴포넌트b-1레벨3 - 컴포넌트a-2, 컴포넌트b-2인경우 (트리구조 비슷한?)컴포넌트 a-2에서 b-2로 전달하려면 컴포넌트a-2 -> 컴포넌트a-1 -> 루트 -> 컴포넌트b-1 -> 컴포넌트b-2 이런식으로 루트를 통해야 되나요? 그리고 a-2옆에 같은 레벨의 a-3이 있다면,이또한 루트까지 데이터를 올린다음 내려 받아야 할까요? 이런 느낌입니다.

<app-contents v-on:refresh="showAlert"></app-contents> methods: { sendEvent() { this.$emit('refresh'); } }강의 코드의 경우, 이벤트가 하나인데요.여러개의 경우 어떻게 작성하는게 좋을까요? 예를 들어methods: { sendEvent1() { this.$emit('refresh1'); }, sendEvent2() { this.$emit('refresh2'); }, sendEvent3() { this.$emit('refresh3'); }, }인경우<app-contents v-on:refresh1="showAlert1" v-on:refresh2="showAlert2" v-on:refresh3="showAlert3" > </app-contents>이런식으로 작성하나요?아니면 따로 좋은 작성방법이 있을까요? 매번 이벤트 추가할 때 마다 연결을 해줘야 하는게, 추적을 위해서 라고는 하지만 편리한지 모르겠습니다.

vue3 부터 slot 태그를 지원하지 않는 것 같습니다.아래와 같이 v-slot으로 작성해주셔야 합니다. 또한 v-slot은 template 태그에서만 동작 합니다. TodoInput Component<Modal v-if="showModal" @close="showModal = false"> <template v-slot:header> <i class="closeModalBtn fas fa-times-circle" v-on:click="showModal = false">경고!</i> </template> <template v-slot:body>아무것도 입력하지 않았습니다.</template> </Modal> 감사합니다.

 안녕하세요 강사님. chapter03을 할때도 있던 문제와 더불어, chapter04를 진행할때도 문제가 생겨 질문드립니다.제가 궁금한 내용은port 3000번이 이미 사용중이라는 메세지가 뜨는이유(초반에 create ~~명령어를 사용해 my-app 폴더를 만들어 cd my-app , npm start를 쓸땐 port 3000번에 강의영상과 같은 화면이 잘 나왔습니다.) 이것 때문에 실행할때마다 포트번호가 3001, 3002, ... 3010 이런식으로 계속 증가합니다chapter3를 실행할땐 나오지 않던 에러페이지가 chapter4를 실행할때 나오는 이유입니다.(2번문제는 해결해서 에러는 확인해서 처리했습니다. 리턴할때 괄호를 붙이고 써서 나온 에러같아서 수정해보니 되더군요)우선 아래는 Clock.jsx파일입니다.import React from "react"; function Clock(props){ return( <div> <h1>안녕, 리액트!</h1> <h2>현재 시간: {new Date().toLocaleDateString()}</h2> </div> ); } export default Clock;그리고 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'; const root = ReactDOM.createRoot(document.getElementById('root')); setInterval(()=>{ root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); }, 1000) // 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(); 이를 새 터미널을 활용해 실행시켜보면 다음과 같이 뜨는데요,여기서 y를 눌러 실행을 해보면 아래와 같이 에러가 뜹니다.에러가 나는 이유와 해결방안이 궁금합니다 감사합니다.

영상 하단에 강의노트가 있다고 하셨는데 안보입니다...업로드가 아직 제대로 되지 않은 것인 지, 제가 그냥 못 찾는 것인 지 모르겠네요

 jest 를 이용하여 테스트코드를 짜고 있는데 처음이라 너무 어렵네요. softdelete는 어떤식으로 테스트코드를 짜야될까요?그리고 조인해서 결과 값을 뽑을 때 테스트코드를 어떻게 짜야할지 감이 안옵니다.구글링해도 자료가 별로 없네여...