'JavaScript' 카테고리의 글 목록

JavaScript Class

2024.04.02

용어 정리 인스턴스 클래스를 통해 만들어진 객체 // 자동차 클래스 정의 class Car { constructor(make, model) { this.make = make; this.model = model; } drive() { console.log("The car is driving."); } } // Car 클래스를 사용하여 인스턴스 생성 const myCar = new Car("Toyota", "Camry"); const yourCar = new Car("Honda", "Accord"); // myCar와 yourCar는 Car 클래스의 인스턴스이다. 캡슐화 외부로 노출해야 하는 값과 내부에서만 사용하는 값을 구분하는 기능 외부에서 내부 데이터에 바로 접근을 하지 못하게 하고 필요한 메소드만 열..

JavaScript

JavaScript fetch와 axios 사용법

2023.08.22

Fetch 비동기 HTTP 통신으로 클라이언트에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 Web API 장점 브라우저에서 기본적으로 제공되는 API이므로 추가적인 라이브러리나 의존성 없이 사용 가능 Promise 기반 단점 브라우저 호환성 문제 axios에 비해 기능 부족 HTTP 에러 처리, 요청 취소 기능 등등 nodejs 환경에서 사용 불가 기본 구조 fetch(url, options) .then((response) => console.log(response)); 옵션(options)에 들어갈 중요 속성 method : HTTP 요청 메서드 (GET, POST, PUT, DELETE 등) 기본값은 GET headers : HTTP 요청 헤더 객체나 String 값들을 가진 객체..

JavaScript

JavaScript 비동기 처리

2023.08.17

비동기 처리란? 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 비동기 처리라고 한다. 왜 비동기 처리일까? 서버로 데이터를 요청 시, 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행 안 하고 기다릴 순 없음! 비동기 처리가 아니고 동기 처리라면 코드 실행하고 기다리고, 실행하고 기다리고... 비동기 코드를 처리하기 위한 3가지 방법 callback 함수 promise async / await callback(콜백) 함수 JavaScript는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있는데, 인자(매개변수)로 대입되는 함수를 콜백함수라고 한다. 즉, 다른 함수가 실행을 끝낸 뒤 실행되는 함수 함수를 선언할 때는 parameter..

JavaScript

JavaScript 배열 메서드 정리

2023.08.15

원본 배열 수정하는 메서드 push 배열의 끝에 하나 이상의 요소를 추가 const originalArray = [1, 2, 3]; originalArray.push(4, 5); console.log(originalArray); // [1, 2, 3, 4, 5] pop 배열의 마지막 요소를 제거하고 해당 요소를 반환 const originalArray = [1, 2, 3]; const removedElement = originalArray.pop(); // 3 console.log(removedElement); // 3 console.log(originalArray); // [1, 2] unshift 배열의 시작 부분에 하나 이상의 요소를 추가 const originalArray = [2, 3]; ori..

JavaScript

마우스 이벤트(client, page, offset, screen)의 차이점

2023.04.07

client 브라우저 창 기준으로 마우스 클릭 위치의 x, y좌표를 나타냅니다. 스크롤바가 있어도 스크롤바를 제외한 브라우저의 좌측 상단을 원점으로 삼습니다. page 문서 전체를 기준으로 마우스 클릭 위치의 x, y좌표를 나타냅니다. 스크롤바를 포함한 문서의 좌측 상단을 원점으로 삼습니다 offset 이벤트 대상 엘리먼트를 기준으로 마우스 클릭 위치의 x, y좌표를 나타냅니다. 이벤트가 발생한 엘리먼트의 좌측 상단을 원점으로 삼습니다. screen 모니터 화면 전체를 기준으로 마우스 클릭 위치의 x, y좌표를 나타냅니다. 마우스 클릭 clientX : 0, clientY : 0 pageX : 0, pageY : 0 offsetX : 0, offsetY : 0 screenX : 0, screenY : 0..

JavaScript

반복문

2020.07.20

while 문 while문의 실행 순서 조건식을 검사하고 만족하면 ▶ 중괄호 안에 있는 코드와 증감식을 실행 ▶ 다시 조건식을 검사 var 변수 = 초깃값; while(조건식){ 자바스크립트 코드; 증감식; } 예시) 출력화면 응용) 2의 배수이면서 4의 배수인 숫자만 출력 출력화면 for 문 사용 방법은 while 문과 같지만 while 문보다 사용하기 편해 사용 빈도가 높은 편이다. for( 초깃값; 조건식; 증감식){ 자바스크립트 코드; } 예시) 출력화면 break 문 반복문인 while 문 또는 for 문에서 break 문을 실행하면 조건식과 상관없이 강제로 반복문을 종료한다. for( 초깃값; 조건식; 증감식 ){ break; 자바스크립트 코드; } 예시) 출력화면 중첩 for 문 for 문 ..

JavaScript

연산자

2020.06.17

연산자란? 덧셈, 뺄셈, 곱셈, 나눗셈과 같은 연산을 컴퓨터에서도 다양한 연산자를 통해 계산 작업을 한다. 자바스크립트 프로그래밍에서 사용하는 연산자에는 산술, 문자 결합, 대입(복합 대입), 증감, 비교, 논리, 삼항 조건 연산자가 있다. 산술 연산자 산술 연산자에는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)가 있다. 산술 연산자로 연산을 하기 위해서는 연산 대상 데이터가 반드시 2개 있어야 한다. 종류 기본형 설명 + A+B 더하기 - A-B 빼기 * A*B 곱하기 / A/B 나누기 % A%B 나머지 ex) var num1 = 15; var num2 = 2; var result; result = num1 + num2; console.log(result, "+"); result..

JavaScript

변수

2020.06.13

변수란? 변하는 데이터(값)를 저장할 수 있는 메모리 공간이다. 변수에 저장할 수 있는 데이터의 종류로는 문자형(String), 숫자형(Number), 논리형(Boolean) 그리고 빈(Null)데이터가 있다. 변수에는 데이터가 오직 한개만 저장되기 때문에 새로운 데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지워진다. ex) 출력화면 변수선언 변수를 선언할 때는 var 키워드를 변수명 앞에 붙인다. 변수명에는 한글을 사용할 수 없으며, 영문과 숫자 그리고 일부 특수문자(_, $)만 포함할 수 있다. 변수명은 의미에 맞게 만드는 것이 좋다. 문자형(String) 문자형 데이터는 문자나 숫자를 큰따옴표(" ")또는 작은따옴표(' ')로 감사고 있다. 또한 문자형 데이터에 HTML 태그를 포함하여 ..

JavaScript Class

JavaScript fetch와 axios 사용법

JavaScript 비동기 처리

JavaScript 배열 메서드 정리

마우스 이벤트(client, page, offset, screen)의 차이점

반복문

연산자

변수

티스토리툴바