선발대

[스파르타] 웹 프로그래밍 A-Z 기초 2주차 (완강) 본문

스파르타코딩클럽/강의 정리

[스파르타] 웹 프로그래밍 A-Z 기초 2주차 (완강)

신선한 스타트 2021. 12. 15. 00:41

1. 수업 후기

 

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

 

 2주차 강의를 시작하기 전부터 엄청 간단한 실수 2개를 했다. 알고리즘 1주차 강의를 듣고 다시 웹 개발 2주차로 돌아왔는데, 어제만 해도 잘 열리던 파일이 다 깨지고 코드 첫 줄부터 몇 백개의 에러가 생긴 것이다. 구글링해도 나보다 복잡한 문제의 해결방법뿐이었다. 한 30분부터 고민하다가 순간 html 코드를 .py 확장자에서 연 것을 깨달았다. 둘 다 PyCharm으로 편집하다 보니, 자연스럽게 기존에 하던 방식을 이어서 하게 되는데 주의해야겠다.

 

 두 번째는 코드의 색이 알록달록하지 않고 무채색으로 작성되었던 부분이다. 강의 들으면서 내 화면은 왜 이러지 하고 또 구글링 했는데 대부분 원하는 코드의 색으로 변경하거나 테마를 바꾸는 내용만 나와서 덕분에 새로운 지식만 늘었다. 팀원 질문방에 올렸는데 어떤 분이 Ctrl + Alt + s 로 설정창에서 글씨 디폴트 변경하는 법 알려주셨다. 감사.. 그리고 해결방법은 구버전에서 신버전 PyCharm으로 변경하는 것이었다. 예전에 컴퓨터에 PyCharm Community 낮은 버전을 다운로드하였는데 이번에 거기에서 열리다 보니 화면이 다를 수밖에 없었다. 

 

 

강의 속 화면
내 화면
[해결] 최신버전 화면

 

 

 수업내용 정리하고 강의 듣는 시간을 포함해서, 총 완강시간 7시간 걸렸다. jQuery 라는 생소한 개념이 초반에는 어려웠는데 마지막으로 갈수록 점점 익숙해졌다. 2주차 마무리 과제도 간단했고, 3주차 파이썬 크롤링은 2주차보다 더 쉽다고 하니 정말 다행이다. 막상 강의는 하나에 5분 정도인데 이렇게까지 오래 걸릴 줄은 몰랐다. 

 

 예전에 API라는 단어를 어렴풋이 들었는데 내가 직접 사용해보니 신기했다. 이게 이렇게 쓰는구나, 홈페이지는 이런 코드가 있구나 라며 수업 듣는 동안 새로운 것들을 알 수 있어서 좋았다. 수업을 들으면서도 계속 이전 내용을 잊어서 다시 처음으로 돌아가서 재수강했는데, 막상 다 수강하니 어떻게든 할 수 있을 것 같다는 생각이 들었다. 매일 수업 시간에 고통받다가 어찌어찌 한 주차의 수업을 끝내면 갑자기 후련해지고 긍정적으로 변하는 것 같다. 나중에 또 잊어버리고 여기로 찾아올 것 같지만 언젠가는 손에 익을 것이라고 생각한다. 아직 갈 길이 태산이니 다음 수업도 화이팅~

 

2. 수업내용 정리

 

2-0. Ajax 패턴 정리

 

강의에서 각 코딩 결과는 달라도 주요 기능이 반복되어 한 번 더 정리했다.

안 하면 나중에 또 처음부터 공부해야 되니까 화이팅~

일단 자료는 2-9. Quiz_Ajax 연습하기(1) 를 참고했다.

 

 

원하는 화면

 

 

1. 따릉이 OpenAPI 에서 필요한 변수와 위치를 찾는다.

 

 

2. Ajax 가 포함된 코드에서 작성한다. 

 

  • <head> 태그 안에 아래의 코드 포함시킨다.
  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  • 여기에서는 코드 스니펫이 있어서 주요 기능만 구현하게 되었다.

 

3-1. 업데이트 버튼을 누르면 함수가 작동하도록 구현한다.

 

  • 업데이트 버튼에 'q1'이 있으므로 <script> 태그의 function q1()에서 작성한다.
<button onclick="q1()">업데이트</button>

 

