TIL(22.01.22.SAT)
01. 2주차 배울 것
- jQuery, Ajax
💡
jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고,
Ajax를 이용해 다시 서버에 데이터를 요청 - 2) Javascript 복습 - 홀짝 판별 onclick 함수 만들어보기
- 짝/홀수 판단하는 방법
- %(나머지 연산)를 이용한다.
이해에 도움되는 출처 https://brunch.co.kr/@doselfcoding/50let even = 4; console.log(even % 2); // 2로 나눈 나머지가 0 let odd = 5; console.log(odd % 2); // 2로 나눈 나머지가 1
- %(나머지 연산)를 이용한다.
- 짝/홀수 onclick 함수
<script> let count = 1; function guy() { if (count % 2 == 0) { alert('짝'); } else { alert('홀'); } count += 1; } </script>
- += 와 == 수식 알아보기
- +=란
- 기초 연산자로 분류
- 왼쪽 변수에 오른쪽 값을 더하고 그 결과를 왼쪽 변수에 할당한다.(결과값이 변수에 따라 다름) ex. a+=b(a=a+b를 의미)
- ==란
- 비교 연산자로 분류.
- 두 개의 값이 같은지 판단하는 연산자로 같으면 true, 다르면 false 결과값 산출.(결과값이 true or false)임
- 이해에 도움이되는 출처 https://corytips.tistory.com/162
- +=란
- += 와 == 수식 알아보기
- 짝/홀수 판단하는 방법
- 3) Javascript 만으로 충분할까?
- 예를 들어 div 박스를 하나 감추고 싶다면? 버튼의 색깔을 바꾸고 싶다면? 이런 것들 쉽게 해주는 것이, jQuery!
- 예를 들어 div 박스를 하나 감추고 싶다면? 버튼의 색깔을 바꾸고 싶다면? 이런 것들 쉽게 해주는 것이, jQuery!
02. JQuery 시작하기
- 1) jQuery 란?
- HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 즉, 라이브러리 느낌.
🔥 Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서,
jQuery라는 라이브러리가 등장!! - jQuery와 Javascript -비교
🔥 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드.전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)
jQuery로 보다 직관적으로 쓸 수 있음document.getElementById("element").style.display = "none";
$('#element').hide();
- HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 즉, 라이브러리 느낌.
- 2) jQuery 사용하기
-
임포트란
미리 작성된 코드 파일or 데이터를 가져오는 것
-
JQuery 임포트 하기
🔥 jQuery CDN 부분을 참고해서 임포트 할 것: (링크)
- head안에 넣는다!!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- head안에 넣는다!!
-
jQuery를 사용하는 방법
🔥 $(’#id명’).명령어( )
🔥 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있음.
예) 특정 인풋박스의 값을 → 가져와줘!
예) 특정 div를 → 안보이게 해줘!
css에서는 선택자로 class를 썼으나,
jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됨.
-
03. JQuery 다뤄보기
- 모든 jQuery를 외워야 하나?
🔥 아니요!!! 예를 들어 스크롤 움직임을 감지한다거나, 화면 사이즈를 안다거나, jQuery가 할 수 있는 일은 무척 많은데....? (언제 외우니?)
그러니, 필요할 때에 필요한 기능을 구글링 - 자주쓰는 jQuery들 다뤄보기
- input 박스의 값(value)을 가져와보기
- 예시
<div class="form-floating mb-3"> <input id="url" type="email" class="form-control" placeholder="[email protected]"> <label>영화URL</label> </div>
- 입력 값 가져오기
- id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
🔥 $('#url').val( );
- id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
- 입력할때(웹페이지에 쓰는게 아닌 코딩창에 써서 웹페이지에 구현)
🔥 $('#url').val('입력해봐요')
- 입력 값 가져오기
- div 보이기 / 숨기기
- 숨기기
- id 값이 post-box인 곳을 가리키고, hide()로 숨기기
🔥 $('#post-box').hide( );
- id 값이 post-box인 곳을 가리키고, hide()로 숨기기
- 보이기
- show()로 보이기
🔥 $('#post-box').show( );
- show()로 보이기
- 태그 내 html 입력하기
- div안에,동적으로 html을 넣고 싶을 땐?(예, 포스팅되면 → 카드 추가)
- 1.html 형식으로 작성한 문자열을 2. JQuery로 진짜 html형식으로 전환
- temp_html 변수에 만들고자 하는 html 뼈대를 작성( 단 문자열처림 됨)
🔥 let temp_html =
html 뼈대
- 만들고자 하는 html 뼈대는 backtick(`)으로 감싼다.
- backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다
🔥 let txt = 아자! 화이팅
let temp_html =뼈대 ${txt} 뼈대
- 문자열 처리된 html 뼈대를 html 형식으로 전환
🔥 $('#id명').append(temp_html)
- temp_html 변수에 만들고자 하는 html 뼈대를 작성( 단 문자열처림 됨)
- 1.html 형식으로 작성한 문자열을 2. JQuery로 진짜 html형식으로 전환
- 예시
- 카드가 붙는 div 에 id를 추가해주는 것이 핵심!
<div class="mycards"> <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box"> <div 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">영화 제목이 들어갑니다</h5> <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p> <p>⭐⭐⭐</p> <p class="mycomment">나의 한줄 평을 씁니다</p> </div> </div> </div> </div> </div>
- 1) 버튼을 넣어보기
// temp_html 변수에 만들고자 하는 html 뼈대를 작성( 단 문자열처림 됨) // 만들고자 하는 html 뼈대는 backtick(`)으로 감싼다. let temp_html = `<button>나는 추가될 버튼이다!</button>`; //따라서 문자열 처리된 html 뼈대를 html 형식으로 전환 $('#cards-box').append(temp_html);
- 2) 버튼 말고, 카드를 넣어보기
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다. // backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다. let title = '영화 제목이 들어갑니다'; let temp_html = `<div 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);
- 1) 버튼을 넣어보기
- 카드가 붙는 div 에 id를 추가해주는 것이 핵심!
- 바꾸기
- 이미지 바꾸기 :
$("#아이디값").attr("src", 이미지URL);
- 텍스트 바꾸기 :
$("#아이디값").text("바꾸고 싶은 텍스트");
- 이미지 바꾸기 :
04. 서버-클라이언트 통신의 이해
-
1) 서버→클라이언트: "JSON"을 이해하자
- 크롬 익스텐션 JSONView
- 좀 더 예쁘게 JSON을 볼 수 있음.
- Jsonview
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko
- JSON은, Key:Value로 이루어져 있습니다. 자료형 Dictionary와 유사
🔥 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고,
그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다
*JSON이란 dictionary와 list가 합쳐진 것이구나 정도로 이해하자!
- 크롬 익스텐션 JSONView
-
2) 클라이언트→서버: GET 요청 이해하자
🔥 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 (인코딩 정보)
- GET → 통상적으로! 데이터 조회(Read)를 요청할 때
05. Ajax 시작하기
- 정의
- js를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능. 즉, 서버에 데이터를 비동기 방식으로 요청하는 것!
- 비동기 방식에 대한 설명 출처 https://velog.io/@surim014/AJAX란-무엇인가
- 주의
- Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.
- Ajax 기본 골격
$.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ console.log(response) } })
- $ajax 코드 설명
- type: "GET" → GET 방식으로 요청한다.
- url: 요청할 url
- data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워둠.)
🔥 GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져감
http://naver.com?param=value¶m2=value2
POST 요청은, data : {} 에 넣어서 데이터를 가져감
data: { param: 'value', param2: 'value2' } - success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음 console.log(response) }
- $ajax 코드 설명
- 2) Ajax 통신의 결과값을 이용
- 개발자도구 콘솔에 찍어보기
$.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/seoulair", data: {}, success: function(response){ // 값 중 도봉구의 미세먼지 값만 가져와보기 let dobong = response["RealtimeCityAir"]["row"][11]; let gu_name = dobong['MSRSTE_NM']; let gu_mise = dobong['IDEX_MVL']; console.log(gu_name, gu_mise); } })
- 모든 구의 미세먼지 값을 찍어보기
$.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/seoulair", data: {}, success: function (response) { let mise_list = response["RealtimeCityAir"]["row"]; for (let i = 0; i < mise_list.length; i++) { let mise = mise_list[i]; let gu_name = mise["MSRSTE_NM"]; let gu_mise = mise["IDEX_MVL"]; console.log(gu_name, gu_mise); } } });
- 개발자도구 콘솔에 찍어보기
Author And Source
이 문제에 관하여(TIL(22.01.22.SAT)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jr28333/TIL22.01.22.SAT저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)