일자별 정리(2021.07)
2021-07-06
JavaScript(JS) 시작 전 몸풀기 상식 1) 백엔드와 달리 프론트엔드는 사실상 JS 외에는 옵션이 없다. 2) VS Code 웹 어플리케이션도 JS로 만든 것이다(!!). 3) 프론트/백엔드, 모바일/웹 어플리케이션, 머신러닝 등을 모두 만들 수 있다.
2021-07-08
JS
1) VS 사용시 html 파일에서 ! + tab을 하면 기본 html 양식이 자동완성된다.
2) 변수 선언 시 앞에 const가 붙는다. 변수명은 보통 카멜방식으로 작성한다.
2021-07-09
JS const vs. let : const는 변경 불가능한 변수(상수)를 선언할 때, let은 변경 가능한 변수를 선언할 때. 예전에는 둘을 구분하지 않고 var을 사용했는데 이렇게 하면 무엇이 변경 가능한 변수인지 아닌지 선언 단계에서 알 수 없기 때문에 최근에는 var대신 저 둘을 사용한다.
2021-07-11
JS array.push() 배열에 새 값을 추가할 때 쓰는 함수
2021-07-12
JS
1) Object 선언 const Myself = {name: "Soo", learning: "JS"} (딕셔너리랑 비슷하다!)
참고로 Myself.name = "Sooo"와 같이 수정하는 것은 const의 성질(변경 불가)을 위배하는 것이 아니다. Myself 그 자체를 바꾸는 것이 아니라 성질을 바꾸는 것이기 때문.
2) 함수 선언 function funcName(args){...}
3) Object 안에서 함수 선언도 가능하다!
const Myself = {
name: "Soo"
sayhi: function (placeHolder){
console.log("Hi " + placeHolder);
}
}Object 내부에서 정의한 함수는 다른 함수와 동일하게 Myself.sayhi("there")과 같이 호출 가능하다.
2021-07-13
JS
1) prompt는 (더 이상 사용하지는 않지만) C의 scanf와 같은 역할을 한다. 팝업을 띄워 사용자에게 값을 받는다. const answer = prompt("Question")
2) type casting from string to int parseInt
3) ===은 값과 데이터 타입 모두를 비교하는 연산자이다. ==은 값만 비교한다. 예를 들어 0==false는 true, 0===false는 false이다.
2021-07-14
JS
JS에서 document 객체를 통해 통해 html 요소에 접근할 수 있다. 예를 들어 콘솔에 document.title을 입력하면 html <head><title>태그에 입력한 title이 출력되고, document.title = "New title"을 입력하면 html <title>이 변경된다.
HTML과 JS 중 누가 우선할까?
index.html에는<title>"I am HTML!</title>을 입력하고 app.js에는document.title = "I am JS!를 입력한 후 실행하면 해당 페이지의 title은 어떻게 나올까?
정답은 "I am JS!" 이다.
2021-07-15
JS JS로 html 요소 가져오기
a. id로 가져오기: document.getElementById("myid")
b. class로 가져오기: document.getElementsByClassName("myclass")
c. CSS selector로 가져오기: document.querySelector("#myid .myclass h1") selector와 일치하는 첫번째 요소만 가져온다. BeautifulSoup4의 find와 유사하다. findAll과 마찬가지로 여러 요소의 array를 가져오려면 querySelectorAll을 사용한다.
2021-07-16
JS .addEventListener 이용한 Event 감지 *POST
2021-07-18
JS window의 Event 감지
JS에서 document와 유사하게 window를 통해 윈도우(브라우저 창) 객체에 접근하고 window.addEventListener("resize", userFunc)과 같이 Evnet를 감지할 수 있다.
const title = document.querySelector(".title");
function windowResize(){
title.style.backgroundColor = "blue"; // title의 배경색을 변경
}
window.addEventListener("resize", windowResize); // 윈도우 크기가 변경될 경우 함수 실행위 코드는 브라우저의 크기가 변경될 때 title 요소의 배경색을 바꾼다.
2021-07-20
JS 함수 내에서 const와 let 사용 *POST
2021-07-21
JS
1) CSS + JS로 스타일 변화주기
JS에서 직접 요소의 style을 손대는 것보다, 해당 style을 가지는 CSS class를 손대는 것이 더 괜찮은 방법이다.
const myElement = document.querySelector(".myelement");
// JS에서 직접 style을 바꾸는 방법
function changeColor(){
myElement.style.color = "blue";
}
// CSS에서 .newStyle { color = "blue"; }를 미리 만든 후 class만 할당하는 방법
function changeColorCSS(){
myElement.className = "newStyle";
}2) .classList.toggle("yourClass")는 요소의 클래스 안에 "yourClass"가 존재하면 그것을 지우고, 없다면 그것을 추가한다.
2021-07-26
JS JS와 HTML 적절히 섞어 사용하기 *POST
2021-07-27
JS event 객체를 이용한 통제
.addEventListener의 기본 argument는 해당 이벤트의 정보이다. 아래와 같은 함수를 만든 후 addEventListener에 입력하면 기본 argument인 event 객체로부터 이벤트 정보를 확인할 수 있다.
function onLoginSubmit(event){
event.preventDefault();
console.log(event);
}결과
SubmitEvent {isTrusted: true, submitter: button, type: "submit", target: form#login-form, currentTarget: form#login-form, …}
추가로 event.preventDefault()는 해당 event가 발생한 후 브라우저가 기본 동작을 수행하는 것을 막는다. 예를 들어 <a>를 클릭해도 링크가 넘어가지 않거나 <form> 내부에서 submit을 해도 브라우저가 새로고침되지 않는다.
2021-07-29
JS
1) string 두 개를 합치는 방법
| 이전 방식 | 새로운 방식 |
|---|---|
| "Hello " + variable | `Hello ${variable}` |
2) localStorage 사용한 변수 저장
브라우저 개발자 도구(Ctrl+Shift+I)에서 Application을 선택하면 localStorage, sessionStorage, cookies 등의 저장공간을 볼 수 있다. localStorage는 딕셔너리처럼 key:value 쌍으로 된 데이터를 저장하며 브라우저가 종료되어도 데이터가 유지된다.
.setItem, .getItem, .removeItem 등의 함수로 관리한다.
