본문 바로가기

FE27

[JS] Array.prototype.sort()의 허점 06.20.20241. JavaScript Sort Method의 이상한 점JS를 쓰면서 sort를 사용해야 할 일이 있을 때 사실 빌트인 정렬 함수를 많이 쓰곤 했다.굳이 정렬 메소드를 재생성해야할 필요가 없었기 때문이다. 그런데 유데미 강의를 들으며 이상한 점을 알게되었다.["B", "C", "A"].sort();// ["A", B", "C"][6, 4, 15, 10].sort();// [10, 15, 4, 6] 자바스크립트에서는 이 코드가 동작하지 않는다는 것이다.분명 sort 메소드를 쓸 때 실행 오류를 한 번도 마주한 적이 없는데 이런 기본적인 함수에서 숫자가 정렬되지 않는다는게 믿겨지지가 않았다.2. Why?왜 자바스크립트의 정렬 함수는 숫자를 정렬하지 못하는 것일까?그 답은 공식 문서에서 찾.. 2024. 6. 20.
[JavaScript] 마이크로 태스크(Micro Task)와 매크로 태스크(Macro Task) 03.24.2024 0. Background 요즘 코딩 컨텐츠 검수 아르바이트를 하는 중인데 그 곳에서 알게된 개발자님이 컨텐츠 중 한 문제를 보내주셔서 풀어본 문제를 정리해보려 한다. 1. 코드 function a() { console.log('a1'); b(); console.log('a2'); } function b() { console.log('b1'); c(); console.log('b2'); } async function c() { console.log('c1'); setTimeout(() => console.log('setTimeout'), 0); await d(); console.log('c2'); } function d() { return new Promise(resolve => { c.. 2024. 3. 25.
[React] 부수 효과 (Side Effect) 03.10.2024 1. 리액트에서 부수 효과란 영어에서 Side Effect의 정의는 부작용에 가깝다. 본래 원했던 효과가 아닌 다른 효과가 부수적으로 딸려온다는 의미이다. 그러나 리액트에서 Side Effect란 그저 부수적인 효과를 의미한다. "부수적인 효과라니, 그건 에러 아닌가요?" 아니다. 다시 정리하자면 에러와 같이 내가 짠 코드가 원하는 대로 동작하지 않는 게 아니고, 코더가 함수 등에 본래 메인 역할 외에 다른 효과를 넣는 것이다. 코드 예시를 보면 이해가 좀 더 빨라질 것 같다. // Ex 1 const increment = (num) => { console.log("input", num);// Side Effect return num + 1; } increment(1); // Ex 2.. 2024. 3. 10.
[React] 일방향 흐름 (One-Way Data Flow) 03.01.2024 0. Background 리액트에서의 데이터 흐름은 단방향이고, 단방향이어야 한다. 즉, 부모 컴포넌트로부터 자식 컴포넌트로 전달된다. 이것을 우리는 일방향 흐름 또는 단방향 흐름(One-Way Data Flow)라고 한다. 1. Reactivity Reactivity, 한국말로 반응. 이것은 무엇을 뜻할까? 감히 정의를 해보자면 Reactivity: 애플리케이션의 내부적인 상태를 실제 UI에 반영하는 규칙 이라고 할 수 있다. 이 Reactivity, 반응이라는 개념에서는 알아두어야 할 핵심 두 가지가 있다. 흐름(Flow): 물이 고이면 안된다 일방통행(One-Way): 물이 역류해서는 안된다. 2. 대표적인 안티패턴 2-1. 건전하지 않은 의존성 배열 우리는 먼저 의존성 배열(D.. 2024. 3. 1.
[React] 선언적 프로그래밍(Declarative Programming) 02.29.2024 0. Background 콜로소 라는 업체에서 하는 온라인 무료 특강을 듣고 배운 내용들을 잘라서 정리하려 한다. 토스 프론트엔드 개발자분이 선언적 프로그래밍, 단방향 흐름, 부수 효과 총 세가지에 대해 강연하셨다. 오늘은 이 중 선언적 프로그래밍에 대한 글을 정리해 보려고 한다. 1. 선언적이란? 1-1. 논란의 여지를 주는 키워드 우리 프로그래밍 세계에서는 논란의 여지가 있는 질문들이 있다. HTML은 프로그래밍 언어인가? -> 프로그래밍 언어의 정의는? 강타입 언어를 써야하는가? -> 강타입이란? 개발을 잘 하려면 수학을 배워야 하는가? -> 개발을 잘한다라는 의미는? 이와 같이 선언적이라는 말도 엄밀하게 정의되는 개념이 없다. 당장 위키피디아를 찾아봐도 그렇다. 그렇다면 우리가.. 2024. 2. 29.
[JS] Swap in JavaScript 01.04.2023 1. Temporary Variable Temp 변수를 이용하여 Swap 구현 let a = 1; let b = 2; let temp; temp = a; a = b; b = temp; console.log(a); // => 2 console.log(b); // => 1 2. Destructuring assignment (구조 분해 할당) 원래 하던 Swap에서 동등 연산자를 기준으로 괄호를 추가해주면 된다. let a = 1; let b = 2; [a, b] = [b, a]; console.log(a); // => 2 console.log(b); // => 1 꼭 양 변의 갯수가 맞지 않더라도 동작은 한다. 그러나 이 경우 주의해야 할 점이 있는데, 왼쪽항의 변수 갯수가 오른쪽 항의 .. 2024. 1. 4.