• geolocation 등 특정 Web API들은 localhost 또는 HTTPS 환경에서만 동작한다
• 그래서 로컬에서 테스트했을 땐 동작하는 것들이 http로 배포했을 때 동작하지 않을 수 있다
• secure context가 필요한 API 목록은 아래 링크에서 확인할 수 있다

참고

• https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts

• 레포명 옆에 Archived 가 붙어있는 레포를 발견했다
• 뭔가 하고 찾아보았다

Archiving Repositories

• 읽기 전용 레포이다
• 더 이상 유지 보수되지 않는다는 것을 나타낸다
• 이 저장소에서는 새로운 활동이 생성될 수 없다
• 이슈나 풀리퀘스트를 생성할 수 없다

참고

• https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/archiving-a-github-repository/archiving-repositories

SSR, server side rendering
CSR, client side rendering

CSR

• CSR은 리액트로 만든 SPA 웹앱이라고 생각하면 된다
• index.html이 텅텅 비어있고,
• 버튼을 누르면 자바스크립트로 동적으로 화면을 다시 그려서 페이지가 넘어가는 것처럼 보인다
• 처음 리액트를 배울 때 안드로이드 앱 만드는 느낌이 강하게 들었다
• 최초에 index.html를 서버에서 받고, 화면이 넘어가는 경우 필요한 데이터만 서버에 요청한다
  (JSON 등 데이터만 주고받음으로 가볍다고 볼 수 있다)
• 데이터를 가져오면 이미 가지고 있는 틀에다가 바인딩하여 보여준다

SSR

• 전통?적인 방법이다
• 버튼, 링크를 누르면 서버로 다른 html 파일을 요청한다
• CSR과 반대로 html 내용이 꽉꽉 차있다
• SEO에 유리하다
• 크롤러(bot)는 그냥 html의 내용을 읽으면 된다
• CSR은 페이지 접속 만으로는 콘텐츠가 생성이 되어있지 않기 때문에 크롤러(bot)가 난감할 것이다

연관 키워드

• SSG (static site generator)

1
2

