바쁘다 바빠.....C#공부하랴 프로젝트 하랴 어휴
오늘은 수정만 했습니다.
1. 프롬프트 개선
<script>
const timeButtons = document.querySelectorAll('.time-button');
const additionalFields = document.getElementById('additional-fields');
const analyzeBtn = document.getElementById('analyze-btn');
const resultsContainer = document.getElementById('dynamic-results');
let food_time = null;
timeButtons.forEach(button => {
button.addEventListener('click', function () {
timeButtons.forEach(btn => btn.classList.remove('selected'));
this.classList.add('selected');
food_time = this.id;
additionalFields.innerHTML = '';
if (food_time === 'lunch') {
additionalFields.innerHTML = `
<div class="form-group">
<label for="breakfast-input">아침에 섭취한 음식:</label>
<input type="text" id="breakfast-input" placeholder="아침 메뉴를 기입해주세요">
</div>`;
} else if (food_time === 'dinner') {
additionalFields.innerHTML = `
<div class="form-group">
<label for="breakfast-input">아침에 섭취한 음식:</label>
<input type="text" id="breakfast-input" placeholder="아침 메뉴를 기입해주세요">
</div>
<div class="form-group">
<label for="lunch-input">점심에 섭취한 음식:</label>
<input type="text" id="lunch-input" placeholder="점심 메뉴를 기입해주세요.">
</div>`;
}
});
});
analyzeBtn.addEventListener('click', function () {
resultsContainer.innerHTML = '';
const food_details = document.getElementById('food').value.trim();
const age = document.getElementById('age').value;
const is_on_diet = document.getElementById('diet').value;
const breakfast_time = document.getElementById('breakfast-input')?.value || '';
const lunch_time = document.getElementById('lunch-input')?.value || '';
if (!food_details) {
alert("음식 이름을 입력해주세요!");
return;
}
if (!age || isNaN(age) || age <= 0) {
alert("올바른 나이를 입력해주세요!");
return;
}
if (!food_time) {
alert("언제 먹었는지 선택해주세요!");
return;
}
const url = 'http://127.0.0.1:8000/api/calories/';
const data = {
food_time,
food_details,
age,
is_on_diet,
breakfast_time,
lunch_time,
chosen_language: 'kr',
};
fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
})
.then(res => res.json())
.then(responseData => {
console.log('Response:', responseData); // 응답 데이터 처리
// 응답 데이터를 화면에 표시할 경우
resultsContainer.innerHTML = JSON.stringify(responseData, null, 2);
})
.catch(error => {
console.error('Error:', error);
resultsContainer.innerHTML = `<p>There was an error processing your request. Please try again later.</p>`;
});
});
</script>먼저, 이 스크립트에서 값은 fetch를 통해 제대로 전달이 된 것을 개발자 도구를 통해 확인하였지만, 어디에선가 문제가 있습니다.
계속해서 찾아보니 칼로리 함수에 문제가 있다는 것을 발견하였습니다.
def calories_calculator(time, response, food_time, age, is_on_diet, chosen_language = 'Korean', breakfast_time = None, lunch_time = None): global nutrition_file global output if time == 'breakfast':예를 들어 여기에서, if time == 'breakfast':라고 되어있지만 이전에는 아침으로 되어 있었습니다.
이게 뭐가 문제냐면, 값으로 들어오는 time은 사실 breakfast로 들어오는데, if문은 '아침'으로만 받게 해 두었기 때문에 값은 none으로 출력이 되는 상황이였고, 빠르게 수정 후 breakfast로 변경하니 잘 나왔습니다.
그리고 값 전체수정
<body> <div class="navbar"> <a href="{% url 'main' %}" class="home-btn">Home</a> <a href="javascript:window.history.back()" class="home-btn">뒤로가기</a> </div> <div class="container"> <div class="sidebar"> <h1>오늘의 식단 분석</h1> <div class="form-group"> <label for="food">섭취한 음식:</label> <input type="text" id="food" placeholder="음식 메뉴"> </div> <div class="time-buttons"> <button class="time-button" id="breakfast">아침</button> <button class="time-button" id="lunch">점심</button> <button class="time-button" id="dinner">저녁</button> </div> <div id="additional-fields"></div> <div class="form-group"> <label for="age">나이:</label> <input type="number" id="age" placeholder="현재 나이"> </div> <div class="form-group"> <label for="diet">체중 감량 여부</label> <select id="diet"> <option value="yes">네, 하고있습니다.</option> <option value="no">아니요, 안 하고있습니다</option> </select> </div> <button class="submit-btn" id="analyze-btn">분석하기</button> </div> <div class="results-panel"> <div class="results-panel-header"> <h2>분석 결과</h2> </div> <div id="dynamic-results" class="result-box"></div> </div> </div> <script> const timeButtons = document.querySelectorAll('.time-button'); const additionalFields = document.getElementById('additional-fields'); const analyzeBtn = document.getElementById('analyze-btn'); const resultsContainer = document.getElementById('dynamic-results'); let food_time = null; timeButtons.forEach(button => { button.addEventListener('click', function () { timeButtons.forEach(btn => btn.classList.remove('selected')); this.classList.add('selected'); food_time = this.id; additionalFields.innerHTML = ''; if (food_time === 'lunch') { additionalFields.innerHTML = ` <div class="form-group"> <label for="breakfast-input">아침에 섭취한 음식:</label> <input type="text" id="breakfast-input" placeholder="아침 메뉴를 기입해주세요"> </div>`; } else if (food_time === 'dinner') { additionalFields.innerHTML = ` <div class="form-group"> <label for="breakfast-input">아침에 섭취한 음식:</label> <input type="text" id="breakfast-input" placeholder="아침 메뉴를 기입해주세요"> </div> <div class="form-group"> <label for="lunch-input">점심에 섭취한 음식:</label> <input type="text" id="lunch-input" placeholder="점심 메뉴를 기입해주세요."> </div>`; } }); }); analyzeBtn.addEventListener('click', function () { resultsContainer.innerHTML = ''; const food_details = document.getElementById('food').value.trim(); const age = document.getElementById('age').value; const is_on_diet = document.getElementById('diet').value; const breakfast_time = document.getElementById('breakfast-input')?.value || ''; const lunch_time = document.getElementById('lunch-input')?.value || ''; if (!food_details) { alert("음식 이름을 입력해주세요!"); return; } if (!age || isNaN(age) || age <= 0) { alert("올바른 나이를 입력해주세요!"); return; } if (!food_time) { alert("언제 먹었는지 선택해주세요!"); return; } const url = 'http://127.0.0.1:8000/api/calories/'; const data = { food_time, food_details, age, is_on_diet, breakfast_time, lunch_time, chosen_language: 'kr', }; fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data), }) .then(res => res.json()) .then(responseData => { console.log('Response:', responseData); // 응답 데이터 처리 // 응답 데이터를 화면에 표시할 경우 resultsContainer.innerHTML = JSON.stringify(responseData, null, 2); }) .catch(error => { console.error('Error:', error); resultsContainer.innerHTML = `<p>There was an error processing your request. Please try again later.</p>`; }); }); </script> </body> </html>이렇게 button을 누르면 time의 값이 변하는데, 그 값들은 breakfast, lunch, dinner인데 프롬프트는 아침, 점심, 저녁으로 되어있으니, 값이 같을 수 없기 때문에 에러가 발생한 것 입니다.