본문 바로가기
Coding

[스파르타코딩클럽] WEB 개발 종합반 - 2주차 개발일지

by 준아이덴티티 2022. 11. 22.
SMALL

 

 

 

 

 

 

  어느덧 '스파르타코딩클럽 웹개발 종합반'의 2주차가 종료되었다. 그리하여, 그간 2주차 때 받은 수업 내용과 느낀 점을 내 나름대로 간략히 요약해 써 보고자 한다.  

 

 

 

 

 

 

🌷수업 목표

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

 

 

 

jQuery란?

  HTML의 요소들을 조작할 때 편리한 Javascript를 미리 작성해둔 것. Javascript로도 모든 기능(예 - 버튼 글씨바꾸기 등)을 구현할 수는 있지만 코드가 복잡하며 브라우저 간 호환성 문제도 고려해야하기 때문에 'jQuery'라는 라이브러리가 등장하게 됨.

 

  jQuery는 Javascript와 다른 특별한 소프트웨어가 아닌 미리 작성된 Javascript 코드다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것이므로 쓰기 전에 꼭 'Import'해야한다고.

 

자바스크립트로 길고 복잡하게 쓰던 것을,
제이쿼리로 보다 직관적이게!

 

 

jQuery를 사용하려면?

 

 

 

  미리 작성된 자바스크립트 코드를 가져오는 것을 '임포트'라고 부른다.

jQuery CDN 부분을 참고해 임포트하기 : https://www.w3schools.com/jquery/jquery_get_started.asp

 

jQuery Get Started

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

 

  작업 중인 자료의 <head>와 </head> 사이에 아래를 넣으면 끝.

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

 

 

  css와 마찬가지로, jQuery를 쓸 때도 '가리켜야' 조작할 수 있다.

 

  CSS에서는 선택자로 class를 썼다면, jQuery에서는 id 값을 통해 특정 버튼/ 인풋박스/ div/ ... 등을 가리키게 된다.

 

 

input 박스의 값을 가져와보기
<div class="form-floating mb-3">
    <input id="url" type="email" class="form-control" placeholder="name@example.com">
    <label>영화URL</label>
</div>

// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();
// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');

 

 

div 보이기 / 숨기기
<div class="mypost" id="post-box">
    <div class="form-floating mb-3">
        <input id="url" type="email" class="form-control" placeholder="name@example.com">
        <label>영화URL</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
            <option selected>-- 선택하기 --</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
          style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>
// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();
// show()로 보이게 한다.
$('#post-box').show();

 

태그 내 html 입력하기
<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
    </div>
</div>

  <div> ~ </div> 내에 동적으로 html을 넣고 싶을땐(예를 들어, 포스팅되면 카드추가) 카드가 붙는 div에 id를 추가.

 

 

버튼을 넣어보기
let temp_html = `
<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);

 

 

버튼 말고, 카드를 넣어보기
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let title = '영화 제목이 들어갑니다';
let temp_html = `
<div class="col">
    <div class="card h-100">
        <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
             class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">${title}</h5>
            <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
            <p>⭐⭐⭐</p>
            <p class="mycomment">나의 한줄 평을 씁니다</p>
        </div>
    </div>
