데이터 타입 | null과 undefined : 코어 자바스크립트 씹뜯맛즐 하기

지난 데이터 타입 포스팅에서 모든 것을 끝내려고 했지만 분량 조절 실패로두 번에 나눠서 데이터 타입을 맛보고 있다.과식하지 않고 적당히 나눠서 배부르게 맛보자.  null과 undefined지난 포스팅에서 null과 undefined도 기본형 데이터에 포함되는 것을 봤다.그렇다면 변하지 않는 값을 가지고 있다는 건 알겠는데,null과 undefined는 자바스크립트에서 '없다'라는 의미를 갖는다.둘 다 없는데 뭐가 차이가 있다는 걸까? 그걸 한번 알아보자. 아기들은 숨바꼭질 할 때 자신의 눈만 가리면 숨었다고 생각한다.부모의 입장에서 바라보면 분명 있는데 없다고 여긴다.부모가 우리 개발자라고 하면 아기가 변수라고 하면없다고 여기는 건 null, 정말 없는 건 undefined라고 할 수 있겠다. 조금 더..

• format_list_bulleted Stack/JS
• · 2024. 11. 21.
• textsms

데이터 타입 | 기본형과 참조형 : 코어 자바스크립트 씹뜯맛즐 하기

코어 자바스크립트를 씹뜯맛즐해 보는 시간이다.이미 널리고 널린 게 해당 책에 대한 정리 글이지만, 그걸 읽는다고 내 것이 되는 게 아니니나는 나만의 언어로, 방식으로 이해하며 정리하는 방법을 택했다.  데이터 타입의 종류기본형 : 숫자 (number), 문자 (string), 불리언 (boolean), null, undefined 등참조형 : 객체 (+ Map, WeakMap, Set, WeakSet), 배열, 함수, 날짜, 정규 표현식 등 자바스크립트의 데이터 타입은 위와 같이 분류할 수 있다.여기서 기본형과 참조형은 할당이나 연산 시 복제되는지, 아니면 참조되는지를 가지고 나누게 된다.엄밀하게 따지면 기본형과 참조형 모두 복제를 하지만, 복제하는 대상이 다르다. 위의 기준이 무슨 말인지 명확하게 이해..

• format_list_bulleted Stack/JS
• · 2024. 11. 20.
• textsms

코어 자바스크립트 : 모던 자바스크립트 압축판

자바스크립트를 학습하는 사람들이라면 학습 초반 가장 많이 들어보고 접해봤을 책코어 자바스크립트에 대한 이야기를 해보려고 한다. 결론부터 말하면 코어 자바스크립트를 읽는다고자바스크립트의 모든 걸 이해해서 기깔나게 코드를 짤 수 있는 건 아니다. 그러나 저자의 말에 따르면자바스크립트의 핵심 개념들을 정확하게 이해하는 것이초급 개발자에서 중급 개발자로 갈 수 있는 발판이 될 수 있다고 한다. 그래서 이 책을 읽어야 하는 사람은이제 막 개발을 배우는 병아리 단계의 개발자 지망생보다는어느정도 학습을 통해 개발을 경험했고, 이제 취업을 위한 준비를 하는 취준생혹은 개발자로 개발은 하고 있지만, 이론에 대한 바탕이 부족한 사람이 읽었을 때 가장 효과적일 것 같다.  목차1. 데이터 타입2. 실행 컨텍스트3. this..

• format_list_bulleted Personal/Book
• · 2024. 11. 18.
• textsms

브라우저의 동작 방법 : 주소창에 구글 주소를 입력 했을 때

크롬을 키고 주소창에 구글의 주소를 치면 구글이 나온다.이 당연한 이치에 대해서 궁금해 하는 사람이 얼마나 될까?하지만 당신이 개발자라면 왜? 라는 생각이 안들어도 왜? 라고 물어봐야 한다 이번에는 개발자 면접 질문 중에서도 사골 of 사골이라고 할 수 있는 이 질문에 대해서 접근해 보자.  간단하지만 복잡한 브라우저실제 사용할 때는 간단하게 주소창에 특정 웹 사이트 주소를 입력하면 해당 사이트로 이동하는데입력 후 엔터를 친 순간부터 해당 사이트가 화면에 뜰때까지 브라우저 뒤에서는 복잡한 구조로 동작이 이루어진다. 우리는 개발자기에 그 뒤를 알아보려고 한다.해당 과정은 다음과 같이 이루어진다.1. 브라우저에 구글을 입력하면 먼저 DNS서버에게 이 도메인의 IP 주소를 요청한다.2. DNS가 일련의 과정을..

• format_list_bulleted CS/Web
• · 2024. 11. 16.
• textsms

This : 이거라며.. 왜 다르냐고

이번에 다뤄볼 주제는 악명 높은 This다.실제로도 자바스크립트 관련 면접 질문에서 This와 관련해 문제 형식으로 종종 나왔던 것을 볼 수 있는데,이게 대충 생각하면 딱 틀리기 좋은 주제라서 한번 정리해 보고자 한다.  초면은 아닌 거 같고, 누구시더라?This는 사실 내 글에서 처음 등장한 개념은 아니다.실행 컨텍스트에서 실행 컨텍스트의 구조를 설명할 때 잠깐 등장했다. (실행 컨텍스트 읽고 오기) 위의 사진은 내 글에서 발췌한 내용인데, 여기 실행컨텍스트의 구조 중3번째에 있는 ThisBinding이 this 식별자가 바라보고 있는 대상 객체를 의미한다고 적혀있다.여기서 바인딩은 식별자와 값을 연결하는 과정을 뜻하는데,ThisBinding을 좀 더 쉽게 설명하면,this라는 친구한테 '너가 가리켜야..

