웹개발 종합반 (2주차) (스파르타코딩클럽)

벌써 2주차가 되었다!

1주차에는 뼈대인 html과 꾸미기인 css를 배웠다.

2주차에는 Javascript, JQuery, Fetch를 배울 예정으로 보인다.

Javascript : 웹을 움직이게 하는 코드

JQuery : html 뼈대를 선택하여 쉽게 조작 가능

Fetch : 짧은 코드로 요청을 보내고 받을 수 있음

<Javascript>

Javascript는 웹표준이다. (웹 브라우저에서 Javascript만 알아듣는다)

alert 추가해보기

function hey(){

alert('안녕하세요')

}

</script>

<head>태그 안에 <script> 태그를 추가한다.

button에 클릭하면 hey()함수가 호출되도록 추가한다.

결과물

(javascript에는 세미콜론을 적지 않아도 되는듯 하다..) (세미클론 붙여도 상관없다!)

Javascript 기초 문법

console.log() -> console에 출력

function hey(){

console.log("안녕하세요!")

}

dictionary -> key : value로 이루어져 있음

let a = {'name' : '영수', 'age' : 27}

console.log(a['name'])

</script>

(javascript에서는 java와 같이 type 별로 int, string으로 나누는 것이 아니라, let 또는 var로 type 상관없이 변수 선언할 수 있는 듯 하다)

dictionary = {key : value, key : value, ... }

<JQuery>

Javascript만 쓸 때보다, 더욱 직관적이고 편리하게 만들어준다.

function checkResult(){

let a = ['사과', '배', '귤']

$('#q1').text(a[2])

$('#q1').css('color', 'red')

let b = {'name' : '영수', 'age' : 30}

$('#q2').text(b['name'])

$('#q2').css('color', 'blue')

let c = [

{'name' : '지민', 'age' : 15},

{'name' : '진영', 'age' : 20},

{'name' : '철수', 'age' : 50}

]

$('#q3').text(c[1]['age'])

$('#q3').css('color', 'green')

}

</script>

</div>

</div>

</div>

<div>

</div>

div의 id값을 부여해서 이름을 지정해준다.

그리고 javascript에서 id값을 지정하여 그 값의 해당하는 부분을 변경할 수 있다.

$('#q1').text("예시");

$('#q1'). -> q1이라는 id를 가진 부분을 지정한다.
text("예시"); -> 지정한 부분의 text를 "예시"로 바꿔주었다.

결과물

< Javascript (반복문 & 조건문) >

forEach 사용

let fruit = ['사과', '배', '감', '귤']

fruit.forEach((a) => {

console.log(a);

})

fruit 리스트에서 값이 하나씩 a에 저장되고

console.log(a)를 통해 출력된다.

if 사용

let age = 24

if(age > 20){

console.log("성인입니다.")

}else{

console.log("성인아닙니다.")

}

age 변수에 24를 저장하여

if문을 통해 20이 넘으면 "성인입니다."가 출력되고, 나머지는 "성인이아닙니다."가 출력되도록 하였다.

조건문과 반복문 같이 사용

let age = [11, 13, 14, 15, 22, 33, 44, 55, 66]

age.forEach((value) => {

if(value > 20){

console.log(value + "는 성인입니다.")

}else{

console.log(value + "는 성인아닙니다. !!!")

}

})

age 리스트에 담겨있는 값들을 forEach문을 통해 하나씩 if문으로 비교하도록 하였다.

20보다 크면 (성인입니다.)

나머지는 (성인이 아닙니다.!!!)

<JQuery-append>

append() -> 컨텐츠를 뒤에 추가시켜주는 메서드

코드

<script> 
    function checkResult() {
        let fruits = ['사과','배','감','귤','수박']
        $('#q1').empty()
        $('#q2').empty()
        fruits.forEach((a) => {
            let temp_html = '<p>${a}</p>'
            $('#q1').append(temp_html)
        })
        let people = [
            {'name':'서영','age':24},
            {'name':'현아','age':30},
            {'name':'영환','age':12},
            {'name':'서연','age':15},
            {'name':'지용','age':18},
            {'name':'예지','age':36}
        ]
        people.forEach((a) => {
            let name = a['name']
            let age = a['age']
            let temp_html = '<p>${name}는 ${age}살입니다.</p>'
            $('#q2').append(temp_html)
        })
    } 
</script>

$('').empty() -> 기존의 내용을 없애준다.

forEach문을 통해 리스트(딕셔너리)를 a에 하나씩 넣어주고,

a의 값을 포함한 html을 변수 temp_html에 담아준다.

그리고 $('').append(temp_html)로 html을 추가한다.

결과물

어째서 인지 '<p>${a}</p>' 부분과 '<p>${name}는 ${age}살입니다.</p>' 부분에서 다 문자열로 취급되었다..

