프로그래머스의 프론트엔드 과제테스트 중 자바스크립트의 정렬 문제가 나왔다.여태 진행했던 프로젝트들에선 정렬을 백엔드에서 처리했었기 때문에 조금 당황했다... 이참에 정리해두고자 한다.❓ Array.prototype.sort()- Array.prototype.sort() 메서드는 배열의 요소를 제자리에서 정렬하며, 정렬된 배열에 대한 참조를 반환한다.- 기본적으로 배열의 요소를 문자열로 변환한 후, UTF-16 코드 유닛 값을 기준으로 정렬한다.▶ 기본 사용 예시const fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.sort();console.log(fruits); // ["Apple", "Banana", "Mango", "Orange"]문자열을 사전 ..

❓Promise - 비동기 작업의 최종 완료 또는 실패와 그 결과 값을 나타내는 객체 - Promise의 세 가지 상태: 1. 대기(waiting): 초기 상태, 이행되거나 거부되지 않음. 2. 이행(fulfilled): 연산이 성공적으로 완료됨. 3. 거부(rejected): 연산이 실패함. - Promise가 한 번 이행or거부되면 그 상태와 결과 값이 영구적으로 고정됨 ❓async - async 키워드를 사용하여 선언된 함수는 항상 Promise를 반환. 만약 async 함수가 값을 반환하면, 이 값은 Promise.resolve()에 의해 감싸져 Promise로 만들어짐. 만약 async 함수가 예외를 던지면, 이 예외는 Promise.reject()에 의해 감싸져 거부된 Promise로 만들어짐..

❓Webpack - 모듈 번들러. 여러 개의 모듈과 파일을 하나 또는 여러 개의 번들로 묶어주는 역할 -> 브라우저가 로드해야 하는 파일의 수가 줄어들어 성능 향상! - css, img, font 같은 정적 자원들도 모듈로 관리할 수 있게 해줌 -> 파일 간의 의존성 관리, 웹 어플리케이션의 구조 명확! - HTML, CSS, JS압축, 이미지 압축, CSS 전처리기 변환과 같은 추가 작업들도 자동화 해줌 ❓Babel - 자바스크립트 컴파일러. 최신 자바스크립트 문법을 구형 브라우저에서도 동작할 수 있도록 변환하는 역할 - ES6이상의 문법을 지원하지 않는 브라우저에서는 ES5문법으로 변환해줌 - JSX같은 문법도 자바스크립트로 변환 가능

❓fetch API - 자바스크립트의 내장 API로, 비동기 HTTP (Ajax) 요청을 생성하기 위해 사용. fetch 함수는 Promise 객체를 반환하며, 서버로부터 응답을 받으면 이 Promise는 Response 객체를 결과값으로 가짐 fetch('https://api.example.com/data', { method: 'GET', }) .then(response => response.json()) .then(data => console.log(data)) .catch((error) => console.log('Error:', error)); ❓Axios - Promise 기반의 HTTP 클라이언트로, 브라우저와 Node.js에서 모두 사용. fetch API보다 더 사용하기 쉽고 많은 기능 제..

❓ES6 - ECMAScript 표준의 가장 최신 버전(6번째 버전) ❔예시 1. Arrow function(화살표 함수): 간결한 문법으로 함수 선언 const square = (num) => num * num; 2. Template literals (템플릿 리터럴): 문자열 생성시 따옴표 대신, 백틱(`)을 사용(기존의 + 대체) const name = "홍길동"; console.log(`Hello, ${name}!`); // "Hello, 홍길동!" 3. Destructuring assignment (구조 분해 할당): 배열이나 객체의 속성을 해체하여 그 값을 개변 변수에 담음 let [a, b] = [1, 2]; let {name, age} = {name: "홍길동", age: 25}; 4. Sp..