</div>`;
$('#cards-box').append(temp_html);

 

 

 

jQuery 적용하기(포스팅 박스)

 

포스팅 박스 열기 버튼에 function을 달기(아래 참고)
function open_box(){
alert('열린다!')
}
function close_box(){
alert('닫힌다!')
}
<button onclick="open_box()">영화 기록하기</button>
<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>

 

클릭해서 포스팅 박스를 여닫는 기능

포스팅 박스에 id 값 주기

<div class="mypost" id="post-box">
    <div class="form-floating mb-3">
        <input id="url" type="email" class="form-control" placeholder="name@example.com">
        <label>영화URL</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
            <option selected>-- 선택하기 --</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
<textarea id="comment" class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
          style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>

  

 

포스팅 박스 제어 기능

function open_box(){
$('#post-box').show()
}
function close_box(){
$('#post-box').hide()
}

 

post-box를 시작부터 감춰두는 기능 (css의 display:none 속성)

.mypost {
width: 95%;
max-width: 500px;
margin: 20px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray;
display: none;
}

 

 

 

 

서버-클라이언트 통신의 이해

서버→클라이언트: "JSON"이해하기

 

  JSON은 Key:Value로 이루어져 있으며 자료형 Dictionary와 아주 유사. 일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식. 클라이언트가 사용하는 언어에 관계 없이 통일된 데이터를 주고받을 수 있도록, 일정한 패턴을 지닌 문자열을 생성해 내보내면 클라이언트는 그를 해석해 데이터를 자기만의 방식으로 온전히 저장, 표시할 수 있게 된다.

  과거 웹 초기 시절부터 사용되어 온 XML은 헤더와 태그 등의 여러 요소로 가독성이 떨어지고, 쓸데없이 용량을 잡아먹는다는 단점이 항상 지적되어 왔다. 이에 대응해 간결하고 통일된 양식으로 각광을 받고 있는 JSON(나무위키 참조).

 

 

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

 

  API는 은행 창구와 같은 것. 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼 클라이언트가 요청할 때에도 "타입"이란 것이 존재.

 

 

 

 

Ajax 시작하기

 

  Ajax는 jQuery를 임포트한 페이지에서만 동작이 가능하다. http://google.com/과 같은 화면에서 개발자 도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜬다.

 

Ajax의 기본 골격 형태

 

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

 

 

Ajax 코드 해설

 

$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})

 

 

$ajax 코드 설명

 

  • type: "GET" → GET방식으로 요청
  • url: 요청할 url
  • data: 요청하면서 함께 줄 데이터(GET요청시엔  비워둘 것)

  • success: 성공하면, response 값에 서버의 결과값을 담아 함수 실행
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response)
}

 

 

 

 

 

☁ 2주차 숙제 : 팬명록에  날씨 정보 넣기

 

 

<!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=Single+Day&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Single Day', cursive;
        }

        .mytitle {

            width: 100%;
            height: 300px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://post-phinf.pstatic.net/MjAyMDAyMTBfMzAg/MDAxNTgxMzIzNjMzMDI5.ZRbMK6RxFqNYYs-p3XsuAlImXX5ZPgF4y1RAdaf8xmQg._notdo3_HYXd_yPN11RDzYx-MWpvfK8bgWjOJBKyrNMg.JPEG/%EC%9D%B8%EC%95%84_24.jpg?type=w1200);
            background-position: center 50%;
            background-size: cover;

            color: white;

            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 gray;
            padding: 20px;
        }

        .mybtn {
            display: flex;
            flex-direction: row;

            align-items: center;

            margin-top: 15px;
        }

        .mycards {
            width: 95%;
            max-width: 500px;
            margin: auto;
        }

        .mycards > .card {
            margin-top: 15px;
            margin-bottom: 10px;
        }

    </style>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    $('#temp').text(response['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="id" 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="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">응원댓글</label>
    </div>
    <div class="mybtn">
        <button type="button" class="btn btn-outline-dark">응원남기기💕</button>
    </div>
</div>
<div class="mycards" id="comment-list">
    <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>






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

 

 

 

 

 

2주차를 마치며...

 

  길고도 험난한 2주차 과정도 끝났다. 평소 당연하던 인터넷의 모습이 웹개발에 관해 알게됨에 따라 달라 보인다. 늘 그렇듯이 물러서는 시간조차 아깝기에 오늘도 전진한다.🐝

 

 

 

LIST
저작자표시 비영리 변경금지 (새창열림)

'Coding' 카테고리의 다른 글

[스파르타코딩클럽] APP 개발 종합반 - 4주차 개발일지  (2) 2022.11.30
[스파르타코딩클럽] APP 개발 종합반 - 3주차 개발일지  (0) 2022.11.23
[스파르타코딩클럽] APP 개발 종합반 - 2주차 개발일지  (1) 2022.11.18
[스파르타코딩클럽] WEB개발 종합반 - 1주차 개발일지  (1) 2022.11.17
[스파르타코딩클럽] APP 개발 종합반 - 1주차 개발일지  (0) 2022.11.15

관련글

티스토리툴바