※ 스파르타 코딩클럽의 웹개발 종합반(5주)을 공부하며 기억하고 싶은 특이점들만 기록, 정리해 놓은 노트이다.

※ 노션에 필기한 내용을 복사해오다 보니 식과 포맷이 엉성한 곳이 있다.

jQuery란

jQuery는 자바스크립트를 모아놓은 도구모음(라이브러리)다!

부트스트랩이 CSS 도구모음인 것 처럼.

jQuery의 장점

코드가 간결해지고 브라우저간 호환성을 해결해줘서 각광받았다.

jQuery 임포트하기

내가 직접 제이쿼리.js 파일을 다운받아서 사용하는 것과, 구글 CDN(Content Delivery Network)같이 제이쿼리를 호스팅해주는 곳에서 갖다가 쓰는 방법이 있다.

// Google CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">

부트스트랩 템플릿에는 이 코드가 이미 포함되어 있어서 따로 적어주지 않아도 된다.

제이쿼리 기초 1탄

입력하기, 값 가져오기 - 태그.val()

// (크롬 콘솔창에서)
**$('#url').val**('url을 id로 가진 태그 자리에 이 내용을 넣어줌!');
$('#url').val()

숨기기, 보이기 - 태그.hide(), 태그.show()

$('#post-box').hide()
$('#post-box').show()

태그에 HTML추가하기 - 태그.append()

// 태그에 HTML추가하기 - 동적 추가:
// 새 영화카드를 추가하려면
let title = '새로운 영화제목';
let temp_html = `<div id="card" class="col">
                    <div class="card h-100">
                        <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                             class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">${title}</h5>
                            <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                            <p>⭐⭐⭐</p>
                            <p class="mycomment">나의 한줄 평을 씁니다</p>
                        </div>
                    </div>
                </div>`;
$('#cards-box').append(temp_html);

