윤시의 블로그

투두 리스트를 만들며 디지털 타이머를 JavaScript 코드로 구현해보았다.타이머는 start, stop, reset 버튼을 통해 제어할 수 있고, 시간은 초 단위로 업데이트 되어 화면에 표시된다.   1. HTML 요소 선택const timerDisplay = document.getElementById("timer-display");const startBtn = document.getElementById("start-btn");const stopBtn = document.getElementById("stop-btn");const resetBtn = document.getElementById("reset-btn"); timerDisplay : 타이머의 시간 표시 요소를 선택한다. 경과 시간을 업데이트할..

1. JSX1.1 className 짓기1.2 데이터 바인딩1.3 HTML 요소에 style 넣기 2. state2.1 useState hook2.2 state vs 일반 변수 3. onClick 이벤트 사용하기3.1 함수 선언 방식1. JSX 1.1 className JSX는 React에서 UI를 작성하기 위한 자바스크립트 확장 문법이다. 기본적으로 HTML과 비슷하지만, 주의해야 할 점이 있다. 예를 들어, HTML에서는 class라는 속성을 사용하지만, JSX에서는 JavaScript의 키워드와 겹치지 않도록 'className'을 사용해야 한다. 즉, JSX는 일종의 JavaScript라서 JS에서 사용하는 예약어인 'class' 키워드를 막 사용하면 안된다. class=' '를 넣고 싶다면 cl..

1. Login const LoginInput = document.querySelctor('#login-form input');const loginButton = document.querySelector('#login-form button');// 사용자가 로그인 버튼을 클릭했을 때 실행될 함수 정의function onLoginBtnClick() { console.log(loginInput.value);}// 로그인 버튼에 'click' 이벤트 리스너를 추가하고, 클릭 시 위에서 정의한 함수 실행loginButton.addEventListener('click', onLoginBtnClcik);  1) JavaScript에서 submit 이벤트 처리하기   태그를 사용하여 입력 폼을 구현할 때, 사용자가 ..

문제 상담원으로 일하고 있는 백준이는 퇴사를 하려고 한다.오늘부터 N+1일째 되는 날 퇴사를 하기 위해서, 남은 N일 동안 최대한 많은 상담을 하려고 한다.백준이는 비서에게 최대한 많은 상담을 잡으라고 부탁을 했고, 비서는 하루에 하나씩 서로 다른 사람의 상담을 잡아놓았다.각각의 상담은 상담을 완료하는데 걸리는 기간 Ti와 상담을 했을 때 받을 수 있는 금액 Pi로 이루어져 있다.N = 7인 경우에 다음과 같은 상담 일정표를 보자. 35112421020102015402001일에 잡혀있는 상담은 총 3일이 걸리며, 상담했을 때 받을 수 있는 금액은 10이다. 5일에 잡혀있는 상담은 총 2일이 걸리며, 받을 수 있는 금액은 15이다.상담을 하는데 필요한 기간은 1일보다 클 수 있기 때문에, 모든 상담을 할 ..

문제숫자 카드는 정수 하나가 적혀져 있는 카드이다. 상근이는 숫자 카드 N개를 가지고 있다. 정수 M개가 주어졌을 때, 이 수가 적혀있는 숫자 카드를 상근이가 가지고 있는지 아닌지를 구하는 프로그램을 작성하시오.입력첫째 줄에 상근이가 가지고 있는 숫자 카드의 개수 N(1 ≤ N ≤ 500,000)이 주어진다. 둘째 줄에는 숫자 카드에 적혀있는 정수가 주어진다. 숫자 카드에 적혀있는 수는 -10,000,000보다 크거나 같고, 10,000,000보다 작거나 같다. 두 숫자 카드에 같은 수가 적혀있는 경우는 없다.셋째 줄에는 M(1 ≤ M ≤ 500,000)이 주어진다. 넷째 줄에는 상근이가 가지고 있는 숫자 카드인지 아닌지를 구해야 할 M개의 정수가 주어지며, 이 수는 공백으로 구분되어져 있다. 이 수도 ..

