🍦 JavaScript/JavaScript 기초

[JavaScript 기초] 4. JavaScript 최신 문법(ES6, ES11)

📌 Shorthand property names 자바스크립트에서 오브젝트는 항상 키(Key)와 값(Value)로 이루어져 있습니다. const person = { name: 'baegwon', age: '18' }; 만약 이 키와 값이 미리 정의되어 있다면, 해당 변수를 이용해서 새로운 오브젝트를 만들 수도 있습니다. const name = 'baegwon'; const age = '18'; const person = { name: name, age: age }; Shorthand property names 기능을 이용하면 위와 같이 Key와 Value의 이름이 동일할 경우 다음과 같이 코드를 축약해서 작성할 수 있습니다. const name = 'baegwon'; const age = '18'; con..

[JavaScript 기초] 3. 비동기 처리(Callback, Promise, async/await)

📌 동기와 비동기 JavaScript는 동기 방식으로 처리되는 언어입니다. 이는 즉, 코드가 호이스팅 이후부터 우리가 작성한 순서에 따라 하나하나 동기적으로 실행되는 것을 의미합니다. console.log('1'); console.log('2'); console.log('3'); 1 2 3 비동기란 말그대로 코드가 언제 실행될지 예측할 수 없는 것을 말합니다. 한 가지 예로, setTimeout()이라는 WebAPI를 들 수 있는데, 이는 지정된 시간이 지나고 나서 우리가 전달한 함수를 자동으로 실행해주는 기능을 수행합니다. 콜백 함수란 쉽게 말해 "우리가 전달한 함수를 니가 불러줘"라는 개념으로, setTimeout()이라는 함수에는 handler라는 콜백 함수와, 어느 정도의 딜레이를 줄 것인지를 정..

[JavaScript 기초] 2. Variable

📌 Variable 변수(variable)란 변경될 수 있는 값을 의미합니다. JavaScript에서 변수 선언을 하기 위해서는 아래 세 가지 키워드를 사용할 수 있습니다. var let const 📌 var var는 ES6 이전에 사용되었던 키워드로, let 키워드가 등장한 현재는 대부분 사용하지 않고 있습니다. 💬 var 키워드를 사용하면 안되는 이유 1 var 키워드를 사용하지 않는 이유, 그리고 사용을 권장하지 않는 이유 그 첫 번째는 다음과 같습니다. console.log(age);// undefined age = 4; console.log(age);// "4" var age; var 키워드를 사용하면 위처럼 변수 선언보다 먼저 출력을 수행할 수도 있고, 값을 할당할 수도 있습니다. 심지어는 에..

[JavaScript 기초] 1. async와 defer

📌 HTML에서 JavaScript를 포함하는 방법 HTML에서 JavaScript를 포함할 때 어떻게 포함하는 것이 효율적인지 알아보겠습니다. 💬 태그 안에 추가 첫 번쩨 포함 방법은 다음과 같습니다. 위처럼 즉, 태그 끝 부분에 태그를 추가하는 것인데, 이렇게 하게 되면 HTML 파싱 작업이 모두 끝난 이후에 스크립트를 만나서 다운로드 한 뒤, 실행하게 됩니다. 따라서 웹 페이지가 js 파일 다운로드 전에 이미 준비가 되어서 사용자가 빠르게 페이지 콘텐츠를 볼 수가 있습니다. 하지만 만약, 우리가 만든 웹 페이지가 JavaScript에 굉장히 의존적인 경우 즉, 사용자에게 의미있는 콘텐츠를 제공하기 위해서는 서버에서 데이터를 받아와야 하는 경우에는 문제가 될 수 있습니다. 💬 위처럼 위처럼 태그 안에..