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

js object access by index


의미없는 변수이름들..

  • api를 사용하다보면 주기적으로? 변수명이 바뀌는 상황이 나온다
  • 카카오 맵 api 가 그러하다
  • 이렇게 직접 객체의 변수에 접근해서 사용하는 것은 바람직하지 않다고 한다
  • 그런데 객체의 값에 직접 접근하고 싶은경우가 있을 수 있다
  • 하지만 키의 이름은 주기적으로 바뀐다
  • 그래서 obj.key 이런식의 접근은 당장에는 가능하나,
  • 언젠가는 동작하지 않는 코드가 된다
  • 키의 이름이 주기적으로 바뀌는 것을 무시하고 접근한다고 생각하니까
  • 인덱스로 접근하는 방법을 알아보았다

access by index

access by index
1
2
3
4
5
a = { la: 1, ma: 2 };
Object.keys(a)[0]; // 'la'

a.la; // == 1
a[Object.keys(a)[0]]; // == a.la
  • Object.keys(a)를 통해 key의 배열을 받을 수 있다
  • 이를 통해서 인덱스를 통한 접근이 가능해진다
인덱스 부여 실험
1
2
3
4
5
a = { ma: 2, la: 1 };
Object.keys(a)[0]; // 'ma'

a = { la: 1, ma: 2 };
Object.keys(a)[0]; // 'la'
  • 인덱스가 어떻게 부여되나 실험을 해보았는데,
  • 직관적으로 왼쪽에서 오른쪽으로 번호가 매겨진다
  • 키의 알파벳이나, 그 안에 들어있는 값이나 일절 상관없다

참고

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

prettier ignore line

  • 마크다운에서는 여러 라인 범위를 포맷팅하지 않도록 설정할 수 있다
  • formatOnSave 를 사용해서 내용이 많은 마크다운을 저장할 때, 이미 포맷팅이 잘 되어있더라도
  • 좀 오래걸리는 느낌이 있었다
  • 그래서 포맷팅을 무시하는 설정을 알아보았다
  • 기분탓인지 몰라도 쫌 빨라진 것 같다..?

markdown perttier ignore

md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- prettier-ignore -->
Do   not    format   this

format this

<!-- prettier-ignore-start -->
| MY | AWESOME | AUTO-GENERATED | TABLE |
|-|-|-|-|
| a | b | c | d |
<!-- prettier-ignore-end -->

| MY  | AWESOME | AUTO-GENERATED | TABLE |
| --- | ------- | -------------- | ----- |
| a   | b       | c              | d     |

js perttier ignore

js
1
2
3
4
// prettier-ignore
let a=1

let b = 2;
  • js 에서는 한개의 라인을 포맷하지않도록 설정할 수 있다
js
1
2
3
4
5
6
let c = [1, 2, 3];

let c = [
  //  <-- 주석 넣으면 펼쳐짐
  1, 2, 3,
];
  • 중간에 주석을 넣어서 펼쳐지게 포맷팅할 수 있다

참고

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

aws lambda cors 설정

  • cors를 통해 도메인이 다른 서버로 요청을 보내고 결과를 받아 올 수 있다
  • 람다를 웹에서 실행할 수 있다

API 게이트웨이 설정

  • 람다를 실행하는 API를 하나 생성한다

  • 기본으로 생성되는 any method는 삭제하고
  • get 메서드를 하나 만들고, 내 람다함수를 붙여준다

  • 작업 > CORS 활성화 를 클릭한다

  • Access-Control-Allow-Origin 부분에 내가 원하는 origin을 설정한다
  • 여기서는 하나의 도메인만 설정할 수 있다
  • 여러개의 허용 도메인 허용하도록하려면 람다에서 로직을 짜야한다

  • 위처럼 options 메서드가 추가되고, get 메서드에 응답헤더가 추가된다

  • 설정이 완료되면 배포를 해야 적용이 된다

CORS

  • Cross-origin resource sharing

참고하면 좋은

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

cidr

  • aws에서 보안그룹이라던지, acl 설정이라던지
  • ip를 받는 설정을 하다보면 123.123.123.123/32 등
  • ip/mask bits 로 표기되는 것을 본적 있을 것이다
  • 이를 CIDR 표기법이라고하고,
  • 이는 쉽게 ip의 범위를 나타낸다
  • 마스크 비트 숫자가 클수록 범위가 좁다
  • 마스크 비트 숫자가 작을수록 범위가 크다. = 포함된 ip 주소가 많다

