템플릿 레포를 만들어보자

• 리액트 프로젝트를 진행할 때, CRA 같은 보일러플레이트로 프로젝트를 시작할 수 있다
• 근데 자신만의 린트 설정이나, 따로 설치하는 패키지들이 있다
• 이런 것들을 매번 새로운 프로젝트를 생성할 때마다 해준다면 귀찮을 것이다
• 이때 깃허브에서는 템플릿 저장소 기능을 활용할 수 있다

템플릿 저장소 하나 만들기

• 템플릿으로 만들 저장소를 만들고,
• 원하는 초기 상태를 세팅한다

• Settings 탭에 들어가면 레포명 설정 아래 바로 템플릿 레포로 지정할 수 있는 체크박스가 있다
• 체크 박스를 체크하면 템플릿 레포 완성이다

템플릿을 사용해서 새 저장소 생성하기

• 템플릿으로 설정한 저장소를 선택할 수 있다

다른 사람이 만들어둔 템플릿 사용하기

• 다른 사람이 만들어 둔 템플릿 레포가 있을 수 있는데,
• 포크해서 내 저장소로 가져오면 바로 사용이 가능하다

참고

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

파이썬 초보가 처음 깃허브에 있는 파이썬 프로젝트들을 돌려보면서 막혔던 부분과 알게 된 부분을 정리한 글

내 파이썬 지식

• 인공지능 관련 프로젝트들이 대부분 파이썬으로 작성되어 있어서
• 관련 프로젝트를 돌려보기 위해서는 파이썬 지식을 필요로 했다
• 1 ~ 2년 전에 학교 수업으로 데이터분석처리라는 과목을 들으면서 파이썬을 사용해봤는데,
• os는 윈도우, 도구는 주피터 노트북으로 테이블 데이터 전처리, 데이터 시각화와 분석을 해보았었다
• 사용해본 모듈로는 pandas, seaborn, matplotlib, numpy, statsmodels, scipy 등이 있다
• 각 모듈들에 대한 숙련도는 치트 시트를 확인한 정도이다

리눅스에서 돌리기

• 윈도우에서 프로젝트를 돌려보려고 시도했지만,
• 종속성을 설치하는 과정에서 불편한 것이 많아서 리눅스에서 돌려보기로 한다
• WSL로 윈도우에서 쉽게 리눅스 환경을 사용할 수 있다
• 나는 WSL2 Ubuntu-18.04 LTS 환경에서 진행했다
• vscode remote - WSL을 통해 작업했다

종속성 설치

• apt-get을 통해 필요한 종속성을 설치하는 경우,
• 먼저 apt를 최신 상태로 업데이트해줘야 한다

1

sudo apt-get update

sudo: pip: command not found

• pip 커맨드가 없다고 하는데, 설치해줘야 한다
• pip3를 설치하고, pip 커맨드는 pip3로 대체하여 사용한다

1

sudo apt-get -y install python3-pip

requirements.txt 설치 도중 오류

• pip3 install -r requirements.txt로 종속성을 설치하는데,

ModuleNotFoundError: No module named ‘skbuild’

• 사용하는 파이썬 버전에 따라서 설치가 안 되는 경우가 있다

• 나는 파이썬 3.6 버전을 사용하고 있었는데, 구글링해보니 3.7 이상이 필요하다 했다

• 파이썬 버전에 따라 설치할 수 있는 모듈 버전이 제한된다는 것을 알았다

• https://stackoverflow.com/questions/63448467/installing-opencv-fails-because-it-cannot-find-skbuild

• 파이썬을 3.7 이상으로 업데이트한다

• https://tech.serhatteker.com/post/2019-09/upgrade-python37-on-ubuntu18/

• 업데이트 방법은 위 링크에 친절하게 나와있다

• 이런 경우 말고도 no matching distribution found for numpy==1.20.0처럼 버전을 가져올 수 없다는 오류도 마찬가지로 파이썬 버전을 올려주니 해결됐다

프로젝트 파악하기

1

python3 main.py

• 기능을 추가하려면 코드가 어떻게 동작하는지 알아야 한다
• 여기저기 print문을 작성해보면서 차근차근 알아가 보자
• 파이썬 문법을 자세하게 몰라도 잘할 수 있다