<script>
	function q1() {
    
    $.ajax({
	type: "GET", 
	url: "http://spartacodingclub.shop/sparta_api/seoulbike", // 따릉이 OpenAPI
	data: {},
	success: function(response){ 
		console.log(response['getStationList']['row']) // 콘솔창에서 잘 나오는지 체크 1
	}
	})
}
</script>

 

 

 

3-2. 변수의 위치를 찾고, for 문으로 한 줄씩 읽어오면서 필요한 변수들을 받아온다.

 

  • 최종 버전을 기준으로 하자면, for문에는 변수 할당, if문, html 이어 붙이기 3가지 기능이 들어간다.

 

<script>
	function q1() {
    
    $.ajax({
	type: "GET", 
	url: "http://spartacodingclub.shop/sparta_api/seoulbike", // 따릉이 OpenAPI
	data: {},
	success: function(response){ 
    
    	let rows = response['getStationList']['row'] // 필요한 변수들의 위치
        
        for (i = 0; i < rows.length; i++) {
        	let name = rows[i]['stationName']
        	let rack = rows[i]['rackTotCnt']
        	let bike = rows[i]['parkingBikeTotCnt']
            
            console.log(name, rack, bike) // 콘솔창에서 잘 나오는지 체크 2
	}
	})
}
</script>

 

 

 

3-3. temp_html를 이용해서 받아온 변수들을 붙여주는 작업을 한다.

 

  • 기존의 데이터를 지워주는 작업도 같이 진행함
<script>
	function q1() {
    
    $('#names-q1').empty() // 기존 데이터 지워주는 코드 
    
    $.ajax({
	type: "GET", 
	url: "http://spartacodingclub.shop/sparta_api/seoulbike", // 따릉이 OpenAPI
	data: {},
	success: function(response){ 
    
    	let rows = response['getStationList']['row']
        
        for (i = 0; i < rows.length; i++) {
        	let name = rows[i]['stationName']
        	let rack = rows[i]['rackTotCnt']
        	let bike = rows[i]['parkingBikeTotCnt']
            
            let temp_html = `<tr> 
                           		<td>${name}</td>
                            	<td>${rack}</td>
                            	<td>${bike}</td>
                        	</tr>`
                            // 원하는 형태로 작성해준다. 백틱(`) 잊지마!
            $('#names-q1').append(temp_html) 
            # 변수를 기존 데이터에 붙여주는 작업
            # 샵(#) 잊지마!                  
	}
	})
}
</script>

 

 

4. 자전거 5대 이하인 곳을 빨갛게 만든다. 

 

  • <style> 에 class 하나 생성. (.urgent)
  • if문으로 조건을 만족하면 클래스 적용하고 else 에는 기존 코드 사용
  • 그럼 제일 처음 화면과 같은 결과물 완성!
<style>
	.urgent {
    color: red;
    }
</style>


<script>
    function q1() {
        $('#names-q1').empty()
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/seoulbike",
            data: {},
            success: function (response) {
                let rows = response['getStationList']['row']
                for (i = 0; i < rows.length; i++) {
                    let name = rows[i]['stationName']
                    let rack = rows[i]['rackTotCnt']
                    let bike = rows[i]['parkingBikeTotCnt']
                  
                    if (bike < 5) {
                        temp_html = `<tr class = "urgent"> // 백틱 조심
                    <td>${name}</td>
                    <td>${rack}</td>
                    <td>${bike}</td>
                </tr>`
                    } else {
                        temp_html = `<tr>
                    <td>${name}</td>
                    <td>${rack}</td>
                    <td>${bike}</td>
                </tr>`
                    }
                    $('#names-q1').append(temp_html)
                }
            }
        })
    }

</script>

 

 

2-1. 2주차 오늘 배울 것
더보기
더보기

01. 오늘 배울 것 이야기 - 2주차: jQuery, Ajax

 

  • 수업목표: HTML 파일을 받았다고 가정하고 Javascript로 다시 서버에 데이터 요청 및 받는 방법 습득
  • jQuery를 이용해서 Javascript로 HTML을 쉽게 제어하고, Ajax를 이용해서 다시 서버에 데이터 요청 및 받기.

 

02. Javascript 잠깐 복습 - 홀짝 판별 onclick 함수 만들어보기

 

## 짝, 홀수 판단하는 법

