Bin's Blog

들어가며 지난 시간에 프로그래밍이 무엇인지에 대해서 살펴보았다. 프로그래밍은 요구사항을 분석하고 적절한 자료구조와 함수를 사용해서 그 흐름을 제어하는 것이라고 했다. 이제 본격적으로 자바스크립트에 대해서 들어갈 볼 시간이다. 오늘은 크게 자바스크립트의 역사에 대해서 살펴보고자 한다. 자바스크립트의 탄생 자바스크립트는 언제 만들어졌을까? 🤔 우연스럽게도 내가 태어난 1995년에 처음 세상에 등장했다. 90%의 웹 브라우저 시장 점유율로 한 때 마이크로소프트보다 잘 나갔던 넷스케이프는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 한다. 그래서 탄생한 것이 넷스케이프의 직원이었던 Brendan Eich가 만든 자바스크립트이었다. 자바스크립트는 1996년 3월..

들어가며 이 글이 200번째 글이다. 그동안 반 년이라는 시간 동안에 쉼 없이 써왔다. 때로는 지쳐서 쉬기도 했지만 200개의 글을 써보자고 목표를 잡고 달려왔는데 목표에 달성한 나에게 박수를 보낸다. 200개의 글을 써오면서 "어떻게 하면 더 글을 잘 정리할 수 있을까? 어떻게 하면 글에 내 생각을 담을 수 있을까?"등 여러 고민을 해왔다. 그리고 이제는 양질의 글을 써야겠다 다짐했다. 오늘부터 자바스크립트에 대해서 더 깊게 알아보는 시간을 가지려고 한다. 제목도 "생각하는 자바스크립트"라고 지은 이유도 이 시간을 통해서 자바스크립트에 대해서 더 깊게 고민해 보는 시간을 가졌으면 좋겠다는 의미에서 지었다. "나는 왜 자바스크립트를 공부할까?"에 대한 이제까지의 나의 답은 "Front-End 개발자가 되..

들어가며 지난 주, 기본형 데이터와 참조형 데이터를 작성했을 때에 말한대로 오늘은 얕은 복사와 깊은 복사에 대해서 알아보는 시간을 가지려고 한다. 오늘 주제는, 실제로 내가 면접 때 받았던 질문이었고 내가 제대로 답변을 하지 못한 부분이다. 따라서 제대로 이해하고 넘어가야 하는 부분이다. 얕은 복사 얕은 복사는 바로 아래 단계의 값만 복사하는 방법이다. 객체의 첫 번째 레벨의 속성만 복사한다. 만약 그 속성의 값이 참조형(객체 또는 배열)이면 그 내부의 속성이나 요소는 복사되지 않는다는 뜻이다. 예시를 보자. let obj = { a: 1, b: { c: 2, d: 3 }, e: [4, 5] }; 이 객체에 대한 첫 번째 레벨의 속성은 "a", "b", "e"이다. 만약 얕은 복사를 수행하면, "a", ..

들어가며 지난주, 난 D사의 면접을 다녀왔다. D사의 면접은 나에게 합불을 떠나서 큰 영감을 줬다. 이제까지 받아보지 못했던 질문들도 많았고, 꼬리 질문도 많았다. 내가 무엇이 부족한지 느낄 수 있는 면접이었다. 돌아보면 준비가 부족했던 것 같아서 많이 아쉬움이 남는다. 그래서 오늘은 제대로 대답하지 못했던 부분은 기본형 데이터와 참조형 데이터에 대해서 살펴보고자 한다. 먼저, 기본형 데이터와 참조형 데이터를 알아보기 전에 데이터 할당에 대해서 잠시 살펴보자. 데이터 할당 기본적으로 데이터 할당은 메모리 공간에서 이루어진다. a라는 변수가 있고 'abc'라는 문자열을 할당하고 싶다면 데이터를 저장하기 위한 별도의 메모리 공간을 확보해서 문자열 'abc'를 저장하고 그 주소를 변수영역에 저장하는 식으로 이..

들어가며 먼저, 왜 이 글을 남기고 싶었는지 이유에 대해서 말하겠다. 자바스크립트의 프레임워크 & 라이브러리(편의상 프레임워크라고 쓰겠다)는 내가 생각한 것보다 많고, 아직도 모르는 게 투성이다. 개발자가 해야 하는 일 중에 하나는 트렌드를 파악해서 새로운 기술을 적용하는 것이라고 생각한다. 하루가 다르게 기술 트렌드는 빠르게 변화하고 있다. 빠르게 바뀌는 생태계에서 Pioneer가 되고 싶다. 오늘은 State of JavaScript의 리포트를 바탕으로 프론트엔드 프레임워크의 트렌드에 대해서 살펴보고 나의 생각을 가미해서 포스팅을 해보겠다. 매년 초 State of JavaScript에서 어떤 프레임워크가 인기가 있는지 조사를 통해서 리포트를 낸다. 아마 2024년 초에 2023년 리포트가 나올 예정..

