자바스크립트(15)
-
[008] 자바스크립트 (JavaScript) - Fetch 함수로 API 호출해서 데이터 표시하기
안녕하세요~ totally 개발자입니다. 오늘은 원격 API를 호출해서 데이터를 불러오고 웹페이지에 표시하는 방법을 알아보도록 하겠습니다. 예전에는 서버 쪽에서 API를 주로 호출했지만 요즘에는 클라이언트 단에서 API를 직접 호출해서 데이터를 다루는 경우가 많아지고 있기 때문에 클라이언트 단에서 직접 API를 호출하고 데이터를 다루는 방법을 이해해야 합니다. 이를 위해, request 등과 같은 라이브러리를 사용하면 되지만 근래에는 브라우저 자체에 존재하는 fetch 함수를 사용하면 간단하고 쉽게 구현할 수 있습니다. fetch 함수는 Promise 객체를 반환하며 이 Promise 객체는 비동기(Asynchronous)를 위해, 미래에 저장되는 값을 위해 사용된다고 보면 됩니다. 이 함수는 2개의 p..
2022.12.20 -
[007] 자바스크립트 (JavaScript) - 핵심요약(함수 - Function)
안녕하세요~ totally 개발자입니다. function (함수) 오늘 다룰 부분은 function(함수)입니다. 이 함수는 프로그래밍에서 대단히 중요한 개념으로 어떤 특정한 작업을 수행하는 코드 블록이며 주로 같은 작업을 반복하는 경우에 많이 사용됩니다. 이 함수의 특징에서는 인자(argument 혹은 parameter)라고 하는 요소들을 받을 수 있으며 return을 사용하여 함수의 결과를 내보낼 수 있습니다. 바로 예제로 들어가보도록 하겠습니다. function addTwoNumbers(a, b) { return a + b; } 먼저 위에 있는 첫 번째 예시를 보시면 function 뒤에 addTwoNumbers라는 맞춤 함수 이름을 지정할 수 있고 a, b라는 매개변수(인자) 2개를 받는 것을 확..
2022.11.15 -
[006] 자바스크립트 (JavaScript) - 핵심요약(DOM Event)
안녕하세요~ totally 개발자입니다. DOM Event 오늘은 Event, HTML의 DOM(Document Object Model)에 대한 이벤트들을 살펴봅니다. 자바스크립트의 이벤트를 활용하여 HTML에서 사용자가 DOM 요소에 어떤 행동을 했을 때 다양한 액션 행동들을 구현할 수 있습니다. 대표적인 예로, 버튼을 클릭했을 때 팝업창을 띄우는 행위 등이 있습니다. HTML DOM에 대해서 기본적인 이해가 필요합니다. DOM이란 Document Object Model의 약자로서, 웹페이지의 로드가 완료되면, 브라우저는 그 페이지의 Document Object Model를 생성하게 됩니다. 이 HTML DOM은 객체들의 트리로 구성되어지며 자바스크립트가 바로 이 DOM을 이용하여 HTML의 요소들을 ..
2022.11.01 -
[005] 자바스크립트 (JavaScript) - 핵심요약(반복문 - for, for in, for of, forEach)
안녕하세요~ totally 개발자입니다~ 반복문2 - for 오늘은 for 반복문에 대해서 살펴보겠습니다. 프로그래밍을 배울 때 반드시 알고 있어야 하는 개념 중 하나로 저번에는 while 반복문을 알아보았고 이번에는 for 반복문의 기본 사용 방법에 대해서 알아보겠습니다. for (let i = 0; i < 5; i++) { console.log(i); } 앞서 살펴본 while문에서는 조건만 명시되는 반면, for문에서는 위에 보시는 것처럼 초기화, 조건, 상태 업데이트 이 3가지의 단계를 미리 명시해주고 내용을 입력하게 됩니다. 물론 3가지를 필수적으로 입력하는 것은 아니고 for (let i = 0; ; ) 이렇게 생략해도 무방하나 세미콜론으로 그 부분에 대한 공간은 표시해주셔야 합니다. 즉 다시..
2022.11.01 -
[프로그래머스-Level 0] [Javascript] 분수의 덧셈(최대공약수 이용)
안녕하세요~ totally 개발자입니다. 이 문제는 최대공약수를 이용해야 쉽게 풀리는 문제로 기약분수의 형태로 만들어주어야 합니다. [문제] 분자1(denum1), 분자2(denum2), 분모1(num1), 분모2(num2)가 주어질 때 2개의 분수의 덧셈 알고리즘 구현 [알고리즘] 분모 통분 필요 및 통분에 맞추어서 분자를 더하고 분자와 분모를 기약분수로 만들어주면 됩니다. 기약분수로 만드는 과정에서 분자와 분모의 최대공약수를 재귀 함수 형태로 구현하면 쉽게 문제를 풀 수 있습니다. [풀이] function solution(denum1, num1, denum2, num2) { // Step1: 분모를 통분하여 분자의 덧셈 const denumTotal = (num1 * denum2) + (num2 * ..
2022.10.29 -
[004] 자바스크립트 (JavaScript) - 핵심요약(반복문1 - while)
안녕하세요~ totally 개발자입니다. 반복문1 - while 오늘은 반복문을, 그 중에서도 while을 사용하는 반복문을 위주로 다루도록 하겠습니다. 반복문은 프로그래밍에 있어서 필수적인 요소입니다. 반복문이 존재하지 않았다면, 상당한 양의 같은 코드가 반복되었을 것이고, 매우 비효율적인 코드가 많아졌을 것이나 반복문의 사용으로 인하여 효율적인 코드, 지속적으로 반복되는 코드를 줄일 수 있었습니다. 간단한 예제로 1부터 5를 콘솔에 출력해보는 코드를 살펴보도록 하겠습니다. console.log(1); console.log(2); console.log(3); console.log(4); console.log(5); 먼저 반복문을 사용하지 않고 console.log(1)부터 (5)까지 지속적으로 나열한 ..
2022.10.25