let even = 4;
console.log(even % 2); // 2로 나눈 나머지가 0입니다.
let odd = 5;
console.log(odd % 2); // 2로 나눈 나머지가 1입니다.


## 짝/홀수 onclick 함수(완성)

<script>
	let count = 1;
	function hey() {
		if (count % 2 == 0) {
			alert('짝짝짝👏');
		} else {
			alert('홀홀홀🎅');
		}
		count += 1;
	}
</script>

 

03. Javascript만으로 충분할까요?

 

  • jQuery 있으면 더 편리하다. ex) 버튼색 변경, div 박스 하나 감추기

 

2-2. jQuery 시작하기
더보기
더보기

01. jQuery 란?

 

  • jQuery: 라이브러리. HTML 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것.
  • 특별한 소프트웨어가 아님. 전문 개발자들이 미리 짜둔 코드를 가져와서 사용하는 것일뿐. '임포트' 필요.
  • Javascript도 모든 기능 구현할 수 있지만, 굳이? 코드도 복잡하고 브라우저 간 호환성 문제도 고려 필요.

 

## Javascript (길고 복잡함)
document.getElementById("element").style.display = "none";


## jQuery (직관적)
$('#element').hide();

 

02. jQuery 사용하기

 

  • 임포트: 미리 작성된 Javascript 코드 가져오는 것.
  • Google CDN: 아래 코드를 <head> 태그 사이에 넣으면 됨.
  • 이미 부트스트랩 코드에는 추가되어있기 때문에 따로 조작 안해도 됨.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

2-3. jQuery 다뤄보기
더보기
더보기

01. 자주 쓰는 jQuery들 다뤄보기

 

  • jQuery는 외우는 것이 아니라 필요할 때마다 구글링해서 쓰는 것.

 

## input 박스의 값을 가져오기

# CSS에서는 class가 이름표였는데 jQuery에서는 id가 이름표임
# mypost 안의 id 간단하게 url로 변경했음
<input type="email" class="form-control" id="url" placeholder="name@example.com">

# 홈페이지로 돌아와서 조작이 쉽게 콘솔창에서 작업함
# #'url': id = "url"에 jQuery를 적용할 것임
# 어떻게 적용할 것인가: val('...') ...의 value를 입력하고 싶음
$('#url').val('입력을 하고 싶다')

# 반대로 홈페이지의 영화 URL 칸에 입력된 value를 가져오고 싶다면 이렇게
$('#url').val()



## div 보이기/숨기기
# mypost에도 post-box라는 id 부여
# 저장 후 아래를 홈페이지 콘솔창에서 입력
$('#post-box').hide() 
$('#post-box').show()



## 태그 내 html 입력하기
# wrap 안의 card에도 card-box라는 id 부여
# 콘솔창에 아래 입력
let temp_html = `<button>나는 버튼이다</button>
# `: 백틱, `...`: 문자열, html 아니므로 html화 시켜주는 jQuey 사용해야 함. 아래 계속
$('#cards-box').append(temp_html)
# 계속 복사해서 입력하면 버튼이 주르륵 생김
# temp_html에 카드 한 장의 코드를 입력해도 같은 방식으로 늘어남

 

2-4. jQuery 적용하기 (포스팅 박스)
더보기
더보기

01. 포스팅 박스 열기/닫기 기능을 붙여보기

 

  • 영화 기록하기 버튼 누르면 박스 열림:
  • <body> 버튼에 onclick = "open_box()" 추가
  • <script> function open_box(){ $('#post-box').show() }
  • 닫기 버튼 누르면 박스 닫힘:
  • 마찬가지로 close_box()로 만들기
  • 새로고침 했을 때 박스가 없는 상태면 좋겠다:
  • <style> mypost 에서 display: none; 입력

 

2-5. Quiz_JQuery 연습하기
더보기
더보기

01. [실습] 두 개를 같이 연습해야 빨리 늘어요!

 

원하는 기능

 

<script>
function q1() {
    let input1 = $('#input-q1').val();
    // js는 한 줄마다 ; 으로 마무리
    if (input1 == ''){
        // 바로 val() == '' 쓰면 안되는구나
        alert('입력하세요!');
    } else {
        alert(input1);
        // 여기에도 바로 val() 쓰면 안되는군
    }
}

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