알고보니 중간에 변수를 삽입하려면 따옴표''로 감싸는 것이 아니라 백틱`` 으로 감싸야 된다는 것이었다..

알려주셔서 감사합니다... 제 은인이셔요 °˖✧◝(⁰▿⁰)◜✧˖°

스파르타 코딩클럽 매니저분들도, 강사님도 모두 너무 친절친절 하셔서,,, 파워 F인 저는 행복함니다..

공부가 이렇게 재밌다니요..

수정된 코드

<!DOCTYPE html>
<html>

<head>
    <title>자바스크립트 문법 연습하기!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script> 
    function checkResult() {
        let fruits = ['사과','배','감','귤','수박']
        $('#q1').empty()
        $('#q2').empty()
        fruits.forEach((a) => {
            let temp_html = `<p>${a}</p>`
            $('#q1').append(temp_html)
        })
        let people = [
            {'name':'서영','age':24},
            {'name':'현아','age':30},
            {'name':'영환','age':12},
            {'name':'서연','age':15},
            {'name':'지용','age':18},
            {'name':'예지','age':36}
        ]
        people.forEach((a) => {
            let name = a['name']
            let age = a['age']
            let temp_html = `<p>${name}는 ${age}살입니다.</p>`
            $('#q2').append(temp_html)
        })
    } 
</script>

<body>
    <div class="top-part">
        <h1>자바스크립트 문법 연습하기!</h1>
    </div>
    <hr /> <br>
    <h2>1. 함수</h2>
    <div class="button-part"> <button onclick="checkResult()">결과 확인하기!</button> </div>
    <div class="list-part">
        <h2>2. 붙이기</h2>
        <div id="q1">
            <p>사과</p>
            <p>귤</p>
            <p>감</p>
        </div>
    </div>
    <div class="list-part">
        <h2>3. 붙이기</h2>
        <div id="q2">
            <p>영수는 24살입니다.</p>
            <p>세종은 30살입니다.</p>
            <p>수영은 20살입니다.</p>
        </div>
    </div>
</body>

</html>

결과물

성공!!

<서버-클라이언트 통신>

chrome 웹 스토어에서 JSONVue를 추가한다.

그러면 원래

이렇게 보였던 API가

이런식으로 보여지게 된다.

딕셔너리와 리스트로 구성되어있는 것을 볼 수 있다.

이러한 형식을 'Json'이라고 한다.

API는 은행의 창구라고 생각하면 쉽다.

<Fetch>

알고보니 지금까지 JQuery를 사용할 수 있었던 것은

<javascript> 부분에

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

이 부분이 추가되어 있어서 JQuery를 사용할 수 있었던 것이다.

앞으로 새 html 파일을 만들고 JQuery를 사용하기 위해서는 위의 src 코드를 꼭 추가해서 사용해아 할 것 같다.

Fetch 기본 골격

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
		console.log(data)
})

가져올 API url을 입력하면 url에서 result를 뭔가 가져온다.

그것을 Json 형태로 만들어 활용하겠다는 뜻이다.

(Fetch = url을 주면 그 url에서 값을 가져옴)

<script>
        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
		    console.log(data)
        })
	</script>

미세먼지 OpenAPI 주소를 입력한다.

그러면 결과물에서 이전에 본 JSON 형태의 결과를 볼 수 있다.

(data에 값이 들어있고 그 값을 console에 띄움)

console 결과물

이전에 본 JSON 형태의 API와 똑같다.

url을 추가함으로써 data값에 JSON 코드가 다 들어간 것을 확인하였다.

미세먼지 url을 추가하여 원하는 데이터만 뽑기

전체코드

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

<head>
    <meta charset="UTF-8">
    <title>미세먼지 API로Fetch 연습하고 가기!</title>

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

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

    <script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                $('names-q1').empty()
                rows.forEach((a) => {
                    let gu_name = a['MSRSTE_NM']
                    let gu_mise = a['IDEX_MVL']
                    
                    let temp_html = `<li> ${gu_name} : ${gu_mise}</li>`
                    $('names-q1').append(temp_html)
                    console.log(temp_html)
                })
            })
        }
    </script>

</head>

<body>
    <h1>Fetch 연습하자!</h1>

    <hr />

    <div class="question-box">
        <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
        <p>모든 구의 미세먼지를 표기해주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>
        <ul id="names-q1">
            <li>중구 : 82</li>
            <li>종로구 : 87</li>
            <li>용산구 : 84</li>
            <li>은평구 : 82</li>
        </ul>
    </div>
</body>

</html>

javascript 부분

