bergerac 님의 블로그

📌 1. 이벤트(Event)란?이벤트란 웹 페이지에서 발생하는 다양한 상황들을 의미합니다. 예를 들어 버튼 클릭, 마우스를 올리기, 키보드 입력, 스크롤, 페이지 로딩 등 모든 사용자 행동이 이벤트입니다.📌 2. 이벤트 핸들링(Handling)이란?이벤트 핸들링이란 특정 이벤트가 발생했을 때 실행할 동작을 지정하는 것, 즉 이벤트에 "반응"하는 코드를 작성하는 것을 말합니다.이벤트가 발생했을 때 호출되는 함수를 이벤트 핸들러(Event Handler) 혹은 이벤트 리스너(Event Listener) 라고 부릅니다.📌 3. 주요 이벤트 종류자바스크립트에는 매우 다양한 이벤트 종류가 있으며, 대표적으로 아래와 같은 카테고리로 나뉩니다.🖱️ 마우스 이벤트click: 요소 클릭dblclick: 더블 클릭..

자바스크립트에서 객체는 단순한 데이터 저장소를 넘어서, 기능(매서드)까지 담을 수 있는 유연한 구조입다. 이때 객체의 원형(프로토타입)을 사용하여 새로운 객체를 생성하는 것이 프로토타입 입니다. 모든 객체들이 메서드와 속성을 상속받기 위한 템플릿으로써 프로토타입 객체를 가집니다. 1. 생성자 함수와 프로토타입new키워드를 사용해 함수를 호출할 수 있으며 관례적으로 UpperCamelCase를 사용합니다.function Person(firstName, lastName, age, gender) { this.name = { first: firstName, last: lastName }; this.age = age; this.gender = gender; this.greeting = func..

객체란? 정의: 관련된 **데이터(속성, 프로퍼티)**와 **함수(기능, 메서드)**를 하나로 묶은 집합입니다.역할: 다양한 값을 담을 수 있는 컨테이너이자, 동작을 포함한 구조체입니다.참고: 배열도 객체의 일종입니다. typeof [1, 2, 3]을 실행하면 결과는 object입니다.console.log(typeof([1,2,3]));//object 객체의 구조프로퍼티(Property)객체가 가지는 데이터 입니다.ex) 이름, 나이, 키, 직업 등let objectName = { 키1: 값1, 키2: 값2 ...}const person = { name: 'bergerac', age: 25, height: 179, speak: function() { console.log('안녕하세요!'..

1. 매개변수(parameter)vs 인자(argument)매개변수란? : 함수에 전달될 데이터를 담는 변수인자란? : 함수 호출 시에 전달하는 값***자바에서와는 다르게 타입 명시 불요 2. JS에서의 파라미터와 아규먼트 특징파라미터와 아규먼트의 수가 반드시 일치할 필요가 없다.  매개변수의 차례로 인자값이 전달되기 때문에 형식이 맞지 않아도 그대로 적용이 되어버릴 수 있는 문제점이 있다. 3. 반환값(return, 리턴값)결과를 반환하며 함수 내에서 return 키워드가 읽히면 함수의 실행을 즉시 중단하고 return 뒤의 값을 반환한다.return 뒤의 코드는 읽히지 않기 때문에 화면에 굉장히 희미하게 표시가 된다. 4. 함수 선언 방식 3가지//함수 선언문function square1(x) { r..

1. 함수의 정의특정 작업을 수행하거나 값을 계산하는데 사용되는 코드의 묶음(집합) >>자바의 메서드와 자바스크립트의 함수와의 차이자바스크립트의 경우 함수의 정의 keyword 가 function이다.자바는 반환타입을 정의하는데에 비하여 자바스크립트는 정의하지 않는다매개변수의 타입또한 정의하지 않는다.  >>따라서 자바스크립트은 모든 유형의 데이터가 전달 가능하며 모든 유형의 데이터 값 반환 가능  위과 같이 자바와는 다르게 int String 등의 반환타입이나 매개변수 타입을 설정하지 않아도( 즉, 숫자이거나 문자여도 sum이라는 함수가 동작함을 알 수 있다.) 2. 함수의 사용용도1) 코드 재사용ex) 두 수의 합을 계산 : f(x)=y 2)모듈화&추상화복잡한 작업을 수행하는 코드를 함수로 분리한다...

