훈훈한 Javascript (9)

< 섹션 3 >

1. vscode 세팅

prettier 설치

live server 설치

---

2. localhost란?

컴퓨터 주소

아이피 주소로도 사용.

두 개가 서로 같은 것

아이피 주소를 도메인으로 변환해주는 것 = DNS

127.0.0.1 을 localhost로 변환.

자세한 주소 = IP 주소

간단한 주소 = 도메인

도메인 옆 숫자의 의미

= 포트 번호

- live server 가 사용하기 위해서 설정해 둔 번호

---

3. D-Day Counter HTML 구조 완성

span 태그 사용 이유

div 태그 3개 생성

div*3 + tab

div 3개 만들어 줄 건데 각각의 div 안에는

span 태그가 2개씩 만들어져야 한다는 뜻

= div*3>span*2

- 태그들 크기 줄여주기 -

size 속성 사용

---

4. 비교연산자

이전 날짜를 입력해주면 음수가 나오게 됨.

조건의 성립 여부를 판단하기 위한 비교연산자.

비교연산자의 종류 (2)

 느슨한 비교는 사용하지 않도록 주의

원래는 ===을 쓰면 false인데

== 를 사용하면 true 가 반환됨.

숫자 0 과 빈 배열의 비교

다 true 가 나와서 문자열 0하고 빈배열이랑 비교했는데 false가 나옴.

check 변수와 문자열 "check" 가 같은지 비교

배열 비교

배열 arr = [ 1, 2, 3 ] 

arr === [ 1, 2, 3 ]

비교하기

배열 arr = [ 1, 2, 3 ]

arr === [ 1, 2, 3 ] 

false 반환

---

5. 배열과 객체의 비교

데이터 타입의 부가적인 개념 때문에 false를 배출

1) 원시타입

- 불변성: 데이터 변화 하지 않음

문자열 abc를 box 변수에 할당해주게 되면

변수는 데이터 자체를 담고있는게 아니라,

데이터가 저장된 문자열의 주소값(101)을 갖고오는 것.

box 라는 변수에는 abc 문자열 자체가 담기는 게 아니라,

또다른 임시 메모리의 저장되어있는 abc 문자열이 갖고 있는 주소값을 갖고 있는 것.

 

변수를 선언하고 데이터를 할당해줄 때,

abc 라는 문자열이 임시메모리에 저장이 되고,

저장됨과 동시에 주소값을 지니게 됨.

그리고 주소값을 box 라는 변수에 저장하게 됨.

 

재할당을 실행하면 데이터 자체가 변화하는게 아님.

재할당하면 재할당하는 과정에서 입력한 데이터가 임시메모리에 새로운 데이터가 저장이 되는 것.

그 데이터 또한 주소값을 갖고오는 것

재할당 되는 것은 데이터 자체가 아니라,

새로 입력된 데이터의 주소값이

변수에 담기게 되는 것.

변수가 참조하는

주소값만 변경이 됐을 뿐,

원래 갖고 있던 데이터 "abc"는 아무런 변화를 하지 않음.(불변성)

 

원시타입은 하나의 데이터가 하나의 주소값 갖고있는 것.

그리고 그 주소값이 바로 변수와 연결된 것.

2) 참조타입

주소값의 참조가 이뤄짐.

obj 변수가 객체를 담고있다면,

obj 변수에는 그 객체 자체가 아니라,

똑같이 주소값(201)을 갖고있음.

주소값(201) 에는 원시타입의 경우 문자열("abc")이 들어있었지만,

참조타입은 객체 자체가 들어가지 않음.

또다른 메모리에 존재하고 있는 객체의 주소값을 갖고옴

(2번 연결되는 셈)

2번을 거쳐서 객체를 참조.

false 가 나온 이유

: 엄격한 비교연산자 -> 주소값까지 비교

배열을 생성해 줄 때마다 배열은 고유의 주소값을 갖게됨.

 

arr 변수와 비교해주기 위해 새로운 배열[1,2,3]을 입력해줄 때

새로운 배열이 생성된 것. - 주소값도 새로 생기게 됨.

 

서로 주소값이 다르니 false

- 값의 복사 -

원시타입 데이터는

copy 라는 변수에 orgin 이라는 변수를 담아주는 것 만으로도 값이 복사가 된다.

그리고 원본데이터(origin)에 재할당("bye")을 해 주더라도,

복사된 데이터에 영향을 끼치지 않음.

거꾸로 복사된 데이터에 변화를 줘도 원본데이터에 영향을 끼치지 않음.

복사는 원래 원본데이터에 변화를 주는게 아니기 때문.

참조 타입 데이터의 복사는

원본데이터에 삭제를 하면

복사된 데이터까지 영향을 준다.

 

원본 배열이 아니라 복사된 배열에 영향을 주더라도

원본데이터 배열에도 영향을 준다.

(연동된 느낌..?)

 

1) 원시타입

2) 참조타입

배열 그 자체가 아니라 배열이 갖고 있는 주소값(560)을 담고 있는 또 다른 메모리의 주소값(201)이 변수에 담겨져 있음.

orgin 이라는 변수와 copy라는 변수가 똑같은 주소값을 공유 중

 

데이터가 복사된 것이 아니라, 해당데이터가 위치한 주소값을 복사해서 같은 데이터를 공유중인 것