특이하게도 자바스크립트는 타 프로그래밍 언어와는 달리 변수를 선언할 때 데이터타입을 명시적으로 지정하지 않습니다. 자바스크립트(JavaScript)는 동적 타입 언어로써 변수를 선언할 때 변수에 할당된 값에 따라 동적으로 데이터 타입이 자동으로 결정되기 때문입니다. 이렇게 동적으로 데이터 타입을 지정하기 때문에 엄연히 자바스크립트에도 데이터 타입이 존재합니다. 이번 포스팅에서는 자바스크립트의 데이터 타입(DataType)에 대해 알아보도록 하겠습니다. ※ 변수를 선언자 var, let, const에 대해서 궁금하시다면 아래 글을 참고해 주세요. [JavaScript] 변수 선언자 var, let, const의 차이점과 사용법 데이터타입 종류 자바스크립트의 데이터 타입은 크게 기본 데이터 타입(Primit..
프로그래밍 언어에서 데이터를 담을 때는 변수를 선언해야 합니다. 변수는 데이터를 담는 그릇이라고 생각하시면 되고 자바스크립트에도 당연히 변수라는 개념이 존재합니다. 자바스크립트에서 변수를 선언할 때는 var, let, const라는 세 가지 키워드를 활용하여 변수를 선언하는데요. 이 세 가지 키워드들은 그 특성에 차이점이 존재합니다. 이번 포스팅에서는 var, let, const의 차이점과 사용법에 대해 알아보겠습니다. 키워드 var의 특징 var는 ES6의 등장 이전에 변수를 선언하는 데 사용되었던 초기 JavaScript에서의 변수 선언자입니다. var는 재선언이 가능하다.var x = 10;var x = 20; // 재선언 가능console.log(x); // 20일반적인 프로그래밍 언어에서..
크롬과 같은 브라우저는 개발자가 소프트웨어를 개발할 때 디버깅을 할 수 있게 하는 "개발자 도구"라는 것을 제공하고 이것이 없으면 개발이 불가능하다 싶을 정도로 모든 개발자들이 사용하는데요. 이 개발자 도구에서 자바스크립트 코드의 결과값을 콘솔에 출력하려면 console을 사용하시면 됩니다. 이번 포스팅에서는 자바스크립트의 console 사용 방법에 대해 알아보도록 하겠습니다. 개발자 도구의 콘솔 사용법 1. 자바스크립트에 console을 직접 넣을 수 있습니다. 이렇게 한다면 웹 사이트를 오픈할 때 콘솔창에 "메시지 출력"이라는 메시지가 출력되겠습니다. 2. 콘솔창은 브라우저에서 [F12]를 눌러 개발자 도구를 열고 "Console" 탭을 선택하면 삽입해두었던 메시지 출력 콘솔 코드가 동작한 것을 확인..
웹 개발을 할 때 HTML문서에서 를 정의하는 경우도 많지만 따로 JavaScript 파일을 .js파일로 별도로 생성해서 연결하는 경우도 있습니다. 이렇게 자바스크립트를 별도로 분리하면 코드의 가독성 향상, 코드의 재사용성과 유지보수성의 향상, 협업의 편리성 증가 등등 다양한 이점을 가지고 있습니다. 이번 포스팅에서는 .js 파일을 .html 파일에 연결하는 방법에 대해 알아보도록 하겠습니다. JavaScript 파일을 별도로 분리하면 좋은 이유 4가지 코드의 가독성 및 유지 보수성 향상 : HTML은 구조를 정의하고, JavaScript는 웹의 동작을 담당합니다. 이렇게 기능이 다른 HTML코드와 JavaScript 코드가 하나의 파일에 혼재되어 있는 것 보다는 JavaScript 코드를 분리하면 코드..
Visual Studio Code (VS Code)에서 스니핏(Snippets)은 자주 사용하는 소스코드(코드 조각)를 미리 정의하여 지정해 둔 예약어로 한 번에 불러올 수 있는 기능을 말합니다. 쉽게 말해서 소스코드 자동 완성이라고 생각하시면 되겠습니다. 위의 예제를 보시면 미리 태그들을 list라는 이름의 스니핏으로 만들어놓고 불러와 리스트를 쉽게 만드는 모습을 보실 수 있습니다. 코드 조각은 VS Code에서 자체적으로 제공하는 내장 코드 조각과, 사용자가 직접 정의한 사용자 정의 코드 조각으로 구분할 수 있습니다. 내장 코드 조각(Built-in Snippets) VS Code는 자체적으로 다양한 언어에 대한 내장 코드 조각을 제공합니다. 예를 들어 HTML에서 ! 느낌표를 입력하고 탭을 누르면 ..
비주얼 스튜디오 코드(Visual Studio Code)는 마이크로소프트(Microsoft)에서 제공하는 개발 프로그램(IDE)입니다. 무료인 데다가 전 세계 개발자들이 만들어놓은 다양한 확장 프로그램을 제공하고 있어 간단한 웹 개발 & 테스트를 함에 있어 상당히 유용합니다. 이번 포스팅에서는 비주얼 스튜디오 코드에서 HTML, CSS, JavaScript를 테스트할 수 있는 환경을 구축하는 방법에 대해 포스팅하려고 합니다. ※ 먼저 비주얼 스튜디오 코드(Visual Studio Code)가 설치되어 있지 않은 분은 아래 글을 참고하여 설치를 먼저 진행해주시기 바랍니다. [VS Code] 비주얼 스튜디오 코드 - 설치 / 다운로드 방법 [VS Code] 비주얼 스튜디오 코드 - 설치 / 다운로드 방법 비..