스파르타코딩클럽 웹개발 왕초보 종합반 2주차 개발일지

by

스파르타코딩클럽 웹개발 왕초보 종합반 2주차  정리!

2-1 2주차에 배울 내용

Javascript 복습, JQuery, Ajax

 

2-2 Javascript 복습

1주차에서 만들었던 나홀로 메모장에서 버튼을 클릭하면 팝업창이 뜨는 내용을 가지고 복습을 했음.
클릭 횟수에 따라 짝수입니다! 홀수입니다!가 출력되도록 설정 해보았슴.

2주차 2강 Javascript 복습

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

 

2-3 JQuery 시작하기

눌렀을때 창이뜨거나, 가려지도록 자바스크립트를 통해 심어둔다. 하지만 자바스크립트는 길고 복잡해서 사용하는것이 JQuery이다. (미리 작성된 자바스크립트 코드, import를 안하면 사용 할 수 없다.)

 

2-4 JQuery 다뤄보기

부트스트랩 템플릿에는 이미 JQuery가 적용 되어있다. 부트스트랩 템플릿을 사용하지 않고 시작하는 경우 헤더쪽에 아래 내용을 삽입해줘야한다.
(부트스트랩이란 미리 만든 CSS를 모아둔 곳이다.)

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

부트스트랩 템플릿은 아래 내용과 같다. (스파르타코딩클럽 제공)

부트스트랩 시작 템플릿
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous">
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>

 

Hide, Show

ID값을 주고, 크롬-검사-consol을 통해 hide 하여 숨기기 show를 통해 숨긴것을 다시 보이게 할 수 있다.

아래 내용을 실할 할 때는 반드시 파이썬을 통해 ID값을 입력후 사용해야 합니다!

