Front-end/Javascript
-
JavaScript DOM에 대한 이해Front-end/Javascript 2023. 5. 21. 22:19
개요 JavaScript는 Document Object Model (DOM)을 통해 HTML 문서의 요소들을 조작할 수 있습니다. DOM은 웹 페이지의 구조를 트리 형태로 표현하고, 각 요소에 대한 접근과 수정을 가능하게 합니다. 이번 글에서는 DOM의 다양한 기능과 주요 메소드에 대해 알아보겠습니다. 1. getElementById getElementById 메소드는 주어진 id 속성 값에 해당하는 요소를 가져옵니다. const element = document.getElementById('myElement'); 위의 코드에서 getElementById를 사용하여 'myElement'라는 id를 가진 요소를 가져옵니다. 2. getElementsByTagName getElementsByTagName 메..
-
자바스크립트 반복문Front-end/Javascript 2023. 5. 18. 21:10
1. for문 for문은 초기화, 조건식, 증감식으로 구성되며, 초기화는 반복을 시작하기 전에 한 번만 실행되고, 조건식이 true인 동안 반복되고, 증감식은 각 반복이 끝난 후 실행됩니다. for문은 일반적으로 특정 횟수만큼 반복하거나 배열의 요소를 순회할 때 사용됩니다. 예를 들어, 0부터 4까지의 숫자를 출력하는 for문을 작성해보겠습니다. for (let i = 0; i < 5; i++) { console.log(i); } 위의 예제에서는 i라는 변수를 0으로 초기화하고, i가 5보다 작을 때까지 반복하며, 반복할 때마다 i를 1씩 증가시킵니다. 결과적으로 0부터 4까지의 숫자가 출력됩니다. 2. while문 while문은 조건식이 true인 동안 반복됩니다. while문은 주어진 조건이 참일 때..
-
뉴스와 날씨 정보를 가져오는 세 가지 방법Front-end/Javascript 2023. 5. 17. 19:57
이 글에서는 뉴스와 날씨 정보를 가져오는 세 가지 방법에 대해 알아보겠습니다. 첫 번째 방법은 fetch와 then을 사용한 비동기 처리입니다. 두 번째 방법은 Promise.all을 사용한 병렬 처리이고, 세 번째 방법은 async/await를 사용한 비동기 처리입니다. 1. fetch와 then을 사용한 비동기 처리 첫 번째 방법은 fetch와 then을 사용하여 비동기적으로 데이터를 가져오고 처리하는 방법입니다. // 최신 뉴스 데이터를 가져오기 위한 URL const newsURL = 'http://localhost:4999/data/latestNews'; // 날씨 정보를 가져오기 위한 URL const weatherURL = 'http://localhost:4999/data/weather'; ..
-
JavaScript의 split() 메서드Front-end/Javascript 2023. 5. 15. 18:01
split() 메서드란? JavaScript에서 split() 메서드는 문자열을 특정 구분자를 기준으로 분리하여 배열로 반환하는 메서드입니다. split() 메서드는 매우 유용하며, 문자열을 분석하고 처리하는 데에 많이 활용됩니다. split() 메서드의 구문 str.split([separator[, limit]]) split() 메서드는 다음과 같은 매개변수를 가질 수 있습니다. separator (선택 사항): 문자열을 분리할 기준이 되는 구분자입니다. 이 매개변수를 생략하면 기본값인 공백(space)이 사용됩니다. separator 매개변수는 문자열, 정규식 패턴 등을 입력할 수 있습니다. limit (선택 사항): 반환할 배열의 최대 길이입니다. 이 매개변수를 생략하면 모든 분리된 요소를 포함하는..
-
프로토타입과 프로토타입 체인Front-end/Javascript 2023. 5. 11. 21:26
JavaScript에서 프로토타입과 프로토타입 체인 자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍 언어입니다. 프로토타입은 객체 생성자 함수를 통해 생성된 모든 객체에 공유되는 속성과 메서드의 집합입니다. 이러한 프로토타입 체인은 객체 간에 상속을 구현하고 코드 재사용을 촉진합니다. 1. 프로토타입 프로토타입은 JavaScript 객체의 기본 템플릿입니다. 모든 JavaScript 객체는 프로토타입을 가지며, 객체 생성자 함수를 통해 프로토타입을 정의할 수 있습니다. 예를 들어, 다음은 Person 객체의 프로토타입을 정의하는 코드입니다. function Person(name) { this.name = name; } Person.prototype.sayHello = function() { cons..
-
객체 지향 프로그래밍(OOP)에 대한 이해Front-end/Javascript 2023. 5. 11. 16:33
객체 지향 프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로, 현실 세계의 객체를 모델링하여 소프트웨어를 개발하는 방법입니다. 이번에는 OOP에 대해 이해한 내용을 나만의 언어로 기록하고, OOP의 기본 개념인 캡슐화, 추상화, 상속, 다형성 등에 대해 자세히 알아보겠습니다. OOP의 기본 개념 캡슐화 (Encapsulation) 캡슐화는 객체의 속성과 행위를 하나로 묶고, 외부에서의 접근을 제한하는 것입니다. 이를 통해 객체의 내부 구현을 숨기고, 객체 간의 상호작용을 안전하게 유지할 수 있습니다. 추상화 (Abstraction) 추상화는 객체의 복잡한 내부 구조를 감추고, 중요한 부분만 강조하여 간단하게 만드는 것입니다. 이를 통해 사용자는 객체의 기능에만 집중할 수 있으며, 객체의 내부 구조를 알 ..
-
클래스와 인스턴스 이해하기Front-end/Javascript 2023. 5. 11. 14:15
이번 글에서는 클래스와 인스턴스에 대해 이해한 내용을 나만의 언어로 자유 형식으로 기록해보겠습니다. ES5와 ES6의 클래스 작성 문법, 생성자 함수, 그리고 new 키워드도 함께 알아보도록 하겠습니다. 1. 클래스와 인스턴스란? 클래스는 객체를 만들기 위한 템플릿이라고 생각할 수 있습니다. 객체는 클래스에서 정의된 속성과 메서드를 상속받아 생성됩니다. 이렇게 생성된 객체를 인스턴스라고 부릅니다. 2. ES5 클래스 작성 문법 ES5에서는 클래스를 생성자 함수로 작성할 수 있습니다. 생성자 함수는 일반 함수와 동일한 문법을 가지고 있습니다. 예를 들어, 아래와 같은 형태의 생성자 함수를 작성할 수 있습니다. function Person(name, age) { this.name = name; this.ag..