카테고리 없음

내일배움캠프 8일차

barryjung 2023. 3. 22. 14:05

[오늘 한일]

  • 깃 강의 수강
  • 웹개발 강의 복습

 

[오늘 배운점]

<소스트리에 원격저장소 연결과 SSH 설정>

그 동안 나는 깃을 쓸 때 커밋은 직접 명령어로 하고,

풀/푸시는 깃허브 데스트톱을 이용했었다.

 

소스트리로는 다된 결과물 확인만 해봤는데,

오늘 새 강의에서 실습을 하려고 보니 소스트리의 작업 디렉토리들에 원격저장소 설정이 안 되있었다.

 

깃허브에 있는 레파지토리를 클론 할때는 원격저장소 연결이 자동으로 설정되지만,

로컬로 생성한 작업 디렉토리들은 원격저장소 연결을 해줘야 한다.

 

bash를 사용해 작업 디렉토리를 세팅할 때 명령어로 깃허브와 연결시키는 과정과 같다고 보면 된다.

git remote add origin git@github.com:barryjung/mytest.git
git branch -M main
git push -u origin main

bash로 작업 디렉토리를 깃허브와 연결시키는 명령어이다.

 

소스트리에서 원격저장소를 추가하는 모습이다.

같은 과정을 소스트리에선 UI로 쉽게 할 수 있다.

상단 메뉴 중에 [설정]버튼 > 저장소 설정 창의 원격 탭에서 [추가]버튼을 누른다.

거기에 연결 URL만 넣으면 끝이다.

(원격 이름은 디폴트를 체크하면 origin이 작성된다.)

 

여기서 HTML을 경로로 쓴다면 연결 끝이지만,

SSH로 쓰려면 SSH키값 설정이 소스트리에 되어 있어야 한다.

(bash에는 설정이 되있었는데 별도로 해줘야 했다.)

키값 설정은 소스트리 상단 탭중에 도구에서 옵션 > 옵션 창의 일반 탭중에 SSH 설정부분에 있다.

(키값을 넣을때는 콜론 앞까지 통째로 넣어야 한다.)

(※3/24첨삭. openssh를 선택하면 내컴퓨터 내 ssh키값이 저장된 폴더경로를 알아서 작성한다.)

 

bash에 글로벌 유저를 입력해주듯이 소스트리에서도 유저를 입력해주는게 좋다.

이렇게 추가할때 선호하는 연결 프로토콜을 HTML, SSH중에 정하게 되어있는데,

이때 정한 연결 프로토콜이 원격 저장소를 설정할때마다 디폴트로 선택되게 된다.

즉, 한번 SSH를 썼으면 계속 쓰는 게 편하다.

유저는 상단 탭중 도구에서 옵션 > 인증 창에서 추가 할수 있다.

 

이렇게 해서 소스트리로 완전한 깃, 깃허브 환경을 만들수 있었다.

 

<배열안 딕셔너리안 배열>

    let a = [
        { 'name': '현균', 'grade': ['2', '3', '4', '5'] }
    ]
    console.log(a[0]['grade'][0])		// 2

강의를 들으면서 궁금해진 부분이여서 직접 테스트 해봤다.

역시나 배열안에 딕셔너리, 그안에 다시 배열이 잘 들어가진다.

 

a = [
    {"name":"현균", "grade":[1, 2, 3]}
]
print(a[0]['grade'][0])		#  1

파이썬에서도 역시 리스트 안에 딕셔너리, 그 안에 리스트가 들어가진다.

(파이썬은 리스트가 기본형이다.)

 

<Get요청에 request body는 비워라>

Get요청할때는 request body를 비워서 보낸다고 여러차례 배웠다.

request body는 필요없으니 빈칸으로 보내야 한다고 하셨다.

 

이 부분도 궁금해서 칸을 한번 채워보았다.

입력형식 오류가 나온다.

 

function listing() {
    fetch('/show', { method: "GET", body: "{name_give:정현균}" }).then((res) => res.json()).then((data) => {
        let rows = data['result']
        console.log(rows)

예컨대 이런식으로 우직하게 body를 채워본다면,

이런 에러를 마주하게 된다. 작성한 열이 문제라고 정확히 집어준다.

GET method는 body를 가질수 없다고 에러가 나온다!

 

 

그럼 같은 요청을 ajax로 작성할 때는 어떨까?

function listing() {
    $.ajax({
        type: 'GET',
        url: '/shows',
        data: { name_give: "정현균" },
        success: function (response) {
            let rows = response['result']
            console.log(rows)
            }
    })
}

ajax로 작성할 경우 data부분에 request body를 넣는다.

이렇게 동작해본다면,

 

이렇게 GET요청이 들어간다.

 

ajax문에서는 data부분이 request body가 아닌 것일까?

그렇진 않다. POST요청의 경우에는 data부분에 request body를 실어보낸다.

 

POST요청의 동작. 보내어 오는 data가 4개나 있지만 위처럼 출력되진 않는다.

 

인터넷으로 알아보니 ajax GET 요청에서 data부분에 값이 실린 경우,

그 값이 자동으로 매개 변수로 작성되어 보내진다고 한다.

그래서 ajax는 위처럼 작성해서도 원하는 동작을 시킬 수 있었다.

두 작성법의 미세한 동작 차이가 있지만 어쨌든 request body에는 값을 못 실는다.

 

결론, GET요청 시 request body는 빈칸으로 보내는 게 맞다.

 

<Get요청 매개변수를 넘기는 다른 방법>

Get요청할 때 매개변수를 넘기는 방법은 사전 프로젝트때 한번 다뤄봤다.

그때 사용한 방법이 /URL/<id>였다.

이러면 id부분에 넘어온 값을 id변수로 활용할 수 있다.

 

윗 부분 내용을 확인하다보니 다른 방법을 알게되었다.

fetch('/show?name=정현균').then((res) => res.json()).then((data) => {
    let row = data['result']
    console.log(row)
}
@app.route("/show", methods=["GET"])
def members_get():
    name = request.args.get('name')
    member = db.members.find_one({'name':name}, {'_id': False})
    return jsonify({'result': member})

fetch문에서 '/URL?변수명=구분값' 을 이용하면,

해당 URL명을 가진 api로 요청하면서 ? 뒤의 매개 변수를 같이 넘겨준다.

api에서는 request.args.get('변수명')으로 해당 값을 취할 수 있다.

 

내가 쓰던 방법과 가장 큰 차이점은 url의 모습이 바뀌지 않는다는 것이다.

내 방법은 url에 하위url이 달리는 반면,

이 방법은 그대로 둔채 따로 매개 변수를 넘겨준다.

 

결론, 두 방법의 동작이 다르니, 하려는 기능에 따라 적절한 방법이 다를 것이라고 생각한다.