Posis

웹을 동적인페이지로 만들기 위해서는 JavaScript 파일을 불러오는 것은 필수라고 생각합니다. 하지만 기능이 많아지고 페이지가 많아질수록 로직이 많아지는데 이렇게 된다면 JavaScript의 파일크기는 엄청나게 커지는 것은 당연합니다. JavaScript에 파일이 커질수록 불러오는데 시간이 많아지면서 웹페이지 로딩이 점점 느려집니다. 이를 해결하기 위해서 파일을 비동기 방식으로 불러오는 방식을 통해서 로딩 시간을 줄일 수 있습니다. 오늘은 파일을 로드하는 비동기 방식 async와 defer에 대해서 알아보고, 두 속성 사이의 차이에 대해서 정리해보고자 합니다. script 아무것도 작성하지 않은 방식으로 script 파일을 불러오면 HTML 파일의 모든 것을 분석하지 않은 상태에서 a.js 파일을 다..

숫자 간결하게 나타내기 ko const views = 9744642; const formatter = new Intl.NumberFormat(`ko`); const formatter2 = new Intl.NumberFormat(`ko`, { notation: 'compact' }); console.log(formatter.format(views)); // 9,744,642 console.log(formatter2.format(views)); // 974만 en const views = 9744642; const views2 = 154270; const formatter = new Intl.NumberFormat(`en`); const formatter2 = new Intl.NumberFormat(`en`..

자료형이란 컴퓨터가 처리할 수 있는 자료의 형태 종류 설명 예시 기본 유형 숫자형 따옴표 없이 숫자로만 표기 let birthYear = 2000; 문자열 작은따옴표(' ')나 큰따옴표(" ")로 묶어서 나타냄 숫자를 따옴표로 묶으면 문자열로 인식 let greeting = 'Hello'; let birthYear = '2000'; 논리형 참(true)과 거짓(false)이라는 2가지 값만 있는 유형 true와 false는 소문자로만 표시 let isEmpty = true; 복합 유형 배열 하나의 변수에 여러 개의 값을 저장할 수 있음 let seasons = ['봄', '여름', '가을', '겨울']; 객체 함수와 속성을 함께 포함 let date = new Date(); 특수 유형 undefined ..

웹 요소를 제어 웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음 웹 사이트 UI 부분에 많이 활용 ex) 마우스 포인터를 올렸을 때 펼쳐지는 메뉴, 한 화면에서 탭을 눌러 내용만 바뀌도록 하는 콘텐츠 다양한 라이브러리를 사용할 수 있음 웹을 중심으로 하는 서비스가 늘어나면서 브라우저에서 처리해야 할 일이 늘어남 -> 라이브러리와 프레임워크가 계속 등장 ex) 시각화를 위한 d3.js, 머신러닝을 위한 tensorflow.js, DOM 조작을 위한 jQuery 등 ex) 웹 애플리케이션 개발을 위한 React, Vue, Angular 등 웹 애플리케이션을 만듬 최근의 웹 사이트는 사용자와 실시간으로 정보를 주고 받으며 애플리케이션처럼 동작 ex) 온라인 지도의 길찾기 서비스, 데이..

비구조화 할당 배열이나 객체 속성을 해체하여 개별 변수에 값을 담을 수 있는 JavaScript 표현식을 말합니다. 또는 구조 분해 할당이라고 말합니다. 장점 난잡한 코드들을 매우 간단하게 바꿀 수 있습니다. 필요한 객체와 나머지 요소 분리가 매우 간단합니다. 기본값 지정이 가능합니다. 사용방법 배열 const arr = ['HTML', 'CSS', 'JavaScript']; const language1 = arr[0]; const language2 = arr[1]; const language3 = arr[2]; console.log(language1, language2, language3); // HTML CSS JavaScript 위 코드가 기본적으로 배열의 값을 다른 변수에 넣어서 값을 출력하는 코..

이번 포스팅에서는 배열의 내장 함수 종류들의 대해서 다뤄보겠습니다. 배열이란? 배열은 간단하게 변수 하나에 여러 가지 데이터를 담아두는 것을 말합니다. const arr = [1, 2, 3, 4, 5]; console.log(arr); // [1, 2, 3, 4, 5] forEach forEach 메서드는 배열을 한 번씩 순회하며 각각의 요소에 대해서 실행하는 함수입니다. const arr = [1, 2, 3, 4, 5]; arr.forEach((value) => { console.log(value); }); // 1 // 2 // 3 // 4 // 5 forEach를 이용해 다른 배열에 데이터를 넣어줄 수 있습니다. const arr = [1, 2, 3, 4, 5]; const newArr = []; ..