💻 2주차 개발일지

mingguriguri·2022년 3월 22일

[스파르타코딩클럽] 웹개발 종합반💻 개발일지

목록 보기

2/6

🧐 2주차

	오늘의 진도
1~5	jQuery
6	서버-클라이언트 통신
7~10	aJax

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

➡ 다음 수업목표에 따라 잘 따라갔는지 뒤에 회고해볼 예정이다!

(1) ~ (5) jQuery

jQuery

자바스크립트 라이브러리~

HTML요소를 조작하는 편리한 Javascript 미리 작성해둔 라이브러리

jQuery 사용하는 법

<head>에 추가!

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

jQuery는 css와 마찬가지로 "가리켜야" 조작가능!!

jQuery 다루기

모든 jQuery를 외울 필요는 없음. 필요할 때 필요한 기능 구글링하기

1. input 박스 값 가져오기

$('#url').val()
//css에서 class를 지칭하는 것처럼 jQuery에서는 id로 지칭
//예시
$('#url').val('입력을 하고 싶다')

2. div 보이기 / 숨기기
div부분에 id="post-box" 지칭 후
콘솔창에서

$('#post-box').hide()	//숨기기
$('#post-box').show()	//나타나게 하기

3. 태그 내 html 입력하기
콘솔창--
--let temp_html = <button> 나는 버튼이다 </button> //html이 아님 그냥 문자열

//html화 시켜주는 jQuery 기능 사용
$('#cards-box').append(temp_html)

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의 입력값을 가져온다.
            let value = $('#input-q1').val();
            // 2. 만약 입력값이 빈칸이면 if(입력값=='')
            if (value == '') {
                // 3. alert('입력하세요!') 띄우기
                alert('입력하세요!');
            } else {
                // 4. alert(입력값) 띄우기
                alert(value);
            }
        }

        function q2() {
            // 1. input-q2 값을 가져온다.
            let email = $('#input-q2').val();
            // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 찾아보자!)
            if (email.includes('@')) {
                // 3. info@gmail.com -> gmail 만 추출해서
                // 4. alert(도메인 값);으로 띄우기
                let domainWithDot = email.split('@')[1];
                let onlyDomain = domainWithDot.split('.')[0];
                alert(onlyDomain);
            } else {
                // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
                alert('이메일이 아닙니다.');
            }
        }

        function q3() {
            // 1. input-q3 값을 가져온다.
            let newName = $('#input-q3').val();
            if (newName == '') {
                alert('이름을 입력하세요');
                return;
            }
            // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${가져온 값}</li>`)
            let temp_html = `<li>${newName}</li>`;
            // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
            $('#names-q3').append(temp_html);
        }

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

(1) ~ (5) 느낀 점🤔💭

jQuery 연습하기 생각보다 어려웠다...

문제 1.
다 풀고나서 스파르타코딩클럽 강의자료에 있는 답안 참고하려다가 답안에는 문장마다 ;이 붙어있길래 그걸 쳤더니 제대로 실행이 되지 않았다.
처음엔 되던 함수가 그 이후부터 안 됐는데, 나는 무엇 때문인지 알지 못해 선생님의 강의를 들어야 했다. 들으면서 선생님이 쓴 코드와 나의 코드의 차이점이 ; 뿐이라는 걸 알고 지웠더니 해결.... 쏘 허무..

문제 2.
웬만한 건 혼자 완성을 했다. 그런데 3번만 아예 해결이 안 되는 것이었다. 강의자료 답안과도 답도 같았고, 선생님과의 답도 같았는데 도대체 뭐가 문제일까 머리를 쥐어싸맸다. 문제는 function q3() {} 에서 대괄호 }가 닫힌 상태에서 코드를 입력했던 것이었다. function q3() { } 대괄호 안에 작성해야 할 것을 밖에 작성하니 당연히 실행이 안 된다. 유의하자

리마인드 1. split() 함수
저번주 수업시간에도 했었지만 split()으로 또 쪼개고 할 수 있다는 것!!

ex. 이메일 입력받은 것(myemail)에서 도메인값만 추출

myemail.split('@')[1].split('.')[0]

리마인드 2. includes() 함수 사용

변수명.includes('찾고 싶은 문자')

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

