googlemap 구글맵 api를 이용해 내가 지정한 위치에 marker를 표시하기 #googleMap : 요소의 너비와 높이를 설정하고, 주석 처리된 부분은 이미지를 회색으로 변환하는 필터를 추가하는 CSS 코드이다. : Google 지도가 표시될 영역을 나타낸다. const myLocation = new google.maps.LatLng(위도, 경도) : 객체를 사용하여 위치를 지정 mapTypeId: google.maps.MapTypeId.ROADMAP: 객체를 사용하여 지도를 생성 const map = new google.maps.Map(document.querySelector('#googleMap'), mapProp); - new google.maps.Map 은 Google Maps API를 사..
Frontend/JavaScript
`` (백틱, backtick)은 ES6 (ECMAScript 2015)에서 도입된 템플릿 리터럴(template literal)의 일부이다. 백틱은 문자열을 정의하는 데 사용되며, 일반적인 따옴표(' 또는 "), 쌍따옴표(")보다 더 강력한 문자열 표기법을 제공한다. 1. 멀티라인 문자열(Multi-line strings): 여러 줄로 이루어진 문자열을 간편하게 작성할 수 있다. 일반적인 따옴표는 여러 줄에 걸쳐 문자열을 나눠 작성해야 한다. // 백틱 사용 const multiLineString = ` This is a multi-line string. `; // 일반적인 따옴표 사용 const multiLineStringWithQuotes = "This is a\nmulti-line\nstring...
함수는 재사용 가능한 코드 블록을 정의하고, 호출될 때마다 실행된다. 함수는 어떤 작업을 수행하거나 값을 반환할 수 있으며, 프로그램 내에서 코드를 조직하고 모듈화하는 데 도움을 준다. function 함수이름(매개변수1, 매개변수2, ...) { // 함수 내용 // 수행될 작업들 // 값을 반환할 경우 return 반환값; } function greet(name) { let greeting = "Hello, " + name + "!"; return greeting; } let result = greet("John"); console.log(result); // "Hello, John!" // console.log(greeting); // 오류: greeting은 정의되지 않았다. [예시1] 작은 수를..
for문은 반복 작업을 수행할 때 사용되는 반복문 중 하나이다. for (초기화; 조건; 반복 후 작업) { // 반복 실행될 코드 블록 } for (let i = 1; i
switch 문은 여러 가지 조건을 비교하고 그에 따른 코드 블록을 실행하는 데 사용된다. switch 문은 주로 특정 변수의 여러 가능한 값을 기반으로 분기하는데 유용하다. switch (표현식) { case 값1: // 표현식이 값1과 일치할 때 실행되는 코드 break; case 값2: // 표현식이 값2와 일치할 때 실행되는 코드 break; // 추가적인 case 문들... default: // 표현식이 어떤 case에도 일치하지 않을 때 실행되는 코드 } 표현식은 비교하고자 하는 값이나 변수이다. let day = '월요일'; switch (day) { case '월요일': console.log('일주일의 시작입니다.'); break; case '수요일': console.log('이제 반쯤 왔..
if문은 조건을 평가하여 해당 조건이 참인 경우에만 특정 코드 블록을 실행하는 데 사용된다. if (조건) { // 조건이 참일 때 실행되는 코드 } else { // 조건이 거짓일 때 실행되는 코드 } else 블록은 선택적이며, 조건이 거짓인 경우에 실행된다. let x = 10; if (x > 5) { console.log('x는 5보다 큽니다.'); } else { console.log('x는 5보다 작거나 같습니다.'); } 또한 if문은 중첩될 수 있어 여러 조건을 다룰 때 사용된다. let y = 15; if (y > 10) { console.log('y는 10보다 큽니다.'); if (y === 15) { console.log('y는 15입니다.'); } } else { console.lo..
자바스크립트 객체는 데이터와 그 데이터를 다루는 함수를 하나로 묶은 것이다. 이 객체는 중괄호 {}로 둘러싸여 있다. let 사람 = { 이름: '철수', 나이: 25, 직업: '개발자', 소개: function() { console.log('안녕하세요. 제 이름은 ' + this.이름 + '이고, ' + this.나이 + '살입니다. 직업은 ' + this.직업 + '입니다.'); } }; 사람이라는 객체가 있다. 이 객체 안에는 이름, 나이, 직업 같은 속성들이 들어 있고, 함수도 속성으로 들어갈 수 있다. 객체를 통해 데이터를 조직화하고 관련 함수들을 함께 묶을 수 있다. 객체의 속성은 점 표기법이나 대괄호 표기법을 사용해서 값을 읽거나 쓸 수 있다. console.log(사람.이름); // '철수..
JavaScript에서 배열(Array)은 여러 값을 순서대로 저장하는 자료 구조이다. 배열은 같은 종류의 데이터뿐만 아니라 다양한 데이터 타입을 포함할 수 있으며, 각 요소는 인덱스를 사용하여 접근할 수 있다. 배열은 객체의 특수한 형태이며, 키가 0부터 시작하는 숫자로 자동으로 할당되는 속성을 갖고 있다. 1. 리터럴 표기법 let fruits = ['apple', 'banana', 'orange']; 2. Array 생성자 let numbers = new Array(1, 2, 3, 4, 5); 배열의 각 요소는 인덱스를 사용하여 접근할 수 있다. 인덱스는 0부터 시작하며, 배열의 길이보다 큰 인덱스에 접근하려고 하면 undefined가 반환된다. let fruits = ['apple', 'banan..
