[내일배움단] 웹개발 종합반 2주차 (feat. 스파르타코딩클럽)

웹개발 2주차

 

처음부터 시원하게 함수로 시작했다. 

함수 function

Let 

 

마우스 버튼을 클릭했을 때 알림 창 띄우기. 

 

Body에서 button 부분에 한번 클릭하면 hey라는 함수가 실행되도록 명령어를 쓴다.

그 뒤 script로 올라와서 함수를 지정해 준다. 

 

한번 클릭하면 짝수입니다 홀수입니다 알림이 뜨는 설정이다. 

 

기호는 += 는 1개씩 늘어나면 이라는 뜻이고, 

== 는 같다는 뜻이다. 등호 한개는 이미 사용되고 있기 때문에 두 개를 써야 한단다. 

% 2는 2로 나눈다는 의미 이다. 

 

오늘은 JQuery와 Ajax에 관해 몰아쳐서 배웠다. 

내가 쪼개서 안 듣고 미뤄서 발생한 일이므로 할 말은 없지만, 

1시간짜리 강의에 8시간을 투자했다. 

 

그 기록을 남겨볼까 한다. 

 

1. JQuery 

 

HTML을 조작하는  JAVAScript를 미리 짜둔 것.

= 라이브러리 

 

마치 부트스트랩처럼 만들어진 걸 가지고 오면 되는 건가보다.

 

옛날에는 브라우저마다 코드가 달라서 제이쿼리가 각광받았다고 한다.

 

 

스파르타코딩클럽에서 사전에 준 코딩스니펫에 제이쿼리 코드가 포함되어있었다. 

이걸.. 작성하라고 하면 못한다. 무조건 복붙이다.

 

자주 쓰는 JQuery 

 

1. Input 박스 값 가져오기

 

가져오려면 지칭할 수 있어야 한다. 

 

CSS는 class로 지칭해주었다.

JQuery는 id라고 지칭해준다. 

 

사전에 붙여 넣었던 url박스 코드에서 id값이 지정되어있는데, 이를 더 쉬운 url이라고 고쳐서 새로고침 한다.

 

매번 새로고침을 할 수 없으므로 콘

제이쿼리 기본형

솔창을 열어서 하나씩 입력해보았다. 

 

Id url에다 제이쿼리를 적용하고 싶고, 입력을 하고 싶다 라는 값을 넣고 싶다고 쓴 것이다. 

$로 시작하고 id로 지칭된 것 앞에 #을 붙여준다. val은 value.. 

 

반대로 value값을 불러올 수도 있다

