데이터 뿌리기 Ajax Api 활용 개발일지
프로젝트 개요
이번 프로젝트는 사용자에게 실시간으로 데이터를 제공하기 위해 Ajax와 API를 활용한 웹 애플리케이션 개발을 목표로 했습니다. 데이터베이스와의 상호작용을 최소화하고, 클라이언트에서 직접적으로 데이터를 처리하여 사용자 경험을 향상시키고자 했습니다. 이를 통해 데이터 전송 속도를 개선하고, 사용자가 원활하게 데이터를 열람할 수 있도록 하는 것이 핵심이었습니다.
기술 스택
프로젝트 개발에는 HTML, CSS, JavaScript와 함께 jQuery를 사용하여 Ajax 호출을 담당했습니다. 백엔드는 Node.js와 Express.js를 활용하여 API 서버를 구성했으며, MongoDB를 데이터베이스로 선택했습니다. 이러한 기술 스택은 경량화와 효율성을 제고하는 데 큰 도움을 주었습니다.
API 설계
API 설계 단계에서는 먼저 데이터 모델링을 진행했습니다. 클라이언트에서 받아올 데이터의 형태와 내용을 정리한 후, RESTful API의 구조를 설계했습니다. GET 요청을 통해 데이터를 조회하고, POST 요청을 통해 새로운 데이터를 추가하는 방식으로 구현했습니다. 이 과정에서 API 문서를 작성하며 각 요청의 예시와 응답 형식을 명확히 했습니다.
Ajax 구현
Ajax 구현 단계에서는 jQuery를 사용하여 비동기 요청을 작성했습니다. 사용자가 버튼을 클릭할 때마다 Ajax 요청을 보내고, 서버로부터 받은 데이터를 HTML 요소에 동적으로 삽입하는 방식으로 UI를 구성했습니다. 이는 페이지의 전체적인 리로드 없이도 사용자에게 실시간 정보를 업데이트할 수 있는 간편한 방법이었습니다. 이 과정에서 CORS 정책과 데이터 형식에 대한 고려가 필요했습니다.
테스트 및 디버깅
개발 후에는 충분한 테스트와 디버깅을 진행했습니다. 각 API의 응답 시간을 측정하고, 클라이언트에서의 데이터 표시가 원활히 이루어지는지를 검증했습니다. 또한, 다양한 브라우저에서의 호환성 테스트를 통해 문제가 발생할 수 있는 부분을 사전에 차단했습니다.
결과 및 개선점
결과적으로, Google Lighthouse를 통해 성능, 접근성, SEO 측면에서 긍정적인 결과를 얻었습니다. 하지만 사용자 피드백을 통해 발견된 문제점들도 있었습니다. 예를 들어, 데이터 양이 많아질 경우 느려지는 현상에 대한 최적화가 필요했습니다. 이를 해결하기 위해 Lazy Loading이나 Pagination을 적용할 계획입니다.
마무리 및 향후 계획
이번 개발 일지를 통해 데이터 뿌리기를 위한 Ajax와 API의 활용에 대해 깊은 이해를 할 수 있었습니다. 향후에는 더 복잡한 데이터를 처리할 수 있는 시스템을 구축하고, 사용자 맞춤형 정보를 제공하는 API를 개발할 예정입니다. 지속적인 학습과 실험을 통해 발전하는 개발자가 될 것입니다.
