On a couch
[2주차] js, jquery, ajax 본문
일별 기록
4일차
여기저기서 바닐라 배우기 전에 jquery 익숙해지지 말라는 얘기 엄청 많이 들어서, 솔직히 이번 강의 들으면서도 좀 스트레스 찬 상태로 들었다. 근데 강의 내에서 계속 '전혀 외울 필요 없고 눈으로 봐라'라고 해 주시길래 '그래, nodejs 공부할 때처럼 어떤 느낌인지 아는 정도로만 해 보자' 하고 있다.
강의
1. JS 복습
count += 1; 이게 count = count + 1 이랑 같다.
이걸 처음 봤을 때의 충격 같다.
2. jQuery
- 브라우저 호환성 문제를 해결하기 위해 등장한 라이브러리
- 남이 짜 준 js 코드
- 부트스트랩이 jQuery를 사용하므로, 부트 썼으면 또 임포트 할 필요 없음
* js 이용해 html 업데이트하기
$('#btn-posting-box').text('내용') text 값을 '내용'으로 변환 가능
또는
let temp_html = `<tag>innterText</tag>` 으로 저장한 뒤
$('#id이름').append(temp_html) 으로 원하는 id에 해당 내용 업데이트 가능
* 연습과제
split으로 만든 array에서 한 값을 고르고 -> 그걸 다시 split해서 array 만든 뒤 -> 첫번째 값 호출
2번째 단계는 생각 못 했네!
* ajax 사용법
- <head>에 jQuery를 import
- <script>에 function을 만들고, 그 안에 기본 프레임 넣기
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})-> TYPE?
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.
* GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정
*GET 방식으로 데이터를 전달하는 방법
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value?m2=value2
? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)
*POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' }
-> URL?
API의 URL에는 각종 정보가 object와 array 의 형태로 들어 있다.
그 중 몇 번 째 요소, 그 안의 몇 번째 요소, 그 안의 어떤 key-value를 이용할 것인지 지정해서 var에 담아 쓰기.
라이브러리를 하나하나 까서 이해하려고 하지 말자!
그러려면 갖다 쓰는 의미가 없다!
'프론트엔드 공부 > 스파르타 웹개발 종합반' 카테고리의 다른 글
| [5주차] 서버 작업 (0) | 2022.02.13 |
|---|---|
| [메이킹챌린지] 10기 4조 개발일지 (0) | 2022.02.10 |
| [4주차] python (0) | 2022.02.08 |
| [3주차] python (0) | 2022.02.03 |
| [1주차] 페이지 제작 기초 (0) | 2022.01.18 |