$(‘#url’).val() 이라고 치면 값을 불러다 준다. 

 

url박스를 감췄다가 보였다가 할 수도 있단다. +_+

 

우선 파이참으로 다시 가서 

mypost로 지정해준 박스에 id값을 부여한다. Post-box라고 하였다. 

 

새로고침 후 다시 크롬의 콘솔창을 열어서 거기서 작업해본다.

(번거로움을 줄이기 위해서라고 하는데, 몇 시간 뒤 혼자 해본 삽질에 이런 이유를 바로 납득하게 된다. )

 

그냥 $(‘#post-box’).hide() 라고 쳤는데 상자가 사라졌다… 

 

그렇다면, 보여주기는 show. 

 

위 화살표 누르면 똑같이 기록되는데 hide를 show로 고치면 된다. 

 

이 기능을 어디에 쓰냐면, 

 

영화 기록하기 버튼을 눌렀을 때 Show 하면 되고, 

닫기를 눌렀을때 hide 하면 된다. 

 

…! 

 

일단 고것을 안 보여 주시니.. 다음. 

 

카드 쪽에 이번에는 card-box라고 id 값을 지칭해준다. 

 

저장 후 구글 콘솔로 가서 

 

let temp_html =`` 

이라고 써주는데, 

 

이때 뒤에 백틱을 써준다. 

작은따옴표가 아닌 물결 표시가 있는 왼쪽 상단의 키를 누르면 된다.

shift키를 누른 채 누르면 물결표가 뜨지만 그냥 누르면 작은따옴표와 비슷하게 생긴 백틱이 쳐진다. 

 

 

그 백틱안에 버튼을 만든다는 html 코드를 썼을 때는 아무 일도 일어나지 않았지만,

제이쿼리를 써주니 페이지 안에 버튼이 구현되었다.

 

이제 카드를 여러 장 붙여 넣고 싶을 때는 어떻게 하냐면, 

 

let으로 불러온 temp_html 안에 카드 코드 (부트스트랩에서 복붙 했던 코드 중 낱개)를 전부 복사해서 붙여 놓고 엔터를 친다. 

 

그 후 제이쿼리 코드로 append(temp_html) 이라고 해주면 적용이 되어 

기존에 4개밖에 없던 카드란 하단에 한 개 더 생긴 것을 볼 수 있다. 

 

이제 카드를 붙여 넣었으니,

여기에 제목이 들어갑니다 와 같은 변수를 내가 원하는 것으로 바꿔줄 수 있어야 한다. 

 

카드 안에 영화 제목을 넣고 싶다면, 

먼저 mytitle을 소환해주고, 하고 싶은 영화명을 넣어준다. 이때는 작은 따옴표를 썼다.

이렇게 구현된다.

그런 뒤에 temp_html을 소환해서 카드 코드를 붙여 넣은 뒤, card-title이라고 되어있는 뒷공간 “여기에 내용이 들어가지요”를 지워주고, 그 안에 ${mytitle}을 집어넣는다.

나는 뒤에 온점을 안 지워서 타이틀 뒤에 점이 콕콕 박혔다. ㅋㅋㅋ 

 

그다음 제이쿼리 append(temp_html)을 써서 페이지 내에 카드를 구현시켜보면

타이틀이 바뀌어 있는 것을 알 수 있다.

 

콘솔이 편했던 건.. 썼던걸 기억하고 있다가 띄워줘서 

실수해도 지우고 다시 쓸 때 편했다. 

 

이것도 외우는 것은 아니고

개발자 분들도 가끔 찾아서 하기도 한다고 한다. 

 

어떻게 구동되는지만 알고 있으면 활용할 수 있을 것 같다.

 

드디어 아까 말했던 기록하기 누르면 뜨고, 닫기 누르면 없어지는 기능을 배워본단다 +_+

 

 

 

우선 스크립트 안에 함수를 만들어 준다. 

 

복붙 해서빠르게 쓰려고 했는데 줄이 안맞아서 ㅋㅋㅋ   cmd option L을을 한번 눌러줬다. 

 

그다음 button이 쓰여있는 body 쪽에 와서  onclick 을 open_box()로 지정해준다. 

그다음 onclick 을 그대로 복사해서 하단에 닫기 버튼에 붙여넣는다붙여 넣는다.

 

이걸 저장해서 그대로 실행해보면 

영화 기록하기 버튼을 눌렀을 때는 박스 열기라는 알림이 뜨고, 

닫기 버튼을 누르면 박스 닫기 라는 알림이 뜬다. 

 

여기에 제이쿼리를 입혀서 실제로 박스가 보이고 닫히는 움직임을 넣는 것이다. 

 

먼저 코드가 잘 작동되는 것을 확인했으니,

alert을 지우고, 그 자리에 제이쿼리 코드를 넣는다.

아까 배웠던 show와 hide를 이용한다.  

 

그러면 닫기 누르면 없어지고, 영화 기록하기 누르면 박스가 생긴다. +_+

 

처음에는 없는 상태여야 하기 때문에, css로 작성했던 .mypost 하단에 display : none;이라고 써주면

처음부터 박스가 보이지 않는 상태의 페이지가 뜬다. 

 

JQuery 연습해보기 (제이쿼리와 자바스크립트 조합)

 

1. 빈칸 체크 함수 만들기 

 

If 구문 + 알림 띄우기 + 제이쿼리 적용하기

스파르타 코딩 클럽에서 제공한 사이트의 빈칸에 글자를 쓰고  클릭버튼을 누르면 쓴 글자 알림이 뜨게 하고, 

아무것도 안 쓰고 클릭을 누르면 입력하세요 라는 알림이 뜨게 하는 것이 첫 번째 과제다. 

 

힌트에 답이 다 있는 줄 알았지만, let value라고 value를 불러오는 것을 하지 못하여 실패한 숙제… 

if를 쓰거나 alert을 쓰는 것이 잘못된 줄 알고 노트를 보면서 찾아가면서 했다. … (삽질의 서막..)

 

2. 이메일 판별 함수 만들기 

 

클릭 버튼을 눌렀을 때 입력받은 이메일로 알림을 띄우는데, @가 없는 이메일이 아닌 글자라면, ‘이메일이 아닙니다’라는 알림을 띄우면 된다. 

최종은 이메일 도메인만 알림을 띄우도록 한다. 이메일이 아닌 것을 쓰면 알림이 뜨지 않고 인식도 안 되는 것으로. 

 

 

이번에는 힌트에  includes를 사용하라고 쓰여있는데 이것은 구글링을 습관화하기 위한 전략이라고 ㅋㅋㅋ

강의는 1시간짜리여도 이렇게 중간에 퀴즈가 있으니 이걸 또 온종일 하게 된다며 ㅋㅋㅋ (삽질 끝판왕 등장) 

 

이메일 형태가 아니라 @ 만 들어있어도 클릭 버튼 누르면  쓴 글 그대로 알림 창을 띄워줬다…

이런 답을 원한 게 아닐 텐데..

 

그다음 힌트를 보니 더욱더 머릿속이 복잡해짐.. 

 

info@gmail.com에서 split을 이용하여 @를 중심으로 두 부분으로 쪼개서 인식하게 해야 한단다… 

 

머릿속이 뒤죽박죽… 

 

쿼리를 지금 배우고 있는데, 거기서 나눠서 명령해서 결괏값을 띄웠던 기억이 새록새록 안 난다.

망… 

 

30분만 연습해보랬는데, 이미 머릿속이 백지장이다. 

구글링을 했더니, 기존에 수업을 들었던 사람들의 블로그만 주르르륵 떠서 몹시 당황 ㅋㅋㅋㅋ 

Developer.mozilla.org에 들어와서 찾아가면서 해보기로 했다. 

뭔 말인지 잘 모르겠지만. 

아니… 너무 어려워서 금방 포기. 

정답을 써둔 블로그를 피해서 다시 구글링을 했다. 

 

침착하자… 

 

정답 창을 쭉 살펴보면, 

이메일이 아닌 글을 쓰면 이메일이 아닙니다 라는 알림 창이 뜬다. 

 

 

이메일이 아닙니다

 

 

여기에 @만 붙여보면, 

아무 말이없는 알림창이 뜬다. 

 

이메일 도메인에 맞게 쓰기 전에 아무 말이나 써보았다.. 

그게 뜬다. ㅋㅋㅋㅋ

 

제대로 이메일 형태를 쓰면 도메인의 이름이 뜬다. 

네이버면 네이버, 지메일이면 지메일 

 

그러니까, split을 써서 @을 중심으로 나눈 뒤에 @이 뒤에 있는 주소중 “.” 온점이 찍히기 전까지를 알림으로 띄워주는 것인가 보다. 

 

(아 갑자기 배가 고프네.. 고등학생 때 수학 문제를 풀며 받은 고통이 다시 살아나는 느낌… ㅋㅋㅋ )

 

검색을 해보니, 대에에충, includes는 말 그대로 문자열을 포함하고 있는가를 검증하는 거고, 

split은 나누는 건데,

 

문과생은 도저히 이거를 친절하게 설명해둔 웹사이트를 찾지 못하였다. 

ㅋㅋㅋㅋ 

다들 본인이 알아먹기 쉽게 올려놓으신 것이 아닌가… ㅋㅋㅋㅋ 

나도 블로그를 나보려고 쓰듯 막 쓰기 때문에..

 

 

Let 써서 이메일 값에 제이쿼리를 적용시킬 거고.

결과적으로 알림은 무조건 뜬다. 

 

그 안의 내용이 바뀌게 되는 건데,

 

@를 포함하고 있으면 이메일, @를 포함하지 않으면 이메일이 아닌 거다.

만약 이메일이 아니라면 이메일이 아닙니다 라는 알림을 띄운다. 

 

이메일이라면, @를 기준으로  쪼개서 그 뒷부분을 알림 창에 띄우는데, 

온점 위치 전까지의 도메인을 알림창에 띄운다.  

 

이렇게만 하면, @뒤에 아무 말도 없을 때는 아무것도 없는 창이 뜨겠지..? 

 

이걸… 코드화 하면 되는데… 끙… 

 

다시 한번 정리를 해보자. 

 

@를 포함하는 글은 이메일이고, @를 기준으로 뒷부분 온점이 찍히기 전까지의 도메인을 알림에 띄운다. 

@가 포함되지 않은 글은 이메일이 아니라서 ‘이메일이 아닙니다’라는 알림을 띄운다. 

 

이걸 코드로 작성을 하면… 

 

이메일은 @를 포함하고 있어야 하니까… 

 

Let email = $(‘#input-q2).val()을 시작으로…

If (email.includes(‘@)) { let domain = email.split(‘@‘); alert(domain [1]) } 

 

이렇게 하면 일단 @가 들어간 문장에 대해서는 뒷부분을 띄워준다. 

문제는. com이라고 하면 그것도 나옴… 

그걸 또 잘라서 앞에서만 나오게 해달라고 해야 되나 보다…

근데 점을 안 찍고 뭐라고 썼을 때 뒷부분이 쭉 알림에 떠야 한다.  

그러니까 점을 포함하고 있는 뒷 도메인에 대해서 점을 기준으로 앞쪽만 알림을 띄운다고 해야 하나…

점점 요지경이다… 

If 안에 if 가 되나…? 

 

또… 지정을 해줘야 되나; 

이번엔 뭐라고 하지… ㅠ 

흠… dot이라고 할까.. (제대로 삽질 중) 

 

이렇게 썼더니, naver.com을 쓰면 알림이 두 번 뜬다…

한 번만 띄우고 싶은데 ㅠㅠㅠ 

 

난 분명히 문제를 이해했는데 ㅋㅋㅋ 왜 답이… 헷갈리지..? 

글로 쓰면 명확한 게 코드로 쓰려니 아직 어렵다. 

한 시간째 씨름 중…

분명히 간결한 방법이 있을 터인데..

 

 

마침내...!

 

 

드디어 완성 ㅠㅠ

 

지난 시간에 배웠던걸 다시 들여다봤다. 

노트해놓길 잘했지 ㅠㅠ

 

배운 대로 하게 출제했을 텐데 엉뚱한 곳을 뒤지고 있었다며 ㅋㅋㅋ

 

split은 점으로 구분하면 중복해서 쓸 수 있었다. 

 

괜히 if를 한번 더 쓰려고 하고 난리 치는 대신, 

깔끔하게 @으로 나눈 것에서 1번째, .으로 나눈것에서 0번째라고 한 것을 출력하기로 했다. 

 

else는 더 쉬웠다. 그냥 뒤에 alert만 넣으면 되니까. 

 

휴… 배고프다.. 

 

아직 신에게는 두 문제가 더 … ㅋㅋㅋㅋ 

 

강사님의 해설을 보니, 정말 금방 된다..

 

게다가 난 콘솔로 True false 테스트를 하지 않고 직접 몸빵을 했더랬다. 

이렇게 하지 말라고 하셨는데… ㅋㅋㅋㅋㅋ 

 

사전에 true false체크는 필수인듯 하다

 

3. HTML 붙이기/ 지우기 연습 

 

이름을 입력하면 아래에 뜨게 하고, 다 지우기 버튼을 만들어서 다 지울 수도 있어야 한다. 

 

오 여기에 두 문제가 붙어있다. 

게다가 힌트에 다 답이 있어서 시키는 대로 했더니 잘 구현된 것을 확인할 수 있었다. 

 

근데 앞에서 뇌가 너무 띵해서 이게 잘 기억이 날지 모르겠다며.. ㅋㅋㅋㅋ

 

제이쿼리는 $(‘#…’).명령어()  이 공식만 이해하면 다 괜찮을 듯…

 

…에 들어갈 html 코드나, 명령어 뒤에 들어가는 () 안의 내용물이 길어서 헷갈리지만 않는다면 

쉽게 … 

 

확답을 못하겠다 ㅋㅋㅋㅋㅋ 

 

temp_html 작성할 때 백틱을 잊지 않은 것만 해도 정말 다행이다.

 

어쨌거나 마지막 미션은 허무하게 끝났다. 

 

 

서버 - 클라이언트 통신 이해하기 

 

드디어 서버에 왔다 서버. 

 

학교교육에서 배운 적 없어서 너무 낯선 단어.. 

 

서버에서 데이터를 내려주는 형태를 알기 위해서

일단은 스파르타코딩클럽에서 제공한 서울시 Open API를 복붙 했더니 엄청난 양의 코드들이 쏟아졌다. 

지난번에 봤던 그 미세먼지 정보값인가보다정보 값인가 보다.

 

혼돈의 카오스 미세먼지 API값

 

이걸 좀 더 간결하게 정리시켜서 보기 위해서는 크롬을 확장해야 하는데 

그게 바로 이 프로그램인가보다. 이것도 스파르타코딩클럽에서 제공한 링크를 타고 들어가서 설치했다. 

 

설치하고 나면 광명찾는다

 

잠시 뒤 새로고침을 한번 했더니 아주 간결하게 정보값을 볼수 있었다. 

나름 일목요연한 형태로 정리해서 볼 수 있어서 속이 다 후련했다. 

 

크롬을 확장하는건 때때로 매우 중요하다

 

 

서버에서 데이터를 받아오기 위해 요청해야 하는데, 

서버에 요청하기 위해서 필요한 것이 API이다.

 

API는 은행 창구 같은 역할을 한다고 한다. 각 창구마다 하는 역할이 다르듯 API도 역할이 있다. 

같은 창구에서도 고객에 따라 처리하는 게 달라질 수 있듯 API도 다양한가 보다..

 

API는 여러 타입이 있지만 그중에서도 GET , POST 이 두타입만 알면 된단다. 초보자는. 

 

GET은 데이터 조회(read)를 요청할 때 쓰는 타입

POST는 데이터 생성 (Create) 변경 (Update) 삭제(Delete)  요청할 때 쓰는 타입. 

이번 주는 GET 방식에 대해서 배우고 POST는 4주 차에 나온단다.. 

 

뭔가를 검색하기 위해 검색어를 쓰고 엔터를 치는 행위 역시도 GET 방식이라고 한다. 

 

기생충 NAVER 영화 페이지를 예로 들면서 설명해주셨는데 

 

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

 

movie.naver.com이라는 어떤 컴퓨터에 movie/bi/mi/basic.naver이라는 창구에서 

code번호 161967을 들고 갔다 라는 의미란다. 

 

서버와 클라이언트의 약속에 의해서 요청할 때 코드값을 담아서 주면, 원하는 페이지를 출력해준다는 원리인 셈이다. 

값을 여러 개 가져갈 때는 &로 연결해준다. 

그렇다면 자바스크립트에서는 어떻게 서버에 요청을 하는가? 

 

Ajax라는 것을 활용한다. 

Json에도 적응을 해야겠지.. 파이썬 받아쓰기할 때 본 확장자다..! 

전에 만들었던 영화 기록하기 페이지를 펼치고 파이 참 파일도 index 파일을 열었다. (사실 난 끈 적이 없다..)

 

스파르타코딩클럽에서 기본 골격이라며 제공한 Ajax 코드스니펫을 스크립트 자리에 붙여넣기 해주었다.

 

기본 Ajax 골격 (뼈대)

 

Url 자리에 오늘 연 서울시 미세먼지 정보 값이 담긴 링크 주소를 넣으면 되는데, 지난번 링크와 다르게 스파르타 코딩클럽 컴퓨터 서버에 저장되어있는 정보인가 보다.

 

이 코드의 의미는 GET 방식으로 이 URL에 요청해서 response를 찍어주겠다 라는 것이다. 

저장한 뒤 구글 검사 창의 콘솔 탭을 열어보면 정보 값이 쭉 떠있는 것을 알수 있다. 

 

이 정보에서 RealtimecityAir의 row값을 가지고 오고 싶다면, 

Response 자리에 써주면 된단다. 

 

무수히 많았던 정보들 중에서 정말 딱 요것만 가지고 왔다. 

 

이 정보값이 필요했던 이유는, 각 구별 미세먼지 수치를 간단하게 찍어주기 위해서였다.

은평구, 200 이런 식으로.

 

 

콘솔 로그는 싹 지우고,  

let으로 rows 라는 이름으로 지칭해준 뒤에, 

For 구문을 써서 작성해보았다. 

아직 외우지 않아도 된다는데..

이미 외울 여력은 없다; 

아까 구글링 하면서 본거 같기도 하다. 

아주 자주 등장하는 패턴이라고 하니 자주 쓰면 익혀질 건가 보다.. 그랬으면.. 

 

 

다시 구 이름을 지정해주고, rows의 i 번째의 MSRSTE_NM의 정보 값을 써주면 된다.

미세먼지 정보도 가지고 오고 싶으니 그것도 이름을 지정해주고 rows의 i번째의 IDEX_MVL 을 기입한다.

 

오타가 날 수 있으니 가급적 복사 붙여 넣기를 한다.

괄호도 정확하게 체크하는 것이 중요하다. 

 

실수를 줄이려면 복붙이 좋지만, 

지금 창이 여러 개 떠있어서 몹시 정신이 없는 중 ㅋㅋㅋ 

모니터 2개로 커버가 안 되는 중이다.. 

 

단축키끼리도 충돌한대서 맥 자체에서 단축키를 쓰고 있진 않고 프로그램 단축키만 쓰고 있다. 

화면이 예쁘게 분할되어 있어도 눈이 빠질 거 같아서 그냥 널브러뜨려놓고 쓰는 중..

 

마지막으로 콘솔로그로 지정해준 두개를 찍어주면 된단다. 

콘솔에서의 결과값

 

 

오… +_+ 

 

이 숫자는 강사님의 숫자와는 다르단다. 실시간이라서..

 

오… +_+

 

이 정보는 이제 콘솔에다가 찍을 건 아니고, 

웹페이지에 적용하기 위해서니까 

그걸 한번 배워 본단다. 

 

오 +_+ 

 

힘들지만 괜찮아 

 

하루에 강의 8개만 들을 수 있게 해 놓은 것에는 이유가 있었던 거 같다.. 

ㅋㅋㅋㅋ 

 

이제 ajax01 파일을 만들어서 실시간으로 집계되는 미세먼지의 정보와 새로고침 버튼을 통해 계속 업데이트하는 페이지를 구현해 볼 예정이다. 

 

(그렇지만 난 조금 쉬고 싶다.. 눕고 싶다.. ) 

 

역시나 준비된 코드스니펫을 복붙해서 실행시켜보았더니 간결한 웹페이지가 떴다. 

 

퀴즈의 여파가 아직 남아있어서 움찔했지만 ㅋㅋㅋ

 

스파르타코딩클럽에서 준 코드스니펫을 복붙복붙하니, 업데이트 버튼을 눌렀을때 콘솔에 결과가 뜨는 것을 알수 있었다. 

 

Ajax 기본골격에 url은 아까 썼던 거 그대로 여서, 복습한 셈. 

 

붙여 넣는 것도 다 똑같은 거 같아서 이번에야말로 복붙을 해야 하는 거 아닌가 싶지만 

한번 더 해봐야 느는 거…

 

모니터가 두개여도 소용없는 중

 

괄호를 잘 봐야겠다.

가끔 오류가 뜰 때가 있는데 항상 괄호로 잘 묶어주지 않아서 생기는 오류였던 듯.. 

 

이제 저 결괏값을 콘솔에 찍어줄게 아니라 사이트에 적용해야 하므로 

temp_html을 만들어서 적용시켜주어야 한다. 

 

이렇게 하면 결괏값이 사이트에 적용이 되는 것은 좋은데, 

업데이트 버튼을 누를 때마다 하단에 계속 새롭게 생성되어 스크롤 압박이 시작된다 ㅡㅡ. 

 

그래서 지우고 붙이기를 해야 하므로 상단에 empty를 써준다. 

 

최종 ajax 코드

empty를 붙여주면 ajax 콜 하기 전에 한번 지우고 ajax콜을 한다. 

처음에 뜨는 기본값으로 붙여 넣어진 문자 구이름 문자 미세먼지 수치는 지워주도록 하자. 

Body 란에 예쁘게 쪼로미 있으니 드래그 삭제. 

 

한걸음 더 나아가서 120보다 높은 곳은 빨간색이 뜨도록 설정한다는데, 

오늘 미세먼지는 너무 좋다. … 

 

겨우 두 자리 꽉 채우는 곳이 젤 나쁜 거 같은데 ;; 

 

그래서 나는 50이 넘지 않는 곳을 초록색이 되도록 만들어 보려고 한다. 

즉석에서 응용…!

if와 else가 헷갈리지만 않으면…!

 

이게 강사님이 작성하신 원래 코드인데, 

나는 좀 바꾸어 보겠다. 

 

우선 CSS에 good이라고 만들고 green 컬러로 설정할 것이다. 

 

그런다음 ajax 하단에 저 골격을 살짝 뒤집어서 써보겠다며 야심차게야심 차게.

 

범위를 50이 아니라 40으로 바꾸어야겠다. 오늘 미세먼지 정말.. 없구나.. 

이런 날 나가야 되는 건데… 

 

맨 위에 썼던 줄을 지우고 if절만 남겨보았다. 

 

그랬더니 뭐가 꼬였는지 구동이 안됐다. 

알고 봤더니 좀 교통정리가 필요했다. 

(-99는 대체 뭘까..)

 

여러 번 중복해서 쓸 필요가 없어서 다 지워버렸는데, 

상단에는 let temp_html= ``을 남겨두고 

 

하단에 let을 지워야 한다. 

 

최종 사이트 결과값과 코딩값

 

이걸 쓰면서 새롭게 알게 된 건데, 나름 꿀팁이다.

맥북 유저라면 알고 있을 수도 있고, 

나처럼 몰라서 당황하는 경우도 있을 듯하다. 

맥북의 경우 백틱과 원화표시가 번갈아가면서 등장해서 당황했다. 

영문일 때는 백틱, 한글일 때는 원화로 나왔으니 참고하자. (To. 미래의 나에게..)

 

 

이번에는 따릉이 데이터! 

 

아… 오늘 따릉이 각인데.. ㅠㅠ 

안 탄 지 너무 오래됐다.. ㅠㅠ 

180일권 끊어놓고.. 며칠이나 탔던 건지 원.. ㅠㅠ 

 

암튼 다시 돌아온 무시무시한 퀴즈의 시간. 

강의 내용은 7분이 채 안된다. 

내가 이 조그마한 문젯거리를 안고 몇 시간을 고민해서 그렇지.. ㅠ 

 

엉덩이가 아프다 ㅋㅋㅋ

 

 

따릉이의 정보를 가져와서, 어떤 대여소에 몇 대가 있는지 데이터를 일목요연하게 볼 수 있는 웹페이지를 구현해 보려고 한다. 

 

방법은 미세먼지 사이트와 같다. 

 

ajax 골격에서 url을 붙여 넣고, 이름 지정해주고 제이쿼리로 불러와서 

데이터를 불러와서 출력하겠다는 명령어를 써주고, 필요에 따라 CSS로 색상을 조절하면 된다. 

 

스파르타코딩클럽에서 준 기본 코드 페이지에 ajax 골격을 가지고 왔다. url은 따릉이 open API로 바꿔주고, 

콘솔에 우선 결괏값을 먼저 띄워보기 위해 콘솔 로그 처리를 해줬다. 

 

붙여 넣기를했을 경우 괄호를 잘 살펴야 한다. 콘솔에서 오류가 났다고 알려주니까 오류가 없어질때까지 정확하게. 

 

어쨌든 이런 데이터가 불러와졌고, 여기서 필요해 보이는 것이 getStationList와 row, 삼각형을 하나 열어서 안까지 살펴보면 stationName과 rackTotCnt 정보 값이 필요하다는 것을 알 수 있었다. parkingBikeTotCnt 도 필요하고. 

 

이것을 한번 코드에 넣어서 for 구문까지 써보겠다. 그래봐야 전에 했던거 보고 쓰겠지만.. 

 

웹페이지를 보면 거치대 위치가 스테이션 네임일 거 같은데 뭐라고 지정하면 될까.. 

거치대수가 rackTotCnt, 현재 거치된 수가 parkingBikeTotCnt 인거 같다. 색상은 현재 거치된 실시간 따릉이 수에 맞게 변하면 되겠네.. 

 

잘 나오는지 콘솔로그로 확인을 먼저해야해먼저 해야 해.

 

For 구문은 아직은 힐끗 구문이다…
for (let i = 0; i <rows.length; i++) {} 이건대…

정말 기억나질 않아서 힐끗.. ㅋㅋㅋ 콤마도 없고 그냥 쭉 쓰면 되는 건데.. 참내. 

 

어쨌든 let으로 지정해주고 서버 데이터를 불러온다고 한 뒤 콘솔 로그로 결괏값을 확인해보면 장소와 장소별 거치 숫자들이 뜬다. 

 

이걸 홈페이지에 구현해야 하기 때문에 이제 temp_html 해야지 

계속 붙으니까 위에 empty도 빼먹지 말고. 

 

이제 5대보다 적은 곳을 빨갛게 만드는 것을 적용해 보겠다. 

아직 순서도 서툴고, 뭘 어떻게 불러와야 할지 백지장이 된다. 

보고 따라 해 보고, 자연스럽게 될 때까지 연습을 해야 할 듯..

 

이게 최종 코드와 결과값 출력 장면

 

 

이제 이미지를 불러와서 뭘 해본단다.. 

끝나간다 ㅠㅠ 

1시간짜리 강의를 지금 8시간째 듣고 있다.. 

 

이제 귀엽고 재밌는 걸로 버튼을 클릭하면, 이미지도 바뀌고 하단에 문자도 바뀌는 걸 해보자고 하신다. 

힘내자..

정말 체력이 중요하겠다 싶네. 

 

르탄이 나와 버튼을 누르면 이미지가 바뀌고 자막이 바뀌는 거구나

이미지는 귀엽다 ㅋㅋㅋ 

 

 

ajax03.html 파일을 만들고, 02에서 ajax골격을 복사해 오쟈.

필요 없는 건지우고, url을 갈아낀 후에 콘솔로그로 반드시 정상 구동 되는지 확인을 해야 한다. 

 

메시지와 이미지를 바꾸는 게 핵심이다. 

 

이미지는 

$(“#아이디값”).attr(“src”, 이미지 URL);

텍스트는

$(“#아이디값”).text(“바꾸고 싶은 텍스트”); 

 

가 공식이라고 한다. 

 

르탄이 나와 사이트의 최후 코딩과 영화보는 르탄이

let으로 야무지게 불러다 앉혀놓고, 적용시키는 것이 중요하다. 

 

그 와중에 귀엽다 르탄이.

 

이제 마지막 숙제 ㅠㅠ 10분 ~15분 걸린다고 ㅠ 

후…

 

숙제 

 

현재 기온이 실시간으로 업데이트되도록 만드는 것. 

날씨 API 참고해서 서울 값을 적용시키자. 

 

버튼이 눌렀을 때 뜨는 게 아니고, 늘 떠있는 것임. 

로딩이 되면 무조건 뜨는 걸로. 

 

그래서 로딩이 뜨면 alert이 뜨는 걸 알려주고 숙제를 하도록 한다고 한다. 

숙제는 지난번 만들었던 팬명록에 지금 현재 서울시의 기온을 붙여 넣는 것이었다.

 

Ajax 골격에 url 갈아 끼고,

숙제를 내주면서 손봤던 span id 영역 부분에 그냥 제이쿼리만 적용하면 되는 것이었다.

 

결과물은 바로

현시각 서울은 31.3도다

 

 

오늘도 일지를 복붙 하고 말았다.. 

찾아보니 개발자분의 블로그는 뭔가 정보전달은 되지만 그 말을 내가 이해할 수는 없는 것이 많았다. 

이글도 그 글들 중 한 개가 되겠지만, 그들은 알고 쓴 거 나는 모르고 쓴 것의 차이이다. 

난 정말 모르고 쓰는 거라 강사님의 말씀 하나하나를 놓치는 건 돈이 줄줄 세는 느낌.. ㅋㅋㅋㅋ 

 

어쨌든 오늘 꽤 많은 것을 배웠고, 예정된 일정에 맞게 강의를 들었기 때문에 일단 좀 눕자..