1
2
3
4
5
6
7
8
9
10

fetch('http://localhost:3000/users')
  .then(function (response) {
    return response.json();
  })
  .then(function (myJson) {
    console.log(JSON.stringify(myJson));
  })
  .catch(function (error) {
    console.log(error);
  });

• https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

fetch api 써먹기

1
2
3
4
5

let users = [];

app.get('/users', (req, res) => {
  return res.json(users);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

function getUserList() {
  //   listbox 초기화
  let newListbox = document.createElement('li');
  newListbox.innerHTML = `<li class="list-group-item head">User List</li>`;

  const url = '/users';
  const fetchResponsePromise = fetch(url);
  fetchResponsePromise
    .then((response) => {
      if (response.status === 200) {
        return response.json();
      } else {
        throw new Error('Something went wrong on api server!');
      }
    })
    .then((response) => {
      console.log(`fetch`, response);
      let i = 0;
      for (const key in response) {
        i++;
        if (response.hasOwnProperty(key)) {
          const element = response[key];

          const new_li_element = document.createElement('li');
          new_li_element.className = 'list-group-item';
          new_li_element.appendChild(document.createTextNode(element));
          newListbox.appendChild(new_li_element);
        }
      }
      listbox.innerHTML = newListbox.innerHTML;
    })
    .catch((error) => {
      console.error(error);
    });
}

• users라는 라우터에서는 유저배열을 반환한다
• 유저배열을 json으로 받는데, 그걸 받아서 화면에서 유저목록을 갱신한다
• 나는 ajax하면 xhr객체를 만들어서 가져오곤 했는데 이번에는 fetch를 사용해 보았다
• fetch가 간단하고 간결한 것 같다

• 이 코드가 들어 있는 프로젝트 : Chat App (NodeJs & Socket.IO )

• 아마존 리눅스는 안튕기는데 ubuntu는 튕긴다…
• vscode remote - ssh 를 통해 리모트했다
• 처음에 연결이 잘되지만 한 1분 정도사용하면 튕긴다

• 윈도우 10에서 aws ec2를 리모트할 때 .pem파일의 권한을 아무나 볼 수 없게 설정해줘야 한다
• 관리자만 볼 수 있도록 설정해야 리모트를 할 수 있다
• 속성 > 보안탭 > 고급 > 상속사용안함 > 명시적 사용 권한 > SYSTEM, Administrators 남기고 다 삭제 > 확인 > 확인
• SYSTEM, Administrators만 남은걸 확인한다

• ec2 인스턴스를 하나 만들고, vscode로 원격접속해보겠다

따라하기

준비물

• ec2 keypair
• vscode

ec2 인스턴스 생성하기

• 예전에는 인스턴스 하나 생성하는 것도 겁이 났었는데, 지금은 옵션 안보고 그냥 기본값으로 생성..

ec2 인스턴스 리모트하기

• ssh 클라이언트로 푸티 putty가 대표적이다
• 근데 나는 푸티는 잘 안쓰고… vscode의 Remote - SSH 확장도구를 사용한다
• vscode를 관리자권한으로 실행한다. (열려있는 vscode가 있다면 모두 종료하고 관리자 권한으로 새로 실행한다)

• Ctrl + Shift + P 를 눌러 커맨드창을 열고 remote를 입력하고,
• Remete-SSH: Connect to Host... 를 누른다

1
2
3
4
5

# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
Host ec2-asdf
  HostName ec2-0-00-000-000.ap-northeast-2.compute.amazonaws.com
  User ec2-user
  IdentityFile "C:\key\KeyPair.pem"

• config 파일을 채워줘야하는데,

• 브라우저로 ec2 인스턴스 화면으로 돌아가서 우클릭 연결을 누른다

• 위 화면에서 복사를 해서 붙여넣어주면된다
• HostName에 ec2-0-00-000-000.ap-northeast-2.compute.amazonaws.com
• User에 @앞에 있는 유저명을 적어주면된다. 나는 ec2-user가 기본값이 였다
• Host에는 그냥 자기가 원하는 식별문자를 적어주면된다. 나는 아무렇게나 ec2-asdf로 했다
• IdentityFile에는 키페어 .pem 파일의 경로를 적어주면된다. 절대경로를 사용했다
• Ctrl + S 로 저장한다

• 참고 : HostNameec2-0-00-000-000.ap-northeast-2.compute.amazonaws.com 이 값은 인스턴스를 중지했다가 다시켜면 바뀐다. 다음번에 접속할 때 탄력적 IP를 사용하는게 아니라면 계속 수정하면서 접속해야한다

• Ctrl + Shift + P 를 눌러 커맨드창을 열고 Remote-SSH: Connect to Host를 실행하고
• 방금 설정한 호스트가 보일 것이다. 클릭한다
• 그러면 새창이 열린다

• 참고 : keypair 권한 관련 오류가 나면 윈도우에서 aws ec2 keypair 설정를 확인한다

1
2
3
4
5
6

[14:56:31.053] > @         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
> @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
> Permissions for 'C:\\key\\KeyPair.pem' are too open.
> It is required that your private key files are NOT accessible by others.
> This private key will be ignored.
> Load key "C:\\key\\a.pem": bad permissions

• 운영체제를 고르라고하는데 당연히 리눅스를 선택한다

• 이렇게 vscode로 리모트에 성공했다

• 폴더를 열어보자. 나는 홈디렉터리를 열어보겠다
• 그러면 창이 리로드 되면서 좌측 탐색기가 업데이트된다

1
2
3

mkdir a b c

ls

• mkdir 로 a,b,c 3개의 디렉터리를 생성한다

• 그러면 좌측 탐색기도 업데이트되는게 보일 것이다. 끝!

1

sudo service docker start

sudo service docker start

• ec2 리눅스에서 도커 실행할때 주로 쓴다
• 윈도우에서는 그냥 docker desktop을 실행시킨다

denied: requested access to the resource is denied

• docker hub에 내가 연습했던 이미지를 업로드하려고 했는데 실패했다

이미지명 변경

1
2
3

docker image tag {이미지} {내 유저명}/{이미지}

docker image tag my-react:0.0.1 chinsung/my-react:0.0.1

• 이런식으로 {내 유저명}/을 붙여주면 된다

• 음 성공!
• 참고한 곳 ; [Docker CE] 도커 이미지 업로드 권한 에러 (denied: requested access to the resource is denied)

• 클릭 클릭해서 바꿨었는데, 이제는 단축키로.!
• 탐색기를 돌아다니다보면 보기옵션이 이상해서 보기힘들다

Ctrl + Shift + [12345678]

• 나는 주로 ctrl shift 6 인 자세히 옵션을 주로 이용한다
• 1~8까지 옵션이 있다

1
2
3
4
5

rmdir /s {디렉터리}

rmdir /s folder_name

rmdir /s folder1_name folder2_name

rmdir /s {디렉터리}

• /s 옵션으로 빈 디렉터리가 아니더라도 삭제할 수 있다
• 디렉터리를 나열해서 여러개를 한번에 지울 수 있다

auto yes

1

rmdir /s /q folder_name