-------
개발 블로그를 티스토리로 옮기며 기존의 네이버 블로그에 작성한 내용을 그대로 옮겼습니다.
https://blog.naver.com/0yeonjae2/222345498120
-------
이론 복습하기 - 최신 자바 스크립트 문법 1 (With CodeSandBox)
(1) 변수
1. 변수
: 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름, 즉 값의 위치를 가리키는 상징적인 이름이다. 변수가 값 자체를 가리키는 이름이 아니라는 것이 중요하다.
2. 변수 선언하기
변수 이름 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
변수 값 : 변수에 저장된 값
할당 : 변수에 값을 저장하는 것
참조 : 변수에 저장된 값을 읽어 들이는 것
선언 : 변수를 생성하는 것. 즉, 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해 값을 저장할 수 있게 준비하는 것
var, let, const 키워드를 사용한다.
3. var, let, const
var : 중복 선언 허용, 함수 레벨 스코프 지원
let : 중복 선언 허용 x , 블록 레벨 스코프 지원, 변수 선언
let으로 변수를 선언해서 중복 선언 시 문법적 오류가 발생한다.
const : 중복 선언 허용 x, 블록 레벨 스코프 지원, 상수 선언( == 재할당 불가)
const로 변수를 선언해서 중복 선언 시 문법적 오류가 발생한다.
const는 상수 선언이라 재할당이 불가하다.
▷중복 선언
프로그래밍을 하다 보면 이전에 선언한 변수와 같은 이름을 사용해서 변수를 선언하는 경우가 생긴다. 이러한 상황에서 중복 선언을 하고 값이 할당되면 먼저 선언된 변수 값이 변경되어 원하는 결과를 도출할 수 없게 된다.
let과, const를 사용해 변수를 선언했을 때, 위와 같은 상황에서는 문법적 오류가 발생해서 중복 선언을 허용하지 않는다. 하지만 var는 중복 선언을 허용하므로 문제가 발생할 수 있다.
▷함수 레벨 스코프와 블록 레벨 스코프
let으로 선언한 변수는 해당 코드 블록 내에서만 유효하지만, var로 선언한 변수는 if문 내에서만 유효한 것이 아니라 전역적으로 유효하다. 함수 레벨 스코프를 사용하다 보면 의도치 않게 전역 변수를 계속 사용하게 되어 불편해진다.
4. 변수 호이스팅
: 변수 참조보다 변수 선언이 나중에 이루어지더라도 변수 선언이 코드 앞단으로 끌어올려진 것처럼 동작하게 되는 것
변수를 선언하기 전에 변수를 참조하는 코드가 있는 경우이다. 이때 콘솔창에는 undefined라는 값이 나온다. 이 상황을 통해 자바스크립트의 2가지 성질을 알 수 있다.
① 변수에 아무 값도 할당하지 않았음에도 불구하고 이미 undefined라는 값이 있었다.
: 변수 선언에 의해 확보된 메모리 공간은 자바스크립트 엔진에 의해 비어 있는 것이 아닌, undefined라는 값이 할당되어 있다.
②변수 선언의 실행 시점과 런타임이 동시에 일어나지 않는다. (자바스크립트의 고유한 능력)
: 자바 스크립트 엔진은 소스코드를 한 줄씩 실행하는 시점, 즉 런타임 이전에 먼저 소스코드를 평가한다. 이 단계에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아 먼저 실행한다. 따라서 실제 런타임에서는 변수 선언문이 변수 참조문보다 먼저 작성된 것 같이 동작하게 된다.
(2) 데이터 타입
: 데이터 타입은 크게 원시 타입, 객체 타입으로 구분하며 총 7개의 데이터 타입이 있다.
원시 타입(primitive type) : 숫자, 문자열, 불리언, undefined, null
객체 타입(object/reference type) : 객체, 함수, 배열
①숫자 타입(Number) : 실수 (정수를 표현하기 위한 데이터 타입이 별도로 존재하지 않음)
a, b, c 모두 데이터 타입은 number이다.
▶ 연산 결과로 Infinity, -Infinity, NaN 이 나오는 경우 :
NaN은 산술연산 불가(Not-a-Number) 한 상황에서 나타난다.
②문자열 타입(String) : 텍스트 데이터 ' '(작은따옴표), " "(큰따옴표), ` `(백 틱)으로 감싸 표기
이때 ``(백 틱)으로 감싸는 표기법을 템플릿 리터럴이라고 한다.
템플릿 리터럴을 통해서 멀티라인 문자열, 표현식 삽입이 가능하다.
③불리언 타입(Boolean) : 논리적인 참, 거짓을 나타낸다.
④ undefined 타입 : 자바스크립트 엔진이 변수를 초기화할 때 사용한다.
개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값이므로, 개발자가 변수에 값이 없다는 것을 명시하고자 할 때는 undefined가 아닌 null을 할당해야 한다.
⑤ null 타입 : 변수에 값이 없음을 명시한다. 함수가 유효한 값을 반환할 수 없을 때 null을 반환하기도 한다.
⑥객체 : 프로퍼티와 메서드로 구성된 집합체
프로퍼티 : 객체를 구성하는 key:value의 포맷
프로퍼티 중 value 값이 함수인 경우, 이를 일반적인
함수와 구분하기 위해 메서드라는 명칭 사용
▶객체 생성하기 (객체 리터럴)
▶객체 생성하기 (생성자 함수)
이 둘 이외에도 다른 방식을 사용해 객체를 생성할 수 있다.
(3) 연산자
○ 산술 연산자 : 수학 계산을 수행해 새로운 값을 만들어낸다. 산술 불가 시 NaN을 반환한다.
산술 연산자는 피연산자가 2개인 이항산술연산자(+, -, *, /, %)와 피연산자가 하나인 단항산술연산자(++, --)로 구분된다.
○할당 연산자 : 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수값에 할당한다. (+=, -=, *=, /=, %=)
○비교 연산자 : 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.
비교 연산자는 대소 관계 비교 연산자와 동등/일치 비교 연산자로 구분된다.
대소 관계 비교 연산자 : > , >= , <, <=
동등/일치 비교 연산자 : 동등 비교 연산자는 ==, 일치 비교 연산자는 ===이다. 동등 비교 연산자는 좌항과 우항의 피연산자를 비교할 때 타입 변환을 통해 같은 타입인 상태에서 비교하고, 일치 비교 연산자는 값과 타입 모두를 비교해서 연산 결과를 도출한다.
⇒부동등/불일치 비교 연산자 : 부동등 비교 연산자(!=)는 동등 비교 연산자와, 불일치 비교 연산자(!==)는 비교 연산자와 같은 방식으로 결과를 도출한다.
○삼항 조건 연산자 : 조건식의 평가 결과에 따라 반환할 값을 결정한다.
첫 번째 피연산자가 true로 평가되면 두 번째 피연산자를 반환하고, 첫 번째 피연산자가 false로 평가되면 세 번째 피연산자를 반환한다.
○ 논리 연산자 : 우항과 좌항의 피연산자를 논리 연산한다.
- 논리합 연산자 : || EX) true || false ; // true
- 논리곱 연산자 :&& EX) true && false ; // false
-논리 부정 연산자 : ! EX) !true ; // true
bag2에는 아무 요소도 들어있지 않아서 bag2의 값은 0이다. falsy 한 값으로 간주되어 res2에는 첫 번째 피연산자의 값이 할당됨.
⇒ Falsy : 사실상 false로 평가되는 값 & Truthy : 사실상 true로 평가되는 값
Boolean 문에서 만났을 때 false로 간주되는 0, ' ', null, undefined, NaN 등과 값들이 Falsy 한 값이고 Falsy 한 값이 아닌 것들 모두가 Truthy 한 값이다.
클론 코딩 실습하기
1. 검색어 목록 제작하기
이번 주는 저번 주에 언급한 것처럼 검색창 아래 뜨는 검색어 목록들을 만드는 작업을 시작했다.
숫자가 있는 목록이라서 ol 태그를 이용해서 만들던 도중 문제가 생겼다. 아래 사진처럼 목록들 옆에 숫자가 나타나지 않았다.
ol 태그는 원래 목록들 앞에 바로 숫자가 나타나는데 나타나지 않았다.
css로 list-style-type: decimal; 을 적용해 주니 바로 앞에 숫자가 생겼다.
원래 사이트에서는 숫자 옆에 점이 표시되지 않는다. 그래서 추가적으로 무슨 효과를 줘야 할지 찾아봤다. 대부분의 정보글에서 ul 태그 옆에 생기는 · 점을 없애는 방법들에 대해 언급해 주셨다. 계속 구글링하다가 방법을 찾은 것 같긴 한데 잘 이해가 되지 않아서 결국 수작업으로 숫자를 입력했다.
첫 번째는 원래 사이트에서는 인기 검색어나 최근 검색어 버튼을 누르면 버튼들의 색깔이 바뀌는데 바뀌지 않는 것이고
두 번째는 영상에서 나타나진 않았지만 검색창에서 검색창이 아닌 부분을 누르면 자동으로 창이 사라져야 하는데 사라지지 않는다는 것이다.
첫 번째는
popularbtn.addEventListener("click", function(){
popularcontents.style.display= 'block'
recentcontents.style.display= 'none'
searchmenuEl.style.height= "357px"
closepopular.style.top= '320px'
popularbtn.style.backgroundColor = '#fff'
recentbtn.style.backgroundColor = '#969697'
})이런 식으로 js 코드를 작성했는데 backgroundColor style만 적용되지 않았다. 인터넷에서 해답을 찾던 중 내가 작성했던 html을 고쳐서 해결했다.
<h3 class="searchContentsBtn"><button type="button" id="popular">인기검색어</button></h3>위의 태그대로 했어야 되는데 h3 태그 안에 id 값을 주고 계속 고생하고 있었다. 두 번째랑 같이 해결하려고 거진 4시간 동안 붙잡고 있었는데, 상상치도 못했던 실수라 황당하다.
popularbtn.addEventListener("click", function(){
popularcontents.style.display= 'block'
recentcontents.style.display= 'none'
searchmenuEl.style.height= "357px"
closepopular.style.top= '320px'
popularbtn.style.backgroundColor = '#fff'
popularbtn.style.borderBottom = '0'
recentbtn.style.backgroundColor = '#f2f2f2'
recentbtn.style.borderBottom = '1px solid #d2d2d2'
})
recentbtn.addEventListener("click", function(){
popularcontents.style.display= 'none'
recentcontents.style.display= 'block'
searchmenuEl.style.height= '200px'
closepopular.style.top= '170px'
remove.style.top= '170px'
recentbtn.style.backgroundColor = '#fff'
recentbtn.style.borderBottom = '0'
popularbtn.style.backgroundColor = '#f2f2f2'
popularbtn.style.borderBottom = '1px solid #d2d2d2'
})위의 코드를 js에 적용해서 원하는 모습을 만드는 데 성공했다.
두 번째 문제도 첫 번째 문제와 같이 엄청 오랫동안 검색을 했다. 하지만 해결 방법을 찾는 데 실패했다. 구글링해서 알게 된 코드들은 모두 js에서 함수를 만들어 효과를 주는 방식인데, 그 코드를 내 상황에 맞춰 적용해봤지만 다 실패했다. 일단 이 부분을 제외하고 다른 부분들 위주로 만들어야겠다.
2. scroll to top 기능 만들기
(동영상은 글 상단에 걸어둔 네이버 블로그를 통해 볼 수 있습니다. )
이 기능은 원래 지니 사이트에서는 없는 기능이지만, 나는 만들어 보기로 했다!
구글에서 음악과 관련된 아이콘을 다운로드해서 색깔을 하늘색으로 지정해 줬다.
이후 교수님이 올려주신 scroll to top 기능 만드는 방법을 참고해서 작업을 시작했다.
3. css 관련 세부사항 조절
에디터 추천에서 앨범 추천을 호버하면 색이 어두워지며 몇 곡을 추천하는지 나타난다. 중간 제출 때는 이 기능을 구현하긴 했지만, 어두워지는 기능을 제대로 구현하지 못해 이번 주에 구현했다.
느낀 점
앞에서 언급했던 문제를 해결하기 위해서는 JS에서 함수를 선언해 처리해야 함을 알게 된 만큼 더더욱 js를 열심히 공부해야겠다는 생각이 들었다. 이번 주에 JS에 대해 배우기 전에는 js로 처리해야 하는 기능에 대해 검색했을 때 무슨 소리인지 이해가 거의 안 됐었는데, 이제는 다는 아니더라도 조금씩 해석할 수 있게 되었다. 다음 주 수업도 열심히 들어서 내가 구현하고 싶은 기능을 꼭 구현할 수 있었으면 좋겠다!
그리고 이번 주에 HTML과 css를 거의 다 정리한 만큼 다음 주부터는 모바일 화면 구현을 위주로 작업하기로 했다. 조금씩 나아지는 내 클론 코딩 사이트를 보며 뿌듯했다.
'전공과목 정리 > 웹프로그래밍기초' 카테고리의 다른 글
| [웹프로그래밍기초🎀] 12주차 개발일지 (0) | 2022.01.31 |
|---|---|
| [웹프로그래밍기초🎀] 11주차 개발일지 (0) | 2022.01.31 |
| [웹프로그래밍기초🎀] 9주차 개발일지 (0) | 2022.01.31 |
| [웹프로그래밍기초🎀] 7~8주차 개발일지 (0) | 2022.01.31 |
| [웹프로그래밍기초🎀] 6주차 개발일지 (0) | 2022.01.31 |