패스트캠퍼스 대학생 서포터즈 프로그래밍 첫걸음 10번째 게시글이다.
올인원 패키지 프로그래밍 첫걸음 사진에서 이제 JS 까지 진도를 나갔다.
벌써 68%의 진도를 달성했다!
패스트 캠퍼스 서포터즈를 하면 강의도 공짜로 들으면서 단기간에 완강할 수 있다! 👍
다음 패스트캠퍼스 대학생 서포터즈를 모집할 때도 지원하고 싶을 정도다. 🤣
이번 프로그래밍 첫걸음 자바스크립트 강의에서 드디어 Firebase를 이용하는 법을 배운다!
Firebase CLI 도구도 새롭게 다뤄보고 배포 과정까지 영상만 본다면 순식간에 할 수 있다!
이제 내 컴퓨터에서 혼자만 보는 것이 아니라 다른 사람들도 내 웹 문서를 구경할 수 있다.
패스트 캠퍼스 프로그래밍 첫걸음 강의가 아니었다면
파이어베이스에 정적 호스팅 기능이 있다는 것을 몰랐을 것이다.
프로그래밍 첫걸음을 제대로 뗄 수 있는 강의, 비전공자, 입문자 모두 추천한다!
8주차에 배운 주제들을 정리해보자!
8주차 진도에서는
- 15. [JAVASCRIPT] JAVASCRIPT 마우스 이벤트
- 과제1. 마우스 클릭 이벤트 처리 해보기
- 16. [JAVASCRIPT] JAVASCRIPT 키보드 이벤트
- 과제2. 키보드 입력 이벤트 처리 해보기
- 17. 이벤트 활용 하기
- 과제3. 소개 화면 이벤트 처리 해보기
- 18. [FIREBASE] Firebase 배포
- 과제4. 이미지 변경사항 재배포 하기
- 19. [JAVASCRIPT] 웹 기초 마무리
- JAVASCRIPT 과제 영상 1
- JAVASCRIPT 과제 영상 2
15. [JAVASCRIPT] JAVASCRIPT 마우스 이벤트
- index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Javascript 마우스 이벤트</title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <p id="test"></p> <button id="btn" onclick="alert('실행문1');" onclick="alert('실행문2');">실행문1</button> <button id="btn1">실행문2</button> <script type="text/javascript" src="js/main.js"></script> </body> </html> | cs |
- css/main.css
1 2 3 4 | p { border: 5px solid red; padding: 40px; } | cs |
- js/main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | var colorArr = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]; var p = document.getElementById("test"); p.onmouseover = function() { var rand = Math.floor(Math.random() * colorArr.length); p.style.backgroundColor = colorArr[rand]; }; p.onmouseout = function() { p.style.backgroundColor = "black"; }; document.getElementById("btn1").addEventListener("click", function() { alert("실행문1"); }, false); document.getElementById("btn1").addEventListener("click", function() { alert("실행문2"); }, false); | cs |
이벤트를 등록하는 첫 번째 방법인 속성으로 등록으로
HTML 문서에서 btn 아이디를 가진 버튼 엘리먼트에 onclick 속성으로 함수를 등록했다.
alert() 함수가 실행되는 것을 확인했다. 근데 onclick 속성을 두 번 입력하면
제일 처음에 설정했던 onclick 스크립트만 실행해버린다.
두 번째로 DOM 객체로 이벤트를 등록했다.
마우스 이벤트로 p 태그의 배경을 바꿔보는 실습을 진행했다.
자바스크립트에서 엘리먼트를 가져와 onmouseover 이벤트와 onmouseout 이벤트로
p 태그의 배경색을 변경했다.
onmouseover 이벤트로 마우스가 p 태그 영역에 들어갔을 때 랜덤으로 배경색을 변경한다.
Math.random() 함수는 0 <= x < 1 의 값을 가진다. 여기서 배열의 총 길이를 모든 항에 곱하게 되면
0 <= x * colorArr.length < colorArr.length 의 소수점 값을 가진다.
Math.floor() 함수로 내림을 해 정수형으로 바꿔 0부터 colorArr.length - 1 까지의 인덱스를
랜덤으로 뽑아준다.
onmouseout 이벤트로 마우스가 p 태그 영역을 벗어날 때 배경색을 검정색으로 바꿔준다.
세 번째 방법으로 addEventListener() 메서드로 이벤트를 등록해본다.
이 자바스크립트 메서드로 이벤트를 등록했을 때와 HTML 엘리먼트의 onclick 속성으로 이벤트를 등록했을 때의 차이점이 있다!
onclick 속성으로 두 번 이벤트를 등록했을 때는 처음 등록한 이벤트만 실행이 됐다면
addEventListener() 메서드로 두 번 이벤트를 등록했을 때는 두 이벤트 다 실행이 된다!
< 자바스크립트 마우스 onmouseover, onmouseout 이벤트 동작 사진 >
[ QUIZ ]
1. 'DOM 탐색'과 '속성 등록' 방식은 이벤트 중복 등록이 불가하다.
2. 이벤트를 중복 등록하기 위해 'addEventListener'를 사용한다.
과제1. 마우스 클릭 이벤트 처리 해보기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Javascript 마우스 이벤트</title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div> <p id="test"></p> <button id="starttimer">타이머 시작</button> </div> <script type="text/javascript" src="js/main.js"></script> </body> </html> | cs |
- css/main.css
1 2 3 4 | p { border: 5px solid red; padding: 40px; } | cs |
- js/main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | var time = 0; //타이머를 나타낼 변수 선언 var isTime = false; //타이머가 시작됐는지 체크할 변수 선언 var timer = null; //타이머 객체를 담을 변수 선언 var button = document.getElementById("starttimer"); //타이머(버튼)을 가리킬 변수 선언 //타이머 함수 선언 function myTimer(){ document.getElementById("test").innerHTML = time++; } //타이머 실행 document.getElementById("starttimer").addEventListener("click", function(e){ //타이머가 실행 중이 아닐 경우 실행할 코드 if(!isTime){ isTime = true; //타이머 시작 myTimer(); timer = setInterval("myTimer()", 1000); button.innerHTML = "타이머 중지"; //타이머가 실행 중일 경우 실행할 코드 }else{ isTime = false; //타이머 초기화 clearInterval(timer); document.getElementById("test").innerHTML = ""; button.innerHTML = "타이머 시작"; } }, false) | cs |
addEventListener() 메소드로 버튼의 클릭 이벤트를 만드려면, 첫 번째 인자에 "click" 을 입력해야한다.
이전에 배운 setInterval() 함수로 주기적으로 핸들러 함수를 실행하는 타이머를 만들 수 있다.
그리고 clearInterval() 함수로 주기 타이머를 초기화할 수 있다.
< 자바스크립트 버튼 onclick 이벤트, 타이머 동작 사진 >
16. [JAVASCRIPT] JAVASCRIPT 키보드 이벤트
키보드 이벤트는 다음과 같다.
onkeydown 이벤트 : 지정한 요소에 키보드가 눌릴 때 발생한다.
onkeyup 이벤트 : 지정한 요소에 키가 눌렀다 뗄 때 발생한다.
- index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Javascript 키보드 이벤트</title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <p id="test"></p> <form> <input type="text" name="testText"> </form> <script type="text/javascript" src="js/main.js"></script> </body> </html> | cs |
- css/main.css
동일하다.
- js/main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | document.getElementsByName("testText")[0].onkeydown = function(e) { var eventCode = e.code; if (eventCode == 'Digit1') { document.getElementById("test").innerHTML = "1번을 눌렀습니다."; } else if (eventCode == 'Digit2') { document.getElementById("test").innerHTML = "2번을 눌렀습니다."; } } document.getElementsByName("testText")[0].onkeyup = function(e) { var evenstCode = e.code; if (eventCode == 'Backspace') { document.getElementById("test").innerHTML = ""; } } | cs |
onkeydown 과 onkeyup 이벤트를 등록할 때 함수 인자로 객체가 들어온다.
그 객체의 code 프로퍼티로 어떤 키코드인지 확인할 수 있다.
console.log(e.code); 으로 키를 누르거나 뗐을 때 어떤 값이 나오는 지 확인할 수 있다.
이 예제에서는 숫자 1번과 2번을 누를 때 p 태그를 수정한다.
그리고 백스페이스를 눌렀을 때는 p 태그를 초기화한다.
< 자바스크립트 키보드 onkeydown, onkeyup 이벤트 동작 사진 >
두 번째 실습은 마우스의 onmouseover 와 onmouseout 이벤트에 대응되는 키보드 이벤트를 알아보았다.
Tab으로 해당 엘리먼트의 포커스를 가질 때와 포커스를 벗어날 때 이벤트를 발생하도록 할 수 있다.
바로 onfocus 이벤트와 onblur 이벤트다.
Tab 으로 마우스 대신 키보드로 조작을 가능케 해준다. 이를 키보드 접근성이라고 한다.
- index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Javascript 키보드 이벤트</title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <p id="test"></p> <form> <input type="text" name="testText"> </form> <button class="btn">버튼</button> <button class="btn">버튼</button> <button class="btn">버튼</button> <button class="btn">버튼</button> <script type="text/javascript" src="js/main.js"></script> </body> </html> | cs |
- css/main.css
동일
- js/main.js
1 2 3 4 5 6 7 | document.getElementsByClassName("btn")[0].onfocus = function() { document.getElementById("test").innerHTML = "Tab을 이용한 이벤트 -> onmouseover"; }; document.getElementsByClassName("btn")[0].onblur = function() { document.getElementById("test").innerHTML = "Tab을 이용한 이벤트 -> onmouseout"; }; | cs |
< 자바스크립트 키보드 onfocus, onblur 이벤트 동작 사진 >
[ QUIZ ]
1. '키보드 접근성'는 마우스를 대신할 이벤트를 등록하는 방법이다.
2. 'onmouseover'와 'onmouseout' 이벤트는 각각 onfocus, onblur 이벤트로 대응한다.
과제2. 키보드 입력 이벤트 처리 해보기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!doctype hmtl> <html> <head> <meta charset="utf-8"> <title>Javascript 키보드 이벤트</title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div> <form> <input id="search" type="text" name="name" value="자동 완성 테스트" autocomplete="off"> </form> <ul id="autocomplete"></ul> </div> <script type="text/javascript" src="js/main.js"></script> </body> </html> | cs |
- css/main.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | ul { padding: 5px; width: 250px; } li { list-style: none; padding: 3px; margin: 5px; } li:hover { background-color: #eee; cursor: pointer; } | cs |
- js/main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | //결과 리스트를 나타낼 변수 선언 var autocomplete = document.getElementById("autocomplete"); //input 태그의 값을 받아올 변수 선언 var search = document.getElementById("search"); //특정 키워드에 해당하는 입력 값에 대한 결과를 반환할 배열 선언 var wordList = ["Russian blue", "British Longhair", "Burmilla", "Bombay"]; //문자열 결합을 위한 변수 선언 var word = ""; search.addEventListener("keyup", function(e){ //입력값 var keyword = search.value; //입력 값이 "cat"인 경우 if(keyword == "cat"){ autocomplete.style.border = "1px solid black"; //문자열 결합 for(var i = 0; i < wordList.length; ++i){ word += "<li>" + wordList[i] + "</li>\n"; } //문자열 결합 결과 표시 autocomplete.innerHTML = word; //입력 값이 없는 경우 }else if(keyword == ""){ autocomplete.style.border = ""; autocomplete.innerHTML = ""; //입력 값은 있지만, "cat"이 아닌 경우 }else{ autocomplete.style.border = "1px solid black"; autocomplete.innerHTML = "<li>검색 결과가 없습니다!</li>\n"; } //이벤트 종료시 word 값 초기화 word = ""; }, false); | cs |
< 자바스크립트 자동 완성 과제 결과 사진 >
17. 이벤트 활용 하기
JavaScript 에서 this 키워드를 알아본다.
this란 요소 자기 자신을 가리키는 키워드다.
this 요소에 이어 실습에서 CSS 로 애니메이션을 하는 법을 배운다.
그리고 자바스크립트로 CSS 속성을 적용시키면서 애니메이션을 발생하고 CSS 속성을 해제하면서 애니메이션을 해제한다.
실습 코드는 다음과 같다.
- index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!doctype hmtl> <html> <head> <meta charset="utf-8"> <title>Javascript 이벤트 활용</title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div id="wrap"> <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"> </div> <script type="text/javascript" src="js/main.js"></script> </body> </html> | cs |
이미지 소스는 구글에서 아무 고양이 사진 이미지 주소를 복사했다.
- css/main.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | img { width: 500px; } div#wrap { border: 3px solid red; padding: 30px; } div.over > img { animation-name: move; animation-duration: 3s; animation-fill-mode: forwards; } @keyframes move { from { opacity: 0.2; } to { opacity: 1; width: 350px; } } | cs |
- js/main.js
1 2 3 4 5 6 7 | document.getElementById("wrap").onmouseover = function() { this.setAttribute("class", "over"); }; document.getElementById("wrap").onmouseout = function() { this.setAttribute("class", ""); }; | cs |
this 키워드로 요소 자기 자신을 가리켜 setAttribute() 메소드로 속성을 수정하고 있다.
this 키워드를 자세히 알고 싶다면 강사님이 작성한 문서를 확인했다!
비단 엘리먼트 뿐 아니라 function, 객체(Object) 에서도 사용할 수 있다.
그리고 CSS 에서 애니메이션을 추가했다.
@keyframes 이름 {
from {
...
}
to {
...
}
}
으로 from 에 있는 CSS 속성에서 to 에 있는 CSS 속성으로 이동한다.
대상 스타일 코드에서 animation 속성으로 애니메이션 이름과 시간을 설정했다.
fill-mode: forward; 는 애니메이션이 끝나면 다시 안 돌아오고 멈추게 해준다.
다음은 실습 사진이다.
< 자바스크립트 애니메이션 이벤트 실습 동작 사진 >
[ QUIZ ]
1. 'this' 키워드는 요소 자기 자신을 가리킨다.
2. CSS '@keyframes' 키워드를 통해 애니메이션 동작을 만들 수 있다.
과제3. 소개 화면 이벤트 처리하기
명령 프롬프트 창에서 1번에 써있는 명령어로 firebase CGI 환경을 설치하다.
파이어베이스 도구는 금방 설치가 됐다.
그 다음에 firebase login 명령어로 로그인한다.
웹 브라우저로 구글 로그인 화면이 나타나면서 로그인을 진행한다.
로그인을 하면 권한 수락을 해준다.
그 다음에 프로젝트 폴더로 이동한다.
프로젝트 폴더에서 firebase init 으로 firebase 환경을 만들어준다.
아래 방향키로 Hosting 메뉴로 옮기고 Space 로 선택하고 Enter 키를 눌러 진행한다.
몇 가지 과정을 거쳐 프로젝트가 완성된다.
What do you want to use as your public directory? public
질문은 public 폴더를 만들 것인지를 묻는다. 그냥 Enter 를 눌러 생성한다.
Configure as a single-page app (rewrite all urls to /index.html)? 질문은 N 으로
index.html 을 새로 생성하지 않는다.
그러면 파이어베이스 설정 파일인 firebase.json 파일과 .firebaserc 파일이 생성된다.
마지막으로 배포를 해보자!
firebase deploy 명령으로 배포가 자동으로 진행된다.
Hosting URL 를 복사하여 웹브라우저로 접속할 수 있다.
만약에 파일을 컴퓨터에서 수정을 한다면 다시 firebase deploy 명령으로 수정된 내역을 배포해야 한다.
< 파이어베이스 배포 화면 >
앞서 했던 과제 그대로 배포를 진행했다.
폴더 구조를 아래와 같이 바꿨다.
public 폴더 안으로 모두 밀어 넣었다.
강사님이 작성한 문서에도 친절히 과정이 적혀있다.
과제4. 이미지 변경사항 재배포 하기
< 새 이미지 주소를 배포한 화면 >
자바스크립트를 마무리 했다!
파이썬 강의로 넘어가기 전에
자기 소개 페이지를 만들어 파이어베이스로 배포를 해봐야겠다.
강사님이 만든 샘플 자기 소개 페이지는 W3.CSS 라는 CSS 프레임워크를 이용한 것 같다.
나도 그 프레임워크로 비슷하게 만들어볼 계획이다!
만든 자기 소개 페이지로 조만간 제작해야 할 서포터즈 콘텐츠에 쓸 예정이다!
조만간 서포터즈 콘텐츠도 고민을 해봐야겠다. 😃
'자유 > 대외 활동' 카테고리의 다른 글
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #12.10주차 학습후기, 파이썬 프로그래밍 (0) | 2019.05.27 |
|---|---|
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #11.9주차 학습후기, 파이썬 프로그래밍 시작 (0) | 2019.05.12 |
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #9.7주차 학습후기, 자바스크립트 정복하기! (0) | 2019.05.06 |
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #8.6주차 학습후기, 학습진도 50% 달성! (0) | 2019.05.05 |
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #7.5주차 학습후기 (0) | 2019.05.04 |
댓글