[수업 목표]
- Javascript 문법에 익숙해진다.
- jQuery로 간단한 HTML을 조작할 수 있다.
- Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.
Javascript
- 우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다. ‘HTML(Hyper Text Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다.
- HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다.
- 자바스크립트는 크로스 플랫폼(cross platform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다
- 자바스크립트는 컴파일 과정이 없기 때문에 다른 언어와 비교했을 때 빠른 시간 안에 스크립트 코드를 작성할 수 있게 도와준다. 기존 C나 자바 언어와 달리 굉장히 단순한 구조와 원칙을 가지고 있기 때문에 초보 개발자들이 쉽게 배우고 이해할 수 있다.
- 단점은 성능이나 보안 측면이다. 일단 내부에서 제공되는 기능이 제한적이고, 관련된 개발도구도 적은 편이다. 또한 자바스크립트는 HTML 소스코드에 함께 작성되면서 소스코드가 외부로 공개되는데, 이 과정에서 보안 취약점이 발생할 수 있다.
출처 : [네이버 지식백과] 자바스크립트 [Javascript] - 웹을 풍부하게 만들어주는 작고 가벼운 언어 (용어로 보는 IT, 이지현)
1) jQuery 란?
- HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 라이브러리. (JS보다 직관적)
- jQuery는 전문 개발자들이 짜둔 미리 작성된 Javascript 코드 (그렇게 때문에, 쓰기 전에 "임포트" 필요)
- https://www.w3schools.com/jquery/jquery_get_started.asp (임포트 하는 법 링크 참고하기)
임포트 하는 법 : <head> 와 </head> 사이에 아래를 넣으면 끝!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다. css에서는 선택자로 class="..."를 사용했다면 jQuery에서는 id="..." 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리킨다.
자주쓰는 jQuery
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();
// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();
// show()로 보이게 한다.
$('#post-box').show();
// let temp_html = `` 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 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);let ...=$('#...').val() 로 변수를 정해주고,
그것을 다시 let temp_html=`` 로 받아
$('#....').append(temp_html)로 연결시키는 과정을 기억하자!
2) 서버-클라이언트 통신 이해하기
① 서버→클라이언트: "JSON"을 이해하기
- JSON은 쉽게 말해 데이터를 주는 규칙
- JSON은, Key:Value로 이루어져 있다. 자료형 Dictionary와 유사
② 클라이언트→서버: 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
여기서 잠깐, 그럼 code라는 이름으로 영화번호를 주자!는 것은
누가 정하는 것일까요?
→ 네, 바로 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속입니다.
프론트엔드: "code라는 이름으로 영화번호를 주면 될까요?"
백엔드: "네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"
3) Ajax
- Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자
- 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
- 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며 Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포
- 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법
- Ajax는 jQuery를 임포트한 페이지에서만 동작 가능
Ajax 기본 골격 + 해설
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})※ GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져간다. http://naver.com?param=value¶m2=value2
※ POST 요청은, data : {} 에 넣어서 데이터를 가져간다. data: { param: 'value', param2: 'value2' }
- 사실, 아직 이해가 완전히 되지는 않기 때문에 오늘 풀었던 예제를 통해 형식을 그냥 외워보려 한다.
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bad {
color: red;
font-weight: bold;
}
</style>
<script>
function q1() {
// 여기에 코드를 입력하세요
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function (response) {
let rows = response["RealtimeCityAir"]["row"];
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM'];
let gu_mise = rows[i]['IDEX_MVL'];
let temp_html = ''
if (gu_mise > 70) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html);
}
}
})
}
</script>let rows 를 통해 변수를 설정해주고, for문으로 리스트를 돌려주고, temp_html을 이용하여 변수갑을 브라우저에 찍어준다. 그리고 if 문의 색깔은 class="bad"라는 값을 다시 지정해 위의 <sytle>에 .bad 부분을 추가해 준다.
※ tip : 이미지 바꾸기 $("#아이디값").attr("src", 이미지URL)
텍스트 바꾸기 $("#아이디값").text("바꾸고 싶은 텍스트")
처음 보는 용어들에 정신이 어질어질 어렵지만, 반복된 연습을 통해 익숙해 질 거란 느낌이 팍 들었다 ! 일단 오늘 이해한 부분은, jQuery를 통해 보다 간결한 코드로 자바스크립트를 구현할 수 있다는 점과 서버와 클라이언트가 JSON형식의 데이터를 주고 받을때 [GET], [POST] 이 두가지 요청 방식이 있다는 점.
오늘 배운 내용에 도움이 될 만한 블로그 글을 발견하여 아래에 링크를 남겨본다.
https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
AJAX란 무엇인가?
AJAX (Asynchronous Javascript And XML) AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequ
velog.io
4회 수강 후 여전히 부족한 부분 정리 : 1. 오타에 유의하자 (특히 중괄호), 2. 코드를 간결히 할 수 있는 방법을 생각해보자.
<2-5 강의 퀴즈 부분>
1 번 문제
2번 문제
3번 문제
과제 코드 검사
'항해99 개발 일지 > [0주] 웹개발 종합반' 카테고리의 다른 글
| #항해99 웹개발 종합반 5주차 회고 - AWS, 가비아 (0) | 2022.10.21 |
|---|---|
| #항해99 웹개발 종합반 4주차 회고 - Flask, API (0) | 2022.10.20 |
| #항해99 웹개발 종합반 3주차 회고 - Python (0) | 2022.10.19 |
| #항해99 웹개발 종합반 1주차 회고(2) - Javascript 기초 문법 (1) | 2022.10.19 |
| #항해99 웹개발 종합반 1주차 회고(1) - HTML, CSS (0) | 2022.10.18 |