프론트엔드 자바스크립트 프로그래밍 기초

자바스크립트 프로젝트

[STS 123] 자바스크립트 기초 프로젝트 입니다. 배운내용을 종합적으로 응용해 실제 사용할 수 있는 형태로 기능을 구현하는 과정을 단계별로 살펴보게 됩니다.

1. Todo 앱 구현 프로젝트

순수 자바스크립트만을 사용해 할일관리 앱인 Todo App 을 만들어보는 프로젝트 입니다. 스마트폰에서 가장 많이 사용되는 앱중에 하나인 할일관리 앱들의 일반적인 형태를 가지고 있으며 별도의 데이터 연동 기능은 없습니다.

1) 프로젝트 개요

부트스트랩을 이용해 화면을 디자인 하고 할일을 입력하면 목록 형태로 추가되는 프로그램 입니다. 입력된 데이터는 별도로 저장되지는 않고 화면에만 추가 되고 삭제 기능을 이용해 화면에서 지울수 있습니다. 추후 구글의 firebase 등과 연동해 데이터가 저장되는 앱으로 확장할 수 있습니다.

proj_3-1

주요기능

2) 기본 구조 만들기

전체 화면은 부트스트랩의 container 와 shadow 클래스를 이용해 중앙 정렬된 박스 형태로 제작합니다. HTML form 의 경우 텍스트 입력 하나와 버튼으로 구성됩니다. 입력필드와 버튼의 배치를 위해 부트스트랩의 input-group을 사용하고 form-control을 이용해 width 100% 의 양식이 되도록 합니다.

구조 설계

html 코드 작성

여기서는 body 부분만 설명 합니다.

<body>
    <div class="container shadow mx-auto mt-5 p-5 w-70">
        <h2>My To-Do App</h2>
        <hr>
        <div class="input-group">
            <input id="item" class="form-control" type="text" placeholder="Input new todo">
            <button id="newBtn" type="button" class="btn btn-info" onclick="addItem()">New Entry</button>
        </div>
        <hr>
        <ul id="todolist" class="list-group"></ul>
    </div>
    <script>

    </script>
</body>

3) 자바스크립트 구현

addItem() 함수에서 새로운 할일을 등록하도록 구현 합니다.

function addItem() {
    // ul 요소 가져옴
    let list = document.getElementById('todolist');
    // input 요소 가져옴.
    let todo = document.getElementById('item');
    // 새로운 li 요소를 생성
    let listitem = document.createElement('li');
    // li 요소에 들어갈 닫기 버튼 생성
    let xbtn = document.createElement('button');

    listitem.className='list-group-item list-group-item-action list-group-item-warning';

    xbtn.className= 'close';
    xbtn.innerHTML='&times;';
    // close 버튼에 이벤트 처리
    xbtn.onclick = function(e) {
        // 이벤트가 발생한 li 요소를 구해서 ul 요소에서 제거
        let pnode = e.target.parentNode;
        list.removeChild(pnode);
    }
    // li 요소 구성
    listitem.innerText = todo.value;
    listitem.appendChild(xbtn);
    // ul 요소에 li 요소 추가
    list.appendChild(listitem);
    
    // 입력칸 비우기 및 포커스 이동
    todo.value = '';
    todo.focus();
}

4) 전체 소스 및 실행결과 확인

2. 날씨 정보 앱 구현 프로젝트

1) 프로젝트 개요

이번 프로젝트에서는 날씨 정보 사이트에서 제공하는 날씨 정보 API를 호출해 JSON 으로 받아 파싱해서 날씨 아이콘과 날씨 정보를 함께 보여주는 예제입니다. 날씨정보를 이용하기 위해서는 날씨정보 서비스가 필요하며 여기서는 openweathermap.com 사이트의 테스트 api 를 이용해 구현해 보도록 합니다.

날씨정보 API를 호출하기 위해서는 직접 자바스크립트로 HTTP 통신관련 코드를 작성하거나 jQuery 나 Axios 와 같은 라이브러리가 필요 합니다. 여기서는 최근에 많이 사용하는 Axios 를 이용해 구현해 봅니다.

결과

주요기능

