안녕하세요~ totally 개발자입니다. DOM Event 오늘은 Event, HTML의 DOM(Document Object Model)에 대한 이벤트들을 살펴봅니다. 자바스크립트의 이벤트를 활용하여 HTML에서 사용자가 DOM 요소에 어떤 행동을 했을 때 다양한 액션 행동들을 구현할 수 있습니다. 대표적인 예로, 버튼을 클릭했을 때 팝업창을 띄우는 행위 등이 있습니다. HTML DOM에 대해서 기본적인 이해가 필요합니다. DOM이란 Document Object Model의 약자로서, 웹페이지의 로드가 완료되면, 브라우저는 그 페이지의 Document Object Model를 생성하게 됩니다. 이 HTML DOM은 객체들의 트리로 구성되어지며 자바스크립트가 바로 이 DOM을 이용하여 HTML의 요소들을 ..

안녕하세요~ totally 개발자입니다~ 반복문2 - for 오늘은 for 반복문에 대해서 살펴보겠습니다. 프로그래밍을 배울 때 반드시 알고 있어야 하는 개념 중 하나로 저번에는 while 반복문을 알아보았고 이번에는 for 반복문의 기본 사용 방법에 대해서 알아보겠습니다. for (let i = 0; i < 5; i++) { console.log(i); } 앞서 살펴본 while문에서는 조건만 명시되는 반면, for문에서는 위에 보시는 것처럼 초기화, 조건, 상태 업데이트 이 3가지의 단계를 미리 명시해주고 내용을 입력하게 됩니다. 물론 3가지를 필수적으로 입력하는 것은 아니고 for (let i = 0; ; ) 이렇게 생략해도 무방하나 세미콜론으로 그 부분에 대한 공간은 표시해주셔야 합니다. 즉 다시..

안녕하세요~ totally 개발자입니다. 이 문제는 최대공약수를 이용해야 쉽게 풀리는 문제로 기약분수의 형태로 만들어주어야 합니다. [문제] 분자1(denum1), 분자2(denum2), 분모1(num1), 분모2(num2)가 주어질 때 2개의 분수의 덧셈 알고리즘 구현 [알고리즘] 분모 통분 필요 및 통분에 맞추어서 분자를 더하고 분자와 분모를 기약분수로 만들어주면 됩니다. 기약분수로 만드는 과정에서 분자와 분모의 최대공약수를 재귀 함수 형태로 구현하면 쉽게 문제를 풀 수 있습니다. [풀이] function solution(denum1, num1, denum2, num2) { // Step1: 분모를 통분하여 분자의 덧셈 const denumTotal = (num1 * denum2) + (num2 * ..

안녕하세요~ totally 개발자입니다. ElevatedButton, TextButton, OutlinedButton 오늘은 버튼을 만들 수 있게 해주는 위젯들(ElevatedButton, TextButton, OutlinedButton)에 대해서 살펴보겠습니다. 먼저 ElevatedButton 위젯부터 살펴보겠습니다. ElevatedButton ElevatedButton 위젯의 기본 구조를 보면 아주 간단하게 style, onPressed, child 등을 가지며 style로 버튼을 디자인할 수 있고, onPressed 기능을 통해 버튼을 눌렀을 때의 액션을 구성할 수 있고, child 속성을 통해서 버튼 내부 위젯을 생성할 수 있습니다. 이번에는 TextButton도 추가해보겠습니다. TextButt..

안녕하세요~ totally 개발자입니다. Text, TextStyle 오늘 다룰 부분은 글씨를 나타내는 Text 위젯과 그 Text 위젯에 style을 입힐 수 있게 도와주는 TextStyle입니다. 플러터에서 Text 위젯을 사용할 때 거의 반드시 사용되는 속성으로 많이 사용되는 것들 위주로 알아보도록 하겠습니다. 기본 Text 위젯만 사용한 화면으로 이렇게 버튼 컨테이너 안에 GET STARTED라는 글씨가 크기에 비해 다소 작아보입니다. 이럴 때 조금 더 가독성을 좋게 만들고 보기 좋은 디자인으로 만들기 위해 TextStyle을 사용해줍니다. TextStyle에는 많은 속성이 있지만 많이 사용되는 것들을 위주로 정리하면 fontFamily (폰트 지정), fontWeight (폰트 굵기 지정), f..

안녕하세요~ 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)까지 지속적으로 나열한 ..