개인프로젝트 API와 연결할 간단한 웹페이지 만들기(2) -메인페이지

 

프론트와 백엔드 둘다 접속한뒤 연결이 제대로 되었는지 확인해보자

F12를 눌러 Network탭 확인해보면 fetch가 제대로 잘 작동하며 200OK 응답이 표시되어있는것을 확인할 수 있다.

하지만 현재 API의 각 목록들을 가져오지는 않는 상황이다.

코드를 다시 살펴보자.

<script>
// 오늘 일정 가져오기
fetch('http://localhost:8080/planner/today')
    .then(response => response.json())
    .then(data => {
        const todayList = document.getElementById('today_list');
        data.forEach(item => {
            const li = document.createElement('li');
            li.textContent = item.name;
            todayList.appendChild(li);
        });
    })
    .catch(error => console.error('Error fetching today\'s to-dos:', error));
</script>

첫번째 줄인 fetch()함수를 이용해서 api에 HTTP요청을 보냄

.then(response => response.json())을 통해 response를 json형태로 변환함.

const todayList = document.getElementById('today_list'); : HTML에서 id가 today_list인 요소를 찾아서 todayList에 저장.

const li = document.createElement('li'): 새로운 <li>를 만듦. 

<ul id="today_list">

</ul>

이렇게 비어있는 list를

<ul id="today_list">
	<li> 운동하기 </li>
</ul>

API를 통해 받아온 데이터를 <li>태그로 생성해야하기 때문.

 

 

현재 li.textContext= item.name; 으로 설정 되어있는데 실제로 api요청을 통해 받는 데이터를 보면 우리가 필요한 부분은 description인것을 알수 있다.

 

li.textContent = item.description;

오늘 할일 목록에서 체크박스에 체크를 하면 check=false에서 check=ture값으로 변경하여 서버로 값을 보내고 해당 list에서 목록을 제거하고자 한다.

체크박스에 체크를 하고 submit을 누르면 해당 목록이 사라지고 DB에 check= true로 나와야함.

클라이언트에서 해당 목록을 삭제하게 할수 있지만 API에서 애초에 CHECK=FALSE인 목록만 조회가 가능하도록 하는게 더 맞다고 생각이 들어 API를 수정해보았다.

override fun findAllTodayPlan(): List<PlannerToday> {
    val today = LocalDate.now()
    return queryFactory.selectFrom(plannerToday)
        .where(plannerToday.createdAt.eq(today))
        .where((plannerToday.check.isFalse)) // check가 false인 애들만
        .limit(10) 
        .fetch()
}

sql 쿼리문에 where((plannerToday.check.isFalse))를추가하여 check가 true인 애들은 더이상 조회하지 않는다.

 

이제 check=false인 목록만 조회가 가능하니, 클라이언트에서 각 목록의 체크박스에 체크를 하고 submit 버튼을 누르면 

@PatchMapping("/planner/check/today")

해당 API를 호출하여 데이터를 업데이트 하는 식으로 만들어보자.

submit 버튼을 눌렀을때 bad request가 뜨는 상황

 

API를 보면 단일객를 인자로 받는데 클라이언트는 LIST형태로 보내고 있어서 오류가 발생한 것이었다.

 

list형태로 값을 전달받는 형태로 로직을 수정하였다.

fun checkTodoToday(dto: List<CheckingDto>): List<ToDoResponse> {
    val checkingPlans = plannerTodayRepository.findAllById(dto.map { it.id })
    
    val updatedPlans = checkingPlans.map { plan ->
        val checkDto = dto.find { it.id == plan.id }
        if (checkDto != null) {
            plan.check = checkDto.check  
        }
        plannerTodayRepository.save(plan)
    }
    return updatedPlans.map { it.toResponse() }
}

 

제대로 적용이 되는지 테스트 해보자.

 

 

메인페이지에서  조회 API 호출 및 CheckBox 표시로 완료여부를 수정API로 넘겨주는 기능 동작을 구현하였다.

남은 기능은 일정 작성하기의 새로운 페이지(POST API 호출)를 만드는것과 메인페이지 하단에 진행%를 표시하는 기능, 전체 DB를 조회할수 있는 일정 보러가기 페이지의 구현이 남아있다.