자바스크립트의 데이터를 웹 상에서 직접 출력하려고 한다. 일반적으로 사용하는 3가지 방법이 있다. 1. document.write() 함수 사용 JavaScript에서 가장 간단한 출력 방법은 document.write() 함수를 사용하는 것이다. 이 함수는 HTML 문서에 새로운 내용을 추가하며, 웹 페이지에서 동적으로 결과를 출력할 수 있다. 예를 들어, 아래와 같이 코드를 작성해 볼 수 있다. 버튼 클릭! 출력 결과 2. innerHTML 속성 사용 다른 방법으로는, innerHTML 속성을 사용하여 HTML 요소에 새로운 내용을 추가할 수 있다. 예를 들어, HTML 문서에서 다음과 같은 요소가 있다고 가정한다면 아래와 같이 작성이 가능하다. innerHTML 결과 3. console.log() ..
심볼(Symbol)은 ES6에서 추가된 새로운 원시 타입 중 하나입니다. 심볼은 유일하고 변경 불가능한(primitive and immutable) 값을 나타내며, 다른 값과 중복되지 않는 고유한 식별자(identifier)를 생성하는 데 사용됩니다. 이러한 특성으로 인해 객체의 속성 이름으로 사용될 수 있습니다. 그리고 심볼은 유일한 키를 부여하기 유용하게 사용할 수 있습니다. 사용 시 장점 1. 속성 이름 충돌 방지: 객체의 속성 키로 사용될 때, 심볼은 다른 키와 구분되기 때문에 속성 이름 충돌을 방지할 수 있습니다. 이는 코드의 안정성을 높이고, 의도하지 않은 동작을 방지하는 데 도움이 됩니다. 2. 내부적인 속성 숨김: 심볼을 사용하여 객체의 내부적인 속성을 숨길 수 있습니다. 이는 객체를 사용..
CodePen을 보다 귀여운 스타일이나, 가지고 있으면 도움이 될 것 같은 버튼 리스트를 모아봤다. 호불호가 갈릴 수도 있지만 귀여운 스타일 위주이다. 1. Candy Color Button Animation See the Pen Candy Color Button Animation by Yuhomyan (@yuhomyan) on CodePen. 2. Bubbly Button See the Pen Bubbly Button by Nour Saud (@nourabusoud) on CodePen. 3. Magic Card See the Pen Magic Card by Gayane Gasparyan (@gayane-gasparyan) on CodePen. 4. Button hover effects with box..
자바스크립트 변수 선언 var와 let의 차이점 let과 var는 모두 자바스크립트에서 변수를 선언할 때 사용되는 키워드입니다. let과 var의 차이점 let으로 선언한 변수는 블록 스코프(block scope)를 가지고, var로 선언한 변수는 함수 스코프(function scope)를 가집니다. 따라서, let으로 선언한 변수는 해당 블록 내에서만 유효하고, var로 선언한 변수는 함수 내에서 유효합니다. let으로 선언한 변수는 동일한 이름의 변수를 다시 선언할 수 없지만, var로 선언한 변수는 가능합니다. let으로 선언한 변수는 선언하기 전에는 사용할 수 없지만, var로 선언한 변수는 선언하기 전에도 사용할 수 있습니다. let과 var의 공통점 변수를 선언할 때 사용되는 키워드입니다. 변..
자바스크립트에서 수치를 나타내는 그래프 그리기 데이터를 시각적으로 표현하기 위해서 그래프나 표를 많이 사용한다. 웹 상에서 그래프를 쉽고 간단하게 출력할 수 있는 코드들을 리뷰해보려 한다. 리뷰할 라이브러리는 GoogleChart와 Chart.js이다. 구글차트와 차트.js 차이점 라이브러리 로드 방식 구글차트: 구글 차트 라이브러리는 google.charts.load()와 google.charts.setOnLoadCallback() 함수를 사용하여 비동기식 로드 차트.js: 차트.js는 외부 라이브러리를 로드할 필요없이, CDN에서 직접 라이브러리를 가져올 수 있음 차트 유형 구글차트: 구글 차트는 다양한 차트 유형을 지원. 예를 들어, 막대 그래프, 파이 차트, 계열 차트, 지도 등이 있음 차트.js..
JavaScript에서 사용하는 자료구조 Map과 Object 두 자료구조는 목적과 사용 방식에 차이가 있습니다. 예를 들어, 물건 창고를 상상해보세요. 그리고 그 창고 안에는 다양한 물건들이 쌓여있다고 상상해보죠. 이때 map과 object는 두 가지 다른 방식으로 물건을 분류하고 관리하는 방법을 나타냅니다. map은 창고의 관리자가 주어진 물건에 대해 레이블을 붙이는 방식으로 동작합니다. 예를 들어, 빨간색 상자 안에는 사과, 파란색 상자 안에는 파란색 연필, 노란색 상자 안에는 노란색 휴대폰과 같이 특정 키에 연결된 값을 저장합니다. 이렇게 키-값 쌍을 이용하여 데이터를 저장하고 조회할 수 있습니다. 키를 통해 해당하는 값을 찾아내거나 업데이트할 수 있어요. 또한, map은 데이터의 순서가 보장되지..
프로그래밍 언어에서 사용되는 동등 연산자 "= =" 우리가 흔히 아는 비교연산자 "=="(동등 연산자)는 두 피연산자가 값이 같은지를 비교하여 true나 false를 반환하게 됩니다. 그러면 "==="는 어떨 때 쓰일까요? ==와 ===는 프로그래밍에서 사용되는 비교 연산자입니다. 일반적으로 이러한 연산자는 두 개의 값이 동일한지를 확인하는 데 사용됩니다. 그러나 사용되는 프로그래밍 언어에 따라 이 연산자들의 동작 방식이 다를 수 있습니다. "=="는 동등 비교 연산자로, 비교하려는 두 값이 서로 동등한지를 확인합니다. 이 연산자는 값을 비교할 때 데이터 형식이 다른 경우에도 암묵적 형변환을 수행하여 값이 동일한지를 확인합니다. 예를 들어, JavaScript에서 1과 "1"을 비교하면 "=="는 두 값..
환경 변수는 운영 체제에서 시스템이나 프로그램이 실행될 때 필요한 정보를 저장하는 변수입니다. 이러한 변수들은 프로그램들이 실행될 때, 프로그램이 필요로 하는 데이터나 시스템 설정 정보를 참조할 수 있도록 해 줍니다. 환경 변수는 운영 체제에서 사용되는 설정 정보를 저장하는 데 사용됩니다. 이 설정 정보는 다양한 용도로 사용될 수 있으며, 예를 들어 다음과 같습니다. 환경 변수 용도 1. 시스템 경로 설정: 시스템 경로는 운영 체제에서 실행 중인 프로그램이나 스크립트 파일들이 참조하는 파일들의 위치를 지정합니다. 시스템 경로를 설정하면 프로그램이나 스크립트 파일들이 이를 참조할 수 있으며, 더 쉽게 파일을 찾을 수 있습니다. 2. 프로그램 설정: 프로그램이 실행될 때, 운영 체제는 환경 변수를 사용하여 ..
