루체

비구조화 할당이란? 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언 해줄 수 있는 것. 또한 함수의 파라미터에도 비구조화 할당을 할 수 있다. const test = { a : 1, b : 2 }; const {a , b} = test; console.log(a); // 1 console.log(b); // 2 ////////////// const object = { a : 1, b : 2 }; function print({a , b}) { console.log(a); console.log(b); } print(object) 함수에 전달을 할 때 object에 b값이 주어지지 않는다면 출력을 할 때 undefined가 나타나게 된다. 이런 상황에서 b 값에 기본 값을 주고 싶다면 c++에서 기..

Hello1(); //선언적 function function Hello1() { console.log('hello1'); } Hello1(); 선언적 함수는 Hello1의 선언 위치와는 상관 없이 사용을 해도 오류가 나지 않는다. hello2(); //익명 함수 var hello2 = function() { console.log('hello2'); } //이러한 오류가 뜨게 된다. TypeError: hello2 is not a function var hello2 변수에 function이라는 객체를 생성을 했다. 그리고 이 함수를 실행하는 곳 위치를 보면 선언보다 위에서 실행을 하고 있다. 이렇게 할 경우에는 TypeError가 뜨게 됩니다. 끌어올림 현상(호이스팅)으로 hello2가 뭔지는 알지만 함수..

global.a = 0; { const a = 1; const test = new Function('return a'); console.log(test()); } { const a = 2; const test = function() { return a; }; console.log(test()); } new Function을 통해서 함수를 만들게 되면 코드블럭 안에 있는 const a =1의 값을 return 하는 것이 아니라 전역적으로 선언 되어있는 global.a를 return을 하게 된다. 반면에 그냥 function으로 만든 함수를 실행하게 되면 코드블럭 안에서 만들어준 const a = 2의 값을 리턴을 해줍니다. 필요에 따라서 사용을 하면 되겠지만 내 생각에는 new Function을 사용하는 ..

용어(dt) 와 정의(dd) 쌍들의 영역(dl)을 설정하는 것입니다. 용어를 정의할 때는 태그를 사용을 하고 용어에 대한 설명을 명시할 때는 태그를 사용하고 이 용어와 정의의 전체 집합을 태그로 감싸주는 것입니다. dl은 Description List라는 약어이고 dd는 Definition Details라는 약어이고 dt는 Definition Term의 약어입니다. 주의사항 안에는 와 만을 사용해야 한다. dl 태그 안에 dd와 dt 태그만 사용이 가능하기 때문에 사용이 조금 덜 된다. 왜냐하면 주로 CSS로 디자인을 하려고 할 때 아무 의미없는 태그인 div를 사용해서 디자인을 많이 하는데 dl태그 안에는 dd와 dt태그만 사용이 가능하기 때문이다. 그래서 주로 이 태그 대신에 ul과 li 태그들을 사..

section 태그는 문서의 일반적인 영역을 설정을 할 때 사용을 합니다. article은 독립성을 가졌는데 section은 그 의미가 조금 더 희석되서 더 다양한 곳에서 사용이 가능하고 일반적으로 영역을 나누는데 사용이 됩니다. 그리고 이 section 태그 내부에는 article 태그를 집어넣을 수가 있습니다. 반대로 article 태그 내부에도 section 태그를 포함할 수 있습니다. 제약은 따로 없습니다. section을 가지고 영역을 나눌 때는 의미가 있기 때문에 제목 즉 h1~h6태그들을 포함을 합니다. 이게 바로 div 태그와 차이점입니다. 일반적으로 div는 의미없이 사용을 합니다. 반면 section은 의미를 가지고 있어서 제목을 가지고 있습니다. 특정 영역을 나누는 것은 동일 하지만 ..

article 태그는 독립적으로 구분되거나 재사용이 가능한 영역을 설정을 하는 것으로 블로그의 포스트나 매거진/신문 기사를 나타낸다고 생각하시면 됩니다. 일반적으로 h1 ~ h6태그를 포함하여 식별을 하며 작성일자와 시간을 의 datetime 속성으로 작성을 합니다. mozilla 사이트에 들어가서 예제를 확인을 해보겠습니다. 중간에 있는 article 부분이 forecast라는 곳의 바깥 쪽에 존재하더라도 이 콘텐츠로서의 가치가 유지된다라면 다른 태그보다 article태그를 사용을 하는 것이 좋습니다. 이것이 article 태그가 독립적으로 구분이 된다 라는 말입니다. 처음이라 사용이 어렵기 때문에 헷갈리다면 section이나 div 태그를 사용을 할 수도 있습니다.

main태그는 문서 내부의 핵심적인 콘텐츠를 나타낼 때 사용하는 태그입니다. 모질라 문서에서 확인해보면 주요 콘텐츠 구역은 문서의 핵심주제나 애플리케이션의 핵심 기능성에 대해 부연, 또는 직접적으로 연관된 콘텐츠들이라고 나와있습니다. 이 말을 조금 쉽게 풀어서 설명을 하자면 블로그 같은 곳에서 작성한 글들이 보이는 곳을 main 태그로 지정을 한다 라고 생각하시면 조금 더 편하게 생각할 수 있을 것 같습니다. 하지만 이 태그는 Internet Explorer에서는 지원을 하지 않기 때문에 인터넷 익스플로러를 필요로 하는 곳에서는 사용을 하시면 안됩니다.

h1 ~ h6태그는 목차에서 제목이나 컨텐츠의 제목같은 것을 지정을 할 때 사용을 합니다. 주의해야할 것으로는 몇가지가 있습니다. 첫번째로는 제목 폰트의 크기를 줄이기 위해 낮은 단계를 사용하시면은 안됩니다. 화면에서는 크기가 달라지게 지정은 되어있지만 각 태그마다 폰트의 크기를 정확하게 알지 못하기 때문에 h1~h6태그를 사용할 때는 폰트의 크기를 초기화해서 사용을 해야합니다. 왜 폰트의 크기를 줄이기 위해 낮은 단계를 사용하면 안되냐면 HTML은 구조를 나타내기 위해 사용을 하는 것이고 CSS는 표현, 즉 디자인을 하기 위한 용도의 언어이기 때문입니다. 두번째로는 제목의 단계를 건너뛰는 것을 피하셔야 합니다. 무슨말이냐면 우리가 html구조를 작성을 할 때 일반적으로 h1태그를 먼저 작성을 하게 될 ..

const dong = { name : '멍멍이', age : 2, cute : true, sample : { a: 1, b: 2, } }; console.log(dog.name); === 멍멍이 console.log(dong.age); === 2 name과 age는 키라고 한다. 공백이 있으면 안된다. 대신 ''이걸로 감싸주면 된다. 비구조화 할당 = 객체 구조분해 객체에서 특정 값들을 추출해내는 것 const ironMan = { name : '토니 스타크', actor : '로버트 다우니 주니어', alias : '아이언맨' }; const {name} = ironMan; console.log(name); function print(hero){ const { alias, name, actor } =..

조건문 특수한 상황에 특정 작업을 실행시킬 수 있다. const a = 1; if(a + 1 === 2) { console.log('a + 1 이 2입니다.'); } else if(a === 10){ console.log('10 입니다'); } else{ console.log('a는' + a + '입니다.'); } const device = 'iphone'; switch(device){ case 'iphone': console.log('아이폰!'); break; case 'ipad': console.log('아이패드!'); break; default: console.log('등록된 기기가 아닙니다'); }