1. 이벤트 버블링  모달창 배경을 누르면 닫히는 기능을 추가해보자. 모달창 내용  하지만, 배경 뿐만 아니라 모달창 내부의 어떤걸 눌러도 다 닫히게 된다. document.querySelector('.black-bg').addEventListener('click', function(){ document.querySelector('.black-bg').classList.remove('show-modal'); }) 어떤 HTML 태그에 이벤트가 발생하면, 그의 모든 상위요소까지 이벤트가 실행되는 현상을 '이벤트 버블링'이라고 한다.예를 들어, click 이벤트가 있을 때, HTML 태그에 클릭이 발생하면 그 위 모든 상위요소까지 자동으로 클릭이 된다.   1.1 이벤트 리스너 안에서 쓰는 이벤트 ..

문제어떤 자연수 p와 q가 있을 때, 만일 p를 q로 나누었을 때 나머지가 0이면 q는 p의 약수이다. 6을 예로 들면6 ÷ 1 = 6 … 06 ÷ 2 = 3 … 06 ÷ 3 = 2 … 06 ÷ 4 = 1 … 26 ÷ 5 = 1 … 16 ÷ 6 = 1 … 0그래서 6의 약수는 1, 2, 3, 6, 총 네 개이다.두 개의 자연수 N과 K가 주어졌을 때, N의 약수들 중 K번째로 작은 수를 출력하는 프로그램을 작성하시오.입력첫째 줄에 N과 K가 빈칸을 사이에 두고 주어진다. N은 1 이상 10,000 이하이다. K는 1 이상 N 이하이다.출력첫째 줄에 N의 약수들 중 K번째로 작은 수를 출력한다. 만일 N의 약수의 개수가 K개보다 적어서 K번째 약수가 존재하지 않을 경우에는 0을 출력하시오.예제 입력 16 ..

문제4 × 3 = 12이다.이 식을 통해 다음과 같은 사실을 알 수 있다.3은 12의 약수이고, 12는 3의 배수이다.4도 12의 약수이고, 12는 4의 배수이다.두 수가 주어졌을 때, 다음 3가지 중 어떤 관계인지 구하는 프로그램을 작성하시오.첫 번째 숫자가 두 번째 숫자의 약수이다.첫 번째 숫자가 두 번째 숫자의 배수이다.첫 번째 숫자가 두 번째 숫자의 약수와 배수 모두 아니다.입력입력은 여러 테스트 케이스로 이루어져 있다. 각 테스트 케이스는 10,000이 넘지않는 두 자연수로 이루어져 있다. 마지막 줄에는 0이 2개 주어진다. 두 수가 같은 경우는 없다.출력각 테스트 케이스마다 첫 번째 숫자가 두 번째 숫자의 약수라면 factor를, 배수라면 multiple을, 둘 다 아니라면 neither를 출..

1. Alert UI 디자인 html 파일알림창 css 파일.alert-box { 디자인 요소} UI를 평소에 숨기고 싶다면 display: none / visibility: hidden다시 보여주고 싶다면 display : block / visibility: visible  2. 버튼 누르면 Alert UI 보여주기버튼document.getElementById('아이디').style.display = ' ';=> '아이디명'을 클릭했을 때 보여주기  3. function 문법function 자유롭게작명() { 축약할 긴 코드} 알림창알림창 버튼Alert창을 여는 코드를 function을 사용해서 축약 function 알림창열기(구멍) { document.getByElementById('alert').s..

문제아직 글을 모르는 영석이가 벽에 걸린 칠판에 자석이 붙어있는 글자들을 붙이는 장난감을 가지고 놀고 있다. 이 장난감에 있는 글자들은 영어 대문자 ‘A’부터 ‘Z’, 영어 소문자 ‘a’부터 ‘z’, 숫자 ‘0’부터 ‘9’이다. 영석이는 칠판에 글자들을 수평으로 일렬로 붙여서 단어를 만든다. 다시 그 아래쪽에 글자들을 붙여서 또 다른 단어를 만든다. 이런 식으로 다섯 개의 단어를 만든다. 아래 그림 1은 영석이가 칠판에 붙여 만든 단어들의 예이다. A A B C D Da f z z 0 9 1 2 1a 8 E W g 6P 5 h 3 k x  한 줄의 단어는 글자들을 빈칸 없이 연속으로 나열해서 최대 15개의 글자들로 이루어진다. 또한 만들어진 다섯 개의 단어들의 글자 개수는 서로 다를 수 있다. 심심해진 ..