- Advice Slip API

: 세계적인 명언이나 조언들을 보여주는 API로 간단하게 웹앱을 만들어봤다. 앞전에 만든 Numbers API 사용한 것과 같은 맥락이라 크게 어려운 것 없고, 다시 한번 간단하게 공부하기 좋았다. 

 

 

Advice Slip JSON API

In the event of an error occuring, a message object is returned, containing relevant information about the request. A slip object is a simple piece of advice. A search object contains the results of a slip search query. A messages object contains informati

api.adviceslip.com

 

 

<코드>

- index.html

<body class="bg-secondary">
    <div class="container">
      <div class="row">
        <div class="col-md-6 mx-auto">
          <div class="card p-4 mt-5">
            <h1>Advice Slip</h1>
            <span>버튼을 클릭하면 랜덤 advice가 나타납니다.</span>
            <button
              class="btn btn-primary mt-3"
              style="outline: none; border: none;"
            >
              Click
            </button>
            <div class="card-body">
              <div class="mt-2" id="advice-area">
                <h3 class="card-title">Random advice</h3>
                <p class="text card-text"></p> <!--명언이 나타나는 부분-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="main.js"></script>
  </body>

 

- main.js

const adviceText = document.querySelector('.text');
const btn = document.querySelector('.btn');
const adviceArea = document.getElementById('advice-area');

btn.addEventListener('click', advice);

function advice() {
  fetch("https://api.adviceslip.com/advice")
    .then(response => response.json())
    .then(data => {
      adviceArea.style.display = 'block';
      adviceText.innerHTML = data.slip.advice;
    })
    .catch(err => console.log(err));
}

 

<결과>

반응형
저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript] Jest를 사용한 테스트 코드 짜기!  (0) 2021.07.04
[JavaScript] 객체, 배열 자료 다루기 - JSON 데이터  (0) 2020.09.24
[JavaScript] Numbers API를 이용한 프로젝트 - AJAX, Fetch  (0) 2020.08.10
[JavaScript] AJAX 란 무엇인가?  (0) 2020.07.17
[JavaScript] Event - addEventListener, 이벤트 객체  (0) 2020.05.14

사용한 언어: HTML, CSS, JavaScript(순수 JS)

프레임워크: 부트스트랩

 

 

- Numbers API

Numbers라는 재밌는 API를 이용해서 숫자에 맞는 재밌는 사실을 알려주는 웹앱을 만들어 봤다. 입력란에 아무 숫자나 넣으면 그 숫자에 맞는 사실(Fact) 한 가지를 보여주는 기능이다. 만약 숫자가 너무 크거나, 숫자에 맞는 리턴 값이 없다면 'boring number'라는 기본값을 보여준다.

 

 

Numbers API

NumbersAPI An API for interesting facts about numbers Bring meaning to your metrics and stories to your dates An API for interesting facts about numbers Bring your metrics and dates to life Let your metrics tell tales with our API of number facts What tale

numbersapi.com

 

- 결과

 

 

 

이 웹앱을 통해서 http통신을 요청하고 데이터를 받아오는 공부를 할 수 있었다. AJAX 와 Fetch api를 사용해 서버에 요청하고 데이터를 받아오는 방법을 사용했다. 디자인적인 요소는 부트스트랩을 이용해 빠르게 만들었다.

 

 

우선, HTML 코드는 다음과 같다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Number Facts app</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />

    <style>
      #fact {
        display: none;
      }
    </style>
  </head>
  <body class="bg-secondary">
    <div class="container">
      <div class="row">
        <div class="col-md-6 mx-auto">
          <div class="card bg-primary text-white p-4 mt-5">
            <h1>Number Facts</h1>
            <p>숫자를 입력하고 랜덤 Fact를 확인하세요.</p>
            <input
              type="number"
              id="numberInput"
              class="form-control form-control-lg"
              placeholder="숫자를 입력하세요.."
            />
            <div id="fact" class="card-body">
              <h4 class="card-title">
                Number Fact
              </h4>
              <p id="factText" class="card-text"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

 

 

 

하나씩 설명하자면, 

<input
	type="number"
	id="numberInput"
	class="form-control form-control-lg"
	placeholder="숫자를 입력하세요.."
/>

<input> 태그는 숫자만 입력되도록 타입을 number로 설정했다. class는 부트스트랩 스타일링을 위해 다음과 같이 정했고, 자바스크립트에서 사용하기 위해 id값을 설정했다.

 

 

