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

Smooth Page Transitions

결과

후기

  • 영상 제목만 보고 단순히 css js를 이용한 트랜지션을 구현할 줄 알았는데,
  • node로 parcel, gsap, highway 를 사용해서 웹만드는 것을 배우게되었다
  • parcel을 처음 써보았는데, 개발할 때도, 배포할 때에도 좋은 것 같다
  • higyway와 gsap으로 애니메이션을 구현해 보았다
  • parcel을 이용해 웹을 만들어 깃허브 페이지로 배포할 때,
  • parcel build index.html --out-dir docs --public-url ./
  • 위 처럼 옵션을 넣어줘야한다
  • –out-dir docs 는 깃허브 페이지 설정할 때 디렉터리
  • –public-url ./ 는 이미지, css, js 경로가 망가지지 않도록한다

참고

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

github api로 유명한 레포 첫 커밋 메시지 확인하기

  • 엄청큰 오픈소스 저장소를 보면 커밋 개수가 어마어마하다
  • 첫 커밋을 확인하려고, 브라우저에서 커밋 목록으로 들어가서 한페이지 한페이지씩 넘겨가면서 찾을 수 없을 것이다

  • vscode의 첫번째 커밋은 어떤 커밋일까?

Hello Code

github api로 첫 커밋 확인하기

  • 약간 수동적인 방법이다

https://api.github.com/repos/microsoft/vscode/commits?page=73698&per_page=1

  • 브라우저로 vscode 레포에 접속해서 총 커밋 개수를 확인한다
  • github api 중에 커밋 목록을 보여주는 api가 있다
  • 파라미터로 page에 커밋 개수를, per_page는 1로 설정해주면 첫번째 커밋을 가져올 수 있다
  • 그리고 시간이 지남에 따라 새로운 커밋이 생기고, 커밋 개수가 증가하게 되면서, 나중에 다시 보려면 page 파라미터의 값을 새롭게 설정해줘야 하는 문제가 있다

참고

  • 찾아보니까 스크립트로 여러사람들이 만들어 놓은것을 확인할 수 있었다

shell script

python, js

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

firebase 호스팅한 앱 종료하기

  • firebase를 처음 사용해보았다
  • 비용 걱정으로 호스팅한 앱이나, 함수들을 사용하지 않을 때 꺼두려고 한다

호스팅 종료

  • cli에서 firebase-tools 를 이용해야한다

terminal
1
firebase hosting:disable
  • 호스팅했던 앱 url로 접속해서 확인해보자

함수 삭제

  • 함수(백엔드, api)는 브라우저로 firebase 콘솔에 접속해서 삭제할 수 있다

참고

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

react Each child in a list should have a unique key prop.

  • key prop 에 대한 글이 아니고, 단순히 에러 메시지를 뛰우지 않기위해 하는 단순무식한 글이다.

example.js
1
2
3
4
5
6
7
<div className="product__rating">
  {Array(rating)
    .fill()
    .map((_, i) => (
      <p key={i}>✨</p>
    ))}
</div>
  • 반복문을 통해 자식 엘리먼트를 생성할 때,

    Each child in a list should have a unique key prop.

  • 이 오류 콘솔에 뜨게된다
  • 콘손에 빨간 오류가 보기 싫어서
  • 인덱스 값으로 key prop을 명시해준다

참고

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

net::ERR_UNKNOWN_URL_SCHEME webview

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
67
68
//자바
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url != null && url.startsWith("intent://")) {
        try {
            Intent intent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME);
            Intent existPackage = getPackageManager().getLaunchIntentForPackage(intent.getPackage());
            if (existPackage != null) {
                startActivity(intent);
            } else {
                Intent marketIntent = new Intent(Intent.ACTION_VIEW);
                marketIntent.setData(Uri.parse("market://details?id=" + intent.getPackage()));
                startActivity(marketIntent);
            }
            return true;
        } catch (Exception e) {
            e.printStackTrace();
        }
    } else if (url != null && url.startsWith("market://")) {
        try {
            Intent intent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME);
            if (intent != null) {
                startActivity(intent);
            }
            return true;
        } catch (URISyntaxException e) {
            e.printStackTrace();
        }
    }
    view.loadUrl(url);
    return false;
}

// 코틀린
override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
    if (url != null && url.startsWith("intent://")) {
        try {
            val intent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME)
            val existPackage =
                packageManager.getLaunchIntentForPackage(intent.getPackage()!!)
            if (existPackage != null) {
                startActivity(intent)
            } else {
                val marketIntent = Intent(Intent.ACTION_VIEW)
                marketIntent.data =
                    Uri.parse("market://details?id=" + intent.getPackage()!!)
                startActivity(marketIntent)
            }
            return true
        } catch (e: Exception) {
            e.printStackTrace()
        }

    } else if (url != null && url.startsWith("market://")) {
        try {
            val intent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME)
            if (intent != null) {
                startActivity(intent)
            }
            return true
        } catch (e: URISyntaxException) {
            e.printStackTrace()
        }

    }
    view.loadUrl(url)
    return false
}
 게시 됨 업데이트 됨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이벤트의 정보들이다
  • 키 이벤트 관련 로직 짤 때, 들어가서 키코드 확인하기 좋을 것 같다

심심하면 업데이트할 것

  • 히스토리 만들기

소스코드

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

윈도우에서 yarn 설치

  • nodejs로 이것저것 할 때 yarn을 피해 갈 수 없을 것이다

설치방법

  • 설치가 완료되면 cmd를 열고 yarn -v 를 쳐서 확인한다

yarn

  • 페이스북에서 만든 npm

참고

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

react에서 html 자동완성 쓰기, emmet 사용하기

settings.json
1
2
3
4
5
6
{
  // (...)
  "emmet.includeLanguages": {
    "javascript": "javascriptreact" // <-- react에서도 emmet 사용가능하도록
  }
}
  • settings.json에 추가한다
  • 추가로 "emmet.triggerExpansionOnTab": true, 설정을 추가하면 tab키를 눌러 자동완성할 수 있다

참고

 게시 됨 업데이트 됨reg exp1분안에 읽기 (약 194 단어)

정규식으로 좌표꺼내기

(37.11111111111111, 126.11111111111111)

  • 이런 좌표를 나타내는 문자열에서 알맹이만 빼보자
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let coordString = '(37.11111111111111, 126.11111111111111)'
/\d+([.]\d+)?/.exec(coordString)
// "37.11111111111111,.11111111111111"

function getPositionFromString(positionString) {
  const re = /(\d+)([\.]\d+)?/g;
  const result = []

  while(match = re.exec(positionString)){
    // console.info(match[0], ' found at : ', match.index);
    result.push(match[0])
  }

  // console.info({x:result[0],y:result[1]})
  return {x:result[0],y:result[1]}
}
  • exec() 가 g옵션에 따라서 매치하는 패턴의 결과가 모두 담겨서 나오는줄 알았다
  • 위처럼 while 루프를 통해서 모든 매치결과를 받아올 수 있다
  • 내부적으로 커서가 있는 것 같다

참고

카테고리

아카이브

광고

×