개발
-
자바스크립트 객체 때문에 에러를 겪는 개발자들을 위한 실무 안내서개발/자바스크립트로의 깊은 잠수 2026. 4. 15. 21:22
거창하게 안내서라고 적어뒀지만 사실은 실무 팁같은 느낌의 글이에요. 자바스크립트의 객체는 잘못 다루기 쉽습니다.다루는 난이도가 높은 것에 비해 쓰기는 쉽죠.우리 개발자들은 실무에서 React, Vue 같은 라이브러리, NestJS 같은 프레임워크가 제공하는 높은 수준으로 추상화된 객체를 빈번하게 다뤄야 합니다.이 과정에서 흔히 발생하는 에러와 원인을 살펴보고, 에러를 방지하기 위해서는 어떤 마음가짐으로 객체를 다뤄야 하는지 정리해 보겠습니다. JavaScript 객체의 특징본격적으로 에러 케이스를 알아보기 전에 JavaScript 객체의 본질적인 특징부터 알아볼까요? - mutable (변경 가능)객체는 한 번 생성된 후에도 내부의 값을 자유롭게 바꿀 수 있어요.const로 선언해도 변수에 담긴 참조..
-
자바스크립트같은 약타입 언어에 강한 컨벤션을 강제하는 건 쓸데없는 짓일까? 그럴거면 다른거 쓰지개발/자바스크립트로의 깊은 잠수 2026. 4. 8. 21:36
객체 리터럴, 그 참을 수 없는 가벼움객체 리터럴이라는 것이 있습니다.자바스크립트에서 객체를 만드는 가장 쉽고 간편한 방법입니다. // 그냥 이렇게 하면 객체 인스턴스가 만들어집니다. 클래스 정의가 필요없습니다.const kimMinji = { name: "김민지",};// 심지어 기존에 없는 프로퍼티도 만들어 넣을 수 있습니다.kimMinji.birthYear = 2004; 이렇게 객체를 생성하는 행위는 강타입 언어에서는 말도 안되는 짓입니다.강타입 언어인 C#의 예시를 보면... // 먼저 클래스를 정의하고...public class Person{ public string Name { get; set; } public int BirthYear { get; set; } publ..
-
자바스크립트의 빈 배열([])은 빈 문자열(""), 0이지만 boolean일 땐 true로 변환되는 이유개발/자바스크립트로의 깊은 잠수 2026. 4. 1. 21:33
JavaScript의 타입 변환 시스템은 봐도봐도 새롭습니다.암묵적 타입 변환이 일어날 수 있어서, 결과를 예측하기 어려운 경우가 많아요.그 중에서도 특히 헷갈리는, 빈 배열 (`[]`)의 타입 변환을 정리해 보았습니다. 빈 배열을 문자열과 숫자로 변환하기먼저 빈 배열을 문자열(string)과 숫자(number)로 각각 변환해 보겠습니다. 객체가 string, number같은 원시값(primitive)으로 변환될 때, 자바스크립트 엔진은 ToPrimitive 추상 연산을 수행합니다.해당 객체에 대해서 `.toString()`과 `.valueOf()`를 순서대로 시도해요. 객체 중에서도, 배열의 `.toString()`은 내부적으로 `Array.prototype.join()`을 먼저 호출합니다.빈 배열을..
-
어차피 다 똑같은 반복인데 for문만 사용하면 안되는걸까개발/자바스크립트로의 깊은 잠수 2026. 3. 25. 20:00
자바스크립트에는 다양한 반복 방법이 존재합니다.먼저 문의 형태인 `for, for...of, for...in, while, do while`이 있습니다.그리고 메서드의 형태인 `forEach, map, reduce, some, every, find, filter,` ...등이 있습니다.아니 어차피 반복하는 것이 목적인데, for 하나면 충분하지 않을까요?왜 이렇게 다양한 반복 방법이 존재하는 걸까요? 코드는 반복이 싫어요사실 반복을 위해서는 for문도 필요가 없습니다.그냥 코드를 여러번 쓰면 됩니다. 위의 그림처럼 별 다섯 줄을 출력하는 코드는 그냥 여러번 쓰는 것이 더 효율적입니다.하지만 별 5천 줄, 5만 줄을 출력해야 한다면,그리고 실무에서 5백만 행의 데이터를 반복해서 처리해야 한다면 얘기가..
-
자바스크립트에서 함부로 덧셈하지 마라개발/자바스크립트로의 깊은 잠수 2026. 3. 18. 21:30
`[] + []` 는 `''` 입니다.`[] + {}` 는 `'[object Object]'` 입니다.`{} + []` 는 `0` 입니다.`+{}` 는 `NaN` 입니다. 자바스크립트는 어쩌다 이렇게 되었을까요? + 기호가 가지는 세 가지 의미자바스크립트에서 더하기(+) 기호는 세 가지 의미를 가질 수 있습니다. 단항(unary) 산술 연산자이항(binary) 산술 연산자문자열 연결 연산자 피연산자 앞에 홀로 쓰이면 단항 산술 연산자가 됩니다.두 피연산자 사이에 쓰이면 이항 산술 연산자가 됩니다.두 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자가 됩니다. +'1'; // 1+'Hello'; // NaN1 + 2; // 31 + '2'; // '12''1' + 2; // '1..
-
(x = 1) + 5 는 왜 가능한가? 할당문이 값으로 평가되는 이유개발/자바스크립트로의 깊은 잠수 2026. 3. 11. 21:35
자바스크립트에서의 할당문은 값으로 평가되는 표현식입니다. let x; // 변수 x 선언console.log((x = 1) + 5); // 6 을 출력한다 왜 이런 짓이 가능하도록 만들어졌을까요? 표현식과 문알아보기에 앞서 표현식과 문이 무엇인지에 대한 정의를 짚어 보겠습니다. `let x;` 는 변수 선언문입니다.`x = 1;` 은 할당문임과 동시에 표현식입니다. 표현식(expression)은 값으로 평가될 수 있는 문(statement)이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.- 이웅모, 『모던 자바스크립트 Deep Dive』, 위키북스, 2020, p.52 따라서 문보다 표현식이 더 좁은 개념이라고 볼 수 있습니다.문은 무엇일까요? 정의는 아래와 같이 할 수 있습니..
-
브라우저는 메모리를 어떻게 관리하길래 크롬 탭 하나가 700MB씩 먹는걸까개발/자바스크립트로의 깊은 잠수 2026. 3. 4. 21:32
크롬 탭 위에 마우스를 올려보면 메모리 사용량을 알려줍니다.별거 없는 페이지라고 생각했는데 700MB씩 잡아먹는 모습을 보면 문득 이게 700MB씩 먹을 페이지인가? 싶은 의문이 드는 경우가 종종 있었습니다.그 이유를 찾아봤습니다.V8 엔진이 범인인가?크롬 브라우저는 V8 엔진이라는 자바스크립트 엔진으로 JS 코드를 컴파일하고 실행합니다.어쩌면 V8 엔진이 메모리를 좀 희생해서 속도를 얻어내는 건 아닐까요?보통 속도와 메모리 사용량 사이에는 trade-off 관계가 있으니까 말이에요. 이런 합리적 의심을 바탕으로, V8이 메모리를 관리하는 방식을 한번 살펴보겠습니다. 위의 그림은 V8 엔진의 메모리 구조를 도식화한 그림입니다.모든 JS 프로그램은 V8 프로세스에 속하는 일련의 메모리 영역들로 대변될 수..
-
[독후감] 이펙티브 엔지니어 - AI 시대에 효율적인 엔지니어란 뭘까개발/오피니언 2026. 3. 2. 18:19
이펙티브 엔지니어라는 책을 읽게 되었습니다. 이 책의 저자가 전달하고자 하는 메시지는 명료합니다.내가 하는 일이 높은 레버리지를 가지도록 해라.시간이라는, 누구에게나 공평하게 주어지는 이 한정된 자원을 가장 효율적으로 사용하라는 메시지입니다. AI 시대를 살아가는 소프트웨어 엔지니어로서, 우리는 어떻게 일해야 효율적으로 일할 수 있을까요? 이 책에서 소개하는 예시들 중에 제가 중요하다고 생각하는 두 가지를 골라 봤습니다. 여러 명에게 영향을 미칠 수 있는 일이 더 큰 레버리지를 가진다.급하지만 중요하지 않은 일을 위임하면, 급하지 않지만 중요한 일에 시간을 더 투자할 수 있다. 이런 명제들은 논리적으로 옳습니다.그렇기 때문에 시간이 지나도 변하지 않습니다.세상이 바뀌고 환경이 변화하더라도 바뀌지 않습니..