Bin's Blog

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

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 📝문제 요약 1️⃣ 과제는 시작하기로 한 시작이 되면 시작한다. 2️⃣ 새로운 과제를 시작할 시각이 되었을 때, 기존에 진행 중이던 과제가 있다면 진행 중이던 과제를 멈추고 새로운 과제를 시작한다. 3️⃣ 진행중이던 과제를 끝냈을 때, 잠시 멈춘 과제가 있다면, 멈춰둔 과제를 이어서 진행한다. 4️⃣ 멈춰둔 과제가 여러 개일 경우, 가장 최근에 멈춘 과제부터 시작한다. 과제를 끝낸 순서대로 이름을 배열에 담아 return해라 📚중요 포인트 1️⃣ 처음에 문제를 보자마자 우선순위 큐로 해결해야 하는 문제인 줄 ..

들어가며 이 글이 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'를 저장하고 그 주소를 변수영역에 저장하는 식으로 이..

글의 시작 오늘 다루는 주제는 웹 브라우저가 어떻게 동작하는지에 대한 내용이다. 자바스크립트의 동작 원리에 대해서 공부하다가 궁금해진 내용이다. 사실 가장 기초가 되면서도 중요한 내용이다. 웹 개발자가 웹 브라우저가 어떻게 동작하는지에 대한 이해도가 있어야 한다고 생각한다. 스스로 이해도를 높이기 위해서 그림을 많이 사용할 예정이다. 🤔 우리가 작성한 코드가 어떻게 브라우저에서 실행되는 걸까? 오늘은 우리가 작성한 코드가 어떻게 웹 브라우저에서 동작하는지 Stack, Queue를 이용해서 살펴보고자 한다. 먼저 다음 코드를 살펴 보자. console.log(1+1) setTimeout(function(){ console.log(2+2)}, 1000) console.log(3+3) 결과값이 어떤 순서로 출..

🤔 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 파..

🤔 프로토타입(Prototype)이란? 👉 프로토타입은 쉽게 말해 유전자이다. 👉 예시를 보자 // 부모 클래스 function 기계() { this.q = "strike", this.w = "snowball", } // 부모 클래스에 name 속성 추가 기계.prototype.name = "kim" // 자식 인스턴스 let nunu = new 기계() 👉 nunu라는 instance에는 name이라는 속성이 없다. 오직 부모 클래스에만 존재한다. 근데 nunu.name이라고 접근하면 "kim"이라고 뜬다. 🤔 부모가 가진 속성을 자식에서 사용할 수 있는 이유는 뭘까? 👉 object에서 자료 뽑을 때 일어나는 일이다. 👉 자식이 해당 속성을 가지고 있지 않으면 부모유전자를 살펴본다. 거기에 해당 속성..

🤔 콜백 지옥이란? 👉 비동기 작업을 처리할 때 콜백 함수를 연속적으로 사용하면서 발생하는 문제를 가리킨다 👉 예를 들어, 웹사이트에서 데이터를 서버로부터 불러오는 작업이 있을 때, 데이터가 성공적으로 불러와진 후에 실행할 로직을 콜백 함수로 정의하고, 이를 데이터를 불러오는 함수에 인자로 전달한다. 그런데, 이런 콜백 함수가 중첩되어 사용되면, 즉 콜백 함수 안에 또 다른 콜백 함수가 있고, 그 안에 또 다른 콜백 함수가 있는 경우에 코드가 복잡해지고 가독성이 떨어져 문제가 될 수 있다. 이를 콜백 지옥이라고 부른다. 콜백 함수란?(지난 포스팅 참고) 콜백 함수 🧐 콜백 함수란? 👉 콜백함수는 다른 코드의 인자로 넘겨주는 함수이다. 콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에..