참고

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

rds 해킹당하기

  • 복구 방법에 대한 글이 아니다.
  • 그냥 털리면 어떻게 되는지, 왜 털렸을까하는 내용의 기록이다.

털린 증상

  • rds에 접속해보면 내 테이블들이 사라져있고,
  • PLEASE_READ_ME_XMG 라는 데이터베이스가 생겨있고
  • WARNING 테이블만 존재한다

  • WARNING테이블을 셀렉트해보면 아래와 같은 메시지가 적혀있다

To recover your lost databases and avoid leaking it: visit http://hn4wg4o6s5nc7763.onion and enter your unique token ee974966c47f1027 and pay the required amount of Bitcoin to get it back. Databases that we have: acl-manager. Your databases are downloaded and backed up on our servers. If we dont receive your payment in the next 9 Days, we will sell your database to the highest bidder or use them otherwise. To access this site you have use the tor browser https://www.torproject.org/projects/torbrowser.html

  • 이 웹사이트에 들어가서 토큰으로 로그인하고 비트코인을 지불하라는 내용이다
  • 일반 브라우저에서는 접속하지 못하고, tor browser에서만 접속가능하다
  • 나는 안들어가봤다. 왜냐면 중요한 데이터가 아니였기 때문이다

털린 이유

  • rds 퍼블릭 액세스 허용
  • 인바운드 규칙 모두 허용
  • rds 비밀번호 1234

조치

  • 중요한 정보가 없어서 그냥 rds를 삭제하고 다시 만들었다
  • 삭제할 때 스냅샷을 만들지 않도록 한다. 스냅샷 저장 비용이 발생할 수 있다
  • 새로 만든 RDS는 보안그룹 인바운드 규칙에서 내 IP만 접속가능하도록 해주었다
  • 비밀번호를 어렵게 설정했다
 게시 됨 업데이트 됨aws몇 초안에 읽기 (약 55 단어)

rds 삭제 방지 비활성화

  • rds를 켜놓은 상태에서 수정을 할 수 있다
  • rds 꺼놓은 상태에서 수정버튼을 누르면 무한 로딩이 기다리고있다..
 게시 됨 업데이트 됨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로 생성해야한다
  • 그리고 배포한다

참고

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

github blog, page google analytics로 측정하기

  • 깃헙 페이지에 google analytics 를 적용하고,
  • 사용자 통계를 받아보자

환경

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

애널리틱스 계정 생성

  • 계정 생성이라는 것을 먼저해주었다

  • 계정 이름을 적당히 입력한다

  • 속성 설정을 적당히 입력한다

  • 비즈니스 정보를 입력한다
  • 처음 애널리틱스를 사용해 보아서 이게 맞나 싶었는데, 이 과정을 거쳐야한다..

애널리틱스 데이터 스트림 설정

  • 게정 생성을 완료하면 이런 화면이 나오는데, 웹을 선택한다

  • https, 내 깃헙 주소, 스트림 이름을 입력하고 스트림 만들기를 선택한다

  • 측정 ID 를 복사한다
  • // 다른 블로그들을 봤을 때, 예전에는 추적 ID였던 것이 측정 ID로 용어가 바뀌였다

hexo config.yml google_analytics 설정

  • 나는 hexo icarus 테마를 사용하고 있다
  • icarus 테마 설정파일인 _config.icarus.yml 에 위처럼 추가해주었다
  • 내 기준으로 290라인 정도에 위치하고있다

적용된 것 확인하기

  • hexo generate 명령어로 현재 설정이 적용이 되었나 확인해보자
  • vscode에서 ctrl shift f 를 눌러 검색창을 띄우고, 자신의 측정 ID를 검색해보자
  • 그러면 생성된 모든 .html 파일에서 검색되는 것을 확인할 수 있다

  • 그러면 이제 배포하고, 약간 기다리면 애널리틱스 대시보드에서 카운팅 되는 것을 확인할 수 있다
 게시 됨 업데이트 됨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()
}

참고

카테고리

아카이브

광고

×