제대로 날씨정보를 이용하려면 openweathermap.com 에 회원가입을 하고 개발자 키를 발급받아야 합니다. 일부 서비스는 유료로 제공되고 있으며 여기서 사용하는 API키는 개인적으로 발급받은 키를 사용하는 것이라 트래픽이 많을경우 차단될 수 있으니 참고하기 바랍니다.

2) 기본 구조 만들기

전체 화면은 부트스트랩의 container 와 shadow 클래스를 이용해 중앙 정렬된 박스 형태로 제작합니다. api 호출을 위한 라이브러리인 axios 자바스크립트 파일을 CDN을 이용해 포함 합니다.

구조 설계

html 코드 작성

여기서는 body 부분만 설명 합니다.

<body>
    <div class="container w-75 mt-5 p-5 shadow text-center bg-warning text-dark">
    <H2>Current Weather in Seoul, Korea</H2>
    <hr>
    <div class="row bg-success p-5 rounded-circle">
        <div class="col-5">
                <img id="icon">
        </div>
        <div class="col-7 m-auto">
                <h1 class="display-3" id="temp"></h1>
                <strong id="weather"></strong><br>
                Min: <span id="min"></span>°C, Max: <span id="max"></span>°C<br>
                Wind: <span id="wind"></span>m/s
        </div>
    </div>
    </div>
    <script>

    </script>
</body>

3) 자바스크립트 구현

별도의 함수 없이 html이 로드되면 자동으로 시작되도록 구현 합니다.

api 및 json 데이터 구조

자세한 api 정보는 openweathermap.com 을 참고하기 바라며 여기서는 무료로 제공되는 가장 간단한 특정 도시의 현재 날씨정보 api를 기준으로 합니다.

https://api.openweathermap.org/data/2.5/find?q=도시명&units=단위&lang=언어&appid=발급받은api키

openweathermap.com 에서 제공하는 json 메시지 구조는 다음과 같습니다. 여기서는 main, wind, weather 노드에 있는 정보만 사용 합니다.

응답 json 샘플 보기 

{
    "message": "accurate",
    "cod": "200",
    "count": 1,
    "list": [
        {
            "id": 1835848,
            "name": "Seoul",
            "coord": {
                "lat": 37.5667,
                "lon": 126.9783
            },
            "main": {
                "temp": 10.74,
                "pressure": 1019,
                "humidity": 71,
                "temp_min": 9,
                "temp_max": 12
            },
            "dt": 1556455800,
            "wind": {
                "speed": 0.5,
                "deg": 150
            },
            "sys": {
                "country": "KR"
            },
            "rain": null,
            "snow": null,
            "clouds": {
                "all": 1
            },
            "weather": [
                {
                    "id": 800,
                    "main": "Clear",
                    "description": "맑음",
                    "icon": "01n"
                }
            ]
        }
    ]
}

출력 요소

데이터를 출력할 요소들을 querySelector() 를 이용해 가지고 옵니다.

let temp = document.querySelector('#temp');
let min = document.querySelector('#min');
let max = document.querySelector('#max');
let wind = document.querySelector('#wind');
let weather = document.querySelector('#weather');
let icon = document.querySelector("#icon");

axios api call

앞에서 살펴본 api 구조에 따라 다음과 같이 호출 합니다. axios 실행 구조는 설공, 에러, 공통 실행 부를 함수의 형태로 구현하는 형식 입니다.

axios.get('https://api.openweathermap.org/data/2.5/find?q=London&units=metric&appid=7d96bc5108f52b80e2d9075a369b9f35')
        .then(function (response) {
        }
        .catch(function (error) {
            console.log(error);
        })
        .then(function () {
        });

날씨정보 파싱

성공한 경우 처리 블럭(.then()) 에서 데이터 구조를 파악해서 파싱해 출력할 요소에 넣습니다.

예를 들어 현재 온도의 경우 list[0].main.temp 에 있으므로 다음과 같이 가지고 오면 됩니다.

let wdata = response.data.list[0];
temp.innerText = wdata.main.temp+"°C";

같은 방법으로 나머지 데이터도 처리 합니다.

4) 전체 소스 및 실행결과 확인