[Let's TIL✍️] 코딩 18 : 2 Week _ JQuery 기초

이제 상쾌하게 2주차 시작!

​

여기서는 api를 통해서 서버와 통신하는 방법을 배운다. 물론 그 전에 기초도 배운다. 

​

​

01. 서버와의 통신

​

우리가 웹사이트에 접속하면, html, css, Java Script를 다운받게 된다.

​

이는 이벤트가 있을 때 - 서버로부터 데이터를 받게 끔 요청하는 것으로 : 자바 스크립트,

​

이를 쉽게 도와주는 것을 : 라이브러리라고 한다. (여기서는 제이쿼리를 사용한다.)

​

​

​

1) jQuery 

​

라이브러리란?

- 전 세계 개발자들이 만들어 놓은 코드들이다. (공개코드)

​

제이쿼리는 ?

- html 코드를 바꾸거나(조작), 혹은 요청을 만드는 것으로(그 외에도 많지만 대표적으로는)
자바 스크립트를 보기 좋게 한 번 더 감싼(포장한) 형태라고 보면 된다.  

​

jQuery 사이트 cdn 접속하기 

- 설치방법은 동일하다. bootstrap처럼, cdn 방식이다. (= 코드를 복사, 붙여넣기)

​

제이쿼리의 slim & minified 의 차이

- minified : 전부 들어있는 것
- slim : 화면만 바꾸고 싶을때 가볍게 쓰는 것

​

2) html 조작하기

- 자바 스크립트를 이용해서, html 조작하기 (with. 개발자도구의 console) 

 

 

 

TIP🤖 ID 속성과 # 

#은 id 속성 값을 의미한다. 빠뜨리지 말고 앞에 꼭 써주도록 하자.
코드를 작성하다보면 누락하기 쉬운데, 이는 class 앞에 .(점) 부분도 그렇다. 

​

브라우저 - 개발자 도구 - console 탭
$("#test").text('안녕하세요');

 

2-1) 이때 $는 jquery에서 사용하는 문법 같은 것이다. (= jquery를 이제 사용할 것이다)

 

2-2) 괄호() 안에 '인디케이터'를 사용했다.

(우리가 조작하려는 것은 태그이기에, 조작하고 싶은 태그를 제대로 가리키는 것이 중요하다.)

 

2-3) #은 id 속성값 (즉, id 속성값이 test인 태그를 가리켜 달라는 뜻)

 

2-4) 점(.)은 가지고 있다는 뜻으로, 이 태그가 가지고 있는 함수이다. (여기서는 text)

(이때 함수 = 어떤 동작을 만들어내주는 기능이다.)

 

console.log = 화면에 출력하는 함수

 

- text 함수는 그 안에 값을 넣을 수도 있고,

- console.log 함수를 이용하여 화면에 출력하면, 무슨 값을 넣었는지 출력해준다.

---

 

(dockside 개발자도구 배치 방법)

 

​

---

02. 추가 강의

 

jQuery의 다양한 인디케이터 방법들

​제이쿼리의 selectors(인디케이터)

: Basic을 살펴보면, 방법은 총 다섯 가지이다. 여러 개의 태그를 한 번에 가리키는 multiple도 있다. 

​

 

 

1) class 방식 (. + class)

개발자도구 - console 에서
$(".fastcampus") 입력하면 값을 출력한다.

이때 이 방식은 css에서 class를 표현하는 방식과 동일하다.
(즉, 그 방식으로 동일하게 인디케이터로도 사용이 가능하다.)

. + class 인디케이터는 그 class 속성을 가진, 만들었던 태그를 전부 가리킨다. 
​즉 selector(=인디케이터)는 태그를 개수와 관계없이 그 조건에 맞는 태그를 전부 가리키게 된다.

 

​

2) 태그 이름

​

$("div") 입력
> 3개가 나오는데, 이는 속성값이 달라도 div 태그가 3개이기 때문이다.
​
$("*") 입력시, 모든 태그가 나오게 된다.

 

3) 여러 개의 selector를 활용하는 방법

​

$("#test, .fastcampus") 입력 시 이 둘중 하나라도 만족하는 값이 다 나오게 된다.

태그는 div인데, 속성값은 fastcampus
$("div.fastcapmus")
​
id를 사용하면?
$("div#test")​

 

 

4) class & id 속성값

​

- class속성은 css를 어떤 태그에 적용할 때 (태그에 어떤 스타일을 지정할 때) 사용하는 속성값
- id 속성값은 태그에 고유한 키값을 지정할 때 사용

 

​

---

03. jQuery와 게시판

인디케이터란 결국 태그를 가리키는 것이다. 

 

jQuery를 부트스트랩에서 복사 붙여넣기 해올 때부터  slim 버전이라, minified 제이쿼리 cdn 을 가져와야 한다.

​

1-1) head쪽에 id를 설정한다. (ex. post-3)

1-2) 제이쿼리 cdn 복사 (minified 버전) 후 복사 붙여넣기,

1-3) 제이쿼리 만들기

 

​$("#post-3").click(function () {
clickpost(3);
});

= 클릭했을때 그 태그를 실행하라는 의미이다. 

 

​TIP🤖 괄호 주의하기 ​

 

함수를 배울 때 보았듯이, 이름을 지정해서 만들었어야 하는데,  .click() 여기 안에서는 이름 없이 사용 가능하다.

인디케이터를 이용해서, 태그를 실행해달라고 했는데 실행이 안되었다. 

​

이유는?

모든 문서는 위에서부터 읽어내려간다.
즉 문서 아래에 있어서 연결을 못했던 것이라서, 
문서가 준비되면 연결해달라는 태그를 추가해야 한다. 
$(document).ready(function () { });

지정하는 속성값을 가진 태그보다 스크립트가 먼저 작성되는 경우,
$(document).ready 안에서 처리를 해야한다. 
만약 그렇게 하고 싶지 않으면, script 태그를 아래로 내려버리면 된다. 

$(document).ready  안에서 처리를 한 모습

 

여기서 $은 어떤 태그를 가리킬 때 사용한다. 
즉 'document' 라는 값을 여기()에 넣게되면, 이 문서를 의미한다.
ready는 준비되면 해달라는 것이다.
(앞으로 jqeury를 사용할때 무조건 쓰는 약속처럼 생각하는 것이 좋다고 한다.)

​

 

​

오늘의 소감 ✍️

​듣기로는 제이쿼리가 어렵대서 살짝 겁 먹고 있었는데,

차차 따라가다보니 생각한 것처럼 어렵지 않았다. 

아직까지는 기본 내용 + 이전에 한 내용의 복습이라 할만하다고 느낀 것도 있다. 

그리고 알게 된 CSS 연습하는 사이트에서 class와 id 를 인디케이터로 사용하는 방법이 익숙해지도록 해야겠다. 

 

 

​

 css 연습하는 사이트 : https://flukeout.github.io/

CSS Diner