class Dice {
  sto: ReturnType<typeof setTimeout>;

• typescript로 웹 스크립트를 짜고 있다
• clearTimeout을 사용하기 위해 멤버 변수 sto를 넣었다
• 근데 setTimeout의 타입이 뭘까?
• 에디터에서 NodeJS.Timeout라고 알려주긴 하는데..
• 내 런타임을 노드가 아니라 브라우저다
• ReturnType<fn>을 사용하면 브라우저든 SSR이든 걱정 없다고 한다

참고

• https://stackoverflow.com/questions/45802988/typescript-use-correct-version-of-settimeout-node-vs-window/56239226#56239226
• https://stackoverflow.com/questions/51040703/what-return-type-should-be-used-for-settimeout-in-typescript

• 평소 잔디라 불러서 원래 이름이 뭔지 알아보았다

참고

• https://docs.github.com/en/github/setting-up-and-managing-your-github-profile/managing-contribution-graphs-on-your-profile/viewing-contributions-on-your-profile#contributions-calendar

ㅋㅋ

• 내 커밋 기록 식칼 모양이다

1
2
3

.box {
  transition: all 0.2s ease;
}

• 자연스러운 변화를 주기 위해서 사용하곤 했다
• ease는 여러 가지가 있는데 어떤 차이일까?

transition-timing-function

• 영상 편집할 때 영상의 앞뒤에 투명도를 가지고 페이드인 페이드아웃하는 그래프가 있는데 그거랑 똑같다
• ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier, steps 가 있다

함수들

• 캡처 ; https://cubic-bezier.com/

• ease ; 천천-빠름-천천
• linear ; 등속
• ease-in ; 천천-보통
• ease-out ; 보통-천천
• ease-in-out ; 천천-보통-천천
• cubic-bezier ; 커스텀

• steps ; 뚝뚝 끊어 보여준다

cubic-bezier

베지에 곡선이라고 한다
ease, in, in-out은 미리 정의어 있는 곡선이다
각각을 cubic-bezier로 표현하면 다음과 같다

• ease === cubic-bezier(0.25, 0.1, 0.25, 1.0)
• linear === cubic-bezier(0.0, 0.0, 1.0, 1.0)
• ease-in === cubic-bezier(0.42, 0, 1.0, 1.0)
• ease-out === cubic-bezier(0, 0, 0.58, 1.0)
• ease-in-out === cubic-bezier(0.42, 0, 0.58, 1.0)

참고

• https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
• https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function

유용한 도구

• cubic-bezier 커스텀
• https://cubic-bezier.com/

용어

• 베지에 곡선, 베지어 곡선
• https://ko.wikipedia.org/wiki/베지에_곡선

• 깃허브 레지스트리를 통해 (비공개) 패키지를 만들어보자
• PAT을 통해 퍼블릭하지 않게 패키지를 배포해 볼 수 있다
• 물론, 공개 패키지도 가능하다
• 패키지 생성은 동일하고, 패키지를 받을 때만 차이가 있다

• PAT : personal access token

PAT 발급

• github에 로그인하고,
• https://github.com/settings/tokens/new
• write:packages 권한의 personal access token을 생성한다

저장소, 패키지 만들기

• package.json에 필수적으로 채워야 하는 항목들이 있어서,

• 브라우저로 github에 접속해서 저장소 하나를 만들어 로컬로 클론하고
  npm init -y 하는 것을 추천한다

• 타입스크립트로 만든다

1
2
3

git clone https://github.com/chinsun9/hello-package.git

tsc --init

디렉터리 구조

1
2
3
4
5
6
7
8
9
10
11
12

.
├── dist
│   ├── index.d.ts
│   └── index.js
├── src
│   └── index.ts
├── .gitignore
├── .npmignore
├── .npmrc
├── package.json
├── README.md
└── tsconfig.json

• 디렉터리 구조는 마음대로

• 나는 위처럼 구성했다

• src 밑에 ts 코드를 작성하고,

• tsc 명령으로 dist 아래 트랜스파일 된 js를 배포하는 방식이다

src 작성

1
2
3
4
5

export class MyClassA {}

export class MyClassB {}

export class MyClassC {}

• 원하는 기능을 구현하고 외부에서 사용 가능하도록 export키워드를 붙여준다

tsconfig.json 설정

• 타입스크립트로 코드를 작성하고,
• tsc로 트랜스파일한다. 결과로 js파일이 생성된다
• 패키지를 인스톨한 사람들은 js파일을 사용하게 된다

1
2
3
4
5
6
7
8
9
10
11

{
  "compilerOptions": {
    // ...
    "declaration": true /* Generates corresponding '.d.ts' file. */,
    // ...
    "outDir": "./dist",
    "rootDir": "./src"
    // ...
  },
  "include": ["src"]
}

• tsc --init 기본값으로 생성된 상태에서 위 옵션만 수정해주었다
• declaration ; d.ts파일을 생성해서 자동완성에 도움을 준다
• outDir ; tsc 명령의 결과로 생성되는 js 위치
• rootDir, include ; root ts 파일 위치

.gitignore

1
2

dist
node_modules

• 커밋에서 무시할 디렉터리, 파일을 나열한다

.npmignore

1
2
3

src
test
tsconfig.json

• 패키지를 publish 할 때 무시할 디렉터리, 파일을 나열한다

.npmrc

• 워크스페이스에 위치해도 되고,
• 어느 워크스페이스든 상관없이 전역적으로 적용하려면 ~/.npmrc에 넣어주면 된다

1

//npm.pkg.github.com/:_authToken=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

• 처음에 발급받은 토큰을 xxxx... 부분에 넣어준다
• 자신의 토큰은 아무래도 전역으로 적용하는 게 좋아 보인다

package.json

1
2
3
4
5
6
7
8
9
10
11
12

{
  "name": "@chinsun9/hello-package",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "repository": "https://github.com/chinsun9/hello-package.git",
  "author": "chinsun9 <chin_sung@naver.com>",
  "license": "MIT",
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/"
  }
}

