게시 됨 업데이트 됨web1분안에 읽기 (약 114 단어)

keydown event preventDefault

  • F1 key 를 누르면 자동으로 도움말창이 열린다
  • 이거를 안열리게 해보자
1
2
3
4
5
6
window.addEventListener('keydown', function (e) {
  // F1 keyCode
  if (e.keyCode === 112) {
    e.preventDefault();
  }
});
  • 이렇게 F1 key 의 경우에만 반응하지 않도록 만들 수 있다
1
2
3
window.addEventListener('keydown', function (e) {
  e.preventDefault();
});
  • 이렇게 F1 key 뿐만아니라 다른 모든 키의 기본 실행을 방지할 수 있다

참고

 게시 됨 업데이트 됨web1분안에 읽기 (약 130 단어)

keyboardevent.io

  • keyboardevent.io 를 만들어보았다
  • 웹에 포커스를 두고 키를 입력하면 그대로 화면에 출력한다
  • 출력되는 정보는 keydown이벤트의 정보들이다
  • 키 이벤트 관련 로직 짤 때, 들어가서 키코드 확인하기 좋을 것 같다

심심하면 업데이트할 것

  • 히스토리 만들기

소스코드

 게시 됨 업데이트 됨web2분안에 읽기 (약 236 단어)

random user api

api result
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
{
  "results": [
    {
      "gender": "male",
      "name": {
        "title": "Mr",
        "first": "Alexis",
        "last": "Petit"
      },
      "location": {
        "street": {
          "number": 4670,
          "name": "Rue Abel-Gance"
        },
        "city": "Asnières-sur-Seine",
        "state": "Côtes-D'Armor",
        "country": "France",
        "postcode": 50669,
        "coordinates": {
          "latitude": "1.5987",
          "longitude": "-174.3996"
        },
        "timezone": {
          "offset": "-3:30",
          "description": "Newfoundland"
        }
      },
      "email": "alexis.petit@example.com",
      "login": {
        "uuid": "0c475137-052f-4e2d-accd-e1f81134085b",
        "username": "smallswan940",
        "password": "roland",
        "salt": "axj95jYj",
        "md5": "9cb8a280ee2ea2c270304e789cf41c4d",
        "sha1": "ad06d250bb7e2e63c41180190fd1a0a87310bed9",
        "sha256": "dcd4a79c08ce63b11e0e210488be6c13d6479c1857978272d22de05743c5a0c8"
      },
      "dob": {
        "date": "1948-07-11T03:52:55.239Z",
        "age": 72
      },
      "registered": {
        "date": "2019-03-02T05:37:55.591Z",
        "age": 1
      },
      "phone": "01-02-20-53-73",
      "cell": "06-62-80-71-34",
      "id": {
        "name": "INSEE",
        "value": "1NNaN99470953 54"
      },
      "picture": {
        "large": "https://randomuser.me/api/portraits/men/52.jpg",
        "medium": "https://randomuser.me/api/portraits/med/men/52.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/men/52.jpg"
      },
      "nat": "FR"
    }
  ],
  "info": {
    "seed": "40708dc84b376baf",
    "results": 1,
    "page": 1,
    "version": "1.3"
  }
}

fetch 예제

example.js
1
2
3
fetch('https://randomuser.me/api')
  .then((res) => res.json())
  .then(console.log);

참고

 게시 됨 업데이트 됨blog3분안에 읽기 (약 388 단어)

github hexo blog web font 적용하기

환경

  • 나는 hexo에서 icarus 테마를 사용하고 있다

폰트 고르기

theme 코드 변경

layout/common/head.jsx
1
2
3
4
5
6
7
8
9
10
// 51 line
const fontCssUrl = {
  default: fontcdn("Ubuntu:wght@400;600&family=Source+Code+Pro", "css2"),
  cyberpunk: fontcdn("Oxanium:wght@300;400;600&family=Roboto+Mono", "css2"),
  nanumgothic: fontcdn("Nanum+Gothic:wght@400&family=Roboto", "css2"),
};

// 151 line
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href={fontCssUrl['nanumgothic']} rel="stylesheet" />
  • fontcdn 이라는 메서드가 있어서 그냥 활용했다
  • icarus theme config 파일의 fontcdn이 google로 되어있어서 그대로 사용할 수 있었다
include/style/base.styl 8 line
1
2
$family-sans-serif ?= 'Nanum Gothic', Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif
// $family-sans-serif ?= Ubuntu, Roboto,'Nanum Gothic Coding', 'Open Sans', 'Microsoft YaHei', sans-serif
  • 나눔고딕을 3순위로 했는데, 영어랑 한글이랑 부자연스러운 것 같아서 그냥 나눔고딕을 1순위로 올렸다
include/style/article.styl 4 line
1
$article-font-size ?= 1.3rem
  • 하는 김에 본문 폰트 사이즈도 키워주었다

확인하기

1
2
hexo generate
hexo server
  • 잘 갱신되었는지 확인한다

배포하기 전 확인하기

  • hexo server에서는 최신 css 상태를 반영하는데,
  • 그런데 실제로 배포될 때는 css파일이 갱신이 안된다
  • 그래서 public/css/default.css 파일을 삭제하고, 다시 hexo generate로 생성해야한다
  • 그리고 배포한다

참고

 게시 됨 업데이트 됨web1분안에 읽기 (약 211 단어)

web api location 객체

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  ancestorOrigins: DOMStringList {length: 0}
  assign: ƒ assign()
  hash: ""
  host: "chinsun9.github.io"
  hostname: "chinsun9.github.io"
  href: "https://chinsun9.github.io/keyboardevent.io/?time=1700&a=123"
  origin: "https://chinsun9.github.io"
  pathname: "/keyboardevent.io/"
  port: ""
  protocol: "https:"
  reload: ƒ reload()
  replace: ƒ replace()
  search: "?time=1700&a=123"
  toString: ƒ toString()
}

