완성 이미지
- 비기능적 요구사항
- webpack 번들러 사용
- eslint, prettier로 포맷팅
- 기능적 요구사항
- 키보드 모양의 키보드가 있어야 함
- 다크모드를 지원하고, switch slider로 모드를 변경
- font 변경 가능
- 특수키는 space, back space 말고 눌리지 않게 해야함
- 한글은 입력할 수 없음
2a74d3 Chapter 1 Virtual Keyboard
강의에서 제공한 코드
강의로부터 새로 알게 된 점
// html
<html theme=""></html>
// js
#onChangeTheme(event) {
document.documentElement.setAttribute(
"theme",
event.target.checked ? "dark-mode" : ""
);
}
// css
html[theme="dark-mode"] {
// invert는 무채색을 반전
// hue-rotate는 채색을 반전
filter: invert(100%) hue-rotate(180deg);
}- 다크모드 지원
- 웹팩 설정 방법
- switch slider 만들기
- class의 private 변수, 함수 만들기 (# ~~)
- 이벤트에서 target은 이벤트가 실제로 발생한 대상, currentTarget은 이벤트를 걸어놓은 대상
- 이벤트 버블링을 처리하는 방법
- event.bubbles = false
- 같은 이벤트를 공유하는 대상을 그룹지어서 상위 요소에 이벤트 걸어주기
내가 좀 더 공부한 점
- 웹팩을 사용하는 이유
- 파일 단위의 자바스크립트 모듈 관리의 필요성 -> 이전에는 AMD, Commonjs로 해결
- 웹 개발 작업 자동화 도구 (Web Task Manager) -> 이전에는 Grunt, Gulp으로 해결
- 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
- 폰트 사이즈의 단위는 어떤 것이 적절한가?
- 반응형이라면 em, rem, %를 이용하자.
- em은 부모 요소에서 지정한 글자크기를 기준으로 배율을 조정한다.
- rem은 시조 요소에서 지정한 글자크기를 기준으로 배율을 조정한다.
- 절대적으로 정해야한다면 pt, px를 이용하자.
- px는 화소로써 요소를 이미지에 맞춰 정확히 배치해야 할 때 사용하면 좋다.
- pt는 주로 인쇄 매체에서 사용되는데 point라는 의미이다.
- 반응형이라면 em, rem, %를 이용하자.
추가 기능 및 리팩토링
4129c73 refactor(chap1): change input font family
- input에서는 font가 바뀌지 않고 있어서 수정
#onChangeFont(event) {
document.body.style.fontFamily = event.target.value;
// 아래 코드 추가 : input 폰트 변경
this.#inputEl.style.fontFamily = event.target.value;
}
2a798d3 refactor(chap1): add function in fn key and it can keyboard typing
- 특수키는 OS마다 달라서 강의에서는 안되도록 진행했는데 되게 하고 싶었음 (ex. shift를 누르고 입력하면 대문자가 나오게)
#shift = false;
...
// keydown이거나 mousedown일 때
if (event.code === "ShiftLeft" || event.code === "ShiftRight") {
this.#shift = true;
}
...
// keyup이거나 keydown일 때
if (event.code === "ShiftLeft" || event.code === "ShiftRight") {
this.#shift = false;
}
// shift를 누르고 있다면 대문자가 나오게
if (this.#shift) this.#inputEl.value += val.toUpperCase();
else this.#inputEl.value += val;
...
bd31123 refactor(chap1): remove refeat code
- mouse up과 key up에서 반복되는 코드를 보고 private 함수로 옮김
...
// 수정 전
#onMouseUp(event) {
...
// 반복 시작 -----------
if (isActive && !!val && val !== "Space" && val !== "Backspace") {
if (this.#shift) this.#inputEl.value += val.toUpperCase();
else this.#inputEl.value += val;
}
if (isActive && val === "Space") {
this.#inputEl.value += " ";
}
if (isActive && val === "Backspace") {
this.#inputEl.value = this.#inputEl.value.slice(0, -1);
}
this.#keyboardEl.querySelector(".active")?.classList.remove("active");
// 반복 끝 -----------
}
...
// 수정 후
#onMouseUp(event) {
...
this.#onTyping(isActive, val);
}
#onTyping(isActive, val) {
if (isActive && !!val && val !== "Space" && val !== "Backspace") {
if (this.#shift) this.#inputEl.value += val.toUpperCase();
else this.#inputEl.value += val;
}
if (isActive && val === "Space") {
this.#inputEl.value += " ";
}
if (isActive && val === "Backspace") {
this.#inputEl.value = this.#inputEl.value.slice(0, -1);
}
this.#keyboardEl.querySelector(".active")?.classList.remove("active");
}
추가로 수정하고 싶은 점
- 현재 알파벳만 shift키가 적용되고 있는데 숫자나 특수문자 키도 shift 누르는 거 적용되면 좋겠다.
- Keyboard 이벤트 객체 안에 Ctrl을 눌렀는지 안눌렀는지도 판단할 수 있는데 이것도 뭔가 활용해서 새로운 기능을 넣어보고 싶다.
참고자료
'회고' 카테고리의 다른 글
| 30개 프로젝트로 배우는 프론트엔드 with React : 2강 이미지 슬라이더 만들기 (0) | 2022.11.18 |
|---|---|
| 2022 오픈소스 컨트리뷰톤 아카데미 : 어떤 사업인가요? (0) | 2022.10.28 |
| 2022 GDG 캠퍼스 코리아 GDG 썸머 해커톤 : 오프티벌 후기 (0) | 2022.07.14 |
| 2021 한이음ICT멘토링 : 아파트 청약 자격 판단 웹 서비스 프로젝트 (0) | 2022.06.30 |
| 2021 한이음ICT멘토링 : 어떤 사업인가요? (0) | 2022.06.29 |
