Front-End/JS

JS padStart와 padEnd 메소드: 문자열 길이에 맞게 문자 채워넣기 (문자열 패딩)

JavaScript의 padStart와 padEnd는 문자열을 특정 길이로 패딩하는데 사용됩니다. 이를 통해 지정한 문자를 원하는 길이로 문자열을 채우거나, 텍스트를 정렬하는데 활용됩니다. padStart와 padEnd는 ES8(ECMAScript 2017)부터 표준으로 추가되었습니다. 따라서 오래된 브라우저나 환경에서는 지원되지 않을 수 있음에 주의해야합니다. padStart 문자열의 시작 부분에 특정 문자열로 채워, 지정한 길이 만큼 만듭니다. 첫 번째 인자는 최종 길이를 나타냅니다. 두 번째 인자는 채울 문자열입니다. 두 번째 인자를 생략하면 기본값으로 공백(" ")이 사용됩니다. 아래 예제는 문자열 길이가 5가 되도록 문자열 "0"을 시작 부분부터 채워준 코드입니다. const str = "123..

JS 자바스크립트: `프로토타입` 기반 객체 지향 프로그래밍 언어

프로토타입(Prototype) 프로토타입 기반 언어는 객체 지향 프로그래밍의 한 형태로, 클래스 기반 언어와는 다른 객체 지향 모델을 따릅니다. JS(JavaScript)는 대표적인 프로토타입 기반 언어입니다. 프로토타입 상속: 클래스 기반 언어에서는 객체를 클래스의 인스턴스로 생성하는 반면, 프로토타입 기반 언어에서 객체는 다른 객체로부터 직접 상속됩니다. 즉, 객체는 다른 객체의 프로퍼티와 메서드를 상속받아 사용할 수 있습니다. 이때, 새로운 객체는 원본 객체의 프로토타입을 상속받습니다. 이를 통해 코드 재사용과 확장이 간단하게 이루어집니다. 프로토타입 객체: 프로토타입 기반 언어에서는 객체가 자체 속성과 메서드를 가짐과 동시에 prototype이라는 특수한 속성을 가집니다. 이 prototype 속..

JS 깊은 복사와 얕은 복사: JS에서 객체 복사 방법과 차이점