<div id="fact" class="card-body">
 <h4 class="card-title">
  Number Fact
 </h4>
 <p id="factText" class="card-text"></p>
</div>
#fact {
  display: none;
}

id가 fact인 숫자를 입력했을 때 값을 표현하는 영역이다. 우선 처음에는 이 영역을 display: none으로 설정해 보이지 않도록 했다. 그리고 나중에 값을 입력받았을 때, 자바스크립트를 이용해 영역이 다시 보이도록 만들었다.

 

다음으로 JavaScript 코드다. 여기서 두 가지 방식 즉, AJAX 와 Fetch를 이용했다. 기능적인 부분은 동일하지만 Fetch를 이용한 방법이 훨씬 간단하게 코드를 짤 수 있다. 둘 다 같은 기능을 구현한 거니 선택해서 사용하면 된다.

 

 

1) AJAX - XHR 방식

let fact = document.querySelector('#fact');
let factText = document.querySelector('#factText');

let numberInput = document.querySelector('#numberInput')
numberInput.addEventListener('input', getFactAjax);


function getFactAjax() {
  let number = numberInput.value; // input 입력 값
  let xhr = new XMLHttpRequest(); // XHR 생성자 생성

  xhr.open("GET", "http://numbersapi.com/" + number); // GET방식, API 요청
  xhr.onload = function () {// 요청이 성공적으로 완료되면
    if (this.status == 200 && number != "") { // 요청상태 확인 및 입력한 값이 있다면
      fact.style.display = 'block';
      factText.innerText = xhr.responseText;
    }
  };
  xhr.send();
}

number라는 변수는 input태그에서 입력한 값을 담고 있다. 이제 URL에 number를 붙여 GET방식으로 API 서버에 요청한다. 만약 성공적으로 응답을 받으면 div#fact 영역을 block으로 바꿔 보이도록 한다. 그리고 텍스트란에 받아온 응답 값을 표현해주면 성공적으로 앱이 완성된다.

 

 

2) Fetch 방식

let fact = document.querySelector('#fact');
let factText = document.querySelector('#factText');

let numberInput = document.querySelector('#numberInput')
numberInput.addEventListener('input', getFactAjax);

function getFactFetch() {
 let number = numberInput.value;

 fetch("http://numbersapi.com/" + number)
  .then((response) => response.text())
  .then((data) => {
    console.log(data);
    if (number != "") {
      fact.style.display = "block";
      factText.innerText = data;
    }
  })
  .catch((err) => console.log(err));
}

fetch 함수에 요청할 URL을 넣어준다. 성공적으로 응답을 받으면 response.text()를 이용해 promise 값을 리턴하도록 한다. 그 값이 data 인자로 들어가고, 입력값(number)이 있는지 확인 후, 응답 값을 보여주도록 한다. catch를 사용해 에러 처리를 했다.

 

 

여기서 사용한 Numbers API는 서버 요청, 응답을 공부하기에 가장 간단한 예제라고 생각한다. 2가지 방식으로 모두 공부해보면서 조금이나마 서버 요청과 응답을 이해할 수 있었다. 다음에 다른 자바스크립트 예제를 포스팅할 예정이다.

반응형
저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript] 객체, 배열 자료 다루기 - JSON 데이터  (0) 2020.09.24
[JavaScript] Advice Slip API 이용한 간단한 웹앱 - Fetch  (0) 2020.08.19
[JavaScript] AJAX 란 무엇인가?  (0) 2020.07.17
[JavaScript] Event - addEventListener, 이벤트 객체  (0) 2020.05.14
[JavaScript] JSON - JSON.parse(), JSON.stringify()  (0) 2020.05.13

 알고리즘, 자료구조 - 선택 정렬 

 

 

선택 정렬이란?

 

리스트 안의 원소들 중 최솟값을 찾아 리스트의 앞쪽으로 보내고, 그 뒤에 남은 원소들에 대해서 반복적으로 최솟값을 찾아 정렬하는 알고리즘이다. 간단한 알고리즘이지만 성능면에서는 느리기 때문에 좋지 않은 방식이다.

 

- 선택 정렬 알고리즘의 구체적인 개념

1. 첫 번째 원소를 선택, 그 뒤의 원소들과 차례대로 비교해 최솟값을 찾는다.