• https://chinsun9.github.io/2021/07/15/python/
• 앞으로 위 링크에 유용한 명령어를 정리해서 업데이트할 것이다

참고

• https://stackoverflow.com/questions/63448467/installing-opencv-fails-because-it-cannot-find-skbuild
• https://tech.serhatteker.com/post/2019-09/upgrade-python37-on-ubuntu18/

1

git clone https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx@github.com/chinsun9/my-private-repo.git

1
2
3
4

git clone https://github.com/chinsun9/my-private-repo.git
Cloning into 'my-private-repo'...
Username for 'https://github.com': chinsun9
Password for 'https://chinsun9@github.com': xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

• 이런 식으로 패드워드 대용으로 사용해도 되지만,
• github.com 앞에 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx@
• 토큰@를 붙여서 cli에서 입력하는 과정을 스킵할 수 있다
• 이때 사용하는 토큰은 repo: Full control of private repositories 권한이 필요하다

• 저장소와 관련된 태그? 같은 것을 나열할 수 있는 기능이다
• 사용하면 무엇을 하는 저장소인지 나타내기 좋을 것 같다

참고

• https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/classifying-your-repository-with-topics

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

Archiving Repositories

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

참고

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

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

참고

• 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

ㅋㅋ

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

• 깃허브 레지스트리를 통해 (비공개) 패키지를 만들어보자
• 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

• 캬캬캬컄
• 첫 번째? 기여
• npm으로 다운받아지는 모듈에 내가…

tsc 문제

• 타입스크립트로 프론트 프레임워크 없이 바닐라? 웹 프로젝트를 했다
• vscode live server로 개발하고 있었다
• import/export 구문을 사용하고 싶어서 tsconfig에서 module옵션을 commonjs가 아닌 es2020으로 사용했다
• 그런데 한 가지 문제가 있었다
• 아래 tsc의 결과로 트랜스파일 된 js들이 있다

1

import tmp from './tmp';

1
2
3

import tmp from './tmp'; // tsc 결과

import tmp from './tmp.js'; // 내 기대값

• tsc 이후에 확장자가 달리지 않는 문제?가 있었다
• 이러면 live server는 localhost:5500/js/tmp를 못 찾는다
• localhost:5500/js/tmp.js 확장자까지 모두 있어야 파일을 찾아 로드할 수 있었다

• 이거에 대해 구글링을 해보니까
• .ts 파일에서 작업할 때 .js 확장자를 붙이는 방법이 있었다

1
2
3
4
5
6
7

// src-ts/tmp.ts
const tmp = 'chinsung';
export default tmp;

// src-ts/main.ts
import tmp from './tmp.js';
console.log(tmp);

• 근데 이건 에디터에서는 잘 알아듣게 할 수 있지만
• 코드를 봐서도 아름답지 못한 느낌이 팍 들었다

• 다른 방법으로는 서버에서 파일을 찾을 때
• 확장자가 생략이 되어도 그에 맞는 파일을 서빙하도록 설정하는 방법이 있었다
• 먼저 live server에서 라우터나 서빙 관련 뭔가 설정 가능한 게 있는지 살펴봤는데 없었다
• express 서버를 만들고 해당 기능을 추가하기에는 auto refresh 기능을 포기하고 싶지 않았다

tsc-es2020-fix 발견

• 이리저리 찾아보다가
• https://github.com/microsoft/TypeScript/issues/13422#issuecomment-838857980
• 이 코멘트를 발견하고 tsc-es2020-fix 모듈을 받아 사용했다
• 이 모듈은 tsc이후에 생성된 js 파일들을 읽어서 import / export 구문에 확장자를 달아준다

tsc-es2020-fix 문제 발견

• 잘 쓰고 있다가 한 가지 문제점을 발견했다

1
2
3

import tmp from './tmp';
// ->
import tmp from './tmp.js';

• 같은 레벨의 파일 참조는 잘 변환이 되는데

1
2
3

import tmp from '../tmp';
// ->
import tmp from '../tmp'; // 확장자가 붙지 않는다..!

