본문 바로가기

Font-end/Javascript6

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