학습 TIL
HTML은 HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어입니다. 글자 그대로, HTML은 프로그래밍 언어가 아닙니다. 그러나 HTML은 웹 페이지를 구성하는 뼈대가 되는 언어입니다. HTML은 구조를 표현하는 언어이기 때문에 HTML의 구조를 잘 짜놓으면, 자바스크립트로 개발을 할 때 더욱 직관적인 코드를 작성할 수 있습니다. 다른 코드가 그러하듯, 내가 작성한 HTML 문서도 다른 사람이 읽는 경우가 있습니다. 의미있는(Semantic) 태그를 적절하게 사용한다면, 다른 사람이 HTML 문서를 접할 때 쉽게 이해하고 개발할 수 있습니다. Achievement Goals HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable)..
for...in 루프는 객체의 모든 열거가능한 속성에 대해 반복합니다. 배열의 반복을 위해서는 추천되지 않는다. 이것은 쉽게 객체의 속성을 확인할 수 있기 때문에 실질적으로 디버깅을 위해 사용될 수 있습니다. 배열이 데이터의 저장에 있어서는 더 실용적이지만, 키-값 쌍이 선호되는 데이터의 경우 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in을 사용할 수 있습니다. for...of 구문은 컬렉션 전용입니다. 모든 객체보다는, [symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 이 방식으로 반복합니다. 배열의 반복에 많이 사용됨.
CSS는 Cascading Style Sheets의 약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정합니다. HTML이 웹 페이지의 구조를 담당한다면, CSS는 구조의 외부와 내부를 꾸미는 역할을 담당합니다. 같은 HTML 구조를 가지고 있는 문서에, 각기 다른 CSS파일을 적용하면 전혀 다른 웹사이트처럼 보이게 할 수도 있습니다. 이번 챕터에서 CSS를 학습하고 나면, 이후에 진행하는 스프린트에서는 얼마든지 자유롭게 적용할 수 있습니다. Achievement Goals CSS의 사용목적을 이해할 수 있다. 프론트엔드 개발자의 기초소양에 대해 이해할 수 있다. CSS의 기본 문법과 구조를 이해할 수 있다. CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다. 직접 HTML 안에 CSS를 ..
NaN는 숫자가 아닌 값을 나타낸다. NaN은 다른 모든 값과 비교(==, !=, ===, !==)했을 때 같지 않으며, 다른 NaN과도 같지 않습니다. 즉 NaN은 비교할 수 있는 대상이 아니다. NaN의 판별은 Number.isNaN() 또는 isNaN()을 사용하면 제일 분명하게 수행할 수 있습니다. 아니면, 오로지 NaN만이 자기자신과 비교했을 때 같지 않음을 이용할 수도 있습니다. ex) NaN === NaN; // false Number.NaN === NaN; // false isNaN(NaN); // true isNaN(Number.NaN); // true function valueIsNaN(v) { return v !== v; } valueIsNaN(1); // false valueIsNa..
문자열의 속성과 메소드를 이용해 원하는 형태로 만들 수 있다. 문자열의 length라는 속성을 활용해 길이를 확인할 수 있다. str.length ex) str = 'Hello world' str.length = 11 문자열의 글자 하나하나에 접근할 수 있다. str[1] ex) str[1] = 'H' 문자열을 합칠 수 있다. word1 + " " + word2 ex) word1 = 'Hello' word2 = 'world' word1 + " " + word2 // 'Hello world' 문자열을 원하는 만큼만 선택할 수 있다. str.slice(0, 3) 또는 str.substring(0, 3) ex) str = 'abcdefg' str.substring(0, 3) // 'abc', str.subst..
코플릿 진행도중에 Template string을 사용해야하는 부분이 있었는데, 이 부분 때문에 많이 헤맸고, 검색을 통해서 ${} 를 쓴다는 것 까지는 알았다. 템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(` `)을 이용합니다. 이 부분만 읽지 않아서 고생하다가 저 부분을 알게 되고 어떻게 쓰이는지 정확하게 알게 되었다. ex) computeDifference(2, 10) // '2, 10의 차이는 8입니다.' 라는 결과가 나오게 된다. 문자열을 +연산자 없이 합칠 수 있게 해주는 방법중에 하나이다.
조건문 기초 truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다. 문자열은 기본적으로 truthy -> !문자열 // false undefined는 기본적으로 falsy -> !undefined // true 기억해야할 6가지 falsy 값 : false, null, undefined, 0, NaN, ' '. 비교연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다. if 와 else if , else를 이해하고 무리없이 활용할 수 있다. 논리연산자를 (&&, ||, ! ...)을 통해 복잡한 조건을 간결하게 작성할 수 있다. && : and 연산자 || : or 연산자 ! : not 연산자
함수 선언식 function(){ return ; } 함수 표현식 let func = function(){ return ; } 이렇게 그냥 바로 함수를 선언하는 경우 호이스팅을 받는다. 하지만 함수 표현식은 변수를 먼저 선언해 주고 함수를 할당하는 형식인데, 이럴 경우 함수가 호이스팅을 받지 않는 특징이 있다. 이러한 함수 표현식은 '호이스팅에 영향을 받지 않는다'는 특징을 가지는것 외에도 함수 선언식 보다 유용하게 쓰이는 경우가 있는데, 클로져로 사용할 때와 콜백으로 사용할 때이다. 클로져와 콜백으로 사용하는 경우는 아직 배우지 않은 단계이기 때문에 나중에 다루도록 하겠다. 정리 우선은 함수 선언식과 함수 표현식의 차이는 호이스팅에 영향을 받고 안받고의 차이임을 알게 되었다.
자바스크립트에서 원시 자료형과 참조 자료형이 무엇인지 알 수 있다. 원시 자료형 string, number, boolean, undefined의 의미를 이해할 수 있다. 타입마다 다른 속성과 메소드가 있다는 것을 이해할 수 있다. typeof 를 활용하여 특정 값의 타입을 확인할 수 있다. 비교 시 엄밀한 비교( === 과 !== )의 필요성을 이해할 수 있다. '===' 과 '!==' 는 외형만 같은 것을 비교하는 것이 아니라 type까지 비교하기 때문에 더 엄밀하게 비교할 수 있기에 '===' 과 '!=='을 사용하는 것을 권장한다.
