코린이[코딩 어린이]

git 계정을 여러개 연결하는 방법입니다.

단계

1. ssh-key 생성 -> 등록 -> ssh-agent 등록
2. github ssh에 각 ssh 연결
3. ssh config 에 등록한 agent 설정
4. ssh 연결 테스트
5. git 계정 변경

1. terminal에서 .ssh 폴더로 이동합니다.

$ cd ~/.ssh

$ ssh-keygen -t rsa -C "junhyeok403@naver.com"

Email 확인하기: github.com -> settings -> Emails

key이름과 비밀번호를 설정합니다.

key는 보통 id_이름_rsa로 지정합니다.

비밀번호는 설정하지 않아도 됩니다.

2. vi 에디터를 들어가서 키를 복사해 오거나 명령어를 통해 키를 복사합니다.

// vi Editor 열기
$ vi id_shiro21_rsa.pub

// 명령어로 복사하기
$ pbcopy < ~/.ssh/id_shiro21_rsa.pub

3. 복사한 키를 github.com에 SSH and GPG keys에 연결시켜 줍니다.

settings -> SSH and GPG keys -> New SSH key -> 복사한 키를 입력해주고 저장합니다.

확인을 하고나면 키가 생성된걸 확인 할 수 있습니다.

4. .ssh 파일에 config를 생성하고 안에 내용을 입력해줍니다.

shiro21 부분에 자신이 정한 이름을 추가해 주시면 됩니다.

Host github.com-shiro21
  HostName github.com
  IdentityFile ~/.ssh/id_shiro21_rsa
  User git

vi 에디터 수정 방법은 아래와 같습니다.

• i = insert ( 내용 작성 )
• :q = 종료
• :wq! 저장 후 종료

5. ssh config에 등록한 agent 설정을 확인합니다.

// agent 확인
$ eval "$(ssh-agent -s)"

// agent에 등록된 identities 확인
$ ssh-add -l

// ssh-add로 추가를 해줍니다.
$ ssh-add ~/.ssh/id_shiro21_rsa

// 다시한번 확인
$ ssh-add -l

• The agent has no identities는 현재 추가가 안된 상태입니다.
• 이후 추가한 뒤, 다시한번 확인하면 3072 SHA256 ~~ 으로 나옵니다.

6. ssh 연결 테스트를 진행합니다.

$ ssh -T git@github.com-shiro21

연결이 되면 아래처럼 뜨게됩니다.

7. git 저장소를 생성합니다. ( Create a new repository )

git init ~ git branch -M main 까지는 같습니다.

git remote add를 해주는데 밑줄 그은 부분만 변경된 부분입니다.

• home부분은 기본으로 origin이 표시되어 있습니다. 바꾸지 않아도 상관은 없지만 여러 계정을 사용할 때는 바꿔줍니다.
• git@github.com-shiro21부분이 이전에 입력했던 config에 Host부분과 똑같이 해준다고 생각하면 됩니다.

7-1. ( 추가 ) 삭제하는 방법입니다.

// 삭제입니다.
$ git remote remove home

8. 푸시를 해줍니다.

$ git push home main

9. Clone 하기

처음 연결과 마찬가지로 -shiro21식으로 추가만 해주면 됩니다.

$ git clone git@github.com-shiro21:shiro21/pokemon.git

티스토리 HTTP ERROR 400 문제해결에 대한 내용입니다.

어느날부터 티스토리를 접속하는데 아래처럼 오류가 나오기 시작했습니다.

처음에는 뭔지 몰라서 새로고침만 누르다 끝까지 접속이 안돼서 다른 아이디로 로그인 되어있는 크롬창을 켜서 해결했었습니다.

며칠지나면 괜찮아지겠지 싶어서 며칠뒤에 접속을 했는데도 그대로 HTTP ERROR 400에러가 지속되고 있었습니다..

그래서 해결법을 찾기위해 구글링을 했는데, 결론은 캐시삭제를 했더니 문제없이 접속이 됐다는 내용입니다.

1. 크롬창 오른쪽 위에 ...을 클릭합니다.

2. 설정을 들어갑니다.

3. 개인 정보 보호 및 보안탭으로 이동합니다.

4. 인터넷 사용 기록 삭제를 클릭합니다.

5. 티스토리를 재접속 합니다.

6. 문제없이 접속이 됩니다 !

모바일 기기에서 localhost 접속하는 방법입니다.

1. 모바일 기기와 현재 개발중인 컴퓨터(노트북)의 Wi-Fi를 같은 Wi-Fi에 연결해줍니다.

:: 이름이 같은 Wi-Fi를 사용하면 되겠죠 ?!

2. 터미널에 아래와 같은 명령어를 입력해줍니다.

ifconfig | grep "inet " | grep -v 127.0.0.1