• format_list_bulleted Stack/JS
• · 2024. 11. 15.
• textsms

스택과 큐 : 상하차와 컨베이어 벨트

개발자가 되기 전 다양한 알바와 다양한 일들을 해봤는데 그 중 우체국 배송 보조 알바를 했던 경험이 떠오른다. 아침에는 도착한 우편물을 지역에 맞게 분류하는 작업을 하고 해당 물품을 트럭에 싣는 작업을 하고,오후에는 계약된 업체를 방문해서 우편물을 받아오고, 받아온 우편물을 다시 우체국에 두는 작업을 했다.이 때부터 난 온몸으로 스택과 큐에 대해서 경험하고 있었던게 아닐까? 이번에는 자료구조 중 선형 자료구조의 스택과 큐에 대해서 알아보자.   스택 (Stack)스택은 마치 상하차처럼 바닥부터 데이터를 쌓아가고, 데이터를 꺼낼 때는 위에서부터 꺼내는 후입선출 (LIFO, Last In, First Out) 방식으로 데이터를 처리하는 자료구조다. 스택의 데이터 삽입과 삭제 모두 한쪽 끝에서 이루어지는 방식..

• format_list_bulleted CS/Data Structures
• · 2024. 11. 13.
• textsms

자료구조 : 데이터를 관리하는 여러가지 방법

파스칼을 개발한 스위스의 컴퓨터 과학자 니클라우스 비르트는 이런 말을 남겼다.알고리즘 + 자료구조 = 프로그램그만큼 프로그램에서 중요한 두 가지 중 하나가 자료구조라는 점인데,사실 개발을 배우는 단계에서는 자료구조에 대해서 전혀 신경을 쓰지 않았다. 더군다나 프론트엔드 개발자는 그냥 서버에서 데이터 받아와서 잘 뿌려주면 되는거 아닌가?같은 이따위 생각을 하고 있었다가 최근 프론트엔드 개발자 채용에도 코테가 접목 되는 부분도 그렇고,최적화나 복잡해지는 기능에 대해서 접근 할 때, 자료구조에 대한 이해가 있어야 해당 상황에가장 적합한 자료구조를 적용할 수 있기에 이젠 꼭 알아야 하는 개념이 되겠다.  자료구조(Data Structures)란?자료구조는 컴퓨터가 데이터를 효율적으로 관리할 수 있도록 도와주는 ..

• format_list_bulleted CS/Data Structures
• · 2024. 11. 12.
• textsms

클로저 (Closure) : 자바스크립트의 네크로멘서

자바스크립트의 함수는 호출 이후 내부 로직을 다 실행하고 나면 다시 호출되기 전까지 작동하지 않는다.실행 컨텍스트 편에서도 봤듯, 콜 스택에 쌓이고 실행되면 제거되기에 다시 호출한다고 해도함수 내부의 로직을 동일하게 실행하고 다시 사라지게 된다. function sum (addNum) { let result = 0; result = result + addNum; console.log(result);}sum(5) // 5sum(7) // 7sum(10) // 10예를 들어 위와 같은 코드에서, sum이라는 함수를 3번 호출하면 그대로 5,7,10이 반환된다.왜냐하면 sum 함수 내부에..

• format_list_bulleted Stack/JS
• · 2024. 11. 11.
• textsms

호이스팅 (Hoisting) : 변수, 함수 끌어~ 올려!

자바스크립트 단골 면접 질문에 도달했다.변수 선언 방식과 스코프에 대한건 이 개념을 정리하기 위한 빌드업이었다..!빌드업의 결과물인 호이스팅에 대해서 이번에 제대로 정리해 보자.  호이스팅이란?[ 호이스팅 ]인터프리터가 코드를 실행하기 전 함수, 변수, 클래스 또는 임포트의 선언문을해당 범위의 맨 위로 이동시키는 과정을 말한다.- MDN - 위는 MDN에서 작성한 호이스팅의 정의다.여기서 말하는 인터프리터는 프로그래밍 언어를 번역하는 방식 중 하나인데,대표적으로는 인터프리터와 컴파일러가 있다. 먼저 컴파일러 방식은 전체 문서를 읽고 해당 문서를 한 번에 번역하는 방식이라고 할 수 있겠고,인터프리터 방식은 전체 문서를 한 줄씩 읽어 내려가면서 번역을 하는 방식이라 할 수 있겠다.이 두 가지 방식 중 Jav..

• format_list_bulleted Stack/JS
• · 2024. 11. 9.
• textsms

실행 컨텍스트 : 자 이게 너가 사용할 수 있는 친구들이야

const a = 1;function sum () { return a + 3;}console.log(sum());여기 간단한 덧셈을 통해 결과를 출력하는 코드가 있다고 하자.이 코드의 출력값은 얼마일까? 인간의 관점으로 본다면 sum이라는 함수에 a라는 변수는 윗줄에서 선언되었고,1이라는 값이 할당되었기에 3을 더해 4라는 결과값을 출력한다고 바로 생각할 수 있다. 그러나 자바스크립트 엔진은 코드를 인간처럼 직관적으로 코드를 해석할 수 없기에실행에 필요한 다양한 정보가 있어야 하는데 그 정보들을 가진 객체를 실행 컨텍스트라고 한다.  실행 컨텍스트실행할 코드에 제공할 환경 정보들을 모아놓은 객체로,자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 실행 컨텍스트에 대해 코어 자바스..

• format_list_bulleted Stack/JS
• · 2024. 11. 8.
• textsms