본문 바로가기
728x90
반응형

📌 Front End/└ JavaScript55

[JavaScript] 자바스크립트 라이브러리 모음(CDN) - CryptoJS, Dropzone, SweetAlert2, Swiper, Chart.js, interact.js 📌 CDN / 라이브러리라이브러리 : 웹사이트에 필요한 기능을 쉽게 추가할 수 있는 도구 모음CDN : 라이브러리를 인터넷을 통해 쉽게 가져다 쓸 수 있게 해주는 장소🔎 CDN을 통해 라이브러리를 사용하는 이유라이브러리를 내 컴퓨터에 저장해서 쓰면, 매번 파일을 설치하고 업데이트의 번거로움이 있습니다.CDN을 사용하면 인터넷에서 필요한 라이브러리를 바로 불러와 사용할 수 있어파일을 따로 다운로드할 필요가 없고, 프로젝트 용량이 줄어들고 서버 부담이 줄어듭니다. CDN은 라이브러리를 쉽게 불러와 쓸 수 있게 해주는 장소이고,라이브러리는 웹 기능을 쉽게 추가해주는 도구입니다. CDN 장점프로젝트 용량 감소 : 파일을 다운로드하지 않아도 됩니다.서버 부담 감소 : 외부 서버에서 리소스를 제공해 서버 부담이.. 2024. 11. 15.
[JavaScript] 비동기 데이터 통신(AJAX, Fetch) - Fetch 요청 옵션, 응답 속성 📌 AJAX(Asynchronous JavaScript and XML)JavaScript로 XMLHttpRequest 객체를 사용해 서버와 비동기 통신을 가능하게 해주는 기술이를 통해 웹 페이지를 새로 고침하지 않고도 필요한 부분만 업데이트할 수 있습니다.AJAX라는 이름에 XML이 포함되어 있지만, 현재는 JSON 등 다양한 데이터 형식 사용AJAX는 서버와 데이터를 비동기적으로 주고받아 사용자 경험을 개선하는 중요한 역할 비동기 HTTP 통신이란, request(요청)와 response(응답)를 비동기 방식으로 처리🔎 HTTP 서버 요청 메서드 종류(CRUD) HTTP 요청 메서드는 클라이언트가 서버에 요청의 종류와 목적을 알리는 방식입니다.AJAX와 Fetch 등의 통신 방식에서 자주 사용하는 .. 2024. 11. 14.
[JavaScript] 프록시(Proxy) 객체, 핸들러 메서드 - 객체 보호, 함수 호출 제어, 생성자 제어, 값 제한, 읽기 전용 📌 프록시(Proxy) 란? 프록시(Proxy)는 JavaScript에서 원본 객체의 동작을 가로채어 제어할 수 있는 기능입니다.이를 통해 객체의 속성 읽기, 쓰기, 삭제, 함수 호출 같은 작업을중간에서 조작하여 객체 보호, 동작 커스터마이징, 유연한 관리가 가능합니다.주로 보안이 중요한 정보 보호나 복잡한 데이터 구조 관리에서 유용합니다. 🔎 프록시 주요 역할객체 보호 : 민감한 정보 보호동작 커스터마이징 : 속성 접근 방식 조정유연한 관리 : 객체를 수정하지 않고 원하는 동작 추가🔎 프록시 특징대리인 역할 : 원본 객체 대신 요청을 받고 결과를 반환명령 재정의 : 속성 접근, 삭제 등 작업을 원하는 대로 변경 📌 프록시(Proxy) 객체원본 객체의 기본 동작(속성 접근, 할당, 함수 호출 등).. 2024. 11. 13.
[JavaScript] 자바스크립트 구조 분해 할당 📌 구조 분해 할당(Destructuring assignment)구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 한다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 한다. 이럴 때 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assignment) 을 사용할 수 있다.📌 배열 분해구조 분해 할당 [first, second, third] = numbers는 numbers 배열의 값을 별도의 변수 first, second 및 third로 추출합니다.// Example .. 2024. 9. 4.
[JavaScript] 자바스크립트 리스트 컴프리헨션 - map(), filter(), find(), from(), fill(), reduce() 리스트 컴프리헨션(List Comprehension)배열이나 리스트를 간결하게 생성하는 문법을 의미합니다.리스트 컴프리헨션은 리스트를 짧고 직관적인 방식으로 생성하거나 변형할 수 있는 문법입니다.메서드설명map()배열의 각 요소를 변형하여 새로운 배열 생성(원본배열 유지)filter()조건에 맞는 요소만을 포함하는 새로운 배열 생성(원본배열 유지)find()배열에서 조건을 만족하는 첫 번째 요소의 값을 반환조건에 맞는 요소가 없다면 undefined를 반환(원본배열 유지)from()유사 배열 객체나 반복 가능한 객체를 배열로 변환(원본배열 유지)fill()배열의 모든 요소를 특정 값으로 채우기시작과 끝 인덱스를 지정하여 배열의 일부만 채운다.(원본배열 변경)reduce()배열의 요소를 누적하여 단일 값을.. 2024. 8. 22.
[JavaScript] 자바스크립트 ...Spread 연산자(Spread Operator) - 배열, 객체, 함수, rest 파라미터 스프레드 연산자 (. . .)세개의 점(. . .)으로 이루어진 연산자는기존 배열객체의 값을 그대로 복사해와서 사용할 수 있는 연산자라고 할 수 있다.객체는 이런 spread 연산자를 많이쓰고 배열은 원본을 건드리지 않고 사본을 만들어주는 내장함수 (map, filter, reduce, concat) 을 통해 다양한 처리를 할수 있다.   배열 복제 · 병합 · 변경 · 추가객체 복제 · 병합 · 변경 · 추가 함수 매개인자rest 파라미터 - 함수rest 파라미터 - 객체 · 배열let array = [1,2,3,4,5];/* ... ➡️ 스프레드 문법(점 3개) 배열 안에 있는 항목들(요소들)을 전부 꺼내준다. 즉 [...array]은 array에 있는 항목을 전부 꺼내 .. 2024. 8. 21.
[JavaScript] 자바스크립트 세미콜론(;) ✍️ 중괄호{} 로 묶인 블록을 제외하고는, 세미콜론 입력 세미콜론(;)은 문의 종료를 나내며, 자바스크립트에서는 자동 삽입 기능을 제공한다. 세미콜론은(;)은 문(컴퓨터에 내리는 명령으로 선언문, 조건문, 반복문, 할당문등) 의종료를 뜻한다.자바스크립트에서 중괄호{}로 묶인 블록을 제외하고는 세미콜론을 입력한다. 이를 통해 자바스크립트가 문의 종료한 위치를 파악하여 하나씩 코드를 실행할 수 있도록 해주는 것이다.  중괄호로 묶인 블록에 사용하지 않아도 되는 이유는코드 블록{}은 자체 종결성을 가지고 있기 때문이다. 하지만 세미콜론을 기입하지 않아도 잘 동작이 되는 것을 볼 수 있다. 왜냐하면 자바스크립트는 문의 종료지점으로 예측되는 지점에 자동으로 세미콜론을 삽입해 주는 기능이 있기 때문이다. 그럼에도.. 2024. 7. 26.
[JavaScript] Console API 종류 (다양한 콘솔 API 모음) ✍️ Console Method 목록console.log(console); 콘솔 출력 - console.log( ... )인자로 전달된 값들을 화면으로 출력해준다. 콘솔 창 초기화 - clear단어 그대로 콘솔 창에 입력된 모든 것들을 초기화 시켜준다.  특정 시점부터의 디버깅이 필요한 경우 해당 시점의 맨 앞에서 실행시켜주면 콘솔 확인이 편리하다.console.log(document.body);console.clear();const data = { a: 1, b: 5 };console.log(data);  로그 레벨 - debug / info / warn / error레벨로 구분된 로그 정도로 생각하면 될 것 같다.  기본적으로 직관적 스타일이 적용된 로그를 볼 수 있다. console sidebar .. 2024. 7. 15.
[JavaScript] 자바스크립트 콜백 함수(Callback Function) - 선언적 함수, 익명 함수, forEach(), map(), filter() 콜백 함수 (Callback Function)자바스크립트에서 함수도 하나의 자료형으로 본다. 그래서 매개변수로 함수를 전달할 수 있다. 매개변수로 전달하는 함수를 콜백함수라고 한다.콜백 함수 종류1. 선언적 함수2. 익명 함수 1. 선언적 함수// ▶ 함수 선언function callThreeTimes(callback) { for(let i=0; i 2. 익명 함수// ▶ 함수 선언function callThreeTimes(callback){ for(let i=0; i콜백 함수 활용 함수1. forEach()2. map()3. filter()1. forEach()forEach 함수는 배열이 가지는 함수로써 배열 내부의 요소를 사용해서 콜백 함수를 호출해 준다. 📝 forEach() 형태// 요소 : 배.. 2024. 6. 16.
728x90
반응형