Gapus Dev Blog

이벤트 설명 이벤트는 웹 페이지와 사용자 간의 상호작용을 가능하게 하는 중요한 요소 이벤트는 사용자가 웹페이지에서 특정 행동을 취하면 발생 이벤트 처리를 잘 활용하면 사용자 친화적인 웹페이지를 만들 수 있다. 주로 JavaScript를 통해 처리되며, 특정 이벤트가 발생했을 때 실행되는 함수인 이벤트 핸들러 또는 이벤트 리스너를 등록하여 사용 이벤트 핸들러 예시 element.addEventListener('event', function); /* * 'click': 요소를 클릭했을 때 발생 * 'keydown': 키보드의 키를 눌렀을 때 발생 * 'load': 페이지 로딩이 완료되었을 때 발생 * 'mouseover': 마우스 포인터가 요소 위로 이동했을 때 발생 */ 이벤트를 사용하는 이유 사용자 행동..

자바스크립트 함수 설명 코드를 재사용하고 모듈화하는데 사용되는 중요한 개념 함수는 특정 작업을 수행하고 값을 반환 가능 선언 방법 함수 선언식 함수 선언식은 function 키워드를 사용하여 함수를 정의하는 방법 함수의 이름과 매개변수를 지정할 후 중괄호 내부에 함수의 동작을 작성 함수 선언식은 호이스팅에 영향을 받아 함수 정의를 코드의 상단으로 끌어올리기 때문에, 함수 선언 이전에 호출해도 정상 작동 function 함수이름(매개변수1, 매개변수2, ...) { // 함수의 동작 return 결과값; } function add(a, b) { return a + b; } 함수 표현식 함수 표현식은 일급 객체로서 함수를 변수에 할당하고 다른 함수의 인수로 전달하거나 반환값으로 사용하는 장점이 있다. 함수 ..

클래스(Class) 설명 객체 지향 프로그래밍에서 사용되는 개념 객체를 생성하기 위한 템플릿 클래스를 사용하면 비슷한 속성과 메서드를 가진 객체를 쉽게 생성 가능 속성은 객체의 상태를 나타내는 변수이고, 메서드는 객체의 동작을 정의하는 함수 생성자(constructor)라는 특별한 메서드를 가지고 있으며, 객체를 생성할 때 초기화 작업 수행 클래스는 여러 개의 객체를 생성할 수 있으며, 각각의 객체는 독립적인 상태와 동작을 가질 수 있다. 기본 문법 class ClassName { constructor() { // 객체 초기화 작업 수행 } method1() { // 메서드 동작 정의 } method2() { // 메서드 동작 정의 } } let obj = new ClassName(); // 클래스의 객..

객체 지향 프로그래밍(OOP) 설명 프로그램을 객체들의 집합으로 구성하는 방식 객체들은 데이터와 그 데이터를 처리하는 메서드를 포함 객체 간에 상호작용을 통해 프로그램이 동작 주요 특징 클래스와 객체 클래스는 객체를 만들기 위한 템플릿 객체는 클래스로부터 생성된 실체 클래스는 객체의 속성(데이터)과 동작(메서드)을 정의하고, 객체는 이러한 속성과 동작을 가진다. 클래스는 설계도 역활, 객체는 설계도를 기반으로 생성된 실체 예시 class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`안녕하세요, 저는 ${this.name}이고 ${this.age}살입니다.`); } } let pe..

스코프 설명 스코프(Scope)는 자바스크립트에서 변수와 함수의 유효 범위를 의미 변수와 함수가 어디에서 선언 되었는지에 따라 결정되며, 코드 안에서 해당 변수나 함수에 접근할 수 있는 영역을 제한 스코프의 종류 전역 스코프(Global Scope) 코드 어디에서든 접근할 수 있는 최상위 스코프 전역 변수와 전역 함수는 전역 스코프에 선언되어 어디에서든 사용 가능 예시 var globalVariable = "전역 변수"; function globalFunction() { console.log(globalVariable); // 전역 변수에 접근 가능 } globalFunction(); // 출력: "전역 변수" 지역 스코프(Local Scope 또는 Function scope) 함수 내부에서 선언된 변수..

크로스 브라우징 설명 다양한 웹 브라우저에서 웹 사이트와 웹 애플리케이션이 동일하게 작동하는 것을 의미 다른 브라우저에서도 일관된 사용자 경험을 제공하기 위해 필수적 여러 가지 웹 브라우저가 존재하며, 각각 다른 렌더링 엔진과 HTML, CSS JS를 해석하는 방식을 가지고 있어서 동일한 웹 페이지가 다른 브라우저에서는 다르게 보일 수 있다. 접근 방법 표준 준수 웹 표준에 따라 개발하는 것이 중요 HTML, CSS, JS의 최신 버전과 권장 사항을 준수하는 것이 좋음. 브라우저 테스트 다양한 브라우저와 버전에서 웹 사이트를 테스트 주유 브라우저(Chrome, Firefox, safari, Edge 등) 뿐만 아니라 오래된 버전의 브라우저도 테스트 각 브라우저에서의 호환성 문제를 발견 및 수정 가능 폴리..