참고

 게시 됨 업데이트 됨web몇 초안에 읽기 (약 16 단어)

em vs rem

em

  • 상위 요소 기준

rem

  • 최상위 요소 html 기준
 게시 됨 업데이트 됨web몇 초안에 읽기 (약 66 단어)

flex box로 수평수직 가운데 정렬하기

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
  html {
    height: 100vh;
  }

  body {
    height: 100%;
  }

  .flexbox-container {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  .flexbox-item {
    background-color: #ddd;
  }
</style>

<div class="flexbox-container">
  <div class="flexbox-item">hello world!</div>
</div>
1
2
3
4
.flexbox-container {
  justify-content: center;
  align-items: center;
}
  • flex box로 수평수직 가운데 정렬하기
 게시 됨 업데이트 됨web2분안에 읽기 (약 225 단어)

JSON.stringify 예쁘게 출력하기

1
JSON.stringify(my, null, 2);
  • 두번째 인자로 null 과
  • 세번째 인자로 space argument 를 설정해주면된다
  • space argument 는 들여쓰기를 간격에 대한 것이다

TMI

비교해보기

example
1
2
3
4
5
6
7
8
9
10
11
let my = {
  key: 'a',
  altKey: false,
  code: 'KeyA',
  ctrlKey: false,
  keyCode: 65,
  shiftKey: false,
};

console.log(JSON.stringify(my));
console.log(JSON.stringify(my, null, 2));
  • F12 로 개발자도구를 열고, 콘솔에 복붙해보자

html로 출력하고싶을 때

example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<pre><code id="message"></code></pre>

<script>
  'use strict';

  const message_span = document.querySelector('#message');

  let my = {
    key: 'a',
    altKey: false,
    code: 'KeyA',
    ctrlKey: false,
    keyCode: 65,
    shiftKey: false,
  };

  message_span.innerHTML = JSON.stringify(my, null, 2);
</script>
  • 로그로 남기는 것이 아니라 html로 그 결과를 보여주고 싶을 때에는
  • 위처럼 pre태그 안에서 보여주면된다

참고

 게시 됨 업데이트 됨web1분안에 읽기 (약 220 단어)

chrome inactive tab setTimeout, setInterval 실행 느림

  • 브라우저에서 js 코드 실행속도가 이상하게 느려져서 어떤 문제인가했는데,
  • 개발자도구를 새창으로 열고(콘솔보는용도로)
  • 탭을 백그라운드로 보내버렸더니 생긴문제였다
  • setTimeout, setInterval 메서드의 경우 탭이 인액티브 상태이면 1초 이상으로 제한된다고 한다
  • 인액티브 상태는 최소화하는 등 화면에서 사라지는 경우를 말하는 것 같다
1
2
3
setInterval(() => {
  log(1);
}, 100);
  • 위코드를 작성하고 개발자도구 콘솔창을 새창으로 열고
  • 탭을 최소화하면 1초 간격으로 실행되는 것을 확인 할 수 있다

참고

 게시 됨 업데이트 됨web4분안에 읽기 (약 565 단어)

chrome dev tool, 크롬 개발자 도구, F12

  • 크롬 개발자 도구는 진짜 치트키
  • 특히 이걸 알고시작하면 주먹구구식으로도 뭔가를 만들어낼 수 있다!
  • F12 키로 개발자도구를 켠다

요소선택

  • 개발자도구 상단에보면 네모에 호버하고 있는 마우스 아이콘을 클릭하거나
  • Ctrl + Shift + C 키로 요소를 선택할 수 있는 모드로 들어갈 수 있다

  • 이 모드가 켜지면 커서있는 곳의 html 요소를 선택할 수 있다


  • 클릭을하면 개발자도구에 해당 html 요소가 있는 라인이 하일라이트되어 보여지며
  • 원하는 요소를 더블클릭또는 f2를 눌러 html을 수정할 수 있다
  • 여기서 수정한 내용은 화면에 바로 반영되어 보여진다
  • 스타일도 적용해볼 수 있으며, 자동완성을 지원해서 속성명을 자세히 몰라도 이것저것 시험해볼 수 있다
  • 당연하게도 새로고침하면 수정사항이 모두 날라간다
  • 이렇게 저렇게 브라우저에서 시험삼아해보고 이게 좋다하면 에디터로 돌아와 코드에 추가해서 적용시켜볼 수 있겠다

Copy selector, Copy JS path

  • 나는 이거를 정말 많이쓴다

Copy selector 결과
body > section > div > div > div.column.order-2.column-main.is-9-tablet.is-9-desktop.is-9-widescreen > div:nth-child(1) > article > h1 > a

  • 내가 원하는 요소의 셀렉터를 찾아준다
  • css를 적용하거나, 셀렉터를 쓸필요가있을 때 유용하다

Copy JS path 결과
document.querySelector("body > section > div > div > div.column.order-2.column-main.is-9-tablet.is-9-desktop.is-9-widescreen > div:nth-child(1) > article > h1 > a")

  • Copy selector와 다른점은 document.querySelector로 감싸준다

debugger

  • 이것도 신기한 기능이다

  • 디버깅하고싶은 소스코드 중간에 debugger라는 키워드를 적어놓으면,
  • 개발자도구가 열렸을 때, 코드가 실행되다가 debugger를 만나면 실행이 멈추고,
  • 해당 위치에서 코드를 한줄씩 실행시켜 볼 수도 있고 그렇다

카테고리

아카이브

광고

×