개발일지(with. SpartaCodingClub)-2주차

스파르타코딩클럽 웹개발 종합반 - 2주차

"배운 것"

-[수업목표]
1. Javascript 문법에 익숙해진다.
2. jQuery로 간단한 HTML을 조작할 수 있다.
3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

1. Javascript 문법 복습

1주차 수강내용 중에서 Javascript의 여러 함수 중 복습을 해보았다.

이 함수를 이용하여 저번에 만든 나홀로메모장 페이지에서 버튼을 눌렀을 때 '안녕!'이라고 뜨는 경고창을 이용해 홀수번째로 눌렀을 때는 '홀수입니다!'라고 뜨고, 짝수번째로 눌렀을 때는 '짝수입니다!'가 뜨도록 만들었다.

ㄴ. 홀수

ㄴ. 짝수

• 함수코드 입력 시 let 명령어의 위치가 중요하다.
  특히 위의 함수와 같은 경우 count 함수로 수를 세어서 계산해주고 그 값대로 작동해야 하는데 let 명령어가 function 아래로 들어가 있으면 버튼을 누를 때마다 횟수가 누적되어서 수를 셀 수 있는게 아니고 누르면 누를수록 함수가 자꾸 초기화가 되어서 결국에는 1만 세는 것으로 수를 세는 꼴이 아니게 돼버린다.
  그래서 꼭 let 명령어를 위의 사진과 같이 밖으로 빼내어 사용해야 버튼을 누르는 횟수가 누적이 되고 셀 수 있게 되어져서 기능이 작동하기 때문에 주의하도록 한다.

2. jQuery

편리한 Javascript를 미리 작성해 둔 것. (재단 이름이다.)
짧고 간단한 Javascript 코드를 모아둔 '라이브러리'라고 생각하면 간단! (CSS 에서의 '부트스트랩'과 같다고 생각하면 됨.)
미리 작성된 Javascript 코드.
따라서 미리 '임포트'를 하지 않으면 안됨!

• 주로, google CDN 을 미리 임포트 해둠. 아래와 같다.

지칭하기 위해 'id'라는 값을 씀.

---

<다뤄보기> : 주로, 페이지에서 검사창(개발자도구)의 console에서 작업함.

1) input 박스의 값을 가져와보기
나홀로메모장 페이지를 만들었던 코드에서 input 박스인 '아티클 URL'에게 id를 부여해 줌.
'article-url'로 이름을 지정해주고 개발자도구 console창에서 $('# 으로 시작하는 명령어를 입력함. # 뒤에는 지정한 id 이름을 넣어주고, 원하는 값(value)을 추출받으면 됨.

• 반대로 값을 넣을 수도 있음.
  val()의 괄호 안에 'ㅇㅇㅇ' 라고 원하는 값을 넣으면 페이지에서 내가 직접 그 페이지에서 입력하지 않았지만 값이 넣어진 것을 볼 수 있음.
  

2) 보이기/숨기기
마찬가지로 보이게 하고 숨기게 할 대상에 id를 지정해 준 다음, 개발자도구의 console창에서 작업.

post-box를 hide로 명령하면 숨기게, show라고 명령하면 보이게 함.

• CSS값을 가져오고, 동적으로 바꾸게 할 수도 있음.
  
  width 값을 가져오게 하고, 그 값을 바꾸면 페이지에서 지정한 박스의 크기가 바뀌는 것을 눈으로 확인해 볼 수 있음.

3) display 값 가져오기

CSS의 display 값을 가져오게 한 다음 hide 안보이게 했을 때, display 값을 다시 가져오면 none이라고 나옴. none 이라고 나온 것은 있는 거지만 눈에 보이게는 안되어 있다는 것.
이를 응용해서 나중에 페이지에서 클릭하면 보이게, 안보이게 할 수 있고 if문으로 만약 보이면 안보이게, 안보이면 보이게 이렇게도 해볼 수 있음.

4) 텍스트 입력하기
.text('ㅇㅇㅇ') 를 사용해 원하는 내용으로 텍스트도 바꿀 수 있음.
마찬가지로 먼저 내용을 바꾸고자 하는 부분에 id 이름을 지정해 준 다음 그 id를 개발자도구의 console 창에서 명령하고 바꾸려는 텍스트를 입력하면 됨.

직관적이라는 특징을 가지고 있음.

5) html 입력하기
페이지의 카드칼럼들을 동적으로 붙일 수도 있음.
그 전에 먼저 연습으로 버튼을 만들어 봄.