function q2() {
    let input2 = $('#input-q2').val();
    if (input2.includes('@')) {
        alert(input2.split('@')[1]);
        // 파이썬 print랑 헷갈렸는데, js에서 print 하면 인쇄페이지 뜬다
    } else {
        alert('이메일이 아닙니다.');
    }
}

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



function q3() {
    let txt = $('#input-q3').val();
    let temp_html = `<li>${txt}</li>`
    // 백틱 ` 잊지마!!
    $('#names-q3').append(temp_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)을 이용하면 굿!)



function q3_remove() {
    $('#names-q3').empty();
}

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

</script>

 

2-6. 서버 - 클라이언트 통신 이해하기
더보기
더보기

01. 서버 → 클라이언트: 'JSON'을 이해하기

 

  • Jsonview : 서울시 OpenAPI 간편하게 보기 위한 확장프로그램
 

JSONVue

Validate and view JSON documents

chrome.google.com

  • JSON은 딕셔너리와 유사하게 key: value 형태로 이루어져있음
  • key 중 row에는 리스트형 value가 입력되어있음.

 

02. 클라이언트 → 서버: GET 요청 이해하기

 

  • 서버에 요청한다는 것은 은행창구에 요청하는 것과 비슷함. 즉, API는 은행창구 같은 것.
  • 개인, 기업고객이 다른 것처럼 클라이언트가 서버에 요청할 때도 '타입'이 있음.
  • 1. GET: 일반적으로 데이터 조회(Read) 요청할 때 ex) 영화목록 조회
  • 2. POST: 일반적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때
  • ex) 회원가입, 회원탈퇴, 비밀번호 수정
  • 오늘은 POST 강의임.

 

  • ex) https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
  • 물음표 기준으로 서버주소, 영화정보 순임.
  • code 이름으로 영화정보를 넘기자 -> 프론트, 백엔드 개발자가 사전에 정해둔 것

 

  • GET 방식으로 데이터 전달방법:
  • ? : 여기서부터 전달할 데이터가 작성된다.
  • & : 전달할 데이터가 더 있음

 

  •  ex) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
  • google.com의 search 창구에 검색어, 브라우저 정보, 인코딩 정보를 전달함

 

2-7. Ajax 시작하기
더보기
더보기

01. Ajax 시작하기

 

  • Ajax는 jQuery 임포트한 페이지에서만 동작 가능
  • Uncaught TypeError: $.ajax is not a function : Ajax 없다는 뜻 (jQuery 임포트 필요)
  • Ajax 기본 골격:
$.ajax({
	type: "GET", // GET 방식으로 요청한다.
	url: "여기에URL을입력", // 요청할 URL
	data: {},// 요청하면서 함께 줄 데이터 (GET 요청시에는 비워두기)
	success: function(response){ // 성공하면 response 값에 서버 결과값을 담아서 함수 실행
		console.log(response)
	}
})

 

  • GET 요청: url 뒤에 붙어서 데이터를 가져감
  • ex) http://naver.com?param=value&m2=value2 
  • POST 요청: data: {}에 넣어서 데이터 가져감
  • ex) data: { param: 'value', param2: 'value2' }

 

02. Ajax 통신의 결과값을 이용해 보기

 

  • 모든 구의 미세먼지 값 찍어보는 방법:
  • 1. 미세먼지 데이터 위치 찾기 (RealtimeCityAir > row 안에 덩어리로 주르륵 있음)
  • 2. 반복문으로 구 데이터 출력하기 (row 값을 mise_list에 담고 이걸 반복문 통해 한 줄씩 읽기)
  • 3. 구 데이터에서 구 이름, 미세먼지 수치 변수를 찾아서 출력하기 (키 값을 찾아서 밸류 출력)

 

$.ajax({ // GET 방식으로 Url에 요청해서 response을 찍어주겠다는 의미
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/seoulair",
            data: {}, // 요청하면서 함께 줄 데이터 (GET 요청 시에는 비워두기)
            success: function(response) { // 서버에서 준 결과는 변수 response에 담음
                // console.log(response['RealtimeCityAir']['row'])
                
                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']
                    console.log(gu_name, gu_mise)
                }
            }
        })

 

2-8. Ajax 함께 연습하기
더보기
더보기

01. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기

 

