슬기로운 AI생활 - 집요한 PM 에릭

띵동코딩 13주차 개발일지 : Fetch 활용하기 본문

코딩공부

띵동코딩 13주차 개발일지 : Fetch 활용하기

집요한 기획자 에릭 2022. 8. 30. 21:25

1. 이번 주 느낀 점

 - 함수를 실제로 사용하고 다른 변수들을 넣다 보니까 조금씩 헷갈리고 어렵다.

오늘 느낀 중요한 것들은,

변수로 선언할 것과 아닌 것을 구분하는 것, 코딩 시 기호를 정확하게 넣는 것이었다.

그리고 기존에 알고 있는 내용을 응용하는 것까지 모두 조금씩 익숙해지지만 아직 어려운 점들이 많다.

 

let 변수 선언을 통해 값을 가져오고, 그 값을 html 태그에 맞춰서 집어넣는 구조.

어려운 구조이지만 조금씩 배워가고 있다.

그래도 배우는 만큼 조금씩 익숙해지고 있으니까. 계속해서 공부해 봐야겠다.

 

2. 이번 주 코드

스스로 해보기

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>띵동코딩-Fetch 연습</title>
    <style>
        .wrap {
            width: 300px;
            margin: auto;
        }

        .wrap>h1 {
            text-align: center;
        }

        .wrap>button {
            display: block;
            margin: auto;
            margin-bottom: 30px;
        }
    </style>
    <script>
        let cnt = 0;
        function movieReviews() {
            let url = 'http://spartacodingclub.shop/post'
            fetch(url).then(res => res.json()).then((data) => {
                let rows = data["articles"]
                let image = rows[cnt]['image']
                let title = rows[cnt]['title']
                let comment = rows[cnt]['comment']
                $('#moviesPic').attr("src",image)
                $('#movieTitle').text(title)
                $('#movieComment').text(comment)
                cnt = cnt + 1;
               
            });            
        }
    </script>
</head>

<body>
    <div class="wrap">
        <h1>영화 버킷 리스트</h1>
        <button onclick="movieReviews()">다음</button>
        <div>
            <img id="moviesPic" width="300" src="" />
            <h2 id="movieTitle"> </h2>
            <div id="movieComment">
            </div>
        </div>

    </div>

</body>

</html>

'코딩공부' 카테고리의 다른 글

띵동코딩 15주차 : Netflix 클론코딩  (0) 2022.09.16
띵동코딩 14주차 - JS&Jquery&Fetch  (0) 2022.09.05
띵동코딩 12주차 개발일지 : Fetch 사용하기  (0) 2022.08.22
띵동코딩 11주차 개발 일지 : jquery와 Javascript  (0) 2022.08.20
띵동코딩 10주차 개발 일지 : Javascript 복습  (0) 2022.08.08
'코딩공부' Related Articles more