글의 시작 오늘 다루는 주제는 내가 코어 자바스크립트를 공부하고, 또 강의를 챙겨보면서 평소해 궁금했던 내용이다. 면접 때도 단골 질문으로 등장한다. 자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행한다. 내가 궁금했던 부분은 "왜 자바스크립트가 쓰레기 수집을 하지?", "왜 쓰레기를 수집해야 하는지?" 이런 행동이 어떤 목적과 의미를 지니는지 이번 포스팅을 통해서 파헤쳐 보자. Garbage란? Garbage는 컴퓨터의 메모리에 있지만 앞으로 사용되지 않을 데이터나 객체 또는 메모리 영역을 가리킨다. 모든 컴퓨터 시스템은 제한적인 메모리를 가지고 있고, 대부분의 소프트웨어 garbage를 만들어내기 때문에, 이를 메모리에서 해제하여 다시 사용할 수 있게 해야 한다. 간단한 예시 // user엔..

🤔 this keyword는 어디에 쓰이냐?에 따라서 뜻하는 의미가 달라진다. 확인해보자! 1️⃣ 일반함수 일반(전역)함수에서 쓰면 this는 window를 뜻한다. // 눈에 보이지 않지만 window라는 전역객체가 감싸고 있다. window: { function solution() { console.log(this); } } // window solution() 2️⃣ Strict mode Strict mode에서는 일반함수 안에서 this keyword를 불렀을 때 undefined라는 값으로 지정해준다. 'use strict'; function solution(){ // undefined console.log(this) } solution() 3️⃣ Object내 함수 안에서 this 호출한 자기..

흔히 말하는 Bundling이라는 용어는 어떤 제품을 묶음으로 판매하는 것을 말한다. 웹 개발에서 Bundling 그럼 웹 개발에서 번들링을 한다고 하면 무슨 의미일까? 번들링은 기능별로 모듈화 했던 파일들을 하나로 묶어주는 작업을 말한다. 우리가 만든 파일들을 하나로 합쳐서 이제 서버에 배포하기 위한 과정(빌드)을 거치게 된다. 빌드 명령을 실행하면 대부분의 도구는 빌드와 번들링을 동시에 수행하니까 동일한 의미로도 사용되기도 한다. 개발자는 최종적으로 번들링된 웹 애플리케이션을 만들어내고, 사용자가 웹 애플리케이션을 이용할 때는 Bundling한 파일을 받아와 이 브라우저가 이 Bundle을 실행한다. 번들링을 하는 이유는? 대표적인 이유는 우리가 만든 .ts, .vue., .jsx 파일들을 .js 파..

📚 npm과 yarn 👉 npm과 yarn은 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자다. 👉 전 세계의 개발자들이 자바스크립트로 만든 다양한 패키지를 npm 온라인 데이터베이스에 올리면 npm, yarn과 같은 패키지 관리자를 통해 설치 및 삭제가 가능하다. 👉 그리고 명령 줄 인터페이스(command-line interface, CLI)를 통해 패키지 설치 및 삭제 뿐만 아니라 패키지 버전 관리, 의존성 관리도 편리하게 할 수 있다. 1️⃣ npm 👉 npm은 노드 패키지 매니저(Node Package Manager)의 줄임말로 노드를 설치할 때 자동으로 설치되는 기본 패키지 관리자이다. 크게 두 가지 역할을 수행한다. 1. 첫 번째 역할은 온라인 플랫폼이다. 사람들이 노드 패..

🤔 XML이란? 👉 EXtensible Markup Language의 약자이며, 1998년에 W3c(월드 와이드 웹 컨소시엄 - 팀 버너스리가 1994년에 만든 곳이다.) 표준 권고안에 포함되어 있다. 👉 XML은 HTML과 매우 비슷한 문자 기반의 마크업 언어이다. 이 언어는 사람과 기계가 동시에 읽기 편한 구조로 되어 있다. 👉 XML은 HTML처럼 데이터를 보여주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로만 만들어졌다. 👉 또한, XML 태그는 HTML 태그처럼 미리 정의되어 있지 않고, 사용자가 직접 정의할 수 있다. 1️⃣ XML의 특징 👉 XML은 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어이다. 👉 XML은 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있다..