백틱. 작은 따옴표를 반대로 표시한 듯한 백틱을 사용해 명령을 함.
let temp_html로 사진의 윗줄과 같이 명령한 다음 cards-box id 이름을 불러내고 append를 사용해 temp_html 값을 내게 함.
그러면 좌측의 버튼들이 생김.

이제는 카드박스의 div를 코드에서 복사해 온 다음 백틱 사이에 붙여넣어 주고 버튼을 여러개 만들어냈던 것 처럼 명령하면 페이지에서 카드칼럼의 카드박스들이 동적으로 늘어나는 것을 볼 수 있다.

• 번외로 title을 바꿀 수 도 있음.
  

let title로 바꾸려는 내용을 명령하고 카드칼럼의 div코드를 다시 불러낸 다음 '여기 기사 제목이 들어가죠' 였던 부분에 ${title} 이라 바꾼 후 엔터치고 append로 여러개 불러내주면 바뀐내용으로 title을 가진 카드들을 볼 수 있음.

---

<적용하기> : 나홀로메모장에 적용해보기
앞에서 한번 말했던대로 포스팅박스를 버튼을 누름에 따라 보이게, 안보이게 설정해봄.

먼저 let status로 포스팅박스의 display 상태가 어떤 상태인지 확인하고, block인 상태를 확인했으면 그 박스를 안보이게 할 때는 버튼의 text가 '포스팅박스 열기'로 바뀌고 포스팅박스가 보여지고 있을 때는 버튼의 text를 '포스팅박스 닫기'로 바뀌게 하는 기능을 입력함.
그리고 더 활용성 있도록 포스팅박스가 애초에 먼저 보여지고 있지 않도록 CSS의 display를 none 값을 먹여줌.

그러면 위 사진 처럼 처음 페이지에서는 포스팅 박스가 안보이고 버튼의 text는 '포스팅박스 열기'로 보여짐.

이 버튼을 클릭하면, 아래 사진과 같이

포스팅 박스는 보여지면서 버튼의 text는 다시 '포스팅박스 닫기'로 바뀌게 됨.

만약 코딩하던 중간에 확인하면서 하다가 반대로 되었을 경우에는 당황하는 것이 아니라 계속 중간중간 어떻게 반응하고 있는지 확인해 가면서 바로바로 수정해주면 됨. 이 마인드로 작업해야 함을 잊으면 안됨.

---

<연습하기> : JQuery를 연습해보자.
예제1) 빈칸 체크 함수 만들기

[힌트]
1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
2. 만약 입력값이 빈칸이면 if(입력값=='')
3. alert('입력하세요!') 띄우기
4. alert(입력값) 띄우기

처음에 $('# .... ').val()의 값이 잘 추출되고 있는지 console.log()로 확인하는 작업을 하고 시작하면 좋다.
확인은 검사->개발자도구->console창에서 확인 가능.

이렇게 예제1) 에서는 txt를 사용했다.(잘 기억하자)
그리고 열려진 페이지에 가서 빈칸에 내용을 입력하고 개발자도구의 console창에서 잘 뜨는지 확인해주면 완료.

그 다음 아래 사진과 같이 명령 작업을 해주면 됨. 힌트내용을 참고하여,

그러면 빈칸인데 버튼을 눌렀을 때는

이렇게,
내용을 입력하고 클릭했을 때는

이렇게 잘 작동하고 있다.

예제2) 이메일 판별 함수 만들기

[힌트]
1. input-q2 값을 가져온다.
2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
3. [email protected] -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
4. alert(도메인 값);으로 띄우기
5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기

마찬가지로 작업을 시작하기에 앞서 console.log()로 확인을 해주고 시작하자.

근데 힌트에도 있듯이 includes를 이용하라고 하는데 이것은 구글링으로 알아보라고 한다. 구글링을 잘 활용할 것
구글링을 해봤는데 어려워서 일단 적용해보니
문제에서 요구하는 @가 있을 때와 없을 때를 includes('@')의 사용으로 console창에서 true/false로 확인 가능했다.

@이 있을 때는 true라는 값

@이 없을 때는 false라는 값을 내놓는다.
잘 되니 다음 순서를 작업해본다.

이메일을 입력했을 때 도메인 값을 얼럿해주기 전에 이메일이면 '이메일입니다'로, 이메일이 아니면 '이메일이 아닙니다'를 얼럿하도록 먼저 작업해보자.
이메일인지 아닌지의 구분은 앞에서와 같이 @의 유무이다.