원하는 화면

 

 <style>
  	.bad {
    color: red;
    }
 </style>
  
  <script>
        function q1() {
            $('#names-q1').empty() // 새로운 값 넣기 전에 지우기
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulair",
                data: {},
                success: function (response) {
                    // console.log(response['RealtimeCityAir']['row'])
                    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'];

                        // console.log(gu_name, gu_mise)

                        let temp_html = '' // 먼저 정의해준다

                        // 업데이트 누르면 새로운 값이 계속 등록됨
                        // 80 넘는 곳은 빨간 색으로 표시해줌
                        if (gu_mise > 80) {
                            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>

 

2-9. Quiz_Ajax 연습하기 (1)
더보기
더보기

01. [실습] 서울시 OpenAPI(실시간 따릉이 현황)을 이용하기

 

원하는 화면

 

<style>
	.urgent {
    color: red;
    }
</style>

<script>
        function q1() {
            $('#names-q1').empty()
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {
                    let rows = response['getStationList']['row']
                    for (i = 0; i < rows.length; i++) {
                        let name = rows[i]['stationName']
                        let rack = rows[i]['rackTotCnt']
                        let bike = rows[i]['parkingBikeTotCnt']

                        let temp_html = `` // (백틱임)
                        if (bike < 5) {
                            temp_html = `<tr class = "urgent"> // 백틱 조심
                            <td>${name}</td>
                            <td>${rack}</td>
                            <td>${bike}</td>
                        </tr>`
                        } else {
                            temp_html = `<tr>
                            <td>${name}</td>
                            <td>${rack}</td>
                            <td>${bike}</td>
                        </tr>`
                        }

                        // let temp_html = `<tr> // 백틱 조심
                        //     <td>${name}</td>
                        //     <td>${rack}</td>
                        //     <td>${bike}</td>
                        // </tr>`
                        
                        $('#names-q1').append(temp_html)
                    }
                }
            })
        }
        
    </script>

 

2-10. Quiz_Ajax 연습하기 (2)
더보기
더보기

01. [실습] 랜덤 르탄이 API를 이용하기

 

  • 다양한 API로 실제로 서버에 콜을 보내서 데이터를 받고 우리 웹 사이트에 활용할 수 있게 되었음.
  • 이미지 바꾸기: $("#아이디값").attr("src", 이미지URL);
  • 텍스트 바꾸기: $("#아이디값").text("바꾸고 싶은 텍스트");

 

    <script>
        function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rtan", // 르탄이 API
                data: {},
                success: function (response) {
                    let url = response['url'] // url 받아오기
                    let msg = response['msg'] // text 받아오기

                    $('#img-rtan').attr('src', url) // 이미지 바꾸기
                    $('#text-rtan').text(msg) // 텍스트 바꾸기

                    }
            })
        }

    </script>

<body>
<div class="question-box">
    <button onclick="q1()">르탄이 나와</button>
    <div>
        <img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
        <h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
    </div>
</div>
</body>

 

2-11. 2주차 끝 & 숙제 설명
더보기
더보기

01. 팬명록에 날씨 정보 추가하기

 

[완성본] 팬명록 제목 밑에 현재 기온이 적혀있음

 

<head>
<script>
        $(document).ready(function () {
            // 로딩이 완료되는 즉시 Ajax 콜해서 데이터를 가져옴
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    let temp = response['temp']
                    $('#temp').text(temp)
                    }
            })
        });
</script>
</head>


<body>
<div class="mytitle">
    <h1>IVE(아이브) 팬명록</h1>
    <p> 현재기온: <span id="temp">00.0</span>도 </p> 
</div>
</body>

 

'스파르타코딩클럽 > 강의 정리' 카테고리의 다른 글

[스파르타] 웹 프로그래밍 A-Z 기초 5주차 (완강)  (0) 2021.12.16
[스파르타] 웹 프로그래밍 A-Z 기초 4주차 (완강)  (0) 2021.12.16
[스파르타] 웹 프로그래밍 A-Z 기초 3주차 (완강)  (0) 2021.12.15
[스파르타] 자료구조, 알고리즘 1주차 (완강)  (0) 2021.12.14
[스파르타] 웹 프로그래밍 A-Z 기초 1주차 (완강)  (0) 2021.12.13
'스파르타코딩클럽/강의 정리' Related Articles more
Comments