github dot key

  • 레포를 로컬에 클론하지 않고도 코드를 탐색해 볼 수 있다
  • 아무 저장소에서 . (dot) key 를 눌러서 열어볼 수 있다
  • 처음 켜지는데 시간이 조금 걸린다

참고

깃허브에서 검색할 때 포크 저장소 포함하기

깃허브에서 저장소를 검색할 때, 포크 저장소는 검색되지 않는다
github advanced search를 사용해서 검색해보자

상황

  • 원본 레포가 업데이트가 없어서 포크를 확인하고 싶었다
  • 그런데 기본적인 깃허브 검색으로는 포크가 검색되지 않았다

  • 검색 결과 왼쪽 칼럼 하단을 보면 advanced search 버튼이 있다

  • 여러 검색 옵션들이 있는데, 포크를 포함하여 검색하기 위해 and including forks. 로 설정했다

  • 이제 포크가 포함되어 검색되는 것을 확인할 수 있다
  • 검색 결과 화면에서 정렬을 사용할 수 있다
  • 나는 스타가 많은 순으로 정렬하여 인기 있는 포크를 확인할 수 있었다

git config by workspace

  • 보통 global로 설정된 user.name, uesr.email이 있을 것이다
  • 깃 프로젝트 워크스페이스 별로 다른 계정을 사용해보자
terminal
1
2
3
4
5
# git config user.name {username}
git config user.name chinsun9

# git config user.email {email}
git config user.email chin_sung@naver.com
  • 글로벌로 설정된 이름, 이메일 대신, 다른 계정을 사용하고 싶은 워크스페이스로 가서 위 명령을 실행한다

참고

깃허브 템플릿 저장소 만들기

템플릿 레포를 만들어보자

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

템플릿 저장소 하나 만들기

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

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

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

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

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

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

참고

perssonal access token으로 비공개 레포 git clone 하기

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 권한이 필요하다

First Contribution

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

tsc 문제

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

tsc-es2020-fix 문제 발견

  • 잘 쓰고 있다가 한 가지 문제점을 발견했다
main.ts
1
2
3
import tmp from './tmp';
// ->
import tmp from './tmp.js';
  • 같은 레벨의 파일 참조는 잘 변환이 되는데
main.ts
1
2
3
import tmp from '../tmp';
// ->
import tmp from '../tmp'; // 확장자가 붙지 않는다..!
  • 상위 디렉터리를 거치는 경우에 기대한 대로 동작하지 않았다
  • node_modules에서 tsc-es2020-fix를 이리저리 둘러보다가
  • 변환이 이뤄지는 로직을 찾았다
