• 깃허브 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가 있는지 알아보고 활용하면 좋을 것 같다

• 각 프로젝트마다 다른 vscode세팅값을 주고 싶을 때 유용하다

따라하기

• Ctrl + Shift + P 단축키를 누르고 setting을 입력한다
• Preferences: Open Settings (UI)를 선택한다

• 세팅 화면이 나오면 상단 User, Workspace 탭이 있는데 Workspace탭을 클릭한다

• 나는 예시로 이 프로젝트에서는 node_modules라는 폴더를 vscode 탐색기에서 보여주고 싶지 않다

• exclude를 검색하면 Files: Exclude가 나오는데, Add Pattern 버튼을 눌러 node_modules를 추가한다

• 우측 탐색기에서 node_modules 파일이 더 이상 보이지 않으며, .vscode라는 폴더와 그 아래 settings.json이라는 파일이 생성된 것을 확인할 수 있다
• 이렇게 프로젝트별로 다른 vscode 세팅값을 가질 수 있다

Ctrl + G

• 오류 라인을 갈 때,
• Ctrl + G 로 마우스 손안대고 이동할 수 있다

Ctrl + rightArrow

Ctrl + leftArrow

• Ctrl + left|right arrow key 로 단어단위로 커서를 이동시킬 수 있다

1
2
3

dirpath=`dirname $0`
echo $dirpath
cd $dirpath

• 셸 스크립트 파일 경로로부터 명령을 실행할 수 있다

• 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

1

nohup npm start &

• ec2에서 24시간 돌아가는 웹 앱을 돌릴일이 생겼다
• 그런데 처음에 그냥 마지막에 &만 붙여주면 되겠지 하고
• npm start & 명령을 치고 리모트를 종료했더니, 리모트를 종료하는 순간 앱 실행도 멈췄다
• 왜 그런가 했더니 단순히 &을 붙이고 실행한 프로세스는 터미널이 종료하면 같이 꺼진다고 한다

nohup

• 리눅스에서는 특별한 패키지 설치없이도 완전한? 백그라운드 실행을 가능하게해주는 명령이 있다

1
2

nohup npm start &
exit

• 이렇게 실행하고 exit을 눌러 나와주면 터미널이 자동으로 닫힌다
• 하지만 앱은 계속해서 실행되고 있다

• exit 은 nohup이랑 관계없고, 그냥 터미널을 종료하는 명령이다
• nohup 명령 후 아무키나 누르면 다시 터미널을 사용할 수 있는 상태가 된다

참고

• https://jahong.tistory.com/entry/EC2-deploy-server-%ED%94%84%EB%A1%9C%EC%84%B8%EC%8A%A4%EB%A5%BC-%EB%B0%B1%EA%B7%B8%EB%9D%BC%EC%9A%B4%EB%93%9C%EC%97%90%EC%84%9C-%EC%8B%A4%ED%96%89%EC%8B%9C%ED%82%A4%EA%B8%B0

• 웹에서 위치정보를 활용하고 싶어서 geolocation을 사용했는데,
• geolocation은 localhost 또는 https에서만 동작했다
• 위치정보를 활용하는 이 앱을 다른사람들에게 배포하기 위해서는 https를 사용했어야 했다

• 삽질을 많이했는데, 어떻게 하는지 정리한다. 할게 쫌 많고, 중간중간 대기시간이 길다
• 처음부터 끝까지 무료로 하는 법이다
• 따라하면 ec2에서 express로 돌아가는 웹앱에 https를 적용할 수 있다

내가 시도한 환경

• aws 프리티어
• ec2 (아마존 리눅스 2)
• 탄력적 IP

• 주의사항 ; 탄력적 IP는 1개까지 무료다. 탄력적 IP를 사용하면 연결된 ec2 인스턴스를 종료해서는 안된다. 인스턴스는 매월 750시간 무료다. 이 인스턴스를 제외하고 다른 인스턴스를 실행하면 비용이 생길 수 있다

해야할일 목록…

• express 웹 앱준비
• ec2 보안그룹 인바운드 설정 (http, https, 앱에서 사용하는 포트 열기)
• ec2에 탄력적 IP 할당
• ACM(AWS Certificate Manager)에서 SSL/TLS 인증서 발급요청
• freenom에서 도메인 얻기
• cloudflare 가입하고 사이트 추가
• freenom dns 설정 및 SSL/TLS 인증서 발급 완료
• freenom에서 cloudflare로 네임서버 변경
• aws 애플리케이션 로드 밸런서 생성
• cloudflare dns 설정

따라하기

express 웹 앱 준비

1
2
3

express https-web-app --view=ejs
cd https-web-app
npm i