2. 찾은 최솟값을 첫 번째로 옮긴다.

3. 두 번째 원소를 선택, 3번째 원소부터 끝까지 비교해 최솟값을 찾는다.

4. 위의 과정들을 계속 반복한다.

 

위의 알고리즘 방식을 보면 코드상에서 2개의 반복문이 필요하고 이는 시간 복잡도 면에서 O(n^2)의 시간이 걸린다.

 

- 시간 복잡도

0번 요소: (n-1) 번 비교

1번 요소: (n-2) 번 비교

 ...

n-2번 요소: 1번 비교

n-1번 요소: 0번 비교

 

전체 비교 횟수는 0+1+2+3+...+n-2+n-1 = (n-1)(n-1+1) / 2 가 된다. n의 수가 커지면 결국 n^2이 큰 영향을 가지고 나머지는 무시할 수 있다. 따라서 시간 복잡도는 O(n^2)가 된다. 

 

<출처: 위키피디아>

 

예제

def select_sort(li):
    n = len(li)

    for i in range(0, n-1): #0번째~n-2번(뒤에서 2번째)
        min_idk = i
        for j in range(i+1, n): #비교하려는 값 뒤부터 끝까지 비교
            if(li[j] < li[min_idk]): # 비교하려는 값보다 뒤에 값이 작다면
                min_idk = j 		 
        li[i], li[min_idk] = li[min_idk], li[i] # 최솟값 위치 변경 

    return li


print(select_sort([2, 4, 5, 1, 3])) # [1, 2, 3, 4, 5]

 

 
 

 

반응형
저작자표시 비영리 변경금지

'알고리즘 & 자료구조' 카테고리의 다른 글

[알고리즘] 동적 계획법 - Dynamic Programming  (0) 2020.08.23
[알고리즘] 이분 탐색 - Binary Search  (0) 2020.08.18
[알고리즘] 삽입정렬  (0) 2020.08.17
[알고리즘] 재귀호출  (0) 2020.08.17
[알고리즘] 순차탐색(선형탐색)  (0) 2020.07.19

 알고리즘, 자료구조 - 순차 탐색(선형 탐색) 

 

순차 탐색이란?

 

리스트 또는 배열 안에 있는 첫 번째 자료부터 하나씩 비교하면서 원하는 데이터를 찾아가는 알고리즘이다. 데이터를 따로 조작할 필요가 없어 단순하지만 비효율적이라는 단점을 지니고 있다. 추가로 순차 탐색은 단방향으로 탐색을 수행하기 때문에 선형 탐색(Linear Search)라고도 부른다.

순차 탐색은 최악의 경우에 최대 n번의 비교를 필요로 하기에 시간 복잡도는 O(n)이 된다.

이는 데이터가 n개가 되면 그에 따른 연산 수도 n개를 따라가기 때문에 자료수가 많아질수록 연산의 속도가 느리다는 단점이 있다.

 

 

 

예제

 

# 리스트에서 특정 숫자의 위치 찾기

def search_num(a, x):
	n = len(a)
    for i in range(0, n): #리스트 a의 모든 값에 대해 반복
    	if x == a[i] : 	# 찾는 숫자와 값이 일치하면
        	return i	# 인덱스 값 반환
    
    return -1
    
a = [17, 92, 18, 33, 58]
print(search_num(a, 18)) # 2 출력
print(search_num(a, 900)) # -1 출력(해당 값이 없기에)

 

# 학생 번호를 입력시 해당하는 학생의 이름을 반환
def find_student(number, stuNo, stuName):
    num = len(stuNo)
    for i in range(0, num):
        if(stuNo[i] == number):
            return stuName[i]

    return "해당 학생은 없습니다."


stu_no = [39, 14, 67, 103]
stu_name = ["Justin", "John", "Mike", "Summer"]

print(find_student(39, stu_no, stu_name)) #출력 - "Justin"
 

 

반응형
저작자표시 비영리 변경금지

'알고리즘 & 자료구조' 카테고리의 다른 글

[알고리즘] 동적 계획법 - Dynamic Programming  (0) 2020.08.23
[알고리즘] 이분 탐색 - Binary Search  (0) 2020.08.18
[알고리즘] 삽입정렬  (0) 2020.08.17
[알고리즘] 재귀호출  (0) 2020.08.17
[알고리즘] 선택 정렬  (0) 2020.07.19

+ Recent posts

티스토리툴바