내가 머가리가 나쁜건지 아니면 아직 코딩으로 뇌신경이 안생긴건지
모르겠지만 점점 어려워져가는거 같네. 예전에 C언어 할때는 어려서 그런가
머리가 좀 잘돌아가는 느낌이있었는데 이제 다시 이거 하려니까
뇌에서 계속 렉이 걸리는거 같다.
[스파르타코딩클럽] 웹개발 종합반 - 2주차 1
📕
[스파르타코딩클럽] 웹개발 종합반 - 2주차
매 주차 강의자료 시작에 PDF파일을 올려두었어요!
단축키 모음
새로고침
F5
저장
Windows: Ctrl + S
macOS: command + S
전체선택
Windows: Ctrl + A
macOS: command + A
잘라내기
Windows: Ctrl + X
macOS: command + X
콘솔창 줄바꿈
shift + enter
코드정렬
Windows: Ctrl + Alt + L
macOS: option + command + L
들여쓰기
Tab
들여쓰기 취소 : Shift + Tab
주석
Windows: Ctrl + /
macOS: command + /
[수업 목표]
1. Javascript 문법에 익숙해진다.
2. jQuery로 간단한 HTML을 조작할 수 있다.
3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.
[목차]
01. 2주차 오늘 배울 것
02. JQuery 시작하기
03. JQuery 다뤄보기
04. JQuery 적용하기(포스팅 박스)
05. Quiz_JQuery 연습하기
06. 서버-클라이언트 통신 이해하기
07. Ajax 시작하기
[스파르타코딩클럽] 웹개발 종합반 - 2주차 2
💡 모든 토글을 열고 닫는 단축키
Windows : Ctrl + alt + t
Mac : ⌘ + ⌥ + t
01. 2주차 오늘 배울 것
1) 오늘 배울 것 이야기 - 2주차: jQuery, Ajax
👉 오늘은 HTML파일을 받았다고 가정하고, Javascript로 다시 서버에 데이터를 요청하고 받는 방법을 배워볼거예요.
jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고,
Ajax를 이용해 다시 서버에 데이터를 요청하고 받아보겠습니다.
2) Javascript 잠깐 복습 - 홀짝 판별 onclick 함수 만들어보기
짝/홀수 판단하는 방법
let even = 4;
console.log(even % 2); // 2로 나눈 나머지가 0입니다.
let odd = 5;
console.log(odd % 2); // 2로 나눈 나머지가 1입니다.
[코드스니펫] 짝/홀수 onclick 함수(완성)
3) Javascript 만으로 충분할까요?
예를 들어 버튼의 색깔을 바꾸고 싶다면?
예를 들어 div 박스를 하나 감추고 싶다면?
→ 이런 것들 쉽게 해주는 것이, jQuery!
02. JQuery 시작하기
1) jQuery 란?
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
👉 Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서,
jQuery라는 라이브러리가 등장하게 되었답니다.
jQuery와 Javascript - 코드 비교해보기
👉 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔
코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)
Javascript로 길고 복잡하게 써야 하는 것을
document.getElementById("element").style.display = "none";
jQuery로 보다 직관적으로 쓸 수 있어요. 편리하죠? :-)
$('#element').hide();
2) jQuery 사용하기
미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부릅니다.
👉 jQuery CDN 부분을 참고해서 임포트하기: (링크)
[코드스니펫] jQuery CDN https://www.w3schools.com/jquery/jquery_get_started.asp
와 사이에 아래를 넣으면 끝!
👉 수업 자료를 잘 따라온 분이라면, 코드에 이미 다음과 같이 임포트 되어있을거예요. 다시한번 잘 살펴보세요!
[스파르타코딩클럽] 웹개발 종합반 - 2주차 4
jQuery를 사용하는 방법
👉 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다.
예) 특정 인풋박스의 값을 → 가져와줘!
예) 특정 div를 → 안보이게 해줘!
css에서는 선택자로 class를 썼지요?
jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됩니다.
백문이불여일견! 자주 쓰는 jQuery들을 함께 다뤄보면서 익혀보죠!
03. JQuery 다뤄보기
1) 자주쓰는 jQuery들 다뤄보기
들어가기 전에 - 모든 jQuery를 외워야 하나요?
👉 절대!! 아닙니다. 예를 들어 스크롤 움직임을 감지한다거나, 화면 사이즈를 안다거나, jQuery가 할 수 있는 일은 무척
많습니다.
그러니, 필요할 때에 필요한 기능을 구글링해서 쓰면 되는 거예요!
[코드스니펫] 1주차 완성본
스파르타 피디아
내 생애 최고의 영화들
영화 기록하기
영화URL
별점
-- 선택하기 --
⭐
⭐⭐
⭐⭐⭐
⭐⭐⭐⭐
⭐⭐⭐⭐⭐
코멘트
기록하기
닫기
[스파르타코딩클럽] 웹개발 종합반 - 2주차 6
영화 제목이 들어갑니다
여기에 영화에 대한 설명이 들어갑니다.
⭐⭐⭐
나의 한줄 평을 씁니다
영화 제목이 들어갑니다
여기에 영화에 대한 설명이 들어갑니다.
⭐⭐⭐
나의 한줄 평을 씁니다
영화 제목이 들어갑니다
여기에 영화에 대한 설명이 들어갑니다.
⭐⭐⭐
나의 한줄 평을 씁니다
영화 제목이 들어갑니다
여기에 영화에 대한 설명이 들어갑니다.
⭐⭐⭐
나의 한줄 평을 씁니다
1. input 박스의 값을 가져와보기
영화URL
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();
// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');
2. div 보이기 / 숨기기
// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();
// show()로 보이게 한다.
$('#post-box').show();
3. 태그 내 html 입력하기
~
내에,
동적으로 html을 넣고 싶을 땐? (예를 들어, 포스팅되면 → 카드 추가)
카드가 붙는 div 에 id를 추가해주는 것이 핵심!
영화 제목이 들어갑니다
여기에 영화에 대한 설명이 들어갑니다.
⭐⭐⭐
나의 한줄 평을 씁니다
1) 버튼을 넣어보기
let temp_html = `나는 추가될 버튼이다!`;
$('#cards-box').append(temp_html);
2) 버튼 말고, 카드를 넣어보기
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let title = '영화 제목이 들어갑니다';
let temp_html = `
${title}
여기에 영화에 대한 설명이 들어갑니다.
⭐⭐⭐
나의 한줄 평을 씁니다
`;
$('#cards-box').append(temp_html);
[스파르타코딩클럽] 웹개발 종합반 - 2주차 8
04. JQuery 적용하기(포스팅 박스)
1) 포스팅박스 열기/닫기 기능을 붙여보기
[코드스니펫] 스파르타피디아 URL
http://spartacodingclub.shop/web/movie
(1) 완성된 모습 먼저 보기
'영화 기록하기' 버튼을 누르면 숨겨진 창이 나타나고, '닫기'를 누르면 없어집니다.
(2) 포스팅 박스 열기 버튼에 function을 달기
function open_box(){
alert('열린다!')
}
function close_box(){
alert('닫힌다!')
}
영화 기록하기
닫기
(3) 클릭 해서 포스팅 박스를 여닫게 하기
포스팅 박스에 id 값을 주기 (이미 가지고 있음!)
05. Quiz_JQuery 연습하기
1) ✍두 개를 같이 연습해야 빨리 늘어요!
👉 30분 정도 각자 해보고, 튜터와 함께 풀이해봅시다!
(퀴즈 코드의 빈 칸을 채워서, 완성본으로 만들기!)
[코드스니펫] 퀴즈 완성본보기
http://spartacodingclub.shop/ajaxquiz/00_0
Q. 퀴즈 코드
👉 파일을 하나 만들고 아래 코드를 붙여넣어 주세요.
[스파르타코딩클럽] 웹개발 종합반 - 2주차 12
[코드스니펫] Jquery 퀴즈
jQuery 연습하고 가기!
jQuery + Javascript의 조합을 연습하자!
1. 빈칸 체크 함수 만들기
1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기
[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기
클릭
2. 이메일 판별 함수 만들기
2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기
2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기
[완성본]2-3. 이메일 도메인만 얼럿 띄우기
클릭
3. HTML 붙이기/지우기 연습
3-1. 이름을 입력하면 아래 나오게 하기
[완성본]3-2. 다지우기 버튼을 만들기
이름 붙이기
다지우기
세종대왕
임꺽정
A. 완성 코드
[스파르타코딩클럽] 웹개발 종합반 - 2주차 13
[코드스니펫] Jquery 퀴즈(완성)
jQuery 연습하고 가기!
jQuery + Javascript의 조합을 연습하자!
1. 빈칸 체크 함수 만들기
1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기
[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기
클릭
2. 이메일 판별 함수 만들기
2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기
2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기
[완성본]2-3. 이메일 도메인만 얼럿 띄우기
[스파르타코딩클럽] 웹개발 종합반 - 2주차 14
클릭
3. HTML 붙이기/지우기 연습
3-1. 이름을 입력하면 아래 나오게 하기
[완성본]3-2. 다지우기 버튼을 만들기
이름 붙이기
다지우기
세종대왕
임꺽정
06. 서버-클라이언트 통신 이해하기
1) 서버→클라이언트: "JSON"을 이해하기
서울시 OpenAPI에 접속해보기
[코드스니펫] 서울시 OpenAPI
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
[코드스니펫] Jsonview
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko
JSON은, Key:Value로 이루어져 있습니다. 자료형 Dictionary와 아주- 유사하죠
👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고,
그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
2) 클라이언트→서버: GET 요청 이해하기
[스파르타코딩클럽] 웹개발 종합반 - 2주차 15
👉 API는 은행 창구와 같은 것!
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.
* GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회
* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
이 중에서 오늘은 GET 방식에 대해 배워보겠습니다. (POST는 4주차에 배웁니다)
GET
기생충
"폐 끼치고 싶진 않았어요" 전원백수로 살 길 막막하지만 사이는 좋은 기택(송강호) 가족. 장남 기우(최우식)에
게 명문대생 친구가 연결시켜 준 고액 과외 자리는 모처럼 싹튼 고정수입의 희망이다. 온 가족의 도움과 기대
속에 박사장(이선균) 집으로 향하는 기우. 글로벌 IT기업 CEO인 박사장의 저택에 도착하자 젊고 아름다운 사
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
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로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"
07. Ajax 시작하기
[스파르타코딩클럽] 웹개발 종합반 - 2주차 16
1) Ajax 시작하기
크롬 개발자 도구에 다음과 같이 써보세요
👉 참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.
즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에
러가 뜹니다.
Uncaught TypeError: $.ajax is not a function
→ ajax라는 게 없다는 뜻
[코드스니펫] 미세먼지 OpenAPI
http://spartacodingclub.shop/sparta_api/seoulair
[코드스니펫] Ajax 기본 골격
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
Ajax 코드 해설
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 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 값에 서버의 결과 값을 담아서 함수를 실행한다.
👉 결과가 어떻게 response에 들어가나요? → 받아 들이셔야 합니다..!
(대부분의 개발자들도 내부 원리는 코드를 안 뜯어봐서 몰라요.^^;;)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response)
[스파르타코딩클럽] 웹개발 종합반 - 2주차 17
}
2) Ajax 통신의 결과값을 이용해보기
위에서 했던 Ajax 통신을 발전시켜볼게요!
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
개발자도구 콘솔에 찍어보기
$.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);
}
}
});
복습할 때 참고! - 해설) 모든 구의 미세먼지 값을 찍어보기
1. 미세먼지 데이터가 어디에 있는지 찾기
위 그림과 같이 RealtimeCityAir > row 에 미세먼지 데이터가 들어있습니다. 이걸 꺼내볼까요?
$.ajax({
type: "GET",
[스파르타코딩클럽] 웹개발 종합반 - 2주차 18
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function(response){
let mise_list = response["RealtimeCityAir"]["row"]; // 꺼내는 부분!
console.log(mise_list);
}
})
2. 반복문으로 구 데이터를 출력해보기
row의 값을 mise_list에 담았으니, 반복문을 이용해보겠습니다!
$.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];
console.log(mise);
}
},
});
3. 구 데이터에서 구 이름, 미세먼지 수치를 골라내어 출력하기
구 이름 키 값인 "MSRSTE_NM", 미세먼지 수치 키값인 "IDEX_MVL"의 밸류를 출력
$.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);
}
[스파르타코딩클럽] 웹개발 종합반 - 2주차 19
}
});
08. Ajax 함께 연습하기
1) 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기
[코드스니펫] Ajax 기본 골격
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
[코드스니펫] 미세먼지 OpenAPI
http://spartacodingclub.shop/sparta_api/seoulair
[코드스니펫] Ajax 연습
jQuery 연습하고 가기!