(부록)스터디 윗 미

개봉하자마자 본 한산

4월 동안 열심히 들은 바닐라 js 정리 내용 + 실습 후 결과물
당시에는 티스토리 안 해서 메모장에 적어놓았는데 더 가독성 좋게 정리 + 한 곳에 내 행보 정리함으로써 통일화하는 김에 업로드한다.

 

(결과물 미리보기) - 노트북으로 들어가길 반응형 작업 1도 안 해서 이리 깨지고 저리 깨질 확률 99%

https://minkyu0424.github.io/studyWithMe/

StudyWithMe

 

1. variables

console을 통해 숫자 또는 문자를 입력받거나 출력하게 된다면, 일일이 숫자를 작성하고 수정해야 한다.

너무 많은 시간과 에너지를  소모하게 된다. 따라서 변수 사용 a+b한 후 매번 a와 b값을 변경하도록 한다.

ex) const a=1;  / const myName='Minkyu';

 

let과 const의 차이점 + var

let은 한번 선언시 재선언 불가능하다. 단 재할당은 가능하다.
ㄴ> let a = 10; let a = 11; (X) let a = 10; a = 11;(O)

const는 재선언, 재할당 불가능하다. 일반적으로 const로 대부분의 변수 선언 후  할당이 필요 할 경우 let을 사용한다.

var을 사용할 경우 변수의 값을 마음대로 변경 가능하지만 바뀌면 안 되는 변수사용에는 어울리지가 않는다.  
따라서, 상황에 따라 그에 맞는 변수 선언 방식을 택해야 한다.

---

2. booleans

진실 또는 거짓의 값을 가짐 True, False
False와 null의 차이를 구분해야 함, null(아무것도 없는 상태로 채워진다.)
Undefined -> 값을 주지 않고 변수를 선언 시에 undefined라고 표현된다 ex) let a; a에는 값이 없기에 Undefined로 출력됨. null, False, True, undefined는 텍스트가 아닌 데이터 타입이다.

---

3. array

데이터 타입을 각각 묶기 위한 방법 => 배열

선언 방법 : const 함수명 = [변수, 변수, 1, "minkyu", null, true]
console.log(함수명); => 배열 안의 전체 변수들을 출력

# 특정 위치의 요소를 찾는 법  => console.log(함수명[위치-1])
# 새로운 요소를 추가하는 법  => 함수명.push(요소)

---

4. object(객체)

객체의 자세한 설명은 내 설명 말고 공식문서를 보자.

http://www.tcpschool.com/javascript/js_object_concept

코딩교육 티씨피스쿨

 

const minkyuAge = 23
const minkyuMbti ="entp"
const minkyuHeight = 177
const minkyuWeight = 500 

이럴 경우, minkyu라는 개체에 대하여 여러 특성들이 붙어있다. 이는 다음과 같이 정리하는 것이 깔끔하고 사용하기에 편리하다.

두 가지 방법 [1]과 [2]를 보자.

[1]

minkyu.Age
minkyu.Mbti
minkyu.Height
minkyu.Weight

[2]

const minkyu = [ 23, "entp", 177, 500 ] 이렇듯 arrary로도 정리 가능하지만 불편하다.

각 요소들이 어떤 것을 의미하는지 직관적으로 알 수 없고, 그걸 설명하기 위에선 우리가 주석을 작성해야 한다.

그래서 [1]처럼 만들기 위해 다음과 같이 작성한다.
const minkyu = {
       age: 23, 
mbti:"entp", 
height:177, 
weight:500
}

자주 사용하는 console.log가 결국 console이라는 object(객체) 안의 log의 해당하는 값을 가져온다는 뜻이다.
우리가 minkyu.age를 사용해서 minkyu object의 age를 꺼내는 것처럼
console.log(minkyu.age) 또는 console.log(minkyu['age'])로 age의 값을 출력 가능하다.

또한, minkyu.age=24;이런 식으로 수정 가능하다. 

여기서 우리가 const안의 무언가를 수정해서 오류가 발생할 것 같지만 아니다.

const안의 object자체가 아닌, object의 요소의 값을 수정한 것이기에 문제없이 작동한다.

