Planning and Design - Githubissues

minho-jang / i-like-this-page

It's a widget that allows visitors to mark "LIKE" on your page.

1 stars 0 forks source link

Planning and Design #12

Closed minho-jang closed 3 years ago

minho-jang commented 3 years ago

기획 및 설계 단계에서 진행했던 것을 병합한다.

시나리오

웹페이지에 이와 같이 삽입하면 해당 URL의 좋아요 개수를 보여준다.

<div id="i-like-this-page"></div>
<script src="js/i-like-this-page.js"></script>

정적인 페이지에 적합하다.
IP주소로 사용자를 구분한다.
사용자가 '좋아요'를 눌렀는지 여부에 따라 보여지는 버튼이 달라진다.
한 번 더 누르면 '좋아요' 취소가 가능하다.

테스트

클라이언트에서 div태그를 조작하여 HTML을 만드는 방식 테스트
- Vanilla로 테스트 했지만 jQuery를 쓰면 편할듯 하다.
- 서버에서 사용자의 '좋아요' 여부, URL의 '좋아요' 개수를 받아와서 적절하게 렌더링
서버에서 HTML을 만들어서 제공하는 방식 테스트
- 서버에서 html태그가 아닌 div태그만 만들어서 응답하면, 클라이언트에서 그걸 렌더링할 수 있다.
- 클라이언트에서 fetchAPI를 사용하여 비동기적으로 렌더링

클라이언트에서 HTML을 만드는 방식으로 결정 !

서버를 REST API로 구성하여, 클라이언트와 서버를 완전히 구분한다.
서버에서 HTML을 만들어준다고 해서 이점이 없기 때문에, 서버가 하는 일을 줄이는 방식을 선택한다.

개발 준비

스프링 부트 프로젝트 생성
서버는 REST API 서버로 구성하며, 클라이언트에서는 버튼을 만들고 이벤트 추가하는 작업을 모두 Javascript에서 처리한다. 해당 스크립트는 이후에 public하게 배포하여 script태그로 언제든지 접근할 수 있도록 한다.