이렇게 해주면

이메일을 입력했을 때 '이메일입니다'를 얼럿하고

이메일이 아닌 것을 입력했을 때는 '이메일이 아닙니다'를 얼럿함.

도메인을 추출해주는 명령어를 찾기 위해서 복습을 해본다.

사진의 밑줄쳐진 내용처럼 txt.split('@')[1].split('.')[0] 를 넣어주면 도메인만 값으로 추출해준다.

이렇게 작업해준다.
console창으로 확인해가면서 작업을 해야지 한번에 이렇게 될거다 라고 예상하고 다 작업한 다음에 어디서 오류가 났는지 찾아보면 안된다고 하심. 근데 console창 확인해가면서 해보는게 아직 많이 어렵다.

요구한대로 잘 작동한다.

예제3) HTML 붙이기/지우기 연습

[힌트]
1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = <li>${txt}</li>) 요렇게!
3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)

-1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)

역시 작업을 시작하기 전에 console창으로 확인해보고 한다.

중요! let temp_html을 쓸 때는 꼭 백팁을 사용!!
let temp_html = <li>${txt}</li>
이 명령어를 사용하여 작업해보면 되고
input의 txt값이 temp_html을 통해 그 txt의 값을 보여주게 하는 것이다.
console창으로 확인해보면 아래와 같다.

이제 $('#names-q3').append(temp_html)를 이용해 작업을 마무리하고
.empty()를 사용해서 다지우는 기능도 넣어준다. 아래와 같이

그러면 사진대로 잘 작동한다.

붙이기를 누르는대로 붙여지고 옆의 다지우기 버튼도 잘 작동함.

---

3. Ajax

서버통신의 마법.
Javascript 상관없이 서버에서 값을 받아오는 방법.
API = 창구
클라이언트한테 요구한 데이터를 서버가 내려줄 때의 포멧을 Json 이라고 함.
Json : dictionary{}와 list[]의 조합과 생김새가 똑같음.

---

API는 은행 창구와 같은 것!

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.

• GET → 통상적으로! 데이터 조회(Read)를 요청할 때
  예) 영화 목록 조회

• POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
  예) 회원가입, 회원탈퇴, 비밀번호 수정

이 중에서 오늘은 GET 방식에 대해 배워보겠습니다. (POST는 4주차에 배웁니다)

---

브라우저에서 주소창에 url 입력 후 엔터를 치는 행위가 GET요청과 같다고 함.

https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.

• 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
• 영화 정보: code=161967

movie.naver.com 은 은행지점명, movie/bi/mi/basic.nhn 은 창구이름이라고 생각하면 쉽다고 함.

GET 방식으로 데이터를 전달하는 방법

? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

     위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
     q=아이폰                (검색어)
     sourceid=chrome        (브라우저 정보)
     ie=UTF-8               (인코딩 정보)
     

여기서 잠깐, 그럼 code라는 이름으로 영화번호를 주자!는 것은
누가 정하는 것일까요?

→ 네, 바로 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속입니다.

프론트엔드: "code라는 이름으로 영화번호를 주면 될까요?"
백엔드: "네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"

<시작하기>
참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.

-. Ajax의 기본 골격
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})

위의 골격에서 response 부분에 내용(값)을 불러옴.

이런식으로 원하는 데이터 값을 추출해 낼 수 있다.
반복문으로 돌리고 그 안에서 if문으로 70미만의 값을 가진 애들만 보이게 한 것. 어렵다..

<연습하기>

Ajax골격 붙여넣고 미세먼지API 주소 넣고 ['RealtimeCityAir']['row'] 의 값들을 반복문 돌리게 함.
그러면 console 창에서 아래처럼 보여짐.

이제 구이름과 미세먼지 수치만 가져오게 만듦.
아래와 같이 보이게 됨.

여기서 이제 페이지에 값이 나오게 해야 함.

백팁을 사용해서 페이지에 나오고자 하는 값을 입력함.
역시 temp_html 사용.

확인해보니 잘 되고 있음.

페이지에서 보여지도록 append를 사용해주었는데 버튼을 누르면 붙여온데에 계속 붙여옴. 그래서 보기 안좋게 된다.
그럴 때는 지우고 다시 불러 올 수 있도록 empty()를 사용해주면 됨.

그랬더니 위 사진과 같이 잘 구동된다.
-. 심화) 빨갛게 보이게 하기. : CSS를 이용해보자.