• 간단하게 익스프레스 제너레이터로 웹앱을 생성한다

• 새로 생성하거나 기존에 있는 웹앱을 ec2 인스턴스에 올려준다

1

export PORT=8080&& node ./bin/www

• 앱을 실행한다
• 나는 익스프레스 제너레이터로 만들었기때문에 process.env.PORT로 8080값을 줘서 8080포트로 앱이 실행되도록 하였다

ec2에 탄력적 IP 할당

• ec2 > 탄력적 IP 주소 > 탄력적 IP 주소 할당
• 방금 앱을 실행한 인스턴스를 선택하고 할당해준다

• 주의 : 탄력적 IP를 할당한 이상 연결된 EC2가 종료되어 탄력적 IP에 아무것도 연결되어 있지 않으면 비용이 발생한다
• 또, 탄력적 IP는 1개까지 무료이다. EC2도 이제부터 매일 돌아가게됨(750시간 무료)으로 사실상 실행할 수 있는 인스턴스는 1개로 제한된다

ec2 보안그룹 인바운드 설정 (http, https, 앱에서 사용하는 포트 열기)

• 앱이 실행되고있는 ec2 인스턴스 보안그룹으로 들어가 인바운드 규칙을 편집한다
• http와 https를 어디서나 접근가능하게 한다
• 또 앱을 실행 포트도 어디선 접근가능하게 한다. 나의 경우 8080포트이다

freenom에서 도메인 얻기

• 내가 도메인을 얻을 때 이사이트가 엄청나게 느리기때문에 많은 인내가 필요하다..

• 수시로 404 not found가 뜬다…

• 새로고침을 몇번했는지 모르곘다

• freenom에서 나는 처음 도메인을 얻어봤다

• 그런데 여기서 삽질한 것이

• 당연히 회원가입을 먼저하고 도메인을 얻는 것인줄 알았으나,

• 도메인을 얻는 과정에서 체크아웃을 하면서 회원가입을 진행해야 정상 진행된다

• 원하는 도메인을 입력한다
• FREE 라벨이 붙은것중에서 원하는 것을 선택한다

• 원하는 도메인을 선택하면, 체크아웃 버튼이 생긴다
• 체크아웃버튼을 눌러준다

• 기간을 선택하고 Continue버튼을 누른다

• 여기서 드디어 회원가입을 진행한다..
• 나는 왼쪽 이메일 인증을 선택하였다
• 이메일 입력하고 버튼을 누르면, 해당 메일로 인증 url이 날라오는데 클릭해서 다음을 진행한다

• 이렇게 회원가입폼이 나오는데 빨간부분을 채워주고 동의체크하고 완료한다
• 이렇게 무료로 도메인 얻기에 성공했다
• 이제 aws로 돌아와서 무료로 인증서를 발급받아보자

ACM(AWS Certificate Manager)에서 SSL/TLS 인증서 발급요청

• ACM(AWS Certificate Manager)에서 인증서 요청 > 공인 인증서 요청 으로 들어간다

• 도메인 이름을 추가한다
• 나는 이 인증서에 다른 이름 추가 버튼을 통해 *.domainname 도 추가해줬다

• 검증 방법으로 DNS 검증을 선택한다

• 다음 검토 화면은 그냥 확인

• 마지막 단계 검증 화면에서 조금 기다리면 이런 화면이 나온다
• 도메인 이름 옆에 펼치기 버튼을 클릭해주면 이름 유형 값이라는 게 나오는데
• 이 값들을 freenom dns 설정에서 레코드로 추가해줄 것이다

freenom dns 설정 및 SSL/TLS 인증서 발급 완료

• freenom 사이트로 돌아와서 로그인하고
• 상단 메뉴에 Services > My domains 클릭
• Manage Domain 버튼을 클릭하고 Manage Freenom DNS를 클릭한다

• 위같은 화면이 나오면 아까 ACM에서 봤던 이름과 값들을 채워준다
• 주의 : 타입을 CNAME으로 한다
• 위와같이 매칭시켜주면된다
• 나는 *.domainname으로 추가 이름을 지정해줬는데 이 경우에는 이름과 값이 완전히 똑같기 때문에 한개의 레코드만 설정해주면된다
• *이 아니고, www. 같은 이름을 추가한 경우에는
• 레코드를 하나 더 추가하고 똑같이 매칭시켜서 입력해주면 된다
• 저장한다

• 이제 ACM으로 돌아와서 인증서 상태가 발급 완료로 변할때까지 기다리면서 유튜브 한편을 보고온다
• 나는 약 5-10분정도 기다린 것 같다
• 만약에 20분이 넘도록 검증 보류 상태라면 뭔가 잘못 따라한 것이다
• 이제 DNS 네임서버를 cloudflare로 바꿀 것이다