백팁(`)으로 html 리터럴 감싸기.
값이 변경되어야 하는 html내용물 자리에 ${변수명} 처럼 써주기

자기 자신을 포함하는 HTML 추출 - 부모태그.html()

// 자기 자신을 감싸는 부모태그를 만들고 그 부모.html()로 불러오고,
// 나중에 그 부모 태그를 다시 푼다(자식태그.unwrap()).
let temp_html = $('#card').wrap("<div/>").parent().html();
$('#card').unwrap();

제이쿼리 기초 2탄

‘영화 기록하기’ 버튼을 누르면 포스트를 할 수 있는 박스(post-box)가 나타나고 ‘닫기’ 버튼을 누르면 사라지게 만들기:

// 제이쿼리로 함수 정의하기
<script>
    function show_post_box() {
        $('#post-box').show()
    }
    function hide_post_box() {
        $('#post-box').hide()
    }
</script>

// 알맞은 버튼에 기능 부여:
<button onclick="show_post_box()">영화 기록하기</button>
<button onclick="hide_post_box()" type="button" class="btn btn-outline-dark">닫기</button>

포스트를 할 수 있는 박스(post-box)를 처음에는 감춰두기

// <style> 태그에 처음부터 display: none이라고 박아놓기
<style>
    ...
    .mypost {
        display: none;
    }
</style>

jQuery 셀렉터 - id, class, 태그명으로 요소 찾기

// id
$('#ID');

// class
$('.CLASS');

// 태그명
$('태그명');

예시:

// '다지우기' 버튼을 누를 때 실행되는 함수에...

// 1. 하위 항목들(id=names-q3)만 지우기:
function q3_remove() {
    $('#names-q3').empty();
}

// 2. 'question-box'라는 클래스명을 가진 div 다 지우기:
function q3_remover() {
		$('.question-box').empty();
}

// 3. 그냥 <body> 전체 다 지우기:
function q3_remover() {
		$('body').empty();
}

includes() : 특정 문자를 포함하면 true 반환
empty() : 지금 선택된 요소 내용물 전부 지우기

Ajax 기초 1탄

1) 서버→클라이언트: JSON 형식으로 데이터 전달

서울시 OpenAPI에서 구역별 실시간 미세먼지 데이터(https://data.seoul.go.kr/dataList/OA-2219/S/1/datasetView.do)를 JSON 파일 형식으로 가져온다.

2) 클라이언트→서버: CRUD 방식으로 요청

👉 API는 은행 창구와 같은 것!

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼,

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재한다.

GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정

GET 방식 요청

<https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967>

위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.

* 서버 주소: <https://movie.naver.com/movie/bi/mi/basic.nhn>
* 영화 정보: code=161967

👉 GET 방식으로 데이터를 전달하는 방법

? : 여기서부터 전달할 데이터가 작성된다는 의미입니다. & : 전달할 데이터가 더 있다는 뜻입니다.

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

     위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
     q=아이폰                        (검색어)
     sourceid=chrome        (브라우저 정보)
     ie=UTF-8                      (인코딩 정보)

👉 여기서 잠깐, 그럼 code라는 이름으로 영화번호를 주자!는 것은 누가 정하는 것일까요?

→ 네, 바로 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속입니다.

프론트엔드: "code라는 이름으로 영화번호를 주면 될까요?" 백엔드: "네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"

GET 요청 요약:

서버 API에 뭔가를 요청할 때 취할 수 있는 여러 타입 중에 GET 방식 요청이 있다.
브라우저 주소창에 써 보내는 내용이 GET 방식 데이터 전달이다.
ex) google.com/search ?q=아이폰&sourceid=chrome라는 주소 전달: google.com/search라는 창구에 q값은 ‘아이폰’을, sourceid값은 ‘chrome’값을 들고 가서 조회를 부탁하는 것!
q와 soureid라는 이름은 사전에 협의된 코드명인 셈이다.

Ajax 기초 2탄

아마도 Ajax라는 건 서버와 클라이언트가 주고받는 신호를 다루는 데 특화된 (자바스크립트)템플릿인 것 같다.
Ajax는 jQuery를 임포트한 페이지에서만 동작 가능하다!
즉, $.ajax()라는 코드를 개발자 도구 콘솔창에서든 암묵적으로든(?) 사용하려면, 그 html 페이지에 제이쿼리가 임포트되어 있어야 한다는 것.
즉, Ajax는 jQuery를 활용한 버전이고 jQuery는 또 자바스크립트 언어라는 것. (Ajax > jQuery > javascript)

Ajax 기본 골격

$.ajax({
	  type: "GET", // GET 방식으로 요청한다.
	  url: "<http://spartacodingclub.shop/sparta_api/seoulair>",
	  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비움)
		// 서버에서 준 결과를 response라는 변수에 담음
	  success: function(response){
				// 서버에서 준 결과를 이용해서 나머지 코드를 작성
		    let rows = response['RealtimeCityAir']['row'];
            for (let i = 0; i < rows.length; i++) {
                console.log(rows[i]['MSRSTE_NM'], rows[i]['IDEX_MVL'], rows[i]['IDEX_NM']);
            }
        } 
	  }
})

특정 조건을 만족하면 글씨 빨갛게 쓰기

미세먼지 값이 어떤 수치 이상이면 빨간글자로 쓰려고 한다면: 빨간 글씨를 먹인 스타일 임의로 만들고, 조건을 만족하는 경우의 태그만 꾸밈을 받도록 클래스명에 덧붙여준다.

제이쿼리 기초 3탄

요소의 속성값 조회/변경하기

$('#img-rtan').attr('src', image_url);

요소의 '텍스트' 조회/변경하기

$('#text-rtan').text(msg);

예시: 업데이트 버튼을 누를 때마다 이미지와 상태문구가 업데이트 되게 만들기

// 자바스크립트 부분(jQuery + Ajax)
// q1() 함수가 호출될때마다 "르탄이API"로부터 새 정보 받아와 덮어씌움
<script>
    function q1() {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/rtan",
            data: {},
            success: function (response) {

                let msg = response['msg'];
                let image_url = response['url'];

                $('#img-rtan').attr('src', image_url);
                $('#text-rtan').text(msg);

            }
        })
    }
</script>

<!-- HTML 본문-->
<!-- "르탄이 나와" 버튼을 클릭할 때마다 q1() 호출-->
<button onclick="q1()">르탄이 나와</button>
<div>
    <img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
    <h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
</div>

결과 예시:

과제 비교

왼쪽이 정답코드, 오른쪽이 내가 한 것. (정답과 똑같으니 보지 않아도 됨)

정답코드 vs 내코드 비교

Diffchecker

초미니홈피 - 팬명록 * { font-family: 'Noto Serif KR', serif; } .mypic { width: 100%; height: 300px; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.topstarnews.net/news/photo/201807/456143_108614_51

www.diffchecker.com

왼쪽은 1주차 작업물, 오른쪽은 2주차 작업물(둘다 내 것).

1주차 vs 2주차