minkyu.lastName="Choi"이런 식으로 추가도 가능하다.
object를 사용할 때와 array를 사용할 때를 잘 구분해서 사용해야 한다.

 

---

 

5. function

함수() 코드의 재사용, 용량 낭비를 방지 위해 만듦
같은 (hello 이름) 문장을 출력하기 위해서 여러 명의 이름을 바꿔가면서 매번 사용해야 함
console.log("hello 민규")
console.log("hello 밍규")
console.log("hello 민구")
console.log("hello 밍구") -> 너무 시간이 낭비된다. 그래서 function을 사용

 function 함수명 ( ) { 
    함수를 소환할 때 실행될 코드들 
 }

 

함수를 실행시킬 때는 ()를 통해 실행시킨다 => 함수명(); 
이제 우리가 인수를 받아서 그거에 다르게 함수 결과를 내고 싶다.

함수명(민규) 이렇게 할 경우 Hello민규, 함수명(망고)할 경우 Hello망고 이렇게 출력되도록 작성하면 이렇게 된다.

function sayHello(nameofPerson) {
      console.log("Hello,"+nameofPerson);
}
sayHello("minkyu")의 경우 => Hello, minkyu가 출력된다. 이런 식으로 데이터를 입력받아서 출력한다.

+ 위에서 배운 object와 함수를 접목해서 만들 수 있다.

const minkyu = {
      age: 23,
      sayHello: function(personAge){
            console.log("Hello!"+personAge+"살이시군요!");
      },
};

console.log(minkyu.age);
minkyu.sayHello(24)

 

[실행결과]
23, Hello! 24살이시군요! 

 

마지막은 객체, 함수를 이용한 계산기

const carculator = {
	add: function (a, b) {
		console.log(a + b)
	},
	Minus: function (a, b) {
		console.log(a - b)
	},
	divide: function (a, b) {
		console.log (a / b)
	},
	multiply: function (a, b){
		console.log (a * b)
	},

};

carculator.add (10, 10);
carculator.Minus (50,5);
carculator.divide (10, 2);
carculator.multiply(30, 2);

---

 

6. return

함수 밖에서 결과를 출력하고 싶다. (데이터 결과 자체를 받아서 처리하고 싶은 상황)

전에 만든 계산기에선 값을 바로 보여주기만 하고 끝임 (그 결괏값 활용 불가하다.)
함수 밖에서 console.log(carculator.add(2,5))를 할 경우  값은 undefined가 나온다. 
그 이유는 함수 자체가 계산 후 결과를 바로 보여주는 함수이지 그 결과를 어디에 저장하지 않기 때문이다.

return을 통해 값을 반환받을 수 있다.

 

return이 실행되면 함수는 종료된다.
궁극적으로 우리가 함수를 통해 결과 값을 얻고 싶기 때문에 콘솔 창에 출력하는 console이 아닌 return으로 값을 받는다.

 

---

6. conditional

조건문을 사용해 여러 가지 상황을 연출 가능하다. (if, else)
ex) 사용자가 로그인을 했다면~, 사용자가 버튼을 클릭했다면~

prompt는 사용자에게 값을 요구한다. const a = prompt("How old are you?");
몇 살이냐는 문구가 뜨고 값을 받아서 저장한다. 하지만 css적용 불가능하고 이 prompt가 뜨는 동안
js가 아무것도 실행할 수 없다. 그래서 잘 사용되지 않는다.

typeof: 자료형을 알려주는 역할 typeof age => 정수형이라고 알려준다.

palseInt() 괄호 안의 숫자("123")를 숫자형으로 만들어줌 string의 경우 크기 비교를 할 수 없음
함수의 실행은 내부로부터 외부로 실행된다.

 

const age = pasleInt(prompt("How old are you?"));

몇 살이냐는 질문이 나오고 숫자를 입력하면 palseInt를 통해 숫자형으로 만들어주고 age에 저장된다.

 

isNAN(변수) 변수가 숫자라면 FALSE 숫자가 아니라면 TRUE가 출력된다.

if( 조건 ) {
     실행문
} else {
     실행문
}

 

else if 추가로 if조건이 필요할 때 사용한다. else if 사이에선 위 문장이 false여야 실행된다.

