책 읽다가 코딩하다 죽을래

자바스크립트 심볼(Symbol)은 ES6에서 도입된 7번째 데이터 타입으로 다음과 같은 특징이 있다. 1. 원시값(primitive)이다. 2. 한 번 초기화되면 변경이 불가능하다. 3. 다른 값과도 중복되지 않는 유일무이한 값이다. 심볼은 한 번 선언되면 프로그램이 종료될 때까지 다른 값과 중복되지 않는다는 특징이 있기 때문에 ES6에 도입되었다. 심볼은 다른 데이터 타입에 비해 많이 사용되지는 않지만 iterable, generator 등의 내부시스템의 기본적으로 들어가 있는 개념이므로 심볼을 학습할 필요성이 있다. 📕 심볼 생성 심볼은 Symbol 함수를 호출하여 생성한다. const symbol = Symbol(); 심볼은 다른 원시형 데이터 타입과는 달리 리터럴 표기법이 아닌 Symbol 함수를..

우리는 흔히 this는 자기 참조, super는 부모 참조라는 간단한 공식으로 그 동작 원리를 쉽게 추론하고 있다. 본 글을 통해 this와 super의 동작 원리에 대해 배워보자 📕 this의 동작 원리 다음 코드 예시를 보자 class Person { age: number; name: string; constructor(age: number, name: string) { this.age = age; this.name = name; } getGoal(): string { return "끝까지 생존하며 자신과 똑같은 형질의 개체를 후손으로 남기는 것"; } introduce(): string { return `안녕하세요. 저는 ${this.name}입니다. ${ this.age }살이며 ${this.ge..

React에서 Tailwind CSS 클래스 오버라이딩 문제 해결하기 Tailwind CSS는 빠르게 사용자 인터페이스를 구축할 수 있는 인기 있는 유틸리티 기반 CSS 프레임워크입니다. 그러나 React와 함께 Tailwind CSS를 사용할 때 클래스 오버라이딩과 관련된 일반적인 문제가 발생할 수 있습니다. 이 글에서는 이 문제를 탐구하고 해결하는 방법을 제시합니다. ❗️문제점 Tailwind CSS를 사용하여 사전에 스타일이 지정된 파란색 버튼을 렌더링하는 간단한 React 컴포넌트가 있다고 가정해 보겠습니다. 이 컴포넌트는 사용자가 버튼을 더 많이 커스터마이즈 하기 위해 추가적인 클래스를 추가할 수 있도록 합니다. 다음은 해당 컴포넌트의 예입니다. function Button({ label, cl..

🤔 메시지? 메서드? 객체지향 공부를 하다 보면 자주 나오는 단어가 있습니다. 그것은 '메시지'와 '메서드' 인데, 이 단어들이 같은 맥락에서 설명되어있다 보니 두 개의 단어가 비슷한 뜻일 거라고 생각하면서 넘어가거나, 알아내려고 공부해도 계속 헷갈리는 분들이 많을 것입니다. 결론부터 말하자면 '메시지'와 '메서드' 는 같은 개념이 아닙니다. 더욱이 '메시지'와 '메서드' 를 구분할 수 있어야지 객체지향의 꽃인 다형성을 이해할 수 있을 것입니다. 이번 시간에는 이 두 개의 단어가 정확히 무엇이며 간단한 예시를 들어 설명할 테니 잘 따라와 주길 바랍니다. 일단 이 두개의 사전적 정의부터 봅시다. 메시지는 객체간의 협력관계에서 상호작용할 수 있는 모든 방법을 말합니다. 메서드는 수신된 메시지를 처리하기 위한..

어그로 미안하다.. 그치만... 이렇게라도 하지 않으면... 아무도 안온다고.. 😭 이 글을 읽기 전에 스코프와 실행 컨텍스트의 개념을 알고 있으셔야 합니다. 2021.11.03 - [코딩/자바스크립트] - 자바스크립트 실행 환경(Execution Context)이란 무엇인가 자바스크립트 실행 환경(Execution Context)이란 무엇인가 🤔 실행 환경을 배워야 하는 이유 코드는 정적이다. 여러분들이 코딩을 끝마치고 컴파일을 하여도 변함이 없고 실제 런타임 때나 서버가 돌아가는 와중에도 코드는 자기가 스스로 변하지 않는 ablue-1.tistory.com 🤔 클로저의 의미 클로저(Closure).. 이름만으로는 무엇을 하는지 모르는 친구다. 유명한 JS서적에서도 각각 이 친구를 다르게 정의해 놓았다..

🤔 우린 한 번이라도 고민해본 적이 있지 않은가? 우리가 흔히 아는 배열은 다음과 같다 만약 c언어의 배열인 int sample[5] = [11,22,33,44,55]; 라는 배열이 있다고 생각해보자 그럼 첫번째부터 마지막까지 순서대로 나열되어 메모리에 할당된다는 것은 다 알고 있을 것이다. 여기서 중요한건 메모리에 들어가는 데이터 타입이 한 가지(정수를 나타내는 int는 4byte)로 통일되어있으니 모든 배열의 요소는 4바이트씩 할당되어 빈틈없이 연속적으로 나열된다. 즉 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열되는 자료구조이다. 우리는 이러한 배열을 밀집 배열(dense array)라 부른다. 하지만 자바스크립트의 배열은 다르다. const array = [ 's..

대부분 사람은 == 은 쓰지 말고 === 을 지향하라는 말을 많이 들어봤을 것입니다. 물론 저도 그렇게 생각합니다. 하지만 왜 그런지 이유를 아는 것도 중요하죠 그럼 이제 == 과 === 의 비교 원리에 대해서 알아봅시다. 📖 == (동등 비교 연산자) 동등 비교 연산자는 좌항과 우항의 값이 같으면 true를 반환합니다. 여기서 둘의 타입이 다르면 자바스크립트 엔진이 하나의 타입으로 통일해서 비교하려는 성질을 갖습니다. 예를 들어보겠습니다. // 타입이 같으면 그대로 비교한다. 5 == 5; // true // 타입이 다르면 암묵적 타입 변환을 통해 타입을 일치시켜서 동등하면 true를 반환합니다. // '5'를 number로 바꾸면 5가 되니 true입니다. 5 == '5' // true // 빈 문자..