요약 깊은 복사: 깊은 복사는 객체를 완전히 새로운 객체로 복사합니다. 즉, 객체의 속성들과 중첩된 객체까지 재귀적으로 복사됩니다. 복사된 객체와 원본 객체는 독립적인 개체가 되어 중첩된 객체를 수정해도 서로에게 영향을 주지 않습니다. 얕은 복사: 얕은 복사는 객체를 복사할 때, 객체의 속성들은 복사되지만 중첩된 객체는 참조로 복사됩니다. 복사된 객체와 원본 객체는 동일한 중첩된 객체를 참조하게 됩니다. 즉, 중첩된 객체를 수정하면 복사된 객체와 원본 객체 모두에 영향을 줍니다. 참조 복사: 참조 복사는 객체를 복사하는 대신, 원본 객체를 참조하는 방식입니다. 복사된 객체와 원본 객체는 동일한 객체를 참조하게 됩니다. 즉, 하나의 객체를 수정하면 다른 객체에도 영향을 줍니다. 깊은 복사 (Deep Cop..

JS 스와이프 동작 구현을 위한 Swiper API

Swiper API Swiper API는 웹 및 모바일 애플리케이션에서 스와이프 동작을 구현하기 위한 JavaScript 라이브러리입니다. 이 API는 사용자의 터치 입력을 감지하고 해당 동작을 가로 스와이프 또는 세로 스와이프로 해석하여 애플리케이션에 반응합니다. Swiper API를 사용하면 다양한 스와이프 기능을 구현할 수 있습니다. 일반적으로 스와이프 기능은 이미지 슬라이더, 캐러셀, 슬라이드 메뉴, 드래그 앤 드롭 등의 인터랙티브한 기능을 구현하는 데 사용됩니다. 주요 메서드 new Swiper(container, options) Swiper 인스턴스를 생성하는 메서드입니다. container는 Swiper 컨테이너 요소의 선택자 또는 DOM 객체이고, options는 Swiper의 옵션을 설정..

JS 모듈: export(내보내기)와 import(가져오기)

ES6에서 JavaScript에서는 모듈을 지원합니다. 모듈 구성하고 이용하면 파일 간의 코드를 쉽게 공유할 수 있으며, 코드의 가독성과 유지보수성을 높일 수 있습니다. 모듈 시스템에서는 import와 export 키워드를 사용하여 모듈을 로드하고 내보낼 수 있습니다. import와 export는 컴파일 시점에서 결정되며, import 선언과 export선언은 호이스팅되어 최상위에 위치됩니다. export: 내보내기 모듈에서 외부로 내보내기 위한 키워드입니다. 이를 이용하여 아래와 같이 변수, 함수, 클래스, 객체 등을 내보낼 수 있습니다. // 변수 내보내기 export const value = 25; // 여러 값 내보내기 const z = 'first'; const y = 'second'; expo..

JS 프로토타입: 자바스크립트의 상속

자바스크립트에서 프로토타입(prototype)은 자바스크립트에서 상속을 구현하기 위한 방식으로, 다른 객체에 공유 프로퍼티를 제공하는 객체입니다. 자바스크립트에서 모든 객체는 자신의 부모 역할을 하는 프로토타입 객체(prototype object)를 가지고 있습니다. 이 프로토타입 객체는 다른 객체로부터 상속된 속성과 메서드를 가지고 있습니다. 프로토타입 체인(prototype chain)은 자바스크립트에서 객체가 특정 속성에 접근할 때, 해당 객체 자체에 해당 속성이 없다면, 자신의 프로토타입에서 해당 속성을 찾고, 이를 계속해서 상위 타입 객체의 프로토타입에서 찾는 과정을 반복하다가 최종적으로 Object.prototype에서 해당 속성을 찾지 못하면 undefined를 반환하는 것을 말합니다. 정리..

JS Fetch API를 이용한 Ajax 통신

Fetch API 방식 이용한 Ajax Ajax는 정통적으로 XMLHttpRequest() 객체를 사용하여 서버와 데이터를 교환합니다. 하지만 이 방식은 코드가 복잡하고 가독성이 좋지 않아 최신 기술인 fetch() 메서드를 통해 Ajax 통신하는 법에 대해 포스팅하겠습니다. Fetch API 사용 장점 Fetch API는 Promise 기반으로 구성되어 있어 비동기 처리 방식에 적합한 형태입니다. 체이닝 방식으로 작성 가능하기 때문에 가독성이 좋습니다. Fetch API는 JavaScript 기본 기능이기 때문에 JQuery 같은 라이브러리를 가져다 쓰지 않기 때문에 가볍습니다. Fetch 문법 사용법 fetch("URL", option) .then((response) => response.text()..

JS AJAX ( Asynchronous JavaScript And XML )

AJAX: Asynchronous JavaScript And XML AJAX는 Javascript와 XML을 이용한 비동기적 정보 교환 기법입니다. AJAX를 이용함으로 사용자가 서버에 자료를 요청할 때 화면 전환 없이 요청한 자료를 받을 수 있습니다. 또한 사용자가 기다릴 필요 없이 다른 작업을 바로 수행할 수 있습니다. Ajax 기초 메서드 종류 설명 load() (데이터를 전송하여) 외부 콘텐츠를 가져올 때 사용 $.ajax() 데이터를 서버에 HTTP POST, GET방식으로 전송할 수 있음. HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있음. $.post(), $.get(), $.getJSON() 메소드의 기능을 하나로 합쳐 놓은 통합적인 메서드. $.post() 데이터를 서..