오늘 배운 것
1. 이벤트 감지
2. 실습
- 3:00 타이머 만들기 (조건문 사용)
- 간단한 회원가입 창 (조건문 사용)
- 핸드폰 번호 입력 창 (focus)
3. Git과 Github
1. 이벤트 감지
페이지에 무언가 입력되거나 변경되었을 때 자바스크립트에서 이벤트가 발생한다.
이벤트가 발생할때 기능을 수행하거나 명령하도록 한다.
예) 회원가입 시 이메일, 비밀번호를 입력해야 하는 경우
실습) 3:00 타이머 만들기
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이 계속해서 작동하기 때문에 타이머의 시간이 꼬이게 된다.
- isStarted라는 변수를 만들어 false로 초기값 설정을 해주고, 조건문을 사용하여 타이머가 작동중이 아닐 때 isStarted=true를 설정하여 setInterval이 작동하도록 해주었다.
- 또한, 인증완료 버튼을 활성화 시켜준다.
2) setInterval은 변수에 재할당 될때 제대로 작동하므로 timer라는 변수를 만들어 할당해주었다.
- 인증완료 시간이 초과됐을때, 인증완료 버튼을 다시 비활성화 해주고, 타이머 종료를 위해 isStarted=false로 설정한 후, clearInterval() 로 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() 로 다음칸으로 이동시켜준다.
2. Git과 Github
Git
Git은 버전 관리 시스템이다.
버전 관리 시 각 기록점 마다 코드를 확인하고, 특정 시점으로 소스코드를 복원할 수 있다.
Github
Git을 온라인으로 관리할 수 있는 클라우드 서비스이다.
개발, 유지보수, 완성된 코드를 서비스로 반영할 수 있다.
개인컴퓨터(Git) <---> Github(온라인)
작업,업데이트 <---> 업로드
Repositories
작업 기록을 모아놓는 폴더이며, 수정한 코드들을 모아서 볼 수 있다.
- 브랜치(master) : 배포용. 변경 사항이 생기면 바로 유저한테 전달되기 때문에 오류가 발생할 가능성이 높다.
- 브랜치(dev) : 개발용 코드를 만들어 테스트를 함. 테스트 후 공개하기 위해 master브랜치에 덮어쓰기(merge)해준다.
Github Repositories 연결 (vs-code 터미널에서 실행)
- git config --global user.name "이름"
로컬 git에 이름을 설정한다. - git config --global user.email "email@gmail.com"
로컬 git에 메일주소를 설정한다 - git config --global core.editor nano
git 에디터를 nano로 설정한다.
📌 user.name과 user.email은 깃허브와 정보와 동일해야 한다.
Git 연결하기 (vs-code 터미널에서 실행)
-
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함수에 대해 알았는데 따로 정리해놔야 겠다.
