0. 서론 웹 브라우저에서 마우스 오른쪽 클릭을 하면 아래와 같이 'Context Menu'가 출력된다. 이 메뉴에는 뒤로가기, 새로고침, 다른 이름으로 저장 등 기본적으로 브라우저에서 제공되는 이벤트들이 있다. 평소처럼 아무 생각없이 이 메뉴들을 사용하다가, 문뜩 내 맘대로 꾸며보고 싶어졌다. 그래서, 또 직접 만들어 보았다. 이번 포스트에서는 이 Context Menu를 만드는 방법에 대해서 다루어 볼 계획이다. 가장 간단하게 만들 수 있는 정적 Context Menu를 만들어보고, 좀 더 확장시킨 동적 Context Menu를 만들어볼 계획이다. 1. 정적 Context Menu 작성 1-1. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ..

서론 Javascript로 클라이언트 사이드 렌더링을 구현하다보면 부모 컴포넌트의 상태가 변경될 때, 자식 컴포넌트의 상태도 변경되는 경우가 많다. 이런 경우에는 부모가 자식에게 변경된 상태를 전달하여 변경되었음을 직접 알려주어야 한다. 그런데, 부모에게 받은 상태값을 자신의 자식에게도 전달해야 하는 경우도 있다. 예를 들어, 메인화면에서 로그인을 했을 때, 헤더에는 유저의 정보를 보여주고, 메뉴목록에는 회원만 접근가능한 회원메뉴이 추가된다. 이 때 상태값의 흐름을 살펴보면 상위에서 하위로 계속 전달되는 것을 알 수 있다. [ '메인화면 > 헤더 > 유저정보' , '메인화면 > 메뉴목록 > 회원메뉴' ] 그렇다면, 로그인 여부에 대한 상태값을 필요로 하는 자식이 100-Depth에 있다고 가정해보자. 1..

0.서론 기존의 웹은 페이지가 전환될 때마다 서버에서 화면을 렌더링한 후 브라우저에 바로 그려주는 서버 사이드 렌더링(SSR, Server-Side Rendering) 방식을 주로 사용하였다. 그러나, 페이지가 전환될 때마다 화면 전체를 다시 그리기 때문에 페이지가 로드되는 속도가 느리고 화면이 자주 깜빡거렸다. 그래서, 최근에는 브라우저에서 XHR을 통해 필요한 데이터만 서버에 요청한 후 데이터를 가지고 브라우저에서 화면을 그려주는 클라이언트 사이드 렌더링(CSR, Client-Side Redering) 방식을 많이 사용하고 있다. CSR은 요소를 생성할 때마다 동적으로 요소들을 생서한다. 그래서, 데이터만 입력받으면 요소를 생성할 수 있도록 필요한 모듈들을 미리 만들어 사용한다. 대표적인 예로 페이스..

0. 서론 최근 코로나19로 인해 정상적인 가격의 마스크를 구하기가 어려워졌습니다. 그래서 정부에서는 약국과 우체국 등을 통해 공적마스크를 판매하고 있습니다. 그리고, 공적마스크의 판매처와 판매현황을 알 수 있는 API를 건강보험심사평가원에서 제공하고 있습니다. 이번 포스트에서는 이 API를 이용하여 특정 지역의 공적마스크 판매처와 판매현황을 확인할 수 있는 웹페이지를 만들어 보려고 합니다. 1. 프로젝트 준비 1-1. API 데이터 확인 1) [GET] /stores/json - 약국, 우체국, 농협 등의 마스크 판매처 정보 제공 (마스크 재고 관련 정보는 제공하지 않음) - page=페이지 번호[default: 1] - perPage=한 페이지당 출력할 판매처 수[default: 500, min:50..

0. 서론 어제 Javascript를 이용해서 Element를 드로그앤드롭으로 움직이는 예제를 만들었는데, 이 재밌는 기능을 다른데 활용하고 싶어졌다. 생각을 하다가 그림판을 만들어보면 좋을것 같아서 만들어보았다. 그림판이라면 선을 그을 수 있어야하지만, 이 그림판은 도형과 텍스트만 지원한다. 간단하게 만든거라 완성도는 떨어지지만 재밌는 예제라고 생각한다. 어려운 로직이 포함된 것이 간단한 설명과 함께 정리해보았다. 그럼 예제를 통해서 어떻게 그림판을 만드는지 알아보자. 1. 프로젝트 준비 1-1. Chrome Browser 1) IE와 같은 구형브라우저에서는 ES를 적용하려면 BABEL을 이용해야하기 때문에 Chrome Browser를 사용. 2) 다운로드 - https://www.google.com/..

0. 서론 최근에 HTML, CSS, Vanilla Javascript를 이용하여 메모장을 만들었다. 생성된 메모들을 화면에 보여줄 때 단순하게 나열만 해주다니 심심하게 느껴졌다. 그래서, Windows의 Sticky Notes처럼 드래그앤드롭으로 위치를 자유롭게 설정할 수 있도록 기능을 추가해보았는데, 다른데서도 유용하게 사용할 수 있을것 같아서 정리를 해보려고한다. 그럼 예제를 통해 드래그 앤 드롭 기능을 구현해보도록 하자. 1. 프로젝트 준비 1-1. Chrome Browser 1) IE와 같은 구형브라우저에서는 ES를 적용하려면 BABEL을 이용해야하기 때문에 Chrome Browser를 사용. 2) 다운로드 - https://www.google.com/intl/ko/chrome/ 1-2. 프로젝..