cloudflare 가입하고 사이트 추가

• 회원가입한다

• 회원가입을 완료하면, 사이트를 추가할 수 있는데, 내 도메인을 입력한다

• 다음화면에서 Free를 선택하고 넘어간다

• 넘어오면 이렇게 스캔하는 화면이 나온다

• 스캔이 완료되면 이런화면이 나오는데, 비어있다면,
• 아까 freenom에서 dns 설정한것처럼 똑같이 타입을 cname으로 하여 이름, 값을 넣어준다
• 완료했다면 다음화면을 넘어간다

• 그러면 네임 서버를 바꾸라는 말이 나온다
• 이제 freenom사이트로 돌아가서 네임서버를 변경해보자

freenom에서 cloudflare로 네임서버 변경

• 상단 메뉴에 Services > My domains 클릭

• Manage Domain 버튼을 클릭하고 Management Tools > Nameservers를 클릭한다

• 네임 서버를 변경해준다

• 성공하면, cloudflare화면으로 돌아와서 완료를 눌러준다

• 이런화면이 나오는데 나는 항상 https 옵션을 켜주고 완료해주었다

• 해당 사이트의 개요화면으로 넘어가는데 만약에 이런화면이 나오는데 1~5분정도 기다리면,

• 이런 화면으로 바뀐다
• 이제 aws로 돌아와 로드 밸런서를 생성해줄 것이다

aws 애플리케이션 로드 밸런서 생성

• ec2 > 로드 밸런서 > 로드 밸런서 생성 > 애플리케이션 로드 밸런서 생성

• 이름을 정해주고, 리스너에서 https를 추가해준다

• 가용영역 체크하고 다음으로 넘어간다

• 발급받은 도메인 인증서를 선택하고 다음으로 넘어간다

• ce2 인스턴스가 속해있는 보안그룹을 선택한다

• 적당히 이름을 짓고,
• 포트에서 내 앱이 사용하고있는 포트를 입력하고 다음으로 넘어간다

• 내 앱이 실행되고있는 인스턴스를 선택하고
• 등록된 항목에 추가 버튼을 누른다
• 그러면 3이라고 표시한 주황색 박스에 해당 인스턴스가 추가되는 걸 확인할 수 있다

• 검토화면에서 다음버튼

• 로드밸런서 메인화면으로 넘어와지면 생성된 로드밸런서의 DNS이름을 복사한다
• 이제 cloudflare dns 설정만 하면 끝이다!

cloudflare dns 설정

• cloudflare에 와서 위처럼 새로운 레코드를 추가하고 타입은 CNAME, 이름은 @, 대상은 방금 복사한 로드밸런서 DNS이름을 넣어주고 저장을 누르면 완료다

끝

• 이제 자신의 도메인으로 접속을 해보면…
• https..!

여기서 잠깐..!

• 처음에 npm start로 웹 앱을 실행시켰는데
• 이러면 ec2 리모트를 종료하는 순간 앱도 같이 종료된다
• nohup export PORT=8080&& node ./bin/www & 이런식으로 실행해야 ec2 리모트를 종료해도 웹 앱이 계속 살아 있다
• 참고 ; linux node app 백그라운드 실행

참고

• https://youtu.be/dMVy3BQB314

• 가끔 삭제한 페이지가 검색되거나 하는데,
• db.json을 삭제하면 알아서 갱신해준다

1
2
3
4

// 프로미스 병렬처리 ; all
await Promise.all([delay2(1000), delay2(2000)]).then((result) => {
  console.log(result.join(' + '));
});

• 처음에는 익숙해지기 어렵지만, 꿀인 비동기

promise

• js에는 promise라는게 있다
• 비동기 흐름에서 중요하다
• 프로미스는 선언과 동시에 실행이된다
• 프로미스 결과를 처리하려면 then을 통해 받아 볼 수 있다

async await

1
2
3
4
5
6
7
8

async function delay2(ms) {
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve(ms);
    }, ms);
  });
  return ms;
}

• await 키워드는 async 함수 내에서만 사용가능하다
• await 를 통해서 promise가 Fulfilled상태가 되야지만 다음줄의 코드가 실행된다

병렬처리

Promise.race

1
2
3

await Promise.race([delay2(1000), delay2(2000)]).then((result) => {
  console.log(result);
});

• 1초뒤에 1000만 반환하는 코드이다

Promise.all

1
2
3

await Promise.all([delay2(1000), delay2(2000)]).then((result) => {
  console.log(result.join(' + '));
});

• 2초뒤에 1000 + 2000을 반환하는 코드이다

요상한 문법

1
2
3

(async () => {
  console.log(await delay2(1000));
})();