본문 바로가기

Javascript39

JavaScript - script async와 defer Index 1. async 2. defer 첫 번째 다음으로 많이 하는게 바로 body 제일 끝부분에 script를 추가하는 것이다. 이렇게 한다면 브라우저가 HTML을 다운로드하면서 준비가 된 다음에 스크립트를 만나서 서버에서 받아오고 실행하게 된다. 그래서 사용자들에게 js를 받기 전에도 이미 준비가 되어서 페이지 콘텐츠를 볼 수 있게 된다. 여기서 장점은 사용자가 기본적인 HTML의 콘텐츠를 빨리 볼 수 있다는 것이고, 만약 사용자가 보고 있는 웹사이트가 자바스크립트에 의존적이라면(자바스크립트를 통해 서버에 있는 데이터를 받아온다던지 또는 DOM요소를 이쁘게 꾸며준다던지) 사용자가 정상적인 페이지를 보기 전까지 서버에서 자바스크립트를 받아오는 시간도 기다려야 되고, 실행하는 시간도 기다려야 되는 단.. 2020. 8. 24.
JavaScript - object(3) 객체의 키를 변수로 접근하기 Object(2)에서의 방법으로 사용하면 객체의 특정 키의 값을 가져오는 것도 가능하지만, 반대로 객체에 특정 키를 만들고 값을 할당하는 것도 가능하다. information이라는 객체 하나를 만들어 예를 들자면, const information = { name: '김개발' } 여기에 키 하나를 생성하고, 그 키에 값을 할당해주려 한다. const verb = 'developes' const project = 'facebook' verb의 값을 키로 사용해야 하고, project 값을 그 키의 값으로 사용한다고 했을 때, information[verb] = project // [A] information.developes = 'facebook' // [B] A와 같이 할당이 .. 2020. 7. 5.
JavaScript - array methods arrow function을 가장 많이 사용할 때는 callback 함수로 사용할 때이다. callback 함수란, 인자로 전달되는 함수라고 생각하면 된다. arrow function에 array의 반복문으로 사용되는 map, forEach 메서드는 정말 많이 쓰이는 메서드이다. Array.map() map 메서드는 배열을 반복해주는데, callback 함수에서 return 한 값으로 매(each) 요소를 수정해준다. map 메서드의 return값은 수정된 값으로 다시 생성된 배열이다. const arr = [1, 2, 3]; const squares = arr.map(x => x * x); 두번째 줄에서 map함수에 인자로 넘어간 함수를 원래대로 표현하면 아래와 같다. const squares = ar.. 2020. 7. 5.
JavaScript - template literals, string method ES6에서 추가된 문법에서 편한 것 중 하나가 template literal이다. 원래 string을 작성할 때 따옴표를 사용했었지만, const name = '김개발'; 이제 back tick으로도 string을 감쌀 수 있다. const name = `김개발`; 그리고 back tick으로 감싸면 그 안에 변수를 넣어서 표현할 수 있다. const name = '김개발'; const hi = `안녕하세요. 저는 ${name} 입니다.`; 변수를 사용하려면 ${}으로 변수를 감싸줘야 한다. 그리고 template literal에서는 string을 입력한 대로 개행이 된다. let detail = `자세히 보아야 이쁘다 내코드..`; console.log(detail); string method star.. 2020. 7. 5.