스타벅스 클론 코딩을 본격적으로 들어가기에 앞서 필요한 개념들을 정리해보겠다!
- 표기법
- 데이터 종류
- 변수, 예약어
- 함수
- 조건문
- DOM API
- 메소드 체이닝
- 질의응답
- dash-case(kebaba-case)
HTML
,CSS
- snake_case
HTML
,CSS
- camelCase
JS
- ParcelCase
JS
💡 대부분의 경우
JS
는 camelCase를 쓴다.
- Zero-based Numbering
기본적으로 0부터 번호를 매김.
- 주석 쓰는 법
요렇게 쓴다! (
cmd
+/
)
- String
- Number
- Boolean
- Undefined
- Null
- Object
- Array
"따옴표"로 묶여진 문자 데이터
💡 백틱의 경우 문자 중간에
${}
로 보관된 다른 데이터를 끼워 넣을 수 있다.
숫자 데이터
true, false 두 가지 값밖에 없는 논리 데이터
값이 할당되지 않은 상태를 나타냄
어떤 값이 의도적으로 비어있음을 의미
여러 데이터를 Key:Value 형태로 저장함
{}
여러 데이터를 순차적으로 저장 []
💡 자바스크립트는 세미콜론
;
을 붙이지 않아도 동작하긴 하지만, 붙이는게 알아보기 좋다.
데이터를 저장하고 참조(사용)하는 데이터의 이름
let
, const
, var
let : 값(데이터)의 재할당 가능!
const : 값(데이터)의 재할당 불가!
특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어
이렇게 자바스크립트에서 빨간줄을 띄워주니,
외우려고 하기보다는 배우면서 자연스레 알아나가자!
특정 동작(기능)을 수행하는 일부 코드의 집합(부분) function
JS
의 함수에서는 특정 값을 반환 할 수 있고, 이 값을 받아서 사용 할 수 있다.
함수에 이름이 없으면 익명 함수 이고,
이름이 없기 때문에 호출할때 변수에 집어넣어서 사용한다.
속성 부분에 함수가 할당되어 있으면, 그것을 메소드라고 부른다.
조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문 if
, else
Document Object Model, Application Programming Interface
DOM
: Html
내용들을 의미API
: 일종의 명령들💡 오류 해결
브라우저 같은 경우는 코드를 위에서 아래로 읽어 나가기 때문에,
<script>
의main.js
파일에서 box를 불러오지 못하는 오류가 생김
이를 막기 위해서defer
를<script>
태그에 붙여주면 해결됨!
❗️
querySelector
같은 경우는,
선택자를 통해서 찾을 수 있는 여러 요소들 중에
가장 먼저 찾아진 요소 1개만 반환하기 때문에 유의!
querySelector
의addEventListener
사용해보기
📌
HTML
요소 (Element) 검색/찾기 및class
추가/삭제
📌
HTML
요소 (Element) 모두 검색/찾기
Getter
와Setter
textContent
: 요소의 텍스트를 지정하는DOM API
메소드를 연결해서 사용하는 것
Q : {}
이렇게 표기되는 데이터의 이름은?
A : 객체(object
) 데이터