자바스크립트 애플리케이션에서 데이터 정렬은 필수적인 기능입니다. 이번에는 배열을 정렬하는 sort() 메서드의 기본 사용법부터, 까다로운 숫자 정렬을 완벽하게 처리하는 방법까지 핵심만 살펴보겠습니다.1. sort()의 기본 작동 방식 (문자열)sort() 메서드는 기본적으로 배열의 요소를 문자열(string)로 변환한 후, 유니코드 값 순서대로 정렬합니다. 문자열 배열에 대해서는 기대한 대로 알파벳 순서(오름차순)로 잘 작동합니다.특징: sort() 메서드는 **원본 배열 자체를 변경(mutate)**합니다. 사본을 만들지 않고 바로 원본을 수정한다는 점에 유의해야 합니다.JavaScriptconst owners = ['Jonas', 'Zach', 'Adam', 'Martha'];owners.sort()..
JavaScript
Set 정의Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분배열Set 객체동일한 값을 중복하여 포함할 수 있다.OX요소 순서에 의미가 있다.OX인덱스로 요소에 접근할 수 있다.OX 이러한 Set 객체의 특성은 수학적 집합의 특성과 일치한다. Set은 수학적 집합을 구현하기 위한 자료구조다. 따라서 Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다. Set 객체의 생성Set 객체는 Set 생성자 함수로 생성한다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set();console.log(set); // Set(0) {} Set 생성자 함수는 이터러블을 인수로..
안녕하세요! 자바스크립트 개발을 하다 보면, 객체에 저장된 데이터를 다루는 경우가 참 많죠. 그런데 map 함수처럼 유용한 배열 메서드들은 객체에 바로 사용할 수 없다는 불편함이 있습니다.이때 **Object.entries()**가 아주 유용합니다. 이 메서드는 객체를 [key, value] 쌍으로 이루어진 배열로 변환해 주어, 객체 데이터를 배열처럼 다룰 수 있게 만들어줍니다.Object.entries()의 기본 사용법Object.entries()는 객체를 인수로 받아, 그 객체의 모든 열거 가능한 속성([키, 값]) 쌍을 2차원 배열로 반환합니다.예를 들어, 아래와 같은 사용자 정보 객체가 있다고 가정해 볼게요.JavaScriptconst user = { name: '김개발', age: 30, ..
ES11(ECMAScript2020)에서 도입된 null 병합(nullish coalescing) 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다. // 좌항의 피연선자가 null 또는 undefined이면 우항의 피연산자를 반환하고, 그렇지 않으면 좌황의 피연산자를 반환한다. var foo = null ?? 'default string'; console.log(foo); // "default string" null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다. null 병합 연산자 ??가 도입되기 이전에는 논리 연산자 ||을 사용한 단..
자바스크립트란? 자바스크립트로 한 줄로 간략하게 정의하면 아래와 같다. Javascript is a high-level, object-oriented, multi-paradigm programming language. 상기의 정의는 100% 맞는 말이지만 빙산의 일각에 불과하다. 조금 더 자세하게 정의하자면 아래와 같다. Javascript is a high-level, prototype-based, object-oriented, multi-paradigm, interpreted or just-in-time compiled, dynamic, single-threaded, garbage-collected programming language with first-class functions and a non..
개발 목표 Code Pen이라는 온라인 코딩 툴 사이트가 있다. - https://codepen.io/ 해당 사이트와 같이 코드를 입력하고 번들링하여 실시간으로 보여주는 사이트를 React로 만들고자 한다. 단, 로그인과 같은 인증 기능은 제외한다. 코드 입력 창에서 발생할 수 있는 문제점 간단하게 만들 수 있을 것 같았지만 코드를 입력하는 창을 구현하기 위해서는 아래와 같은 이슈사항들이 있었다. 코드 입력창에 오류를 발생시키는 문법 등의 잘못된 코드가 작성될 수 있다. DOM을 조작하는 코드로 인해 예상하지 못한 현상이 발생할 수 있다. ex) document.body.innerHTML = ‘’; 사용자가 악의적인 코드를 넣을 수 있다. ex) for (var i = 0; i { axios.post('..
트러블 이슈 코드 번들링 사이트를 만들던 중 버그가 발견 되었다. 아래 이미지를 보면 왼쪽 검은색 영역이 코드를 작성하는 부분이고, 오른쪽 흰색은 그 코드의 결과가 나오는 화면이다. 그런데 새로고침을 할 때마다 흰색 영역이 한 번 검은색으로 깜빡 거리는 현상이 있었다. code-cell.tsx (코드 결과를 보여주는 React Component) import './code-cell.css'; import { useEffect } from 'react'; import CodeEditor from './code-editor'; import Preview from './preview'; import Resizable from './resizable'; import { Cell } from '../state';..
2024.01.04 - [Javascript] - [JavaScript] 클로저(Closures) - 활용편(1/2) [JavaScript] 클로저(Closures) - 활용편(1/2) 이전 포스팅에서 클로저의 개념을 살펴보았다. 이번 포스팅에서는 배웠던 개념을 바탕으로 클로저의 예시와 활용법에 대해서 알아보고자 한다. 클로저 예시 1 코드 let f; const g = function () { const a codesmoothie.tistory.com 상기 포스팅에서 연장되는 글입니다. 클로저 예시 코드 const boardPassengers = function(n, wait) { const perGroup = n / 3; setTimeout(function(){ console.log(`We are n..
클로저의 개념 클로저란 기능은 배열이나 새기능을 만드는 것처럼 사용자가 명시적으로 사용하지 않는다. 특정 상황에서 자동으로 사용되며 클로저를 사용하고 있다고 이해하면 된다. 클로저를 이해하기 위해 아래 코드를 통해 예시를 살펴보자. secureBooking이라는 함수를 정의하였다. 이 함수는 passengerCount라는 변수를 가지며 이는 외부에서 조작하거나 접근할 수 없다. secureBooking 함수는 함수를 return하는데 상위에서 정의한 passengerCount 변수를 업데이트하는 것이다. const secureBooking = function() { let passengerCount = 0; return function() { passengerCount++; console.log(`${p..
자바스크립트에서 작성하는 대부분의 코드는 동기(synchronous) 코드이다. 동기 코드는 라인 순서대로(line by line) 실행된다. 아래의 코드를 보자. const p = document.querySelector('.p'); // 1번 p.textContent = 'My name is Jonas!'; // 2번 alert('Text set!'); // 3번 p.style.colro = 'red'; // 4번 동기(Synchronous) 코드의 문제점 코드가 '1번'라인에 도달하면 '실행 스레드(Thread of execution)'가 동작하며 코드가 실행된다. '실행 스레드'는 실행 컨텍스트의 일부로 컴퓨터 CPU에서 코드를 실질적으로 실행한다. 이 '실행 스레드'에서 '2번', '3번', '..