&&(AND연산자)  두 가지 조건이 모두 True여야지 밑의 코드가 실행된다.

||(OR연산자) 둘 중에 하나만 TRUE여도 실행된다.

 

(추가 내용) = 값을 할당, ==은 값을 비교하는데 쓰인다. (false == 0)의 boolean값은 true 왜냐하면 0은 false값을 갖기 때문이다.

(추가내용)  false === 0 은 (자료형은 boolean이자 값은 false === 0 자료형은 숫자이자 false값 따라서 false가 나옴)\

 

---

6. document

document 우리의 html을 가리키는 객체  ex) document.title시 html의 title을 가져온다.
document.title = '민규'로 title을 변경 가능하다 => js와 html은 연결되어 있다.

 

document.getElementById("id명") id이름을 가진 요소들을 가져온다.
js가 html을 보여주는 것이 가져와 활용하는 것이다.(가져오고 변경하고, 등)

 

.getElementByClassName(클래스명) 클래스명을 가진 요소들을 가져온다. 문제는 클래스를 가진 모든 요소들을 다 가져온다.

 

 

getElementByTagName("태그") 태그에 해당하는 것을 가져온다.위와 같이 h1이 여러 개일 경우 여러 개를 들고 온다.

 

querySelector(".hello h1") css처럼 사용 가능. 클래스명 또는 div명 태그명이  같은 클래스와 같은 태그를 가진 여러 요소가 있어도 처음 것만 들고 온다.

 

 

7. events

html안의 h1태그의 요소를 class와 태그를 통해 가져오고 가져온 그 요소의 스타일, 색깔 등에 접근하여 변경 가능하다.
event란 클릭을 하거나, 마우스를 이미지에 올리거나 , 작성을 마치거나, 와이파이 연결이 끊겼거나 이런

여러 event들을 js는 반응하고 감지할 수 있다.

변수명. addEventListner("click", 반응할 함수) 변수를 클릭한 것에 대한 반응을 감지하는 함수.

 

마우스를 클릭이 아닌 올렸을 때를 듣고 싶음 - mouseenter
마우스를 내렸을 때의 반응을 듣고 싶음 - mouseleave 등

 

# window관련 event들

• resize : 화면 크기가 바뀌었을 때를 listen 함
• copy : 텍스트를 복사했을 때를 listen 함
• offline : 인터넷이 연결이 끊겼을 때
• online : 인터넷이 연결이 켜진 상태일 때

 

 

# 제작과정 # 여기부터는 만든 걸 보면서 이해하자.

# 3-4 Getting username
입력 후에 내가 입력한 폼이 사라졌으면 좋겠음. hidden 클래스를 따로 만들어 클릭하면 이 클래스를 추가하고 
이름을 입력하고 클릭하면 원래 hidden이던 h1태그에 hidden클래스를 제거함.
그 후 입력받은 이름과 Hello를 결합해 출력해내는데 +를 써도 되지만 `string ${변수}`도 사용 가능

 

# 3-5 Saving Username
user이름을 입력받고 계속 기억하도록 하기 - localStorage를 통해 저장 가능
localStorage.setItem("저장하고픈 키 값" , "밸류 값") -저장
localStorage.getItem("보고픈 키 값" )- 저장되어있는 밸류 값 꺼내기
localStorage.removeItem("삭제하고픈 키 값" )- 밸류, 키 값이 삭제됨

 

# 3-6 Loading Username
새로고침 시 username은 저장되는데 계속 이름 입력창이 대신에 이름이 저장돼있을 시 form을 안 보이게 하고
Hello + 이름만 출력하고 싶음
ㄴ> local storage가 비어있으면 form부터 보여줌
ㄴ> local storage에 유저 정보가 있을 시 h1을 보여줘야 함

 

#3-7(Super Recap)
처음 들어갔을 때 local storage에 아무것도 없기에 로그인 폼의 hidden 클래스를 삭제한다
그 후 이름을 입력받아 기본 실행내용을 제한하고 그 후 로그인 폼의 hidden을 먹이고 username을 저장한다
Hello username을 출력하고 hidden class를 제거한다. 이러면 다음부터 if문에서 else만 먹어서  hello를
출력하는 행동만 계속 진행한다. 인자랑 키, 밸류 값 설정 이해 잘하기

 