• 상위 디렉터리를 거치는 경우에 기대한 대로 동작하지 않았다
• node_modules에서 tsc-es2020-fix를 이리저리 둘러보다가
• 변환이 이뤄지는 로직을 찾았다

1
2
3
4
5

contents.replace(
  /(\sfrom |\simport\()(["'])(\.\/[^"']+)(["'])/g,
  (matched, control, q1, from, q2) =>
    `${control}${q1}${resolveDependency(filename, from, filenames)}${q2}`
);

• 정규식으로 import / export 구문을 찾고 확장자를 붙여주는 것이었다
• 나는 여기서 정규식을 수정하면 될 것 같았다

• 간단하게 위 경우도 찾을 수 있게 수정했다

1
2
3
4
5

contents.replace(
  /(\sfrom |\simport\()(["'])(\.{0,2}\/{0,1}[^"']+)(["'])/g,
  (matched, control, q1, from, q2) =>
    `${control}${q1}${resolveDependency(filename, from, filenames)}${q2}`
);

• 그러자 내가 기대하는 대로 동작하기 시작했다
• 이때 너무 기분이 좋아서 원본 레포에 가서 fork하고 자신감 넘치게 PR를 했다

첫 기여

• PR을 보내고 얼마 지나지 않아 답변이 왔다
• 테스트를 추가해 달라였는데, 나는 엄청 당황했다 ㅋㅋㅋ
• 테스트 케이스인 파일을 추가하고 jest -u를 돌려달라는데
• jest부터 몰라서 jest 공부도 하고..
• 프로젝트 구조도 잘 모르는데, 어찌어찌 내가 생각하는 대로 파일 추가하고 테스트 한 다음에
• 내 PR을 적용하기 전과 후 결과를 스샷 찍어서 답글을 달았다

• 괜찮아 보인다며 내 PR이 병합됐다!!
• 내 변경사항으로 모듈이 업데이트되고, 뭔가 기분이 좋았다

후기

• 처음 모르는 레포에 가서 PR을 했다
• PR하고 피드백받고, 테스트 코드 추가하면서 엄청 떨렸다
• 그러면서 기여를 어떻게 해야하는지 찾아보고
• https://github.com/sindresorhus/.github/blob/main/contributing.md
• 엄청난 오픈소스 개발자 깃허브도 찾고,,
• 기여를 어떻게 해야 하는지에 대한 문서에
• fork 한 다음에 master 브랜치 작업하고 PR를 보내지 마라라는 항목이 있어서 부끄러워졌다..

참고

• https://github.com/antongolub/tsc-es2020-fix/pull/9

• https://chinsun9.github.io/github-404-page-clone/

• github 404 페이지를 클론해보았다
• 마우스 움직임에 따라 원근감 있게 움직이는 이미지들이 재밌었다

• 전에 3d 카드 이펙트 만들면서 perspective css 속성을 사용해보았는데, 그때 사용한 코드를 거의 그대로 사용해서 만들 수 있었다
• 3d card effect ; https://github.com/chinsun9/3d-card-effect

• 이미지는 직접 그렸다. 물론 바닥에 대고…

참고

• https://github.com/chinsun9/github-404-page-clone

• 다크 모드는 OS에서 설정할 수 있다
• 최상위 (OS)에서 설정해두면 그 위에서 돌아가는 앱이 자동으로 테마를 스위치 한다
• 깃허브 다크 모드가 크롬 프로필에 따라 풀려서 다크 모드로 설정을 하려는데
• 시스템 기반으로 테마를 토글 하는 기능이 있음을 알게 되었다
• 그래서 윈도우에서 다크 모드 적용을 알아보았다

윈도우 다크 모드

• win 키를 누르고 theme를 검색하면 테마 컬러 선택 설정으로 들어갈 수 있다

• 색 선택에서 어둡게를 선택하면
• 다크 모드 설정 완료이다

• 익스플로러나 브라우저를 보면 자동으로 다크 모드가 된 것을 확인할 수 있다
• 깃허브 사이트나 깃허브 데스크톱 앱도 자동으로 다크 모드로 전환되었다
• 앱또는 웹사이트마다 일일이 다크 모드 적용하기보다 OS 레벨에서 다크 모드를 적용하는 것이 훨씬 유용하다