fix.js
1
2
3
4
5
contents.replace(
/(\sfrom |\simport\()(["'])(\.\/[^"']+)(["'])/g,
(matched, control, q1, from, q2) =>
`${control}${q1}${resolveDependency(filename, from, filenames)}${q2}`
);
  • 정규식으로 import / export 구문을 찾고 확장자를 붙여주는 것이었다
  • 나는 여기서 정규식을 수정하면 될 것 같았다

  • 간단하게 위 경우도 찾을 수 있게 수정했다
fix.js
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를 보내지 마라라는 항목이 있어서 부끄러워졌다..

참고

git submodule 중첩된 깃 사용하기

  • 깃 아래 깃..!

상황

1
2
3
4
5
super
├── client
│ └── 1
└── server
└── 1
  • 이런 구조의 프로젝트가 있다
  • super에서 git init 하여 프로젝트를 관리하다 보면
  • 깃 히스토리가 client 내용, server 내용이 합쳐져 있다
  • 구분하기 위해 커밋 메시지를 적을 때도 어떻게 적어야 할지 망설이게 된다
  • 그래서 super, client, server에 모두 git init하고
  • super에서는 client와 server를 gitignore에 추가하고 사용해봤는데,
  • 이것도 좋은 방법은 아닌 것 같았다
  • 그래서 nested git repository 라는 키워드로 검색했고 submodule 이라는 것을 사용하면 된다는 것을 알게 되었다
  • submodule을 사용하면 super 디렉터리에서 명령어 하나로 하위의 서브모듈 깃 프로젝트를 업데이트(pull) 할 수 있다

공부

  • 생활코딩님의 강의를 보고 공부했다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 전제조건
// 명령어를 실행하는 위치는 super 디렉터리이다
// submodule로 추가할 프로젝트(client, server)는 모두 git init으로 초기화된 깃 프로젝트이며 원격 저장소에 올라가 있어야 한다

// submodule 추가 // 처음 super에 서브모듈을 추가하는 과정이다
git submodule add {repo url} 디렉터리명

// 이후 다른 컴퓨터에서 super를 클론하는 경우
git clone {super-repo-url} // git clone https://github.com/chinsun9/super.git

// 하위 서브 모듈은 클론되지 않는다
// 서브 모듈도 가져오기
git submodule init
git submodule update

// 위 명령은 하위 모든 서브 모듈을 가져온다
// 특정 서브 모듈만 가져오고 싶다면
git submodule init {submodule명}
  • super에서는 하위 서브모듈의 변경을 감지하고,
  • 하위 모듈의 해시(특정 버전을 가리키는)를 기억하는 방식으로 관리된다
  • git submodule update 명령을 사용하여 super에서 저장하고 있는 특정 버전의 하위 모듈로 업데이트한다
  • git submodule update --remote 명령을 사용하여 각 하위 모듈을 최신 상태로 업데이트할 수 있다
  • 여러 컴퓨터에서 작업할 때 super를 클론하고 git pull && git submodule update 명령으로 한 번에 가져올 수 있겠다!

발생한 문제

1
2
3
4
5
6
git submodule update --remote

fatal: Needed a single revision
Unable to find current https://github.com/chinsun9/my-submodule/master revision in submodule path 'lib'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  • git submodule update --remote 명령을 실행하니 이런 에러가 발생했다
  • 나는 submodule을 알기 전에 그냥 하위에 또 다른 깃 디렉터리를 사용하고 있었는데,
  • 그 상태 그대로 submodule add하고 사용했더니 위 에러가 발생했다
  • 해결방법은 기존 하위 레포를 삭제하고 다시 git submodule update --remote를 실행한다
1
2
rm -rf lib/
git submodule update --remote
  • 혹시 특정 브랜치에 대해 가져오고 싶으면 .gitmodules 파일을 열고 branch 값을 명시해준다
1
2
3
4
5
6
7
8
9
10
// 수정 전
[submodule "client"]
path = client
url = https://github.com/chinsun9/my-submodule

// 수정 후
[submodule "client"]
path = client
branch = mybranchname // 추가됨!
url = https://github.com/chinsun9/my-submodule

참고

비공개로 작업하던 레포 공개로 전환하기 위해 스크릿 파일 삭제하기

상황

  • 리액트 스터디가 끝났다..!
  • 스터디하면서 github에 비공개 레포로 진행했었는데
  • 스터디를 끝내면서 공개로 전환하기로 했다
  • 하지만 공개로 전환하기 전에 aws를 사용하면서 저장해둔 rds 접속 정보 등 시크릿 파일을 제거해야 한다
  • 히스토리에서도 완전히 삭제하는 것을 목표로 한다

시도1 ; git filter-branch

1
git filter-branch --index-filter 'git rm --cached --ignore-unmatch utils\rdsSecret.ts' HEAD
  • 명령을 실행하니까 filter-repo를 사용하라고 했다

시도2 ; git filter-repo

  • 나는 윈도우를 쓰고 있는데, 윈도우에서 인스톨할 때 주의사항이 있었다
  • scoop을 통해 설치하면 문제없다 하여 scoop을 설치한다

scoop 설치 및 filter-repo 설치

  • https://scoop.sh/
  • scoop은 윈도우용 커맨드 라인 인스톨러라고 한다
  • 설치를 위해 파워쉘을 관리자 권한으로 실행하고 다음을 실행한다
1
2
3
4
5
6
# scoop 설치
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')

# filter-repo 설치
scoop install git-filter-repo

filter-repo로 git history 속 민감한 정보 삭제하기

1
2
3
4
5
git filter-repo --invert-paths --path utils/rdsSecret.ts
//...
git filter-repo --invert-paths --path secret1
git filter-repo --invert-paths --path secret2
git filter-repo --invert-paths --path secret3
  • README.md에 민감한 정보가 있는 경우, 기존 내용을 복사했다가
  • 명령어로 히스토리에서 제거하고,
  • 다시 파일을 생성하고 민감한 정보를 없애고 새로 커밋을 해주었다
  • 이 작업을 진행하면 리모트 주소가 삭제되는데,
  • git remote add {레포 주소} 한다

주의사항

  • 작업을 진행하기 전에 백업 레포를 하나 생성하자
  • --path 경로 작성할 때, \로 작성하면 안 되고 /로 작성해야 한다
  • 제거하고자 하는 파일을 이름을 변경한 적이 있던가,
  • 폴더를 이동했었으면 이전의 내역까지 완전히 사라지지 않는다
  • 그래서 수동으로 하나씩 찾아서 해줘야 한다
  • sourcetree에서 히스토리 검색을 통해서 꼼꼼히 체크하여 삭제를 진행한다

참고