인프런 커뮤니티 질문&답변
작성한 질문수
기능이 버튼눌러서는 잘 작동안하는데 url검색하면 빠르게 동작
23.09.30 21:23 작성
·
321
·
수정됨
0
aws 로 서비스 배포하였는데 버튼눌러서 controller에 접근하는 url이 바뀔떄마다 엄청 느려서 기능접속이 잘안되네요 swap설정은 되어있는데 혹시 이유알수 있을까요 ??url을 직접쳐서 검색하는건 빨라요
간단히 controller에서 template으로 정보 맞교환하는건데 이유 알수 있을까요?
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../css/main.css"/>
</head>
<body>
<div class="cd-switch">
<div class="switchUp">
<h1>
<p th:text="${userName}+'님의 선택은 !? '"><br></p>
</h1>
<p th:text="' 원하는 걸 골라봐요 왼쪽? 오른쪽? 결과는 반영됩니다! '" style=" width: 1000px;"></p>
<h2 >
<p th:text="${question}" style=" width: 1000px;"></p>
</h2>
<html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-light-grey">
<div class="w3-green" th:style="'height:24px;width: ' + ${LeftPercent} + '%'">LEFT</div>
</div><br>
<div class="w3-light-grey">
<div class="w3-red" th:style="'height:24px;width: ' + ${RightPercent} + '%'">RIGHT</div>
</div><br>
<div class="w3-container">
<div class="w3-bar">
<form action="http://13.124.171.10:8081/leftQuestion" method="get">
<button class="w3-button w3-left w3-light-grey" type="submit" >« LEFT!</button>
</form>
<form action="http://13.124.171.10:8081/rightQuestion" method="get">
<button class="w3-button w3-right w3-green">RIGHT! »</button>
</form>
</div>
</div>
</body>
</html>
</div>
</div>
</body>
</html>
이런식으로 url을 직접넣어서 ec2컴퓨터에 연결하는건 안되는 건가요??
답변 2
0
2023. 10. 03. 18:33
안녕하세요, hoon님! 🙂 질문 주셔서 감사합니다~!!
강의를 다 들으시고 hoon님만의 프로젝트에서 배운 내용을 활용해보시는 것 같아요! 👍
결론부터 말씀드리면, 느린 원인을 확인하기 위해서는 다양한 정보가 필요합니다.
어떤 부분에서 병목이 발생하는지 Chrome > 개발자도구 > Network 탭 등을 이용해 API 응답 시간을 확인해봐야 하고요! 클라이언트 단에서 느린건지, 네트워크 단에서 느린거지, 서버단에서 느린건지, DB 단에서 느린건지 등을 확인해 봐야아 합니다. 또한, 서버 자체의 스펙이 낮아서 느린건 아닌지도 검토해봐야 하고요!
다만 제 개인적인 의견으로는 EC2 사양을 느리는게 제일 효과적일 수 있습니다. 저희가 사용하는 서버는 프리티어로 가장 사양이 낮은 서버니까요!
또한, "이런식으로 url을 직접넣어서 ec2컴퓨터에 연결하는건 안되는 건가요??"와 관련해서는 제가 프론트엔드 개발자가 아니다 보니 100% 확신에 찬 답변은 드릴 수 없지만,
form에서 특정 end point를 바로 가리키게 하기보다는 axios 같은 thrid-party 라이브러리를 사용해서 API 호출을 하는 것으로 알고 있습니다. 이때 DNS 설정이 되어 있다면, IP 대신 domain name을 사용하고 DNS 설정이 되어 있지 않다면 IP를 직접 사용해도 무관해요!
답변이 도움이 되었으면 좋겠습니다. 감사합니다.
0
2023. 10. 02. 21:26
안녕하세요, 인프런 AI 인턴이에요. 버튼을 눌렀을 때 controller에 접근하는 URL이 바뀔 때마다 엄청 느리다는 문제를 겪고 계시군요. 이 문제에 대한 원인은 여러 가지가 있을 수 있습니다. 몇 가지 가능한 이유를 알려드릴게요.
서버 성능 혹은 부하 문제: 서버가 버튼을 눌렀을 때 매번 처리해야 하는 데이터나 로직이 많다면, 처리에 시간이 오래 걸릴 수 있습니다. 서버의 성능이나 네트워크 부하 상황을 확인해보세요.
캐싱 기능 미사용: URL을 직접 입력해서 검색하는 경우, 브라우저가 해당 페이지의 내용을 캐싱합니다. 그러나 버튼을 눌러서 controller에 접근하는 경우, 매번 서버에 요청을 보내기 때문에 느릴 수 있습니다. 캐싱 기능을 활용하여 성능을 향상시킬 수 있습니다.
코드의 최적화 부족: controller에서 template으로 정보를 맞교환하는 과정에서 불필요한 데이터 조회나 로직 처리가 있는지 확인해보세요. 코드를 최적화하여 처리 시간을 줄일 수 있습니다.
문제 해결을 위해 다음과 같은 접근 방법을 고려해볼 수 있을 것 같아요.
서버 성능 확인: 서버의 리소스 사용량이나 로그를 확인하여 성능 문제를 확인해보세요. 필요하다면 서버 리소스를 추가로 할당해주거나 확장할 수도 있습니다.
캐싱 기능 활용: 버튼으로 접근하는 URL에 캐싱 기능을 적용하여 성능을 향상시킬 수 있습니다. AWS CloudFront나 CDN(Content Delivery Network)를 사용하는 것도 고려해보세요.
코드 최적화: controller에서 template으로 데이터를 전달할 때, 필요한 데이터만 조회하고 불필요한 로직은 제거하여 처리 시간을 줄여보세요. 또한, 데이터 조회에 필요한 DB 인덱스를 생성하거나 쿼리를 최적화하는 것도 도움이 될 수 있습니다.
하지만, 제가 코드 전체를 확인할 수 없어서 정확한 원인과 해결책을 제시해드리기 어려운 점 양해 부탁드립니다. 좀 더 자세한 정보를 제공해주시면 더 나은 도움을 드릴 수 있을 것 같아요.