2022.10.31 TIL / git, ajax

 

 

 

오늘의 TIL! 깃에 관한 특강을 들었고, ajax에 대해 배운것을 정리하려한다.

사실 다 알고 있는 것들이지만 다시 시작하니 감회가 다르다.

 

 

---

git

 

쉽게 말하자면 깃은 버전을 관리하기 위한 도구!

 

 

깃이 없다면 ?

• 변경사항을 추적하기 어렵다
• 협업하기 어렵다
• 이전 작업으로 되돌리기 어렵다

 

깃은?

• 변경사항들을 기억하며
• 필요하면 작업을 되돌리며
• 여러명의 코드를 쉽게 나누고 합치며 개발하는 것

---

깃이 관리하는 세 개의 공간

• 작업 디렉터리(워킹트리) - (.git이 있는 공간 / 버전 관리의 대상이 위치한 공간)
• 스테이지(인덱스) - 다음 버전이 될 후보가 있는 공간
• 저장소 - 버전이 만들어지고 저장이 되는 공간

스테이지/저장소 → 깃이 관리하는 가상의 공간

---

간단한 깃 명령어들.

 

git init # 현재 위치에서 깃을 시작하겠다.
ls -a # 하면 .git 파일이 생긴것을 볼 수 있음
touch a.txt # a.txt 파일을 만든다.
git add [파일 명]# 스테이지에 올린다.
git commit -m"커밋 메세지" # 커밋한다.
git log # 만들어진 버전을 볼 수 있다.
git config --global user.email "여러분이메일” # 깃 처음 설치 했을 때 메일을 설정해준다.
git config --global user.name "여러분이름" # 깃 처음 설치 했을 때 이름을 설정해준다.

---

깃 사용시 사용되는 용어들

• 클론(clone) - 원격 저장소 복제하기
• 푸시(push) - 원격 저장소에 밀어넣기
• 패치(fetch) - 원격 저장소를 일단 가져온다.
• 풀(pull) - 원격 저장소의 코드를 가져와서 합친다.

 

 

---

 

ajax

 

Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 한다.

그중에서도 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)라고 한다.

$.ajax() 메소드는 HTTP 요청을 만드는데 사용한다.

 $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/web/api/movie",
            data: {},
            success: function (response) {}
 });

형식은 다음과 같다.

type에는 GET, POST, PUT, DELETE를 사용할 수 있다.

url에는 내가 사용할 api의 주소를 넣는다.

data에는 전송할 데이터가 들어가고,

success 에는 요청 성공시 response가 출력된다.

 

---

        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/web/api/movie",
            data: {},
            success: function (response) {

                let rows = response.movies;
                for (let i = 0; i < rows.length; i++) {
                    const data = rows[i];
                    const title = data.title;
                    const image = data.image;
                    const desc = data.desc;
                    const star = data.star;
                    const comment = data.comment;

                    let star_image = '⭐'.repeat(star);

                    const temp_html = `<div class="col">
                                            <div class="card">
                                                <img src="${image}"
                                                     class="card-img-top" alt="...">
                                                <div class="card-body">
                                                    <h5 class="card-title">${title}</h5>
                                                    <p class="card-text">${desc}</p>
                                                    <p>${star_image}</p>
                                                    <p${comment}</p>
                                                </div>
                                            </div>
                                        </div>`

                    $('#cards-box').append(temp_html);
                }
            }
        })

다음 코드는 실습한 코드 중 하나인데, ajax로 데이터를 불러온 뒤, 데이터들로 화면을 그리는 코드이다.

위의 코드처럼 response에서 받아온 값으로 내가 하고자 하는 바를 작성해주면 된다.