ruriruriya

자바스크립트의 화살표 함수(arrow function)는 ES6에서 도입된 문법으로, 함수를 보다 간결하게 작성할 수 있는 방법이다. 화살표 함수는 기존의 function 키워드를 사용하는 함수 표현식을 대체할 수 있으며, 몇 가지 중요한 차이점이 있다. 화살표 함수의 기본 구조 여기에서 functionName은 함수의 이름, parameters는 매개변수, =>는 화살표 기호로, 오른쪽에는 함수의 본문이 위치한다. const functionName = (parameters) => { // 함수 본문 } 화살표 함수의 특징 간결성: 화살표 함수는 function 키워드를 생략하고, 함수 본문이 단일 표현식인 경우 중괄호와 return 문을 생략할 수 있습니다. 예를 들어:이 함수는 a와 b를 더한 값을 ..

JSX는 JavaScript XML의 약자로, HTML과 유사한 구문을 사용하여 JavaScript 코드 내에서 UI 요소를 기술하는 React의 확장 문법이다.JXS는 개발자가 UI 구조를 보다 직관적으로 작성할 수 있도록 하고 가독성과 생산성을 향상시킬 수 있다.<h2..

자바스크립트의 모듈 시스템은 코드를 여러 파일로 분할하고, 각 파일에서 개별적으로 기능을 정의한 후 다른 파일에서 재사용할 수 있게 해준다. 이를 통해 코드의 재사용성과 유지보수성을 높이고, 네임스페이스 오염을 방지할 수 있다. ES6에서 공식적으로 모듈 시스템을 지원하기 시작했으며, import와 export 문을 사용한다. 모듈 사용 방법 export - 모듈을 사용하기 위해서는 우선 기능을 정의하고 내보내야 한다. import - 그 다음, 다른 파일에서 그 기능을 불러와서 사용할 수 있다. 1. 기능 내보내기 [ mathUtils.js ] // 여러 함수를 export 할 수 있습니다. export function add(x, y) { return x + y; } export function su..

자바스크립트의 DOM(Document Object Model)이란? HTML 및 XML 문서의 프로그래밍 인터페이스이다. DOM은 문서의 구조적 표현을 제공하고 프로그램이 문서 구조, 스타일 및 내용을 변경할 수 있도록 한다. 웹 페이지를 브라우저에서 렌더링할 때, 브라우저는 HTML 문서를 DOM으로 변환한다. 이 DOM은 문서의 모든 요소, 속성 및 텍스트를 노드로 나타내는 계층적인 트리 구조이다. DOM의 주요 개념 1. 노드 DOM의 기본 요소로, 문서의 모든 부분(요소, 속성, 텍스트 등)이 노드이다. 각 노드는 다른 노드와 관계를 가지며, 이런 관계는 트리 구조로 표현된다. 2. 요소 노드 HTML 태그에 해당하는 노드로 , , 등이 있다. 요소 노드는 속성 노드와 텍스트 노드를 포함할 수 있..

자바스크립트의 Destructuring에 대해서 배열에서와 객체에서는 어떻게 쓰이는 지 알아보자. 배열에서의 디스트럭처링 배열의 각 요소를 변수로 쉽게 할당할 수 있다. const numbers = [1, 2, 3]; const [one, two, three] = numbers; console.log(one); // 1 console.log(two); // 2 console.log(three); // 3 기본값 설정 배열의 요소가 누락되었을 때 기본값을 지정할 수 있다. const [a, b, c = 3] = [1, 2]; console.log(a, b, c); // 1, 2, 3 나머지 요소 가져오기 '...' 연산자를 사용하여 배열의 나머지 부분을 새 배열로 가져올 수 있다. const [first,..

자바스크립트에서 클래스와 인스턴스 그리고 필드에 대해 붕어빵으로 예시를 들 알아보자. 클래스(Class) 클래스는 붕어빵을 만드는 틀과 같다. 붕어빵 틀은 붕어빵이 어떤 모양을 가질지, 어떤 재료가 필요한지 등을 정의한다. 이 틀을 사용하여 실제 붕어빵을 여러 개 만들 수 있다. 틀: 붕어빵의 기본적인 형태와 필요한 재료를 정의한다. 재사용성: 동일한 틀을 사용해 여러 번 붕어빵을 만들 수 있다. 캡슐화: 붕어빵의 모양과 재료를 하나의 틀로 묶어 놓다. 상속 가능: 다른 클래스로부터 속성과 메서드를 상속받아 사용할 수 있음. 인스턴스(Instance) 인스턴스는 클래스를 바탕으로 만들어진 실제 붕어빵이다. 붕어빵 틀에 반죽을 부어 실제로 구운 결과물이 바로 인스턴스이다. 각각의 붕어빵은 독립적으로 존재하..

자바스크립트의 Set과 Map, 이것들이 배열과 객체와의 차이점은 무엇인지 알아보자. Set Set 객체는 값의 집합으로, 중복을 허용하지 않는다. 각 요소는 유일무이하며, 삽입 순서가 유지된다. Set과 배열의 차이점 특성 Set 배열 중복 허용 허용하지 않음 허용함 요소 접근 인덱스 없음 인덱스 있음 순서 유지 유지함 유지함 성능 검색과 유니크 관리에 유리 검색 및 정렬에서 성능 저하 가능 [ Set의 주요 함수와 예시 ] add(value): 집합에 값을 추가 delete(value): 집합에서 값을 제거 has(value): 집합에 특정 값이 있는지 확인 clear(): 집합의 모든 요소를 제거 size: 집합의 크기를 반환 let mySet = new Set(); // 값 추가 mySet.add..

자바스크립트의 배열과 객체에 대해 알아보자. Array (배열) 배열은 여러 데이터를 순서대로 저장할 수 있는 구조로, 각 요소에는 인덱스를 통해 접근할 수 있다. 인덱스는 0부터 시작g한다. [배열 생성 및 접근] // 배열 생성 let fruits = ['사과', '바나나', '체리']; // 배열 요소 접근 console.log(fruits[0]); // '사과' console.log(fruits[1]); // '바나나' console.log(fruits[2]); // '체리' // 배열 길이 확인 console.log(fruits.length); // 3 [배열 요소 추가 및 제거] // 맨 끝에 요소 추가 fruits.push('오렌지'); console.log(fruits); // ['사과',..