전체글143 [GraphQL] 무작정 시작하기 (1) - Schema & Query 0. 서론 최근 Javscript로 2048 웹게임을 만들고 있는데, 게임 결과를 저장할 수 있게 Database(MongoDB)를 연동하였다. 결과 조회는 평소처럼 클라이언트에서 목록을 요청하면, 서버에서는 미리 작성된 쿼리를 통해 DB를 탐색하고 결과를 반환하는 방식을 사용하였고 이를 REST API로 구현하였다. 처음에 설계한대로 '이름, 점수, 입력시간'만 조회하면 문제가 없었다. 그런데, 게임의 완성도를 높이기위해 게임 모드를 추가하게 되면서 한가지 불편한 점을 느끼게 되었다. 화면에서 '게임모드'의 값을 추가로 가지고 오기위해는 서버에 미리 작성된 쿼리도 수정을 해야하는 번거로움이 있던 것이다. 이러한 불편함을 해소할 방법을 찾던 중 'GraphQL'에 대해서 알게 되었다. GraphQL은 페.. 2020. 4. 13. [모듈] Prototype을 이용한 모듈 패턴으로 Element 모듈 만들기 0.서론 기존의 웹은 페이지가 전환될 때마다 서버에서 화면을 렌더링한 후 브라우저에 바로 그려주는 서버 사이드 렌더링(SSR, Server-Side Rendering) 방식을 주로 사용하였다. 그러나, 페이지가 전환될 때마다 화면 전체를 다시 그리기 때문에 페이지가 로드되는 속도가 느리고 화면이 자주 깜빡거렸다. 그래서, 최근에는 브라우저에서 XHR을 통해 필요한 데이터만 서버에 요청한 후 데이터를 가지고 브라우저에서 화면을 그려주는 클라이언트 사이드 렌더링(CSR, Client-Side Redering) 방식을 많이 사용하고 있다. CSR은 요소를 생성할 때마다 동적으로 요소들을 생서한다. 그래서, 데이터만 입력받으면 요소를 생성할 수 있도록 필요한 모듈들을 미리 만들어 사용한다. 대표적인 예로 페이스.. 2020. 3. 19. [공적마스크API] 공적 마스크 판매 정보 조회 0. 서론 최근 코로나19로 인해 정상적인 가격의 마스크를 구하기가 어려워졌습니다. 그래서 정부에서는 약국과 우체국 등을 통해 공적마스크를 판매하고 있습니다. 그리고, 공적마스크의 판매처와 판매현황을 알 수 있는 API를 건강보험심사평가원에서 제공하고 있습니다. 이번 포스트에서는 이 API를 이용하여 특정 지역의 공적마스크 판매처와 판매현황을 확인할 수 있는 웹페이지를 만들어 보려고 합니다. 1. 프로젝트 준비 1-1. API 데이터 확인 1) [GET] /stores/json - 약국, 우체국, 농협 등의 마스크 판매처 정보 제공 (마스크 재고 관련 정보는 제공하지 않음) - page=페이지 번호[default: 1] - perPage=한 페이지당 출력할 판매처 수[default: 500, min:50.. 2020. 3. 18. [그림판] HTML, CSS, JS로 그림판 만들기 0. 서론 어제 Javascript를 이용해서 Element를 드로그앤드롭으로 움직이는 예제를 만들었는데, 이 재밌는 기능을 다른데 활용하고 싶어졌다. 생각을 하다가 그림판을 만들어보면 좋을것 같아서 만들어보았다. 그림판이라면 선을 그을 수 있어야하지만, 이 그림판은 도형과 텍스트만 지원한다. 간단하게 만든거라 완성도는 떨어지지만 재밌는 예제라고 생각한다. 어려운 로직이 포함된 것이 간단한 설명과 함께 정리해보았다. 그럼 예제를 통해서 어떻게 그림판을 만드는지 알아보자. 1. 프로젝트 준비 1-1. Chrome Browser 1) IE와 같은 구형브라우저에서는 ES를 적용하려면 BABEL을 이용해야하기 때문에 Chrome Browser를 사용. 2) 다운로드 - https://www.google.com/.. 2020. 3. 3. 이전 1 ··· 9 10 11 12 13 14 15 ··· 36 다음
