자바스크립트 클래스는 객체지향 프로그래밍을 구현하기 위한 요소 중 하나로, 사실 자바스크립트는 프로토타입 기반의 언어지만, 클래스를 사용함으로써 객체지향 프로그래밍 구조를 더 쉽게 구현할 수 있습니다. 클래스는 객체를 만들어내는 '템플릿'으로 이해하면 좋을 것 같아요. 클래스를 생성하려면 class 키워드를 사용해야 합니다. 예를 들어, '사람'이라는 클래스를 생성해보겠습니다. class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`안녕하세요, 제 이름은 ${this.name}이고 나이는 ${this.age}입니다.`); } } 클래스 인스턴스 생성하기 위에서 작성한 클래스를 이..
자주 사용되는 내장 객체들 알아보기 자바스크립트는 웹 개발자들이 편하게 프로그래밍 할 수 있는 다양한 내장 객체들을 제공하고 있습니다. Number String Array Object Number 객체로 숫자 관련 작업 수행하기 Number 객체는 다양한 숫자 관련 작업을 쉽고 간결하게 할 수 있는 속성과 메소드를 제공해 줍니다. 예를 들어, Number.MAX_VALUE와 Number.MIN_VALUE는 숫자의 최대값과 최소값을 표현하는 상수랍니다. 그리고 Number.parseInt(), Number.parseFloat() 같은 메소드를 이용하면 문자열을 숫자로 전환할 수 있어요. const num = 3.141592; console.log(num.toFixed(2)); // 출력: 3.14 Stri..
아이템의 다양한 속성을 가지고 다루는 객체(Object) 객체에 대해서 알아보는 시간입니다. 객체(Object). 객체는 아이템의 다양한 속성을 다루는 데 매우 유용합니다. JSON은 객체와 관련된 형식으로 데이터를 교환할 때 사용되는데요... 간단하게 정리해보겠습니다. 객체 생성: 다양한 값을 짝지어 묶기 객체를 생성하려면 중괄호({}) 안에 키와 값의 쌍들을 쉼표(,)로 구분해 넣어주어요. 이렇게 하면 키와 값이 연결됩니다. let book = { title: "JavaScript The Definitive Guide", author: "David Flanagan", pageCount: 686, publicationYear: 2020, }; 객체는 여러 가지 값을 가질 수 있는 컨테이너와 같다고.....
배열: 여러 값들을 한 번에 다루자 안녕하세요! 오늘은 자바스크립트에서 굉장히 중요한 개념인 배열에 대해서 알아보겠습니다. 배열은 여러 값을 한 번에 다뤄야 할 때 도움을 줍니다. 배열 만들기 배열은 대괄호([]) 안에 값들을 콤마(,)로 구분해서 넣어 만듭니다. let fruits = ["사과", "바나나", "딸기"]; 꼭 문자열뿐만 아니라 다양한 값들이 배열에 들어갈 수 있어요. let manyThings = [42, "고양이", true, null]; 뭐든지 들어갈 수 있답니다. 배열 요소 접근하기: 내가 원하는 값 찾기 배열의 요소에 접근하려면 대괄호([]) 안에 인덱스를 넣어요. 인덱스는 0부터 시작한다는 걸 기억하세요! let animals = ["강아지", "고양이", "토끼"]; cons..
안녕하세요! 오늘은 자바스크립트의 중요한 부분, 함수에 대해 이야기하려고 합니다. 함수는 코드를 재사용할 수 있게 도와주고, 코드를 깔끔하게 정리할 수 있습니다. 함수 정의: 내 코드를 정리해 줄 친구 만들기 함수는 이렇게 정의합니다: function name(매개변수1, 매개변수2, ...) { // 함수의 내용 } 별 기능 없지만 인사해주는 greeting이라는 함수를 정의해 볼게요. function greeting(hello) { console.log("❤️ " + hello + " ❤️"); } 이 함수엔 매개변수가 하나 있어요. 매개변수는 함수에 정보를 전달하는 데 사용된답니다. 함수 호출하기 함수를 정의했으니 함수를 호출해봐야 합니다. 함수이름(인자1, 인자2, ...); 함수를 호출해 볼까요..
비교 연산자: 참과 거짓의 세계로 들어가자 안녕하세요! 오늘은 비교 연산자에 대해 알아볼 건데요, 여기선 우리가 참(True)과 거짓(False)의 세상을 배워볼 겁니다. 비교 연산자는 값들을 비교해 결과로 참과 거짓 중 하나를 돌려주죠. 동등(==)과 같음(===) 비교 연산자 중에 제일 기본이 되는 것은 동등(==)과 같음(===)입니다. 두 값이 다음과 같은지 비교해요. 3 == "3"; // true 3 === "3"; // false 무슨 차이일까요? 동등은 두 변수의 값이 같은지 판단하고, 같음은 값뿐만 아니라 자료형도 같은지 확인합니다. 위 예시에서 3 == "3"은 true를 반환했어요. 왜냐하면 숫자 3과 문자열 "3"의 값이 같기 때문입니다. 하지만 3 === "3"은 false를 반환..
변수와 상수: 여러 가지 정보 저장하기 JavaScript에서 정보를 저장할 때 변수와 상수를 사용합니다. 변수 변수는 변할 수 있는 데이터를 저장하는 공간입니다. let name = "John"; let age = 30; let 키워드를 사용하여 변수를 선언하고 초기값을 할당할 수 있습니다. let age = 30; age = 31; // age 변수의 값을 변경합니다. 상수 상수는 변하지 않는 데이터를 저장하는 공간입니다. const pi = 3.141592; const 키워드를 사용하여 상수를 선언하며 초기값을 할당해야 합니다. 한 번 선언한 상수의 값은 변경할 수 없습니다. 데이터 타입: 다양한 값 다루기 JavaScript에는 여러 가지 데이터 타입이 있습니다. 문자열(String) 텍스트 데이..
변수와 상수는 JavaScript 프로그램에서 데이터를 저장하고 처리하기 위해 사용되는 기본적인 방법입니다. 변수: 변할 수 있는 데이터 저장하기 변수는 값을 저장할 수 있는 공간으로, 그 값을 변경할 수 있습니다. JavaScript에서는 let 키워드를 사용하여 변수를 선언할 수 있습니다. let name = "Kim"; let age = 25; 변수를 선언하고 값을 할당하면 그 값을 나중에 변경할 수 있습니다. let name = "Kim"; name = "Lee"; // 변수 name에 새로운 값을 할당합니다. 상수: 변하지 않는 데이터 저장하기 상수는 한 번 할당된 값을 변경할 수 없는 저장 공간입니다. JavaScript에서는 const 키워드를 사용하여 상수를 선언할 수 있습니다. const..
웹 프로그래밍을 시작하기 위해서는 HTML, CSS, 그리고 JavaScript라는 세 가지를 이해해야 합니다. 이 글에서는 각 기술의 역사, 특징, 기본 사용법 및 간단한 예제를 공유하겠습니다. HTML (HyperText Markup Language) 소개 및 역사 HTML은 웹 페이지의 구조를 설계하고 표현하는 데 사용되는 마크업 언어입니다. HTML은 "HyperText Markup Language"의 약자이며, 웹 페이지의 텍스트, 이미지, 표, 링크 등의 콘텐츠를 구조화합니다. HTML의 역사는 1990년대 초 약 30년 전, Tim Berners-Lee가 웹의 기반이 되는 시스템을 구축하면서 시작되었습니다. 오늘 날, HTML은 웹 상에서 정보를 구조화하는 데 사용되며 최신 버전인 HTML5..
개발에 사용되는 핵심 개념인 API(Application Programming Interface)에 대해 알아보고, 주요 HTTP 메서드인 GET, POST, PATCH 등에 대한 내용을 다룹니다. 1. API란 무엇인가? API는 애플리케이션 프로그래밍 인터페이스(Application Programming Interface)의 약자로, 서로 다른 소프트웨어 또는 애플리케이션간에 데이터를 전송하기 위해 사용되는 인터페이스입니다. 예를 들어, 어떤 웹사이트에서 날씨 정보를 제공하려면 실시간으로 날씨 데이터를 얻어야 합니다. 이때 해당 웹사이트가 직접 기상청 데이터를 가져오기보다는 기상 관련 API를 통해 날씨 정보를 쉽게 얻을 수 있습니다. 이렇게 API는 데이터를 주고 받는 규약이자 통신 방법입니다. 1..
파이어베이스는 현재 구글이 제공하는 모바일 및 웹 애플리케이션 개발 플랫폼입니다. 이 글에서는 파이어베이스에 대해서 간단하게 알아보도록 하겠습니다. 파이어베이스란 무엇인가요? 왜 사용할까요? 파이어베이스는 다양한 백엔드 서비스와 기능을 제공하는 클라우드 기반 플랫폼입니다. 파이어베이스는 다음과 같은 이유로 인기를 얻고 있습니다. 백엔드 서버 개발 및 운영 필요성 감소: 파이어베이스는 백엔드의 익숙하지 않은 개발자들에게 다양한 백엔드 서비스를 제공하며, 시간과 비용 절감이 가능하다. 실시간 데이터베이스: 실시간 데이터베이스를 이용하여 동시성이 높은 애플리케이션 개발에 유용하다. 확장성: 사용량이 늘어날수록 자동으로 확장되어 애플리케이션 성능을 유지할 수 있다. 인증: 파이어베이스에서 제공하는 간단한 인증 ..
각 플랫폼마다 고유한 해상도와 화면 크기 지원이 다르기 때문에, 안드로이드(dp 및 sp), iOS(pt)에 사용되는 단위와 픽셀 간의 차이점을 명확하게 이해하는 것이 중요합니다. 이 글에서는 dp, sp, pt 및 픽셀 간의 차이를 설명하고, 이 단위들이 상호 작용하는 방식을 설명하려고 합니다. 1. 안드로이드(dp 및 sp)와 픽셀 dp(density-independent pixels) 안드로이드에서 dp 단위는 기기 해상도에 따라 상대적 크기를 고려한 일종의 가상 단위입니다. 대략적으로 지름이 1/160 인치인 물리적 픽셀을 dp로 표현할 수 있습니다. 160dpi(dots per inch) 해상도에서 1dp는 1픽셀과 같습니다. 기기의 해상도가 높아질수록 1dp를 표현하는데 필요한 물리적 픽셀 수..