1. 배열이란?배열(Array)이란 여러 개의 데이터를 순차적으로 나열한 자료구조입니다.JavaScript의 배열은 다음과 같은 특징을 가지고 있습니다.다양한 타입의 데이터를 하나의 배열에 저장 가능배열의 크기가 동적 (필요에 따라 크기가 자동으로 조정)인덱스 번호를 통해 각 요소에 접근 (0부터 시작)let fruits = ['사과', '오렌지', '망고'];let mixed = [1, '문자열', true, null, [2, 3]]; 2. 배열 생성 방법1) 리터럴 방식let numbers = [1, 2, 3, 4, 5];let emptyArray = []; 2) Array 생성자 방식let arrayFruits1 = new Array(3); // 크기 지정 (빈 값)let arrayFruits2 =..

css 파일을 html에 적용시키려면 선택자를 사용해야 한다. 이번에는  html에 css 를 적용시  1. 전체 선택자전체 선택자 : 스타일을 모든 문서 요소에 적용되는 선택자입니다.  >>*기호를 사용하여 스타일을 한꺼번에 적용한다.   cf) 전체 웹 브라우저의 기본 스타일 초기화에 사용된다.   : 전체 요소들과 배경의 여백 제거에 활용한다.*{  color: lightcoral;  margin: 0;  padding: 0;}CSS 파일에서 다음과 같이 설정해주면 기본 설정이 웹 브라우저의 여백이 없게 설정되며, 전체적인 요소를 제어할 수 있다.(기본 글자색상이 light coral과 같이 동작한다.)      요소 외부의 글자  div>전체 선택자div>  p>문단p>  section>섹션내용s..

데이터를 목적에 따라 정의하는 구조체DTO( 데이터를 전달하기 위한 객체 ), VO( 값 자체를 포현하는 객체 ), DAO( Database에 접근하는 역할을 하는 객체), Entity (실제 DB 테이블과 매핑되는 클래스 )에 대해 알아볼 예정이다. DTO( Data Transfer Object)계층 간 데이터 교환을 위해 사용하는 객체로직을 가지지 않은 순수한 데이터 객체(Getter/Setter)만을 가짐주로 DB에서 데이터를 갖고오거나 통신(FrontEnd)에서 요청하거나 응답할 때 데이터를 담아 전달할 때 사용한다.class UserSignInRequestDto{ private String userId; private String password;} VO(Value Object)값 자..

열거형 자료형이란?서로 관련된 상수들의 집합을 표현하는데 사용한다서로 유기적인 관계성을 가지며 자바의 클래스로 취급한다.메서드는 존재하지 않는다. (단지 열거된 자료일 뿐)클래스의 static final 필드처럼 쓰인다 : 각 상수는 정의된 Enum 타입으로 간주한다.cf) static final 필드 처럼 사용되기 때문에 모든 요소를 대문자로 써주는 것이 권장된다. 1. ENUM 선언 방법 - enum 키워드 사용enum Enum명 {}다음과 같이 선언하며 명명규칙은 클래스와 동일하다중괄호 내에서 열거할 데이터를 ,로 구분하여 나열한다.enum Fruits{ Apple, Banana, Orange}Fruits apple = Fruits.Apple;System.out.println(apple); 2..

Wrapper Class : 기본 데이터 타입을 객체로 다루기 위해 사용한다. >>기본 데이터 타입이란?byte, short, int, long, float, double, char, boolean, void(메서드 반환)>>각 데이터 타입에 해당하는 Wrapper class 가 존재한다. -java.lang package에 정의된다 : 컬렉션 프레임워크에서는 내부에 객체만을 저장한다>>기본 데이터 타입의 저장을 Wrapper 클래스로 변환하여 저장 Byte, Short, Int, Long, Float, Double, Char, Boolean, Void 박싱(Boxing) vs 언박싱(Unboxing)기본 타입과 해당 타입의 Wrapper Class 간의 자동변환자바 컴파일러가 자동으로 처리한다. 1) ..