아래처럼 ip주소가 나옵니다. 

3. 주소중에 inet 주소를 모바일 기기에 적어넣고 뒤에 포트를 붙여줍니다 ( ex: :3000 ) 

그러면 모바일 기기로 접속이 가능합니다.

AWS 계정 2단계 인증 설정하는 방법입니다.

개발자라면 대부분이 AWS( Amazon Web Services )를 사용하고 있으실거라 생각됩니다.

AWS를 사용하고 있다면 중요한 서비스를 이용중이거나, 지불해야하는 요금도 있는 경우도 많기 때문에 보안적인 측면에서 굉장히 중요하다고 생각됩니다.

그렇기 때문에 AWS 계정에 2단계 보안 인증이 있다는 사실을 알고 저도 바로 등록을 했습니다.

:: 해둬서 나쁜점은 없으니 꼭 모두 해두시기 바랍니다.

1. AWS 로그인을 해줍니다.

AWS 바로가기

2. 우측 상단에 아이디를 클릭하면 '보안 자격 증명'이 나오게 됩니다. 그러면 '보안 자격 증명'을 클릭해줍니다.

3. 보안 자격 증명에서 MFA 디바이스 할당을 클릭해줍니다.

4. 디바이스 이름을 정해주고, 인증 관리자 앱을 선택한다음 다음을 눌러줍니다.

5. 디바이스 설정으로 넘어오면 아래와같은 내용을 확인 할 수 있습니다.

QR 코드 표시를하면 QR코드가 나오면 코드 1, 2를 입력하는 창이 나오게됩니다.

5-1. 위 창을 켜둔 상태로 디바이스에 "구글OTP"를 검색해서 애플리케이션을 설치해줍니다.

구글 OTP를 들어가면 우측 아래 +모양이 있습니다. +를 클릭하고, 위에 QR 코드 표시를 클릭하고 스캔해줍니다.

그러면 코드가 나오는데 첫번째 코드를 "MFA 코드 1"에 입력하고 두번째 나오는 코드를 "MFA 코드 2"에 입력해준다음 MFA 추가를 클릭해줍니다.

6. 이제 재 로그인을 해서 MFA 코드가 나오면 성공한겁니다.

다들 안전한 AWS 이용하시길 바랍니다 ~ !

Terminal에서 Visual Studio Code 열기

VSCode를 열고 아래 키를 눌러줍니다.

Command + shift + p

입력창에 code를 입력하고 PATH에 'code' 명령 설치를 해줍니다.

설치가 완료되면 터미널을 열고 원하는 폴더로 이동한 후에 아래 명령어를 입력합니다.

$ code .

그러면 해당 위치에 VSCode가 열리게 됩니다.

Javascript 비동기 HTTP 통신의 종류

AJAX, Fetch, Axios는 왜 사용하는가 ?

프로젝트 진행 시에 클라이언트와 서버 간의 데이터를 주고받는 과정이 필요합니다.

이를 위해서 HTTP 통신을 사용하게 됩니다.

이때, HTTP통신을 위해 사용되는 것이 AJAX, Fetch, Axios입니다.

AJAX ( Asyncronous Javascript And XML )

AJAX는 빠르게 동작하는 동적 웹 페이지를 만들기 위한 개발 기법입니다.

웹 페이지 전체를 로딩하지 않고, 웹 페이지의 일부분만 갱신할 수 있게 해 줍니다.

jQuery에서 제공하는 $.ajax 메서드로 쉽게 사용 가능하며, 이것이 보통 알고 있는 ajax의 방식입니다.

XMLHttpRequest 객체란 ?

AJAX의 가장 핵심적인 구성 요소는 XMLHttpRequest 객체입니다.

AJAX에서 XMLHttpRequest 객체는 웹 브라우저와 서버가 데이터를 교환할 때 사용됩니다.

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    // 요청에 대한 콜백
    if (xhr.readyState === xhr.DONE) {
        // 요청 완료시
        if (xhr.status === 200 || xhr.status === 201) console.log(xhr.responseText);
        else console.log(xhr.responseText);
    }
}
// 메소드와 주소를 설정
xhr.open("GET", "http://localhost:8080");
// 요청 전송
xhr.send();

AJAX의 장점

• success, error, complete 등 각 상태를 반환할 때 적절한 실행 흐름 조절이 가능합니다.
• dataType을 설정하여 자동 변환이 가능합니다.
• jQuery를 활용하여 쉽게 구현이 가능합니다.

AJAX의 단점

• Promise 기반이 아니기 때문에 then()과 catch() 메서드를 사용할 수 없습니다.
• 콜백지옥에 빠질 수 있습니다.

Fetch API

