• Smooth Page Transitions With Javascript Tutorial를 보고 따라만들었다

결과

• 보러가기

후기

• 영상 제목만 보고 단순히 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 경로가 망가지지 않도록한다

참고

• Smooth Page Transitions With Javascript Tutorial
• Use Parcel to Bundle a Hyperapp App & Deploy to GitHub Pages
• https://github.com/chinsun9/smooth-page-transitions

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

• 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

• https://gist.github.com/0penBrain/7be59a48aba778c955d992aa69e524c5

python, js

• https://gist.github.com/yershalom/a7c08f9441d1aadb13777bce4c7cdc3b

1
2
3
4
5
6
7

```json
"scripts": {
    // ...
  "format": "prettier --write src/**/*.ts{,x}",
  "lint": "tsc --noEmit && eslint src/**/*.ts{,x}"
}
```

1
2
3
4
5
6
7

```json
"scripts": {
    // ...
  "format": "prettier --write src/**/*.ts{,x}",
  "lint": "tsc --noEmit && eslint src/**/*.ts{,x}"
}
```

• github repo의 md파일을 보면 json안의 주석이 빨간색으로 표시될 때..
• json 대신 jsonc 를 사용하면된다
• json with comments 라는 뜻이다

1

git clone --depth 1 https://github.com/chinsun9/refactor-2019T1.git

• git clone을 통해 클론하게되면 .git 폴더도 같이 딸려온다
• .git 폴더없이 최신 상태만 가져오고싶을 때 어떻게 할까 찾아보다가
• --depth 옵션을 알게되었다

• --depth 1 하게되면 가장 마지막 상태만 클론하게된다

참고

• copy-a-git-repo-without-history

1
2
3
4
5
6
7

git clone --bare -b docker --single-branch  https://github.com/chinsun9/2020-web-test.git

cd 2020-web-test.git
git push --mirror https://github.com/chinsun9/2020-web-test-mirror.git

cd ..
rmdir /s 2020-web-test.git

• 우선 터미널에서 작업하기 전에 새로운 깃허브 저장소를 하나 생성한다.(복제될 저장소)
• 2020-web-test의 docker 브랜치를 bare clone 한다

• bare clone하게되면 소스코드가 보이지않고 이런 요상한 파일들이 보인다
• 평범히 클론했다면 .git 디렉터리에 있는 내용들이다

• cd 2020-web-test.git로 들어가주고
• git push --mirror https://github.com/chinsun9/2020-web-test-mirror.git
• 새로운 저장소로 mirror옵션을 주고 푸쉬하게되면 커밋내역까지 똑같이 저장소가 복제된다

• 오른쪽이 복제한 저장소이고, 복제한 저장소에서 하나의 커밋을 하였다

• rmdir /s 2020-web-test.git 이제 이 쓸모없는 디렉터리는 삭제하고
• 복제한 저장소를 git clone https://github.com/chinsun9/2020-web-test-mirror.git 클론해서 사용하면된다

용도?

• 퍼블릭 저장소에 올렸던 프로젝트를 계속 이어하는데
• dbconfig파일이나, 보여주고싶지않은 정보가 있을 수 있다
• 처음에는 비공개 브랜치? 이런 키워드로 찾아봤었는데, 그런 기능은 없었다
• 프로젝트를 통째로 복사해서 새롭게 git init 하는 방법도 있는데,
• 이 방법을 통해서 커밋내역을 유지하면서 복제할 수 있었다

참고

• Duplicating a repository

• 깃허브 api로 특정 저장소 커밋내역 json으로 받아보기
• 나는 내 special repository인 chinsun9 저장소의 커밋내역을 받아와보았다

github api

https://api.github.com/repos/chinsun9/chinsun9/commits
https://api.github.com/repos/{유저명}/{저장소명}/commits

• js에서는 fetch api로 데이터를 가져와 원하는 로직을 수행하면 될 것 같다
• github api가 있다는 것을 알아보았고, 맛보기를 해보았다
• 비공개 저장소 접근이나 다른 유용한 api가 있는지 알아보고 활용하면 좋을 것 같다

• https://github.com/chinsun9 자기 깃허브 메인화면에 가장 처음 표시되는 readme파일의 저장소다!
• 내가 어떤 개발자인지 보여주는 용도이다
• GitHub Readme Stats를 통해 자기 깃허브 활동을 시각적으로 보여주면 더 좋다!

special repository

• github에서 저장소명을 자신의 닉네임이랑 똑같이 하면 special repository 라는 것이 만들어진다
• 이 special repository는 내 깃허브 메인 화면에서 가장 처음으로 보여지는데,
• 여기서 내 프로필을 적어서 나를 자랑?할 수 있다

GitHub Readme Stats

• https://github-readme-stats.vercel.app/api?username={내-깃허브닉네임}
• https://github-readme-stats.vercel.app/api/top-langs/?username={내-깃허브닉네임}
• 아무 설치없이 간단하게 내 깃허브 활동 통계를 볼 수 있다..!

chinsung/chinsung

• https://github.com/chinsun9/chinsun9

Github Gist

• 전문 용어로 Gist 라고 하며, 코드 블럭을 순수 md로도 표현할 수 있는데 Gist로도 할 수 있다
• 여기저기 여러 화면에서 중복되어서 씌여지는 코드가 있다
• 그런데 코드에 오타가 나서 수정을 한다고하자
• md로 작성했으면 복사 붙여넣기로 인해 일일이 다 수정해야한다
• 그런데 gist로 작성했으면 그냥 gist에 들어가서 수정하면 다 반영이 된다!

Code Snippet

• 내용이 되는 코드들을 코드 스니펫이라고 부른다!