• 몇 가지 수정사항이 있다
• name, main, types, publishConfig를 적절하게 수정한다
• name ; @chinsun9/처럼 골뱅이 자기 이름을 넣어준다
• main ; 트랜스파일 결과로 메인 파일을 넣어준다
• types ; 자동완성을 위해서 생성된 d.ts파일을 넣어준다
• publishConfig ; registry를 깃허브로 하겠다는 설정이다

패키지 배포

• npm publish
• 저장소에 들어가서 패키지가 잘 배포되었는지 확인하다

배포한 패키지 인스톨해보기

• github registry에 등록된 패키지는 퍼블릭 일지라도 PAT이 필요하다
• 퍼블릭일 때 패키지 주인이 생성한 토큰이 아니다
• 각자 자기 자신의 토큰으로 가능하다..!

• 비공개 패키지라면 패키지 주인이 생성한 토큰이 있어야 한다
• 패키지 주인은 read:packages 권한이 있는 토큰을 알려주면 다른 사람, 컴퓨터에서 패키지를 인스톨할 수 있다

• 임시 디렉터리를 하나 만들고 npm init -y한다
• .npmrc를 생성하고 내용을 추가한다

1
2

//npm.pkg.github.com/:_authToken=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
@chinsun9:registry=https://npm.pkg.github.com/

• 워크스페이스의 .npmrc 또는 유저 홈 디렉터리의 .npmrc 에 위 내용을 추가한다

• @chinsun9:registry=https://npm.pkg.github.com/

• @chinsun9으로 시작하는 패키지는 https://npm.pkg.github.com/ 에서 가져오라고 알려주자

헷갈린 점

• 퍼블릭한 패키지도 PAT가 필요했다
• 당연히 퍼블릭한 패키지에는 토큰이 필요 없을 거라 생각했다
• 그래서 어쩔 수 없이 패키지 오너의 토큰이 필요할 거라 생각했다
• 근데, 패키지 주인이 생성한 토큰이 아니더라도 패키지를 인스톨할 수 있었다
• 즉, github 계정을 가지고 있고, read:packages 토큰을 생성하면 퍼블릭 패키지를 인스톨할 수 있다

참고

내 첫 패키지

• https://github.com/chinsun9/hello-package

GitHub 패키지 저장소 호스팅: GitHub Package Registry 시작하기

• https://musma.github.io/2019/09/30/github-package-registry.html

d.ts 만들기

• https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html

*rc 뜻

• https://stackoverflow.com/questions/52800196/what-does-the-rc-stand-for-in-the-names-of-configuration-files
• https://stackoverflow.com/questions/11030552/what-does-rc-mean-in-dot-files

• 홈 디렉터리는 보통 ~로 표현된다

1
2
3
4
5

# linux
vi ~/.npmrc

# windows
notepad %userprofile%/.npmrc

• 유저 홈 디렉터리에 설정 파일들이 많이 있는데,
• 이 디렉터리를 windows cmd에서 가고 싶을 때 %userprofile%을 참조하면 된다

cmd로 유저 홈 디렉터리 이동

1

cd %userprofile%

홈 디렉터리 탐색기로 열기

• Win + R
• %userprofile% 입력 후 엔터

번외 : git bash 쓰기

• 간단한 명령어인데, 리눅스 명령어라서 cmd에서 안될 때
• git bash를 켜서 실행한다
• 대부분 잘 동작한다

select:

1
2
3
4
5
6
7
8

<label for="myInput">select: </label>
<input list="myInputList" id="myInput" />

<datalist id="myInputList">
  <option value="hello">안녕</option>
  <option value="hi">안뇽</option>
  <option value="bye">잘가</option>
</datalist>

• datalist를 사용하면 input 태그를 select 태그와 비슷하게 쓸 수 있다
• input에 입력하면 자동으로 필터링된다

참고

• https://developer.mozilla.org/ko/docs/Web/HTML/Element/datalist

BEM

• Block, Element, Modifier
• css class 이름
• __ 를 이어붙인다

🤔

• amazon clone 할 떄, 한번 사용해봤는데
• 마크업할 때 클래스 작성하기가 불편했다
• sass를 배웠는데 어째선지 더 쓰지않게 되었다

참고

• https://youtu.be/aKenj9ZQwJg