<script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                $('names-q1').empty()
                rows.forEach((a) => {
                    let gu_name = a['MSRSTE_NM']
                    let gu_mise = a['IDEX_MVL']
                    
                    let temp_html = `<li> ${gu_name} : ${gu_mise}</li>`
                    $('names-q1').append(temp_html)
                    console.log(temp_html)
                })
            })
        }
    </script>

Fetch를 이용해 API값을 data에 담고, 특정 리스트 부분을 rows에 담았다.

그리고 empty를 이용하여 기존 글을 삭제하고, forEach를 이용해서 값을 하나씩 출력할 수 있도록 하였다.

그 값을 append를 이용하여 html 형식으로 붙였다.

결과로

업데이트 버튼을 누르면 기존의 글이 사라지고 가져온 API값들이 정렬되어야 하는데

또 실패하였다..

console에는 잘 뜨지만 이상하게 화면에는 안뜨는..

그래서 또 스파르타코딩클럽에 있는 즉문즉답을 이용하였다!

역시나 정말 친절하게 설명해주셨다 ㅠㅠㅠ 너무너무 감사드려요

코드를 항상 치면서 느낀 것은 나혼자만 보면 코드의 오타 등 잘못된 점을 찾기 힘든데, 남이 봐주면 빠르게 찾을 수 있다는 것이다 !

혼자 공부해야해서 힘들었는데, 즉문즉답으로 이렇게 빠르게 (질문 올리면 거의 1분만에 답을 남겨주심..) 틀린점을 봐준다는게 정말 좋은 것 같다...

오타부분을 고친 코드!

<script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                $('#names-q1').empty()
                rows.forEach((a) => {
                    let gu_name = a['MSRSTE_NM']
                    let gu_mise = a['IDEX_MVL']
                    
                    let temp_html = `<li> ${gu_name} : ${gu_mise}</li>`
                    $('#names-q1').append(temp_html)
                    console.log(temp_html)
                })
            })
        }
    </script>

빼먹은 #을 잘 넣고나니 정상적으로 잘 작동되는 것을 볼 수 있었다 !!

결과가 잘 나오니 뿌듯...

이번엔 저상태에서 미세먼지가 40이 넘은 부분만 빨간색으로 바뀌게 해보았다.

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

    <script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                $('#names-q1').empty()
                rows.forEach((a) => {
                    let gu_name = a['MSRSTE_NM']
                    let gu_mise = a['IDEX_MVL']
                    
                    let temp_html = ``;
                    if(gu_mise > 40){
                        temp_html = `<li class="bad"> ${gu_name} : ${gu_mise}</li>`
                    }else{
                        temp_html = `<li> ${gu_name} : ${gu_mise}</li>`
                    }

                    
                    $('#names-q1').append(temp_html)
                    console.log(temp_html)
                })
            })
        }
    </script>

forEach를 돌면서 if문을 통해 값이 40이 넘는지 안넘는지 확인한다.

40이 넘으면 color가 빨간색이 되는 class를 붙여 html을 추가하도록 하였다.

결과

잘 작동 되었다 !!

이번엔 따릉이 API 활용해보기

전체코드

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

