스파르타코딩클럽 웹개발 2주차 이야기

Nian·2022년 4월 8일

제이쿼리?

생전 처음으로 접하게 된 자바스크립트 라이브러리. 모 유튜버의 말에 따르면 리엑트를 제외하면 자주 쓰는 라이브러리라니 잘 배워두라고 하더라. 아직 익숙치도 않은 자바스크립트를 두고 갑자기 강의에서 제이쿼리 이야기가 나오니 '이거 기초도 정리하고 나중에 보면서 해야하나' 같은 생각이 들었다.
세상에, 맙소사. 그나마 위안인 건 자바스크립트랑 비슷하니까 복습하면서 해도 된다는 것이다.
*아주 슬프게도 언젠가 할 부분임을 인지했을 땐 숙제가 뭔지 확인하고 있었다.

2주차 숙제

날씨 정보를 반영하는 API를 사용하라는 말이 나왔지만, 사실 내가 구상한 웹페이지에는 날씨 정보를 넣고 싶지 않아 부득이하게 파일을 두개로 쪼개야만 했다.
또 css파일 링크를 지원하지 않기 때문에 한 파일에 작성해야 해서 가독성이 무지무지 떨어지겠지...?

사실 작성한 코드를 여기 벨로그에서 보여줄 수 있다 그래서 <details> 태그를 이용해서 하려 했지만 잘 안되었다.
그래서 특이사항만 부분부분 뜯어 올리기로 했다.

신규코드, 현재온도

<div class="title">
        <!-- <img src="" alt="라이네라 메인 타이틀"> -->
        <p>주민들이 전하는 생일 축하 메시지</p>
        <p id="weatherText"></p>
    </div>

$.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
            data: {},
            success: function (response) {
                let city = response['city']
                let temp = response['temp']
                // console.log(city, temp)
                $('#weatherText').text(`현재 ${city} 온도 : ${temp}℃`)

서울 기온 open api를 받아 그걸 반영했다.
처음엔 이게 무어시야 했지만, 자세히보니 자바스크립트와 비슷한 면이 있어 천천히 할 수 있었던 것 같다.

CSS는? 물론 간단하게 해야지.

.title {
            height: 300px;
            background-color: skyblue;
        }

이 부분은 나중에 이미지 파일을 제작하던, 받아오던 해서 할 예정이라 대충 색상만 둘렀다.

.title > p:nth-child(1) {
            font-size: 3em;
            text-align: center;
            height: 80%;
            line-height: 300px;
        }

        .title > p:nth-child(2) {
            height: 20%;
            text-align: center;
            line-height: 10%;
        }