웹을 개발하다보면 익숙한 HTML 태그들만 사용하게 되고 그외 기능적인 부분들은 javascript나 css로 구현을 하게 되는데 (div, span anchor, header, list.. 등) 아주 유용하면서 개발자들이 잘 모르는 태그들을 한번 살펴보도록 하겠습니다. CSS ,JS로만 가능하다고 생각한 것을 이제 HTML로 심플하게 개발해 보세요. progress, meter !progress !meter > 는 속성에 따라 값이 높고 낮을때 색상을 다르게 설정하여 작업의 진행상태를 표현할 수 있다. 미세먼지 상태와 같은 좋음, 나쁨, 매우나쁨 등의 상태를 함께 표현하기에 적합합니다. details, summary 과 같은 유저의 클릭으로 정보를 보여주고 숨기는 패턴 적용이 가능합니다. !details 달력, 날짜 선택기 input 태그의 type으로 설정이 가능합니다. 단 브라우저마다 UI가 가르게 표현됩니다. picture 유저의 장치나 환경에 따라 각기 다른 버전의 이미지를 표시가허나 브라우저가 이미지 포맷을 지원하지 않을 때 다른 포맷을 제공할 수 있습니다. > 💡 환경에 맞는 이미지를 다운로드 해서 보여줄 수 있으므로, 페이지 로딩 속도를 높일 수 있음. datalist javascript 없이 자동완성 기능을 만들수 있고 필터 기능까지 제공 합니다. >주의사항 input의 list와 datalist의 id는 동일해야됨 !datalist 마치며 유용하고 간단하게 사용할 수 있는 HTML태그 이니 꼭 기억해서 활요하면 좋을 것 같습니다. (출처 : https://www.youtube.com/watch?v=EMOlLLTAZMs)

Spread Operator!의 기본 전개 연산자 or 펼침 연산자 많이 쓰게 될 연산자이다. > 전개 연산자(spread operator)는 표현식(expression)은 2개 이상의 인수arguments(함수 호출 용)나 2개 이상의 요소elements(배열 리터럴 용) 또는 2개 이상의 변수(비구조화 할당 용)가 예상되는 곳에 확장될 수 있도록 한다. 함수에 인자로 전달 > 을 통해서 apply없이 함수를 호출할 수 있다! 배열 붙이기 >그냥 으로 배열을 껍데기를 깐다고 생각하면 쉽다. 배열 복사하기 >참고해야하는 것은 배열 속 객체는 얕은 복사를 한것이다. 객체의 깊은 복사는 스니핏이 따로 있다. NodeList를 배열로 변환 >를 추출하였을 때, 배열로 바꿔야 할 때가 은근 자주있다. 물론 을 통해 하는 방법도 있지만 보기도 편하고 함수에 직접 때려 박을땐, 이 방법이 가장 깔끔하다.

이번은 함수에 대해 알아보자! >1. 보통은 이 두가지를 사용한다. >2. 자가 호출 함수라는 것도 있다. ECMA06에서의 함수 선언 방식 >1. 보면 알겠지만 이젠 더이상 , 을 안써도 된다. >2. 괄호와 중괄호도 생략할 수 있다. 그냥 끝. >3. 매개변수가 없으면 괄호는 써줘야한다. 그냥 다 로만 쓸까? 정답은 NO다. 함수가 뭐하는 함수인지 모를 정도로 짧게 쓸 수 도 있으니 읽기 힘든 코드가 될 수 있다. 거기다가 요녀석이 좀 보기 힘든 구석도 있다. 그래서 선언을 function으로 하는 추세도 있다. 나 같은 함수 내부에서 키워드 대신에 쓰는 것은 실제로 많이 권장하고 있다. >그냥 function 대신에 에로우를 쓰면된다. >매개변수는 먼저쓰고 없으면 써준다.

진짜 짧게 반복문은 무엇? 기본적인 사용법 For문은 알고 있겠지만 반복적인 작업을 위해 쓰게된다. 이전 포스트에서 for문에서 을 이용한다는 것을 알아 두자. >1. for문은 i가 0부터 arr배열의 길이만큼 3번 반복한다. >2. arr배열의 0번에 접근하여 console.log로 출력한다. 신상 반복문! in과 of for-in loop ES6에서는 2가지 반복문이 추가되었다. 먼저 볼것은 이다. >1. for-in문은 오브젝트에 대해서 반복시킨다. 물론 오브젝트가 아닌 배열에도 사용 할 수 있다. >2. 가끔 JS엔진마다 순서가 바뀔 수 있어서 >3. 받아오는 반복 변수 값은 이다. 그래서 연산작업을 해선 안된다. >를 보면 이해할 수 있다. 그래서? 결론은 . for-of loop for-of에 들어 갈 수 있는 것은 String, Array, NodeList, TypedArray, Map, Set 등이다. >1. 오브젝트는 안된다. >2. 값은 for-in과 다르게 배열 속 값을 그대로 던저준다. >3. 특이한 점은 array 대신에 이 들어갈 수 있다. 사실은 위 예제말고도 상당히 다른 점이 많다. >

ECMAScript는 뭐냐? ECMAscript6(ES6)라고도 불리고 ECMA2015라고도 불린다. 자바스크립트의 표준으로 새로운 JS 표준이다. JS같은 경우 함수단위로 스코프가 결정된다든지 호이스팅, 동적 타입이라든지 언어 자체가 느슨한 편이다. JAVA나 C#같은 언어는 엄격한면이 있지만 js너무 느슨하여 혼란스러울때가 종종 생긴다. 변수 변수부터 알아보자 앞서서 스코프 이야기를 했는데, 스코프는 변수 범위다. 원래 JS에서는 로 변수를 선언했다. 보통 를 하지말라는 것을 많이 들어봤을 것이다. >에서 x는 전역변수가 되었다. 거기다가 키워드는 범위가 유연성있다. if속에서 새로 만든 변수같지만 같은 변수로 인식한다. >간단한 예지만 실제로 이런 경우 때문에 원하는 값이 나오지 않아 고생을 많이한다. let, const 가 별로 좋지 않다는 것을 알았다. let과 const는 무슨 차이지? 은 여러번 할당 할 수 있다. 는 한번 뿐이다. >let은 한번 넣고 두번 넣고 할당을 여러번 할 수있지만 const는 그렇지 않다. 당장 어딘가에 let과 const를 사용하고 싶다면? >for-loop문에 var 대신 let을 써보자. for문 밖에서 i값에 접근하지 못한다. >함수를 선언할 때, var대신 const를 써보자 어짜피 함수할당은 1번만 하기 때문에 여러모로 좋다. 배열과 객체에도 를 써도 좋다. >에러가 나야할 것 같지만 로 선언한 배열과 객체 자체를 변경하지 않으면 상관없다.