<head>
    <meta charset="UTF-8">
    <title>Fetch 연습하고 가기!</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;
        }

        table {
            border: 1px solid;
            border-collapse: collapse;
        }

        td,
        th {
            padding: 10px;
            border: 1px solid;
        }
        .red{
            color: red;
        }
    </style>

    <script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {
                let rows = data['getStationList']['row']
                $('#names-q1').empty()
                rows.forEach((a) => {
                    let name = a['stationName']
                    let rack = a['rackTotCnt']
                    let bike = a['parkingBikeTotCnt']

                    let temp_html = ``
                    if(bike < 5){
                        temp_html = `<tr class = red>
                                        <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>

</head>

<body>
    <h1>Fetch 연습하자!</h1>

    <hr />

    <div class="question-box">
        <h2>2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기</h2>
        <p>모든 위치의 따릉이 현황을 보여주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>
        <table>
            <thead>
                <tr>
                    <td>거치대 위치</td>
                    <td>거치대 수</td>
                    <td>현재 거치된 따릉이 수</td>
                </tr>
            </thead>
            <tbody id="names-q1">
                <tr>
                    <td>102. 망원역 1번출구 앞</td>
                    <td>22</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>103. 망원역 2번출구 앞</td>
                    <td>16</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>104. 합정역 1번출구 앞</td>
                    <td>16</td>
                    <td>0</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

script 부분 코드

<script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {
                let rows = data['getStationList']['row']
                $('#names-q1').empty()
                rows.forEach((a) => {
                    let name = a['stationName']
                    let rack = a['rackTotCnt']
                    let bike = a['parkingBikeTotCnt']

                    let temp_html = ``
                    if(bike < 5){
                        temp_html = `<tr class = red>
                                        <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>

q1이라는 함수가 실행되면

fetch를 이용해서 url의 값을 가져온다 (data라는 변수에 담김)

변수 rows에 가져온 API의 원하는 리스트를 담고

rows를 forEach문으로 리스트 안의 값들을 하나씩 담도록 반복문을 돌린다.

하나씩 담긴 값들을 name, rack, bike로 분류하여 html로 붙도록 append를 써준다.

그리고 bike의 갯수가 5보다 작으면 빨간색으로 표시되도록 if문을 사용하였다.

결과물

2주차 숙제. 온도 API 가져오기

온도 API(url : http://spartacodingclub.shop/sparta_api/weather/seoul)

{
city: "Seoul",
clouds: "20%",
icon: "http://openweathermap.org/img/w/50d.png",
temp: 18.43
}

여기서 temp(온도)값만 추출하여 기존 코드에 추가하기.

전체코드

<!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>

    <style>
        .mytitle {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mytitle>button {
            width: 250px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 20px;
        }

        .mytitle>button:hover {
            border: 2px solid white;
        }

        .mycomment {
            color: gray;
        }

        .mycards {
            width: 1200px;
            margin: 20px auto 20px auto;
        }

        .mycomment {
            color: gray;
        }

        .mypost {
            width: 500px;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;

            box-shadow: 0px 0px 3px 0px gray;
        }

        .mybtn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }

        .mybtn>button {
            margin-right: 20px;
        }
    </style>
    <script>
        $(document).ready(function () {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
                $('#temp').empty()
                let number = data['temp']
                let temp_html = `${number}`
                console.log(temp_html)
                $('#temp').append(temp_html)
            })
        })
    </script>
</head>

<body>
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <div>현재 서울의 날씨 : <span id="temp">20</span>도</div>
        <button onclick="hey()">영화 기록하기</button>
    </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">영화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="3">⭐⭐⭐⭐</option>
                <option value="3">⭐⭐⭐⭐⭐</option>
            </select>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
            <label for="floatingTextarea">코멘트</label>
        </div>
        <div class="mybtn">
            <button type="button" class="btn btn-dark">기록하기</button>
            <button type="button" class="btn btn-outline-dark">닫기</button>
        </div>
    </div>
    <div class="mycards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <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 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 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 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>
</body>

</html>

script 코드 ( 추가한 부분 )

<script>
        $(document).ready(function () {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
                $('#temp').empty()
                let number = data['temp']
                let temp_html = `${number}`
                console.log(temp_html)
                $('#temp').append(temp_html)
            })
        })
    </script>

결과

<html> 부분에 있는 20도가 찍히는 것이 아니라

2주차끝!!!

확실히 1주차 보다 조금 어려운 부분도 많았고, 처음 배우는 부분이 많아 어려움이 있었다.

특히 오타도 많고 결과가 제대로 나오지 않아 애를썼는데, 스파르타코딩클럽의 즉문즉답에서 도움을 많이 받을 수 있었다!

어려운 부분이 많았어도 결과가 정상적으로 나오면 너무 뿌듯해서 기뻤다.. 아직까지는 크게 어렵지도 않고 재미있어서 쉽게 공부할 수 있었다.

'IT > 스파르타코딩클럽(웹개발종합반)' 카테고리의 다른 글

[내일배움카드 코딩] 스파르타코딩클럽 웹개발종합반 완강 후기!! (0)	2023.04.13
웹개발 종합반 (5주차) (스파르타코딩클럽) (0)	2023.04.13
웹개발 종합반 (4주차) (스파르타코딩클럽) (0)	2023.04.07
웹개발 종합반 (3주차) (스파르타코딩클럽) (0)	2023.03.30
웹개발 종합반 (1주차) (스파르타코딩클럽) (0)	2023.03.18

열정열정열정 개발자

웹개발 종합반 (2주차) (스파르타코딩클럽)

<Javascript>

alert 추가해보기

Javascript 기초 문법

<JQuery>

< Javascript (반복문 & 조건문) >

forEach 사용

if 사용

조건문과 반복문 같이 사용

<JQuery-append>

<서버-클라이언트 통신>

<Fetch>

2주차 숙제. 온도 API 가져오기

'IT > 스파르타코딩클럽(웹개발종합반)' 카테고리의 다른 글

티스토리툴바

웹개발 종합반 (2주차) (스파르타코딩클럽)

<Javascript>

alert 추가해보기

Javascript 기초 문법

<JQuery>

< Javascript (반복문 & 조건문) >

forEach 사용

if 사용

조건문과 반복문 같이 사용

<JQuery-append>

<서버-클라이언트 통신>

<Fetch>

2주차 숙제. 온도 API 가져오기

'IT > 스파르타코딩클럽(웹개발종합반)' 카테고리의 다른 글

'IT/스파르타코딩클럽(웹개발종합반)' Related Articles

티스토리툴바