JSON : 딕셔너리 + 리스트 합쳐진 형태 정도로 이해하기

클라이언트→서버: GET 요청
통상적으로! 데이터 조회(Read)를 요청할 때

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

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

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

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

(7) ~ (10) Ajax

Ajax 기본 골격

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

$ajax 코드 설명
- type : "GET" -> GET 방식으로 요청
- url : 요청할 url
- data : 요청하면서 함꼐 줄 데이터 (GET요청시엔 비워야 함)

ajax 01 - 미세먼지 수치 70이상인 곳 빨갛게 보이게 하기
ajax 02 - 실시간 따릉이 현황 이용하기
ajax 03 - 랜덤 르탄이 API 이용하기

이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

(7) ~ (10) Ajax 느낀 점 🤔💭

jQuery가 어려운 줄 알았는데 ajax가 더 어려운 것 같다. 일주일이 지났는데 벌써 ajax에 대한 개념을 까먹었다. 지속적인 복습이 필요할 것 같다. 이래선 내가 제대로 된 웹페이지를 개발을 할 수 있을지조차도 의문이 든다. (3/31)

과제

1주차에 완성한 팬명록에 날씨 정보를 넣어주세요!
로딩이 완료되면,날씨API을 이용해서 날씨를 표시해주세요.

▶과제 페이지 바로가기

코드

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>팬명록 만들기</title>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
         * {
           font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {

            height: 250px;
            width: 100%;

            /* 배경 어둡게 하기 :: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) */
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://pbs.twimg.com/media/DdzGr4dVwAMbc4M?format=jpg&name=4096x4096");
            background-position: center;
            background-size: cover;

            color: white;

            /*display: flex 내용물을 가운데로! 4줄이 세트*/
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .mypost {
            max-width : 500px;
            width: 95%;

            margin: 20px auto 0px auto;

            box-shadow: 0px 0px 3px 0px grey;
            padding: 20px;
        }

        .mybtn {
            margin-top: 10px;
        }

        .mycards {
            max-width : 500px;
            width: 95%;
            margin: 20px auto 0px auto;
        }
        .mycards > .card {
           margin-top: 10px;
        }

    </style>

    <script>
        $(document).ready(function () {

            $.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>태연 팬명록</h1>
        <p> 현재 기온 : <span id="temp">00.0</span>도</p>
    </div>

    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">닉네임</label>
        </div>


        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea" style="height: 100px"></textarea>
            <label for="floatingTextarea">응원 댓글</label>
        </div>

        <div class="mybtn">
            <button type="button" class="btn btn-dark">응원 남기기</button>
        </div>
    </div>
    <div class="mycards">
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 좋아요!</p>
                    <footer class="blockquote-footer"> 밍구</footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 좋아요!</p>
                    <footer class="blockquote-footer"> 밍구</footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 좋아요!</p>
                    <footer class="blockquote-footer"> 밍구</footer>
                </blockquote>
            </div>
        </div>
    </div>
</body>
</html>

수업 마무리

👍좋았던 점

다양한 종류로 실습하는 것이 좋았다. 강의가 컴팩트하다! 다음주에 파이썬과 데이터베이스를 둘 다 배운다는 점이 좋으면서도 단점이다.
빠른 만큼 새로운 걸 바로바로 습득하니까 알아간다는 느낌이 들어 좋았다.

👎아쉬웠던 점

강의가 너무 빨랐다. 다음주에는 파이썬을 한다는데, html부분을 제대로 익히지 못한 느낌이라 아쉽다. 복습을 많이 해봐야 할 것 같다.
jQuery와 Ajax를 좀 더 연습할 기회가 있었다면 좋았을 것 같다. 구글링을 강조하시는데 아직은 잘 감이 오지 않는다...
이 강의를 복습할 수 있는 시간이 별로 없는 것 같다. 강의를 4주동안밖에 못 들으니 다른 일을 병행하면서 공부하는 게 쉽지가 않다! 복습 시간용도로 기간을 2주정도로 늘려주면 더 좋을 듯하다.

추천? ⭐⭐⭐⭐☆

mingguriguri

To be "irreplaceable"

이전 포스트

💻 1주차 개발일지

다음 포스트