# 4.0 Intervals
setInterval(실행시키려는 함수 또는 코드, 실행시킬 주기(m/s-1000이 1초)) 

 

#4.1 timesout dates
setTimeout(sayHello,1000); -> 1초 기다렸다가 한 번만 실행함
new Date() -> 지금의 시간 정보를 출력
get(Hours, Minutes, Seconds)를 통해 시간, 분, 초를 받아옴
위의 정보를 이용해 시계를 만듦.

#4.2 PadStart
4초이거나 4분일 때 0404 이런 식으로 표현되었으면 함. ->padStart를 이용
.padStart(길이, 길이가 '채워지지 않으면 채울 것') ex) padStart(2, '0') 앞쪽에 추가함
.padEnd(길이, 길이가 '채워지지 않으면 채울 것') 위와 반대임 0을 뒤에 채움
.toString() 문자열로 만들어줌


# 5.0 Quotes
인용구와 그 작가를 10개가량 적은 리스트 제작 후 이 리스트에서 웹을 들어갈 때마다
랜덤으로 호출하고 픔 따라서 Math.random()을 이용함 - 랜덤 삼수 생성
근데 우리가 필요한 것은 정수 0~9이기에 그 정수를 만듦
Math.round()를 사용 -반올림, 반내림을 해줌
Math.floor()- 무조건 소수점 상관없이 내림
math.ceil()-소수점 상관없이 올림


# 5.1 Backgrounds
background.js를 만든 후 위와 같은 방법으로 똑같이 img를 랜덤으로 생성하도록 함
js를 통해 html의 요소를 만듦 createElement를 통해 여기서는 img를 만들었다.
append는 가장 앞에 depend는 뒤에 만든다.


# 6.0 Setup
todolist를 작성하기 위해 html에 todo-form을,  js폴더에 todo.js를 만들었다
사용자에게서 할 일들을 입력받아 표현하기 위한 ul태그도 만들었다(다음 시간에 구축)
todo-form으로부터 해당하는 id의 요소들을 가져오게끔 하는 getElementById로 
todo-form에서 제출이 되면 실행되는 handleToDoSubmit함수에선 입력하면 새로고침을 자동으로 하는
기본 기능을 막는 preventDefault를 입력하고 이후 newToDo에 toDoInput의 value값을 저장한다
그다음 toDoInput에 value값을 빈칸으로 대체해 엔터를 누르면 빈칸이 되도록 한다.

# 6.1 adding to dos
paintToDo라고 하는 함수를 만들어 전에 만든 todo-form밑의 입력한 할 일들을 나열하는 함수를 만듦
li와 span을 각각 생성 후 li안에 span을 넣었다 (나중에 삭제가 용이해지게) 그 후 li안에 span태그를 넣어
span태그 안을 newTodo 즉 새로 적은 할 일이 들어가도록 했다. 

그 마지막을 li를 toDoList 즉 todolist ul에 넣어 마무리했다.


