UI
social multiplication 어플리케이션의 ui 부분에 대한 정리입니다.
webpack
책에서의 프론트엔드는 html 에 cdn으로 bootstrap4 와 jquery를 사용합니다.
저는 이부분에 대해서 웹팩을 이용하는 것이 더 나을것이라고 판단하여 웹팩을 사용해 보았습니다.
웹팩의 자세한 사용방법은 지나가겠습니다. bootstrap4 와 jquery를 사용하기 위한 모듈과 플러그인을 정의했습니다.
index.html
맨밑의 bundle.js 는 웹팩에 의해 번들링된 자바스크립트 파일입니다.
먼저 가장 큰 container가 적절한 width를 갖는 그리드 컨테이너(bootstrap) 입니다.
col-md-?는 12칸중 ? 칸을 사용한다는 것을 의미하며 반응형입니다.
부트스트랩을 사용하여 손쉽게 레이아웃을 구축 할 수 있었습니다.
multiplication-client.js
이 자바스크립트 파일은 곱셈 마이크로서비스와 상호작용하는 파일입니다.
ajax 를 이용하여 서버의 api를 사용하는 코드입니다. 서버로부터 random한 두자릿 수를 받아오는 부분입니다. jquery를 사용하여 적절한 input 태그를 찾아가서 폼을 비우거나 원하는 데이터로 채워 넣는 모습입니다.
답안을 제출하는 부분도 ajax 통신을 하였고 post로 요청을 하여 정답인지, 아닌지 판단하여 알려주는 부분입니다. 그 후 유저의 통계나 리더보드와 관련된 모듈을 호출합니다.
gamification-client.js
이 자바스크립트 파일은 게임화 마이크로서비스와 상호작용하는 파일입니다.
리더보드를 업데이트 하는 부분입니다. data가 배열이기 때문에 foreach와 람다식(화살표 함수) 를 사용하여 테이블의 각 row를 반복처리합니다.
유저의 토탈 스코어, 뱃지를 가져와서 출력하는 부분입니다.
UI를 구성하며 그동안 등한시 해왔던 자바스크립트나 HTML 에 대해 복습할 수 있게 되었습니다. ajax를 이용한 통신이나 배열을 다루는 코드(forEach, 화살표 함수, join)는 언젠가는 무조건 다시 사용 할 법한 코드입니다.
그리고 웹팩을 처음으로 사용해 보았는데 번들링을 하는 과정에서
https://okky.kr/article/795248?note=2116182
이 아티클과 같은(제가 작성한 질문입니다) 문제가 있었습니다. 각각의 자바스크립트 파일을 index.js 즉 엔트리 파일에 기입해 주어야했는데 그러지 않아 발생했던 문제였습니다.