크롬 consol을 통해 hide
$(‘#ID값’).hide()

크롬 consol을 통해 show
$(‘#ID값’).show()

폭(widhth) 확인 및 변경

ID값을 주고, 폭(width) 값을 확인하거나 변경 할 수도 있다. 단, 변경은 일시적이다.

크롬 consol을 통해 폭 확인
$(‘#ID값’).css(‘width’)
크롬 consol을 통해 폭 변경
$(‘#ID값’).css(‘width’, ‘변경원하는값px’)

display 값 가져오기

display 값 가져오기
$(‘#ID값’).css(‘display’)

버튼에 있는 텍스트 이름 바꾸기

버튼 이름
$(‘#ID값’).text(‘원하는이름’)

HTML 붙이는 방법

1. 붙이고 싶은 곳에 ID값을 준다.
2. let temp_html = `원하는값 을 넣어준다.`
(버튼을넣고 싶으면 <button>버튼이름</button> or 원하는 값이 있다면 복사해서 넣어주면 된다.)

HTML 붙이기
let temp_html = `원하는값 을 넣어준다.`
3. $(‘#ID값).append(temp_html) 입력
버튼 이름
$(‘#ID값’).append(temp_html)

temp_html 속 제목 바꾸기

1. let title = ‘원하는 제목‘

버튼 이름
let title = ‘원하는 제목‘
2. 기존에 제목이 ‘여기 기사 제목이 들어가죠’ 인데 원하는 제목으로 바꿔준다.
제목바꾸기

<div class="card">
    <img class="card-img-top"
         src="https://cdn.shopify.com/s/files/1/1749/5899/articles/Best-Gifts-For-Tennis-Players-Epirus-Blog-min_1000x.png?v=1611551327"
         alt="Card image cap">
    <div class="card-body">
        <a href="http://naver.com/" class="card-title"> 여기 기사 제목이 들어가죠 → $(title) </a>
        <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
        <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
    </div>
</div>

 

2-5 포스팅박스 누르면 열리고 다시 누르면 닫히게 만들기

이전 강의에서 <script>부분에 적었던 내용을 삭제하고 새롭게 작성한다.

기존 내용
<script>
    let count = 1;
    function hey() {
        if (count % 2 == 0) {
            alert('짝수입니다!')
        } else {
            alert('홀수입니다!')
        }
        count += 1;
        // count 사라짐
    }
</script>
새로운 내용
<script>
    function openclose() {
        let status = $('#post-box').css('display');
        if (status == 'block') {
            $('#post-box').hide();
            $('#btn-posting-box').text('포스팅박스 열기');
        } else {
            $('#post-box').show();
            $('#btn-posting-box').text('포스팅박스 닫기');
        }
    }

</script>

처음부터 포스팅 박스를 닫혀 있는 상태로 만들고 싶다면
1. 포스팅 박스의 css를 찾는다.
2. css에 display : none; 을 입력해준다.

 

 

2-6 Quiz_JQuery 연습하기

아래 내용으로 연습하기 <script>부분에서 주석으로 나와있는부분을 채워넣으면 됩니다. (스파르타 제공)

JQuery 연습하기
<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>

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

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

        function q3() {
            // 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() {
            // 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
        }

    </script>

</head>

<body>
    <h1>jQuery + Javascript의 조합을 연습하자!</h1>

    <div class="question-box">
        <h2>1. 빈칸 체크 함수 만들기</h2>
        <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
        <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
        <input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
    </div>
    <hr />
    <div class="question-box">
        <h2>2. 이메일 판별 함수 만들기</h2>
        <h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
        <h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
        <h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
        <input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
    </div>
    <hr />
    <div class="question-box">
        <h2>3. HTML 붙이기/지우기 연습</h2>
        <h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
        <h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
        <input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
        <button onclick="q3()">이름 붙이기</button>
        <button onclick="q3_remove()">다지우기</button>
        <ul id="names-q3">
            <li>세종대왕</li>
            <li>임꺽정</li>
        </ul>
    </div>
</body>

</html>

전에 했던 퀴즈 문제는 혼자해서 힘들지만 해냈는데 이번껀 정말 어렵네요..
해설을 들으면서도 헤매고.. 코딩 포기할뻔..

이 부분은 나중에 외우는 수준으로 다시 복습을 해야겠습니다.

 

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

서버에서 클라이언트로 데이터를 내려줄때 JSON이라는 포멧이 있다.
크롬에서 Jsonview 라는것을 다운 받으면 미세먼지OpenAPI 형식의 내용을 보기 쉽게 해준다.

클라이언트에서 서버로 데이터 요청을 할때 종류가 있다. (GET, POST 등)
* GET – 데이터 조회를 요청할때
* POST – 데이터 생성, 변경, 삭제를 요청 할 때

 

2-8 Ajax 시작하기

Ajax는 JQuery를 임포트한 페이지에서만 작동을 한다.

JQuery 연습하기
$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  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'] 
        if (gu_mise < 70) {
        console.log(gu_name, gu_mise)}
    }
  }
})

 

2-9 Ajax 함께 연습하기

2-8강에서 공부했던 Ajax를 연습하는 강의!

<구별 실시간 미세먼지 수치 알아보기> 만들기!

서울시 오픈API 에서 원하는 정보를 가져와서 만든다.
강의에선 이름 + 미세먼지 수치 로 만들었고
if문, CSS를 이용해서 일정 수치 이상은 빨간색이 나오도록 했다.

 

2-10 Quiz_Ajax 함께 연습하기(1)

이번에는 따릉이 오픈API 를 이용해서 만들기.

2-9강과 매우 흡사 하지만 조금씩 다르다……

 

2-11 Quiz_Ajax 함께 연습하기(2)

고양이 Open API를 이용해서 이미지를 새로 받을 수 있는 페이지 만들기.

 

2-12 2주차 끝 & 숙제 설명

1주차에서 만들었던 숙제 페이지에다 원-달러 환율을 실시간으로 확인 할 수 있는 문구를 넣는것.

 

후기

2주차 강의가 정말 어려웠다. 숙제는 어찌저찌 해서 겨우겨우 해내긴 했는데 복습하지 않으면 늘지 않는것 같다.
공부를 오랜기간 안하다가 하려고 하니 머리도 많이 굳었고, 풀이를 보면 어느정도 이해는 되지만 실전에서 적용하는게 너무 어렵다.

반복적인 복습으로 익숙해 지는것 외에는 답이 없는것 같다.

2주차 강의를 이번주에 2번이상 다시 듣고 2번이상 스스로 해봐야 할 것 같다.

 

개발일지 List

1주차 개발일지

Leave a Comment