Share
Sign In
Squares Front-End 👨💻
나의 구현 일지
입력 키 스택으로 받기
스택은 데이터를 차곡차곡 쌓을 수 있는 자료구조입니다.
만약 ctrl + shift + c 를 눌렀다면, [ctrl, shift, c] 이런 식으로 들어가 있을 것입니다.
그런데! 키를 꼭 순서대로 누르라는 법은 없기 때문에 순서는 바뀌어 있을 수도 있습니다.
세 개의 키를 한 번에 누르는 경우에는 shift + ctrl + c 이런 식으로 저장될 수도 있습니다.
pressed keys가 스택이어야 하는 이유?
1.
같은 키를 두 번 누르는 커맨드로의 확장 가능성
2.
다른 문자 키를 같이 누르는 커맨드 확장 가능성
→ 예를 들어서 "c c" 이런 식의 커맨드와, "c f" 같은 커맨드도 가능하게 하려면 스택을 무조건 사용해야 함.
입력은 스택으로 받고, 사용은 일반 객체로
배열을 사용할 때 배열을 계속 순회하기에는 성능 이슈가 있기 때문에, 객체로 만들어서 참조한다.
즉, 키보드 입력 자체는 배열로 받고, 입력값을 사용할 때에는 이를 일반객체로 변환한다.
키가 눌린 정도에 따라 key={c:2} key={c:1,f:1} 이런 식으로 생성된다.
{
shiftKey: bool
altKey: bool
metaKey: bool
keyC:2
}입력값을 받았을 때 분기처리
사진에서처럼 함수 depth가 나뉘어져 있습니다. 초록색 노드가 각 키가 어떤 행동을 하는지를 나타냅니다.
Ctrl 혹은 Alt, Shift가 눌려있음에 따라 다른 행동이 실행됩니다.
빨간색 노드에서 입력키를 받으며, keydown event를 감지합니다.
회색 - 초록색 노드에서 입력키를 분석하고 분류하여 특정 행동을 실행합니다.
코드는 이렇습니다.
회색 노드
초록색 노드
모달 열림 정보 저장
단축키를 통해 모달을 여닫기 위해서는 각 모달이 열려 있는 여부를 저장해야 합니다.
아래와 같은 자료구조로 저장합니다.
nav : {style, page, finder}
editor: {changeContents, addContents}예시) style : 스타일 편집 모달을 열림 여부를 나타내는 boolean 값
모달 확장성을 고려해서 설계!
arrow keys는 버튼을 누른 상태로 유지시키기
10ms의 스로틀링을 주어서 구현키보드를 누르면 keydown이벤트가 무수히 많이 발생합니다.
keydown이벤트와 컨텐츠의 움직임을 1대1로 매핑한다면, 1초 안에 섹션 밖으로 뛰쳐나가 버릴 것입니다.
따라서, 적절히 스로틀링을 주어 섹션 밖으로 뛰쳐나가지 못하게 했습니다.
window.navigator.userAgent 확인하기
사용자가 맥으로 들어오는지 윈도우로 들어오는지 확인 가능!mac
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
window
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36
즉, mac이나 windows라는 운영체제 이름이 들어갑니다.
이 것으로 구분할 수는 있을 것 같습니다.
구현 시 어려웠던 것
안 막아지는 키도 있었습니다.
Mac을 기준으로 안 막아지는 키들도 있었습니다.
예를 들어… F11은 “바탕화면 보기” 기능인데요. 이 것은 입력 방지가 되지 않더군요..
결국 기획팀과 협의 후 다른 키에 매핑했습니다.
윈도우와 맥, 서로 다른 키
사진처럼 Mac과 window의 키가 엇갈립니다. 당최 왜 이렇게 되어 있는지 알 수 없군요.
즉 Command에 특정 기능을 매핑한다면, 윈도우에서는 저 이상한… window키에 매핑됩니다.
따라서, 이렇게 할 수 밖에 없었습니다.
Command (mac) ↔ ctrl (window)
Control (mac) ↔ ctrl (window)
Option (mac) ↔ alt (window)
다만 이렇게 하면 mac에서는 metakey를 눌러도 되고 control키를 눌러도 같은 기능을 하게 됩니다.
현재는 window.navigator 객체를 사용해서 사용자가
맥이나 윈도우 중 어떤 것을 사용하는지 분석한 다음
맥 사용자는 control 키를 막고 윈도우 사용자는 meta 키를 막는 것으로 구현해두었습니다!아쉬웠던 점
배열 형태의 Stack보다 Map을 사용하는 것은 어땠을까?
자바스크립트에서 배열을 위한 다양한 메서드를 제공합니다.
find메서드를 사용하면 배열 안의 특정 요소를 가져올 수 있지요.
다만 이 때 배열 내부 요소를 순회해야 하기 때문에 성능상 조금 느릴 수 있습니다.
게다가 위에서 적었듯이 ctrl + shift + c 를 누른다고 해도 배열에 저 순서대로 들어가 있으리란 법이 없습니다.
장점
배열보다 요소 탐색 속도가 빠르다 (get 제공)
특정 요소를 삭제하기도 쉽다 (delete 제공)
key에 문자열이 아니라 주소값을 넣을 수도 있다.
단점
신기술이다보니 팀원들이 모를 가능성이 높음. 배열이나 일반 객체가 가장 친숙함.
스프린트 일정이 빠듯하여, 팀원들에게 Map에 대한 설명을 하기에는 시간이 부족해서 결국 배열로 구현 했습니다.
일정이 널널한 날이 온다면 Map으로 리팩토링을 해도 괜찮을 것 같습니다,
단축키 함수를 추가할 때마다 단축키 기본값 막기 자동화
이런 식으로 하나하나 기본 기능을 막아주는 중..
사용하는 키보드 커맨드들이 이미 웹이나 맥에서 설정되어 있는 경우가 많았습니다.
그 것을 하나하나 지워주는 일을 했었는데요, 그러다보니 너무 노가다성이 강했습니다..
함수를 추가할 때마다 자동으로 기본 값이 막히는 로직을 짰다면 더욱 좋았을 것 같습니다.
지금은.. 하나하나 눌러가면서 이미 설정되어 있는 것들을 지워주는 작업을..했답니다.
2