페이지에 무언가 입력되거나 변경되었을 때 자바스크립트에서 이벤트가 발생한다.
이벤트가 발생할때 기능을 수행하거나 명령하도록 한다.
예) 회원가입 시 이메일, 비밀번호를 입력해야 하는 경우
let isStarted = false; // 타이머 작동 코드 제어
const auth = () => {
if (isStarted === false) {
// 타이머가 작동중이 아닐때 작동하도록 변경한다.
isStarted = true
document.getElementById("finish").disabled = false // 인증완료 버튼 활성화
const token = String(Math.floor(Math.random() * 100000)).padStart(6, "0")
document.getElementById("target").innerText = token
document.getElementById("target").style.color = "#" + token
let time = 180
let timer
timer = setInterval(function(){ // setInterval은 변수에 재할당 될때 제대로 작동함
if(time >= 0) {
let min = Math.floor(time / 60)
let sec = String(time % 60).padStart(2, "0")
document.getElementById("timer").innerText = min + ":" + sec
time = time - 1
} else {
document.getElementById("finish").disabled = true // 0:00 인증완료 버튼 비활성화
isStarted = false // 타이머 종료시
clearInterval(timer) // clearInterval은 할당 변수함수를 삭제시켜줌
}
},1000)
} else {
// 타이머가 작동중일때
}
}
1) 지난 시간에 만들었던 3분 타이머는 인증번호 전송 버튼을 계속 누르게 되면 setInterval이 계속해서 작동하기 때문에 타이머의 시간이 꼬이게 된다.
2) setInterval은 변수에 재할당 될때 제대로 작동하므로 timer라는 변수를 만들어 할당해주었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<script src="./07-signup.js"></script>
</head>
<body>
<input type="text" id="email" oninput="checkValidation()">
<input type="text" id="pw1" oninput="checkValidation()">
<input type="text" id="pw2" oninput="checkValidation()">
<button id="submit" disabled="true">회원가입</button>
</body>
</html>
const checkValidation = function() {
let email = document.getElementById("email").value //value는 string으로 가져옴
let pw1 = document.getElementById("pw1").value // 0을 입력해도 숫자 0이 아니여서 괜찮음
let pw2 = document.getElementById("pw2").value
if(email && pw1 && pw2) { // true로 판정
// 모든 input이 비어있지 않을 때
document.getElementById("submit").disabled = false
} else {
// 하나라도 비어있을 때
document.getElementById("submit").disabled = true
}
}
1) html에서 회원가입 버튼을 비활성화해준다.
2) getElementById를 통해 각 input의 내용을 value로 가져와 준다. (value는 내용을 string으로 가져오기 때문에 숫자 0을 입력해도 문자로 반환된다.)
3) 조건문을 통해 이메일과 패스워드, 패스워드 확인 창이 모두 비어있지 않을 경우 회원가입 버튼을 활성화 해준다.
4) 하나라도 비어있으면 비활성화 해준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<script src="./08-phone.js"></script>
</head>
<body>
<input type="text" id="p1" oninput="changeFocus1()" maxlength="3">-
<input type="text" id="p2" oninput="changeFocus2()" maxlength="4">-
<input type="text" id="p3" maxlength="4">-
</body>
</html>
const changeFocus1 = () => {
let phone1 = document.getElementById("p1").value
if (phone1.length === 3) {
document.getElementById("p2").focus() // focus를 이동시킴
}
}
const changeFocus2 = () => {
let phone2 = document.getElementById("p2").value
if (phone2.length === 4) {
document.getElementById("p3").focus()
}
}
1) html에서 input태그에 maxlength로 길이를 지정해준다.
2) input태그의 내용을 value로 가져와 지정한 길이와 같다면 .focus() 로 다음칸으로 이동시켜준다.
Git은 버전 관리 시스템이다.
버전 관리 시 각 기록점 마다 코드를 확인하고, 특정 시점으로 소스코드를 복원할 수 있다.
Git을 온라인으로 관리할 수 있는 클라우드 서비스이다.
개발, 유지보수, 완성된 코드를 서비스로 반영할 수 있다.
개인컴퓨터(Git) <---> Github(온라인)
작업,업데이트 <---> 업로드
작업 기록을 모아놓는 폴더이며, 수정한 코드들을 모아서 볼 수 있다.
📌 user.name과 user.email은 깃허브와 정보와 동일해야 한다.
git init
작업폴더 내에 .git 폴더를 생성한다.
git remote add origin (repository URL)
git과 github를 연결한다.
git add .
stageing(임시저장)상태이다. git에서 한번 저장한건 되돌릴 수 없기 때문에, 확정해서 저장하기 전에 add를 통해 임시저장을 만들어 git에 commit기록을 남길건지 판단 할 수 있도록 도와준다.
"." 을 사용하면 .git 폴더에 작업 내용을 모두 추가한다.
git commit -m '내 인생의 첫 잔디'
확정 저장이며, 되돌릴 수 없기 때문에 한 번 커밋하면 다음 커밋으로 버전을 기록해야 한다. 뒷부분에 코멘트를 작성해준다.
git push origin master
github origin repository의 master 브랜치에 작업 내용을 업로드한다.
원하는 파일만 Commit & Push 하는 방법
- 1) git status :작업한 파일 목록 확인하기
- 2) git diff : 명령어를 이용하여 기존파일의 변경내역 확인하기
- 3) git add : 원하는 파일 추가하기
git add <경로 및 file명> <경로 및 file명> <경로 및 file명> ...- 4) git reset : add된 파일 취소하기
git reset HEAD <경로 및 file명>
자바스크립트 이벤트 감지하는 부분이 너~~~무 어려운것 같다.
회원가입 창 만들기 실습을 했는데 html, css는 비교적 쉽게 만들었지만 기능을 구현하는 부분에서 많이 힘들었다. 논리적인 구조로 기능을 구현한다는게 쉽지 않다고 느꼈다.
익숙해지면 나아지겠지..? 열심히 복습해야겠다.
git과 github에 대해 대충은 알고 있었는데 어떻게 사용해야 되는지 알게되었다. 무조건 commit하는게 아니었다니.. commit은 신중하게 해야겠다.
++ 자바스크립트 문제를 풀다가 reduce함수에 대해 알았는데 따로 정리해놔야 겠다.