묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
왜 useEffect의 코드가 두번찍히는지 의문입니다.
프론트는 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가 작동하라고 코딩했는데 ..궁금합니다.
-
해결됨홍정모의 따라하며 배우는 C++
반복문 안에 선언
안녕하세요. 반복문 안에 선언을 할 경우 매번 메모리가 회수되고 할당되나요?메모리의 할당과 회수는 운영체제가 관여한다고 알고 있는데, 위와 같은 경우 성능에 좋지 못한 영향을 줄 것 같습니다.만약 제가 컴파일러라면 반복문 안에 선언할 경우 이를 파악해 메모리를 회수하지 않고 반복문을 빠져나갈 때 회수할 것 같습니다. 실제로 컴파일러도 이렇게 동작하는지, 만약 아니라면 반복문 외부에 캐싱하는 것이 유의미한 일인지도 궁금합니다.
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5-3-1 강좌 섹션 질문 합니다.
안녕하세요, 수식 설명 강좌까지도 몇번이고 돌려봐도, 브러우저 스크롤 관점에서도, 애니메이션되는 요소 관점에서도 당최 명확하게 이해가 되지 않아서요,브라우저 스크롤 애니메이션 관련해서 이 강좌만큼 자세한 내용의 것이 없어서, 꼭 이해하고 싶어 이렇게 문의 드립니다.제가 이해한 것은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~가 있어서 어떤 요소의 거리를 의미하는지 헷갈립니다.
-
해결됨[왕초보편] 앱 8개를 만들면서 배우는 안드로이드 코틀린(Android Kotlin)
자꾸 질문을 드려서 죄송합니다
선생님 안녕하세요?버튼 수업을 듣는데 저의 경우는 밑에 바가 아예 나오지를 않아서요, 어디서 잘못된 건지 알 수 있을까요?감사합니다.
-
미해결스프링 핵심 원리 - 기본편
appConfig를 호출한 곳이 없는데 어떻게 동작하는 건가요?
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.1. 강의 내용과 관련된 질문을 남겨주세요.2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.(자주 하는 질문 링크: https://bit.ly/3fX6ygx)3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)[질문 내용]안녕하십니까 강의 너무 유익하게 잘 보고 있습니다.사진에 첨부해 드린것과 같이 강의 자료에서는 별도의 Appconfig가 import 되지 않은 채로 실행되는데 저의 환경에서는 자동적으로 import가 됩니다. 혹시 버전의 차이때문이 아니라면 설명한번 부탁드리겠습니다.감사합니다!
-
해결됨[코드캠프] 강력한 CSS
섹션 5. position 강의 중 absolute와 relative의 사용법에 대한 질문 있습니다!
제가 06-04-z-index 실습을 진행하다가 position 속성에 대해 의문이 들어서 글을 쓰게 됐습니다. <body> <div class="container"> <div class="item item1"> z-index: 4 </div> <div class="item item2"> z-index: 2 </div> <div class="item item3"> z-index: 1 </div> <div class="item item4"> z-index: auto </div> </div> </body>.container { width: 100%; height: 400px; border: 2px solid blue; padding: 30px; } .item { width: 160px; height: 140px; border: 2px solid black; background: #dddddd; } .item1 { position: relative; z-index: 4; } .item2 { position: absolute; top: 70px; left: 70px; z-index: 2; }제가 추가적으로 웹 서핑을 통해 position: absolute와 position: relative의 차이를 공부하였고 'absolute'는 "가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다."의 특성을 가진다는 것을 학습하였습니다. 그런데 item1의 css 코드에 position:relative가 부여되는 것에 대해 강사님께서 item1이 기준이 된다고 말씀하셔서 item2가 상위 요소인 container가 아닌 item1을 기준으로 한 것인가 생각이 들었는데, 웹페이지의 배치를 보니 item2는 container를 기준으로 한 것으로 보입니다. 그래서 item1이 "기준"이 되게 한다는 설명이 어떤 요소의 기준이 되는 것인지 자세히 알고 싶어 질문 드립니다! 참고로 해당 부분은 position 강의 21분경에 언급되었습니다
-
미해결스프링 핵심 원리 - 기본편
'다양한의존관계주입방법'강의 중 필드 주입
=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오) 예2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예[질문 내용]교재에 보면 참고: 부분에 '@Bean에서 파라미터에 의존관계는 자동주입된다. 수동 등록시 자동등록된 빈의 의존관계가 필요할 때 문제를 해결 할 수 있다' 되어있습니다.앞의 @Bean에서 의존관계 자동주입되는것은 생성자주입(어노테이션이 없어도되는)을 통해 의존관계가 자동으로 주입된다고 이해했습니다.그런데 다음 문장에서 수동등록시 자동등록된 빈의 의존관계가 필요할 때 문제를 해결한다라는 내용 자체가 정확히 이해가 되지않습니다. 빈을 수동등록한다는건지 의존관계를 수동등록한다는건지 아예 감이 안잡힙니다. 아래 OrderService 예시를 가지고 구체적으로 설명해주시면 감사하겠습니다.
-
해결됨빠른 취업을 위한 백엔드 로드맵
안녕하세요. 기술 블로그 질문드립니다.
기술 블로그는 필수인가요? 필수이면 어떤식으로 적는게 좋을지 방향을 알려주시면 감사하겠습니다.
-
해결됨Practical Testing: 실용적인 테스트 가이드
Beverage 인터페이스
테스트의 질문과는 좀 벗어나는 질문입니다만.. 궁금해서 여쭤보게 되었습니다!간단한 프로젝트를 구성하는 과정에서 Beverage라는 인터페이스를 만들어 추상화를 진행하고 해당 인터페이스는 get의 행위만 가지고 있었습니다.그리고 추가된 라떼와 아메리카노 둘 다 같은 속성이지만 구현을 통해서 두 개의 구성 클래스를 만들어 예제를 진행하였는데요.이에 다음과 같은 의문점이 생겼습니다.인터페이스가 get이라는 행위만 가져도 사용해도 괜찮은지. 지금과 같은 상황에서는 확장에서의 의미로 추상 클래스가 더 괜찮을 것 같은데 사용하지 않은 이유가 있으신지 궁금합니다ㅎㅎ좋은 강의 제공해주셔서 감사합니다~
-
미해결시스템 소프트웨어 개발을 위한 Arm 아키텍처의 구조와 원리 - 1부 저자 직강 (2024년 버전)
혹시 2부 계획은 있으신가요?
있으시다면 언제쯤일까요?
-
미해결Flutter 초입문 왕초보편
13강. 실행 시 Gradle 설정 오류
Main.dart를 실행 시, 아래와 같이 오류가 발생합니다.================================================================Launching lib\main.dart on sdk gphone64 x86 64 in debug mode...Running Gradle task 'assembleDebug'...FAILURE: Build failed with an exception.* Where:Settings file 'C:\Users\pc\StudioProjects\first_flutter\android\settings.gradle' line: 20* What went wrong:A problem occurred evaluating settings 'android'.> Could not read script 'C:\Users\pc\OneDrive\?��???? ?????��\????��?\flutter\packages\flutter_tools\gradle\app_plugin_loader.gradle' as it does not exist.* Try:> Run with --stacktrace option to get the stack trace.> Run with --info or --debug option to get more log output.> Run with --scan to get full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 4sException: Gradle task assembleDebug failed with exit code 1=================================================================setting에서 Gradle user home 도 아래와 같이 설정했는데, 어떤 문제가 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
10월 30일 이후에 html과 javascript강의도 삭제 되나요??
10월 30일 이후에 html과 javascript강의도 삭제 되나요??
-
미해결[웹 개발 풀스택 코스] HTML&CSS 기초
spellcheck true 밑줄이 안생겨요
spellcheck 를 true로 놓고 저장해도 밑줄이안생겨요
-
미해결자바 ORM 표준 JPA 프로그래밍 - 기본편
1:1 연관관계
1:1 연관관계인 두 엔티티가 존재할 경우, 사실 1개의 테이블로 관리할 수 있고, 2개의 테이블 분리해서 관리할 수 있는데, 두 엔티티를 분리하는게 더 나을 것 같아서 2개의 엔티티로 분리하는 걸까요?
-
해결됨벡터 미적분학 시리즈1 - 미분 기초
cross product 방향 질문입니다.
40:40초 설명에 나오는 그림입니다.그림만 보고는 왜 i+j와 j+k벡터의 위치 관계가 저렇게 나오는지 명확하게 이해가 되지 않아서 질문합니다. R^3 space를 span하는 기준이 되는 basis는 제가 마음대로 설정할 수 있지 않나요? 그렇다면 반드시 i+j와 j+k가 그림에 나온 순서가 아니라 어떤 경우에는 아래에 제가 첨부하는 그림처럼 반대가 될 수도 있지 않나요? 질문이 모호하다면, i+j와 j+k 등 cross product되는 벡터들을 오른손 법칙에 적용하는 순서를 명확하게 알지 못하겠습니다. 예시에 쓴 것처럼 약간만 복잡한 형태의 두 벡터만 되어도 cross product를 했을 때 오른손 법칙에서 어떤 벡터가 우선이 되어야 하는지 직관적으로 와닿지 않는데 따로 방법이 있나요? 2차원 평면에서 사분면을 통해 점의 위치를 확인할 수 있는 것처럼 3차원 이상의 공간에서도 비슷한 방법이 있는걸까요?
-
해결됨시스템엔지니어가 알려주는 리눅스 실전편 Bash Shell Script
실습환경 공지사항 8-1 네트워크 에러 질문 드립니다.
안녕하세요. 실습환경 만들기 8-1 네트워크 에러 발생 시 해결 방법에 대해 질문 드립니다.아래 글에서 먼저 질문을 올려주신 분들의 답변을 참고해서 해결 방법을 따라해 보았는데..제시해주신 두 가지 방법 모두 해결되지 않아서 질문 올립니다. VirtualBox 버전은 6.1.32 버전으로 설치하였고, 8-1 설정처럼 사용 안 함을 선택하여 종료한 후 다 시 우클릭하여 사용으로 선택해준 후에 각 서버를 시작 하였습니다. ==================================================아래는 다른 분이 질문 해주신 글에서 댓글로 제시해주셨던 답변 입니다.첫번째VirtualBOX를 삭제재부팅VirtualBOX를 재설치재부팅가상서버를 시작 두번째VirtualBOX를 실행좌측의 가상서버 Cent1을 마우스 우클릭'Discard Saved State... Ctrl+J' 메뉴를 눌러 저장된 상태를 삭제가상서버를 시작==================================================추가로 제시해 준 두 번째 방법 3. 'Discard Saved State... Ctrl + J' 메뉴는 마우스 우클릭 시에 보이지 않아서 사진 추가로 첨부 드립니다.위와 같은 상황에서 추가 해결 방안이 있으시면 답변 부탁 드리겠습니다.저도 추가로 다시 한 번 찾아보면서 재설치도 해보겠습니다.감사합니다.
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
등록오류 및 조회 오류
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.1. 강의 내용과 관련된 질문을 남겨주세요.2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.(자주 하는 질문 링크: https://bit.ly/3fX6ygx)3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오)예2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)예3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)예[질문 내용]여기에 질문 내용을 남겨주세요.자꾸 등록할때마다 이렇게 오류뜨고 h2db에선 member테이블이 있습니다. https://drive.google.com/file/d/15hAqagzQ4Yg-4Vqn2rnE_byFxQIsM8CC/view?usp=drive_link
-
해결됨홍정모의 따라하며 배우는 C++
블록 내에서 선언한 vector를 이차원 vector에 넣었을 때
블록 안에서 선언한 vector은 블록 밖으로 나가면 회수되는 것으로 알고 있습니다.그런데 만약 이 vector를 블록 밖에서 선언한 이차원 vector에 넣었을 때 어떻게 되나요?실행은 잘 되는데 이게 컴파일러가 길이를 유지시켜주는 건지, 아니면 이차원 vector에 복사되는 것인지 궁금합니다. vector<vector<int>> wheelList(NUMBER ); //caching { vector<int> wheel(SIZE); string temp; for(int i = 0; i < 4; i++){ cin >> temp; for(int j = 0; j < NUMBER; j++){ wheel[j] = temp[8 - j - 1] - '0'; } wheelList[i] = wheel; } }
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
while문을 이용하여 풀어 보았습니다.
<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>
-
미해결[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] 번외편: AWS로 시작하는 서버 운영
모바일게임에서 aws로 웹서버 사용시 얼마나 사용하게 되는건가요?
안녕하세요.웹서버 및 aws 강의 잘 들었습니다playfab으로 서비스 했던 경험은 있지만 직접 서버를 구현하여 서비스하는 경험을 배우고자 다음달쯤 게임을 배포 할 예정에 있습니다.궁금한건 서비스 경험이 없으니 미리 요금 계산해 볼 때 얼마나 책정해야 할지 감이 오지 않습니다. ec2는 시간당 비용과 데이터송신시 비용과 rds는 성능당 시간당요금이 책정되어 있는걸로 확인했습니다일반적으로 게임 회사에서 서비스전 서버 비용을 예측할 때 사용하는 방법이 있을까요?