이렇게 했더니

업데이트 버튼을 클릭하면 이렇게 빨갛게 데려옴.
근데 이제 조건을 달아 선택한 값에만 빨갛게 할 것임.

이것 처럼 백팁으로 빈칸 넣어주고, 수치가 40보다 크면 빨갛게, 아니면 원래대로 나오게 했음. (원래 강의에서 70보다 크면으로 하셔서 그렇게 했다가 아무리 해도 빨갛게 안되길래 뭐가 잘못됐나 한참을 찾아보다가..... 영상 촬영은 예전에 한 것이고 미세먼지 openAPI는 실시간 자료이니까 미세먼지 수치가 70을 넘는 값들이 없더라....... 그래서 나는 40으로 바꿔서 하니까 아주 잘 됨. 처음부터 안된 적 없고 잘 되고 있었던 것...ㅠㅠ)

이렇게!!!!!!!!!!

퀴즈1) 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기
앞에서 배운것들을 토대로 Ajax에 익숙해지기 위해 퀴즈를 풀어보았다.
코드의 일부분은 아래와 같다.

그러면 이렇게 페이지가 작동함.

퀴즈2) 랜덤 고양이 사진 API를 이용하기
Ajax 기본 골격을 이용하고 구글링을 통해서 필요한 명령어를 찾아낸 다음 고양이 사진이 버튼을 클릭할 때 마다 랜덤하게 등장하는 페이지를 만들어라.

이미지 url을 바꿀 때에 사용하는 jquery 명령어는 attr('src',ㅇㅇㅇ) 이었음.

그래서 이렇게 '고양이를 보자' 버튼을 클릭할 때 마다 랜덤 고양이 사진이 등장함.

"실수한 것"

1) JQuery 연습하기를 할 때 20분의 제한시간을 주셨는데 10분이 넘게 지나가도 1번 예제를 풀어내지 못했다.
그동안 강의를 수강하면서 듣고 배웠던 내용으로 어떻게든 해보려고 했는데 나는 힌트를 보고 너무 획일적으로 생각해서 힌트마다 해결해 내려고 하다가 아예 진도도 나가지 못한 상태였다.
그래서 나에게 20분이라는 시간은 의미가 없을 것 같아 헤매고만 있다가 강의를 계속 듣는게 나을 것 같아 강의를 통해 해답을 찾아내려고 했는데 힌트를 너무 각각 따로 작용하는 것으로 생각했던 것이 제일 큰 문제태도였고 잘 기억해서 활용해 먹어야 겠다고 다짐했다.
너무 아쉽다.

2) JQuery 연습하기의 예제3) 을 다 해뒀는데 자꾸 입력값만 늘어나는게 아니고 >이 꺽쇠가 같이 붙어서 늘어났음.
계속 찾다가 잘 살펴보니 백팁 사이에

${txt}

에서 마지막에 >꺽쇠가 하나 더 붙어있던 것!
발견하자마자 얼른 지워주고 다시 작동하니 잘~된다.....

3) Ajax 연습하기 위한 퀴즈1) 에서 혼자 console로 확인 잘 안하고 후루룩 해버렸더니 요구대로 되었으나 'tr' 칸 만드는 코드를 몰라서 애들이 가로정렬이 아니라 세로정렬로 나왔다...ㅎㅎ 머쓱

"앞으로 배울 것"

: 3주차에서 배울 예정인

1. 파이썬 기초 문법을 안다.
2. 원하는 페이지를 크롤링 할 수 있다.
3. pymongo를 통해 mongoDB를 제어할 수 있다.

에 대해서 배울 것이다.

# 번외 - 2주차 숙제

-. 1주차에 완성한 쇼핑몰에, 환율 정보를 넣어주세요!
로딩이 완료되면, 환율 API을 이용해서 환율을 표시해주세요.

로딩이 완료되면 자동으로 동작을 실행시켜주는 명령어
$(document).ready(function ()
을 사용해서 작업하였다. (힌트로 알려주심.)

매일의 환율을 가져다 보여주는 환율API이고, 빨간색 줄 쳐진 수치가 페이지가 로딩이 완료되었을 때 자동으로 값을 불러내와야 하는 것이다.

따라서 위 사진은 1주차 숙제로 작업했던 페이지의 일부인데 밑줄 쳐진 부분처럼 환율API의 수치가 적용되어 자동으로 나타내주고 있는 것을 확인하였다.