본문 바로가기

TIL62

Code States 15일차 - DOM DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다. 즉, 여러분이 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다. HTML에 JavaScript 적용하기 HTML에 JavaScript를 적용하기 위해서는 웹 브라우저가 작성된 코드를 해석하는 과정에서 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춘다. HTML 해석을 잠시 멈춘 웹 브라우저는 요소를 먼저 실행한다. HTML은 프로그래밍을 위해서 만들어진 언어가 아니기 때문에 이전에 배웠던 조건문이나 반복문을 사용할 수 없고, 정보를 저장하기에도 적합한 언어가 아니다. 그래서 자바스크립트라는 프.. 2021. 8. 6.
Code States 14일차 - Spread/Rest 문법 Spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용한다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers); // 6 Rest 문법 파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일 때 유용하다. function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } sum(1,2,3) // 6 sum(1,2,3,4) // 10 배열에서 사용하기 1. 배열 합치기 let parts = ['shoulders',.. 2021. 8. 5.
Code States 13일차 - 클로저 클로저는 "함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성 된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다." 라고 한다. 여기서의 키워드는 "함수가 선언"된 "어휘적(lexical) 환경"이다. 특이하게도 자바스크립트는 함수가 호출되는 환경와 별개로, 기존에 선언되어 있던 환경 - 어휘적 환경 - 을 기준으로 변수를 조회하려고 한다. 클로저 함수: 클로저는 외부함수의 컨텍스트에 접근할 수 있는 내부함수를 뜻한다. 외부함수의 실행이 종료된 후에도, 클로저 함수는 외부함수의 스코프, 즉, 함수가 선언된 어휘적 환경에 접근할 수 있다. 클로저 사용 예시: 클로저를 통해 커링(currying, 함수 하나가 n개의 인자를 받는 대신 n개의 함수를 만들어 각.. 2021. 8. 4.
Code States 13일차 - 스코프 스코프와 주요 규칙 범위가 중괄호(블록) 또는 함수에 의해 나뉘어지고, 그 범위를 스코프라고 부른다. 스코프는 "변수 접근 규칙에 따른 유효 범위"이다. 변수 접근 규칙에 따른 유효 범위 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 반대는 불가능 스코프는 중첩이 가능 가장 바깥의 스코프는 특별히 전역 스코프(Global Scope)라고 부름 전역이 아닌 다른 스코프는 전부 지역 스코프(Local Scope) 지역 변수는 전역 변수보다 더 높은 우선순위를 가짐 스코프의 종류 블록 스코프(block scope) : 중괄호 기준으로 범위가 구분 함수 스코프(function scope) : function 키워드가 등장하는 함수 선언식 및 함수 표현식 유의해야 할 점 화살표 함수는 블록 스코프로 취급된다.. 2021. 8. 4.
Code States 13일차 - 원시 자료형과 참조 자료형 원시 자료형 깊게 이해하기 자바스크립트에서 원시 타입의 데이터(primitive data types; 원시 자료형)는 객체가 아니면서 method를 가지지 않는 6 가지의 타입 string, number,bigint, boolean, undefined, symbol, (null) 을 말한다. 왜 원시 자료형이라고 부르나요? 'string', 42, true, false, undefined // 데이터가 "하나"의 정보를 담고 있습니다. 원시 자료형은 모두 "하나"의 정보, 즉, 데이터를 담고 있다. 옛날에 어떻게 코드를 작성했는지를 돌아보면, 왜 이런 단순한 데이터가 "원시적인" 데이터라고 이야기 하는지 조금은 더 쉽게 이해하실 수 있다. 그 때는 데이터 저장소(메모리)의 용량이 제한되어 변수 하나에 데.. 2021. 8. 4.
Code States 12일차 - CSS 중급 CSS Selector 셀렉터 h1 { } div { } 전체 셀렉터 * { }​ Tag 셀렉터 section, h1 { }​ ID 셀렉터 #only { }​ class 셀렉터 .widget { } .center { }​ attribute 셀렉터 (암기할 필요는 없다) a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { }​ 후손 셀렉터 header h1 { }​ 자식 셀렉터 (후손 셀렉터와의 차이를 반드시 알고 있어야 한다) header > p { }​ 인접형제 셀렉터 section + p { }​ 형제 셀렉터 sectio.. 2021. 8. 3.