JAN's History

이번에는 객체의 프로퍼티가 어떻게 동작하는지 제어할 수 있는 프로퍼티 어트리뷰트에 대해 알아보겠습니다. 프로퍼티 어트리뷰트는 크게 1.데이터 프로퍼티와 2.액세서 프로퍼티로 나눌 수 있습니다. 객체지향 프로그래밍에서 자바스크립트 객체를 세밀하게 관리할 때 프로퍼티 어트리뷰트를 활용할 수 있어요! 그럼 이제 예제와 함께 하나씩 살펴보도록 하겠습니다. 🐾🎯 1. 데이터 프로퍼티와 액세서 프로퍼티의 차이데이터 프로퍼티: 실제 값을 저장하는 일반적인 프로퍼티로, 키와 값으로 구성됩니다.액세서 프로퍼티: 자체적으로 값을 저장하지 않고, 다른 값을 가져오거나 설정할 때 호출되는 함수로 구성됩니다. 대표적으로 getter와 setter가 이에 해당합니다.📝 예시: 데이터 프로퍼티와 액세서 프로퍼티type과 si..

안녕하세요 오늘은 웹 어플리케이션을 만들 수 있는 멋진 친구, 스벨트에 대해서 알아보도록 하겠습니다! 그러면 스벨트란 무엇이고, 어떻게 등장하게 되었는지 한번 알아볼게요 :)바닐라 JS란? 🤔바닐라 JS란 순수 자바스크립트를 의미하는데요. 다른 라이브러리나 프레임워크 없이 그냥 자바스크립트로 만든 코드입니다.예를 들어, 아이스크림 가게에서 아이스크림을 만들 때 아무것도 추가하지 않고 기본 재료만 사용해서 만드는 것과 비슷하죠. 그런데 이렇게 만든 아이스크림을 쉽고 간단하지만, 많은 아이스크림을 만들 때에는 관리하기가 힘들어질 수 있어요 !바닐라 JS로 버튼을 클릭했을 때 화면에 메시지를 출력하는 간단한 예시입니다.// 바닐라 JSconst button = document.createElement('bu..

안녕하세요, 여러분! 오늘은 자바스크립트에서 함수의 종류와 this 키워드에 대해 조금 더 깊이 이야기를 나눠보려 해요. 특히, 화살표 함수와 일반 함수의 차이점이 this를 어떻게 다르게 처리하는지 알아보겠습니다. 그럼 시작해 볼까요? 🧐 자바스크립트에서 this는 경우에 따라 참조하는 객체가 달라져서 혼란스러울 수 있습니다. this의 값은 함수가 호출될 때 결정되는데, 이 점이 두 가지 함수 유형의 주요 차이점이 됩니다: 화살표 함수와 일반 함수입니다. 1. this란 무엇인가? 🤓먼저, this에 대해서 간단히 살펴보죠. this는 현재 코드 실행의 컨텍스트를 나타내는 특별한 키워드입니다. 즉, this가 가리키는 대상은 코드가 어떻게 호출되었는지에 따라 달라질 수 있습니다. 객체의 메서드로 ..

이번에는 자바스크립트 클래스의 상속, super 키워드, 그리고 오버라이딩에 대해 알아보겠습니다! 상속은 객체지향 프로그래밍의 핵심 개념으로, 이미 만들어진 클래스를 확장하여 새로운 클래스를 만들 수 있게 해주는데요! 예제를 통해 어떤 의미인지 자세하게 살펴보겠습니다 🙌🏼🎯 1. 기본 클래스와 상속의 개념먼저, 상속이란 어떤 클래스가 다른 클래스의 속성과 메서드를 물려받는 것을 의미합니다. 이를 통해 기존 클래스를 확장하거나 기능을 재사용할 수 있죠. 다음 코드를 보며 기본적인 클래스와 이를 상속하는 클래스를 만들어보겠습니다.class Dog { type; size; constructor(type, size) { this.type = type; this.size = size; } ..

JavaScript를 공부하다 보면 static 키워드에 대해 자주 듣게 될 거예요. 특히 클래스와 함께 사용될 때 많이 볼 수 있는데요, static이 정확히 무엇이며, 어떤 상황에서 사용하면 좋을지 함께 알아보겠습니다!🌟 static이란?static 키워드는 클래스의 정적 메서드나 정적 프로퍼티를 정의할 때 사용해요. 이 말이 무슨 뜻이냐면, static으로 선언된 메서드나 프로퍼티는 클래스 자체에 귀속되며, 클래스의 인스턴스(객체)를 생성하지 않고도 바로 접근할 수 있다는 거예요. 📝 간단한 예시 class Dog { static isCute = true; // 정적 프로퍼티 static typeName() { // 정적 메서드 return `typeName is...`; }}co..

자바스크립트에서 객체(Object)를 다루다 보면 데이터를 더 효율적으로 제어하고 관리하기 위해 getter와 setter를 사용하는 경우가 있습니다. 지금부터 이 개념들이 왜 등장했는지, 그리고 어떻게 활용하는지 예시와 함께 알아보겠습니다!🏷 1. Getter와 Setter란?Getter: 객체의 프로퍼티(속성)를 가져오는 역할을 합니다. 이때, 데이터를 단순히 반환할 뿐만 아니라 가공하거나 숨기고 싶은 정보에 접근하도록 할 때 사용됩니다.Setter: 객체의 프로퍼티를 설정하는 역할을 합니다. 값을 검증하거나 일부 조건에 따라 프로퍼티를 변경하고 싶을 때 사용됩니다.간단히 말해, getter와 setter는 객체의 속성을 더 유연하고 안전하게 다룰 수 있도록 도와줍니다.🎯 2. 왜 Getter와 ..

클래스는 객체지향 프로그래밍(OOP)의 핵심 개념 중 하나로, 특정 객체를 만들기 위한 "틀"이라고 생각하면 됩니다. 예를 들어, 같은 모양의 빵을 만들려면 빵틀이 필요하듯, 클래스는 객체를 만들기 위한 설계도와 같은 역할을 합니다. 자바스크립트에서도 이 클래스를 사용해 비슷한 특성을 가진 여러 객체를 쉽게 만들 수 있습니다. 여기서는 자바스크립트의 클래스 사용법과 그 구조를 예제와 함께 이해하기 쉽게 알아볼테니 천천히 따라와보세요 :)🙌🏼📍1. 클래스 정의하기자바스크립트에서 클래스를 정의하려면 class 키워드를 사용합니다. 아래 예제에서 우리는 Dog라는 클래스를 정의했습니다.class Dog { type; // 클래스의 프로퍼티 size; constructor(type, size) { ..

try-catch 문은 JavaScript에서 오류(에러)가 발생했을 때 프로그램이 멈추지 않고 이를 처리할 수 있게 해주는 구문인데요! 그래서 실무에서 코드를 작성할 때에는 다양한 에러를 미연에 방지하기 위해 try-catch문을 자주 사용하게 됩니다. 이 문법을 사용하면 오류를 사전에 감지하고 처리해, 사용자에게 적절한 메시지를 보여주거나 다른 작업을 수행할 수 있기 때문이죠 :)✨📍try-catch 문법 구조try-catch 문은 다음과 같은 기본 구조를 가집니다.try { // 오류가 발생할 가능성이 있는 코드} catch (error) { // 오류가 발생했을 때 실행되는 코드} try 블록: 이 블록 안에 실행하려는 코드를 넣습니다. 이 코드 중 오류가 발생하면 try 블록 안의 나머지 ..