# 6.2 Deleting to do
todolist에 li에 버튼을 넣어 버튼을 클릭하면 해당하는 li가 삭제되게끔 만들고 싶다 먼저
저번 시간에 만든 paintToDo에 버튼을 document.createElement로 생성하고 
만든 버튼 안에❌이모티콘을 넣는다 그 후 이벤트 리스너로 클릭했을 때 함수가 실행되도록 하고 
이때 실행되는 함수인 deleteToDo를 만든다 이 함수는 먼저 event가 일어나는타겟에서부모 인자를 가져와
li라는 변수에 저장한다 저장한 li라는 변수를 삭제(이벤트가 일어나는 버튼의 부모인자 li를 삭제하면 todolist의
해당하는 li의 버튼과 span모두 삭제됨

# 6.3 Saving to Dos
저번 시간에 봤다시피 값을 입력해도 새로고침 하면 입력한 값들이 유지가 되지 않고 사라졌음 - 저장을 하고 픔
submit의 이벤트가 발생할 때 실행되는 함수 안에 배열 toDos에 새로운 값을 넣도록 했다. 단순히 배열을 생성
했기 때문에 저장되지 않음 저번처럼 로컬 스토리지를 이용해 함수 saveToDos를 만들어 로컬 스토리지 안에
키기 todos, 값이 문자열 형태로 저장되기 위해 JSON.stringify를 한 toDos의 배열을 넣는다.


# 6.4  Loading To Dos part One
저번 시간에 배열 형태로 저장이 되지않고 따로따로 스트링으로 저장되어 꺼내서 활용하기 힘들었다
JSON.parse()를 통해 배열형태로 바꿔서 배열처럼 접근이 가능하다 forEach를 통해 배열의 인자 하나
하나에 방문하며 차례대로 sayHello함수를 실행하도록 함 


# 6.5 Loading To Dos part Two
우리는 forEach를 통해 하나씩 인자를 꺼내는 법을 알았으니까 sayHello함수가 아닌 이미 만든
paintToDo함수를 사용해서 하나씩 가져오면 된다. 이제 이 하나씩 꺼낸 것이 새로고침해도 유지
되도록 해야 하는데  그러기 위해서는 const로 선언한 toDos를 let으로 바꿔 if (savedToDos != null)
안에 넣어 저장된 인자가 있을 때는 그 인자들을 표현하게 한다. 

# 6.6 Deleting To Dos part One
지금까지는 newTodo가 toDoInput의 밸류 값 만 저장되어서 toDos에 배열 형태로 저장되었는데 
활용하기가 너무 힘듦 삭제를 해야 하기 때문 따라서 각각 value에 아이디를 부여하고 싶음 
Date.now()현재의 ms를 반환하는 함수를 이용해 나름의 랜덤 아이디를 갖게 함.
newTodoObj라는 변수를 만들어 텍스트와 아이디를 갖는 객체를 배열에 저장하게 됨
따라서 paintToDo에서 객체 형태로 id와 text를 갖는 채로 생성이 되는데 이 li자체에 아이디를 부여해준다
이제 a를 두 번 적고 삭제를 하려 하면 각 a가 갖는 id에 따라서 내가 원하는 대로 삭제가 가능해졌다


# 6.6 Deleting To Dos part Two
저번 시간에 이어 id에 부여준 뒤 우리가 ForEach를 통해 하나씩 인자 안에 있는 요소들을 꺼낸 것처럼
새로운 filter()라는 기능을 이용해 id를 통해 삭제하는 법을 배웠다 자 그러면 filter란 무엇인가
 일반적으로 변수. filter(함수) 형식으로 사용하고 변수에서 하나씩 가져와서 함수에 적용해서 
True, 참을 반환하는 것만을 가져오고 False 거짓을 반환하는 경우는 제외하고 array를 제작함
const number[1,2,3,4,5];
function sexyFilter(item){return item !== 3}
number.filter(sexyFilter)
=> 결과는 [1, 2, 4, 5]        다음 시간에 완전하게 삭제하는 기능을 갖추도록 만들 것임

 

# 6.7 Deleting To Dos part Three
배운 filter를 통해  deleteToDo에 내가 클릭한 toDo와 같은 아이디를 가진 li는 제외하고 배열을 만들어 
saveToDos를 하여 해당하는 li가 없는 배열을 만들도록 함 li.id의 경우 문자열의 형태로 숫자들이 나오기에 
parseint()를 이용해 정수형으로 바꿔주어 비교가 가능하게끔 만들었다.


# 7.0 Geolocation
이제 내가 접속한 위치의 날씨를 알기 위해 openweatherapi를 이용할 것이고 (다음 시간) + 
navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError)을 통해 내 위치에 대한
정보를 받을 수 있었다. 

 

# 7.1 Weather API
API를 통해서 내 지역에 대한 위치정보, 기상, 온도를 입력받아 span에 저장함

 

7 뒤로부터는 js정리보다는 여러 가지 배우면서 실습에 관해 정리한 내용에 더 가깝다.

적다 보니 기억나는 부분도 많고 아 맞아 이렇게 사용했지 하고 가물가물한 것들도 많다.

주기적으로 복습하는 습관이 정말 중요한걸 다시금 느껴본다.