Front-end
-
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..
-
HTML 태그: 웹페이지를 만드는 핵심 요소Front-end/HTML & CSS 2023. 5. 9. 19:11
이번 글에서는 HTML의 태그와 주요 요소들을 살펴보겠다. HTML 태그는 웹페이지에서 사용되는 구성 요소로, 태그를 사용하여 각 요소의 역할을 정의한다. HTML 태그는 다양한 종류가 있으며, 모든 태그는 '' 기호로 감싸져 있다. 예를 들어, 태그는 웹페이지에서 제목을 정의하는 역할을 한다. HTML 태그는 크게 블록 태그와 인라인 태그로 나눌 수 있다. 블록 태그는 웹페이지에서 블록을 형성하는 요소들을 정의하며, 인라인 태그는 텍스트 내에서 사용되는 요소들을 정의한다. 1. 블록 태그 : 문서에서 논리적인 영역을 지정 ~: 제목을 표시 : 문장을 표시 , : 리스트를 표시 : 표를 표시 2. 인라인 태그 : 하이퍼링크를 지정 : 이미지를 표시 : 문장에서 작은 논리적인 영역을 지정 HTML 태그는 ..
-
HTML 문서 만들기: 작성 방법, 웹브라우저에서 실행하기Front-end/HTML & CSS 2023. 5. 9. 18:15
HTML 문서를 작성하는 방법은 매우 간단하다. 먼저 메모장을 열고, 위에서 소개한 기본 구조를 입력한다. 그리고 과 태그 사이에 실제 문서 내용을 작성하면 된다. 예를 들어, 다음과 같은 간단한 HTML 문서를 작성해보자. 안녕, HTML! 나의 첫 HTML 문서입니다. 이제부터 HTML을 배워보려고 합니다. 위 예제에서 은 제목을 나타내는 태그, 는 단락을 나타내는 태그이다. 이렇게 작성된 HTML 문서는 "파일명.html"로 저장 후 브라우저에서 열면 다음과 같은 화면을 볼 수 있다. 이처럼 HTML 문서는 간단한 구조와 문법으로 이루어져 있고 쉽게 실행할 수 있다. 이번 시간에는 HTML 문서를 만드는 방법과 웹브라우저에서 실행하는 방법을 살펴보았다. HTML은 웹 개발의 핵심 언어이므로, 웹 개..
-
HTML 기초: 웹페이지 만들기 시작하기Front-end/HTML & CSS 2023. 5. 9. 15:44
HTML은 Hyper Text Markup Language의 약자로, 웹페이지를 만드는 기초적인 언어이다. HTML을 배우면 브라우저에서 웹페이지를 어떻게 표시하는지 이해할 수 있다. 이 글에서는 HTML의 기초를 다루고, 웹페이지를 만들기 시작하는 데 필요한 것들을 다룰 것이다. HTML은 태그를 이용하여 문서를 구성한다. 태그는 로 묶여 있으며, 여는 태그와 닫는 태그가 쌍으로 이루어져 있다. ex) 해당하는 내용 HTML문서의 가장 상단에는 이라는 선언문이 있다. 문서 형식을 정의한다는 뜻으로 HTML5로 작성된 문서라는 것을 알려준다. HTML 문서의 기본 구조는 다음과 같다. 문서 내용 각 태그를 설명하자면, 태그는 문서의 전체를 감싸고 있다. 태그는 문서의 제목이나 스타일 시트와 같은 메타데이..