Fetch API는 ES6부터 들어온 JS의 내장 라이브러리입니다. 내장 라이브러리이기 때문에 편리하며, JS의 Promise기반으로 만들어졌기 때문에, 데이터를 다룰 때 어렵지 않습니다.

fetch("주소", "설정객체").then(res => {}).catch(err => {})

// --------------------------------------------------- //

fetch("localhost:4000~", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        text: "TEST",
        value: "TEST"
    })
})
.then(res => console.log(res))
.catch(err => console.log(err));

// --------------------------------------------------- //

fetch("localhost:4000~")
.then(res => res.json())
.then(json => console.log(json))

Fetch API의 장점

• 따로 import를 해줄 필요가 없습니다.
• Promise 기반이기 때문에 사용이 쉽습니다.
• 내장 라이브러리이기 때문에, 사용하는 프레임워크가 안정적이지 않을 경우 사용하기 용이합니다.

Fetch API의 단점

• 지원하지 않는 브라우저가 있습니다.
• 네트워크 에러가 발생했을 경우 Response Timeout이 없기 때문에 계속해서 기다려야 합니다.
• Axios에 비해 기능이 부족합니다.
• fetch()는 then() 메서드에서 처리된 promise를 반환하는데, 이때 아직 필요한 JSON데이터의 포맷이 아니기 때문에 응답 객체에 .json() 메서드를 호출해야 합니다. 그러면 JSON형식의 데이터로 이행( resolve )된 또 다른 promise를 반환합니다. 따라서 일반적인 fetch 요청은 두 개의 then() 메서드 호출을 갖게 됩니다.

Axios

Axios는 NodeJS와 브라우저를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.

비동기 HTTP통신이 가능하며, return을 Promise 객체로 하기 때문에 Response 데이터를 다루기 수월합니다.

import axios from "axios";

axios({
    method: "POST",
    url: "localhost:4000~",
    data: {
        text: "TEST",
        value: "TEST"
    }
})
.then(res => console.log(res))
.catch(err => console.log(err));

Axios의 장점

• Fetch API와 다르게 Response Timeout 처리 방법을 가지고 있습니다.
• Promise 기반으로 다루기가 쉽습니다.
• 크로스 브라우징이 우수합니다.
• Fetch API의 비해 기능이 좀 더 많습니다.
• XSRF 해킹 기법에 비교적 안전합니다.
• 자동으로 JSON데이터 형식으로 변환시켜 줍니다.

Axios의 단점

• 라이브러리의 설치가 필수입니다.

정리

결국 Fetch API vs Axios구도가 된 것 같습니다. ( 물론 제거 Ajax를 사용해본 경험이 없는 것도 있지만 Promise기반을 더 선호하기 때문일수도 있습니다. )

그래서 간단한 통신을 할 때는 fetch를 사용하는데 편리하고, 까다로운 기능이나 복잡한 통신을 할 경우에는 axios를 사용하는 것을 이용하면 된다고 생각합니다.

fetch는 업데이트가 잦은 React-Native에서 주로 사용하고( 안정적이기 때문입니다. ), axios는 react에서 주로 사용 한다고 합니다.

REST API ( Representational State Transfer API )란?

REST API란 REST를 기반으로 만들어진 API를 뜻합니다. REST API는 HTTP 설계의 우수성에 비해 제대로 사용되지 못하는 안타까움에 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했다고 합니다.

REST API에 REST 란?

Representational State Transfer의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든것을 의미합니다.

:: HTTP URI ( Uniform Resource Identifier )를 통해 자원 ( Resource )을 명시해주고, HTTP Method ( GET, POST, PUT, DELETE )를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미합니다.

REST 특징

1. Uniform ( 유니폼 인터페이스 )
   Uniform Interface는 URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처 스타일을 말합니다.
2. State Less ( 무상태성 )
   REST는 무상태성인 성격을 갖습니다. 즉, 상태정보를 따로 저장하고 관리하지 않습니다. 세션정보, 쿠키정보를 별도로 저장하고 관리하지 않기 때문에 API 서버는 들어오는 요청만을 단순히 처리합니다. 때문에 서비스의 자유도가 높아지고 서버에서 불필요한 정보를 관리하지 않음으로 구현이 단순해집니다.
3. Cacheable ( 캐시 가능 )
   REST의 큰 특징 중 하나는 HTTP라는 기존 웹표준을 그대로 사용하기 때문에, 웹에서 사용하는 기존 인프라를 그대로 활용할 수 있습니다. 따라서 HTTP가 가진 캐싱 기능이 적용 가능합니다. HTTP 프로토콜 표준에서 사용하는 Last-Modified, E-Tag를 이용하면 캐싱 구현이 가능합니다.
4. Self-descriptiveness ( 자체 표현 구조 )
   REST의 또 다른 큰 특징 중 하나는 REST API 메시지만 보고 이를 쉽게 이해 할 수 있는 자체 표현 구조로 되어 있다는 것입니다.
5. Client-Server 구조
   REST 서버는 API제공, 클라이언트는 사용자 인증이나 컨텍스트 ( 세션, 로그인 정보 )등을 직접 관리하는 구조로 각각의 역할이 확실하게 구분되기 때문에 클라이언트와 서버에서 개발해야 할 내용이 명확해지고, 서로간에 의존성이 줄어들게 됩니다.
6. 계측형 구조
   REST 서버는 다중 계층으로 구성될 수 있으며 보안, 로드 밸런싱, 암호화 계층을 추가해 구조상의 유연성을 둘 수 있고, Proxy, Gateway같은 네트워크 기반의 중간매체를 사용할 수 있게 합니다.

CRUD Operation

CRUD는 기본 데이터 처리 기능인 생성 ( Create ), 읽기 ( Read ), 수정 ( Update ), 삭제 ( Delete )를 뜻하는 말로 REST에서 CRUD Operation동작은 아래와 같습니다.

• Create : 생성 ( POST )
• Read : 읽기 ( GET )
• Update : 수정 ( PUT )
• Delete : 삭제 ( Delete )

HTTP 응답 상태 코드

코드조각모음이란 ?

VSCode에서 특정 문자를 입력하면 코드가 자동으로 작성되는 것을 말합니다.

사용자 코드 조각 구성을 클릭합니다.

새 전역 코드 조각 파일을 클릭해줍니다.

사용자 코드 조각 형태

조각 파일을 클릭하면 아래와같은 파일이 생성됩니다.

이제 실제로 적용시키려면 Print to console부분을 변경시켜주면 됩니다.

"Print to console": {
    "scope": "javascript,typescript",
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
}

• Print to console : 코드 조각의 이름
• scope : 사용할 수 있는 범위를 지정해줍니다.
  :: javascript => .js파일, vue => .vue에서 사용 가능해집니다. scope를 삭제하면 모든곳에서 사용할 수 있습니다.
• prefix : VS Code에서 내용을 입력하면 body부분의 내용이 작성됩니다.
• body : 실제 VS Code에서 나올 내용입니다.
• description : 설명부분입니다.
• Tabstops : $1, $2를 Tabstops라고 합니다. tab키를 누르면 순서대로 내용을 입력할 수 있도록 포커싱을 해줍니다.

EX ) vue 예시

"body": [
    "<script setup>",
    "$1",
    "</script>",
    "",
    "<template>",
    "$2",
    "</template>",
    "",
    "<style scoped lang='scss'>",
    "",
    "</style>"
]

"" 사이에 내용을 입력하고 ,로 줄바꿈을 해줍니다. ""만 입력할 경우 공백을 줘서 줄바꿈으로 사용할 수 있습니다.

여러 변수들이 있지만 잘 사용하지 않으므로 생략하겠습니다.

xcode 설치하기

homebrew 바로가기

1. xcode를 먼저 설치해줍니다.

app store에서 xcode를 검색하면 편하게 설치가 가능합니다. ( 용량이 크기 때문에 시간이 오래 걸릴 수 있습니다. )

2. homebrew를 설치해줍니다.

Terminal

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

터미널에서 위와 같은 내용을 입력하면 패스워드를 입력하는 란이 나오면 컴퓨터 비밀번호를 입력하면 자동으로 homebrew가 설치됩니다.

설치를 하고 난 이후에 아래와 같은 오류가 발생할 수 있습니다.

Warning: /opt/homebrew/bin is not in your PATH. Instructions on how to configure your shell for Homebrew can be found in the 'Next steps' section below.

path를 지정해주지 않았기 때문에 위와같은 오류가 나오게 됩니다.

terminal에서 vi로 .zshrc로 들어가 path를 입력해주던가, vscode로 .zshrc를 켜서 path를 입력해주던가, 터미널에서 직접 입력해줘도 됩니다.

1. vi or vscode를 이용해 path를 입력하는 경우

export PATH=/opt/homebrew/bin:$PATH

2. Terminal에서 직접 입력하는 경우 ( 터미널에서 직접 입력하면 되기 때문에 추천합니다. )

echo 'export PATH=/opt/homebrew/bin:$PATH' >> ~/.zshrc

이렇게 해주고 나서 termainal에 아래와 같이 입력하면 homebrew 버전이 나옵니다.

brew -v

Homebrew 3.6.1

혹시 입력했는데 나오지 않을때는 터미널을 다시 실행해보면 됩니다.

윈도우 글로벌 패스 설정

윈도우 어디서든 사용할 수 있게끔 해주는 윈도우 전역 경로 설정입니다.