지식을 남기고 쌓는 곳

해당 글은 ESLint v8 버전으로 작성한 것입니다.v9부터는 완전히 달라진 문법으로 변하였으니 v9버전으로 설정하시는 분들은 ESLint 공식문서를 참조하시기 바랍니다.📕 ESLint란?ESLint는 EcmaScript(javascript)와 Lint를 합친 단어이다. 여기서 Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다.린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다. 이 용어는 C 언어 소스 코드를 검사하는 유닉스 유틸리티에서 기원한다.- 린트(소프트웨어) 위키백과 즉 ESLint는 자바스크립트 문법에서 에러가 발생하면 표시해주는 도구이다.  📗 ESLint..

이 글은 자바스크립트 Deep Dive 이터러블 편을 읽고 개인적으로 정리한 글입니다.이터러블이란 이터러블 프로토콜을 준수한 객체를 말한다.말 그대로 프로토콜이니 원활한 통신을 위해 지키기로 약속한 규약이다. HTTP 프로토콜처럼 말이다.그럼 이터러블은 무엇이고, 이걸 왜 지켜야하는지 알아보도록 하자.📕 이터러블 프로토콜과 이터레이터 프로토콜이터러블은 두 가지의 프로토콜을 준수하고 있는데 그것은 바로이터러블 프로토콜과 이터레이터 프로토콜이다. 이터러블 프로토콜은 Well-Known Symbol인 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환하는 것을..

자바스크립트 심볼(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..

🤔 우린 한 번이라도 고민해본 적이 있지 않은가? 우리가 흔히 아는 배열은 다음과 같다 만약 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 // 빈 문자..

📝 문제 피보나치 수는 F(0) = 0, F(1) = 1일 때, 1 이상의 n에 대하여 F(n) = F(n-1) + F(n-2) 가 적용되는 수입니다. 예를 들어 F(2) = F(0) + F(1) = 0 + 1 = 1 F(3) = F(1) + F(2) = 1 + 1 = 2 F(4) = F(2) + F(3) = 1 + 2 = 3 F(5) = F(3) + F(4) = 2 + 3 = 5 와 같이 이어집니다. 2 이상의 n이 입력되었을 때, n번째 피보나치 수를 1234567로 나눈 나머지를 리턴하는 함수, solution을 완성해 주세요. 📑 제한 사항 n은 2 이상 100,000 이하인 자연수입니다. 📋 입출력 예 n return 3 2 5 5 📝 코드 function solution(n) { let mem..

🤔 실행 환경을 배워야 하는 이유 코드는 정적이다. 여러분들이 코딩을 끝마치고 컴파일을 하여도 변함이 없고 실제 런타임 때나 서버가 돌아가는 와중에도 코드는 자기가 스스로 변하지 않는다. 하지만 이런 변함없는 코드일지라도 실제 내부적으로는 그 코드 속 변수, 함수들은 항상 똑같이 행동하지 않고, 똑같은 것을 참조하지 않는다. 그것은 대부분 자바스크립트 엔진 작동원리의 핵심 개념인 실행 환경을 알면은 굳이 컴파일을 하지 않아도 예상할 수 있게 된다. 또한 개발자는 당연히 예상이 가능해야지 정상적인 개발을 할 수 있을 것이다. 그러므로 이런 동적인 움직임을 갖고 있는 자바스크립트 코딩을 하려면 실행 환경을 배워야 한다. 또한 이 개념은 hosting, this와도 밀접한 연결이 있다. 📖 실행 환경의 사전적..

🧾 이 강의는 시리즈 별로 되어있습니다. 이 강의를 읽기 전에 확인하세요! 자바스크립트 prototype에 대해 지금 같이 알아볼까?[클릭] prototype으로 배워보는 메소드 상속 및 동작 원리[클릭] prototype chaining에 대해 알아보기 위해선 구글링 해서 개념을 이해하기보다는 실제로 사용해서 알아보는 것이 나을 것이다. 📚 prototype chaining이란? ctrl + shift + j 눌러 크롬 개발자 도구 콘솔 창을 열어 다음과 같이 입력해보자 배열 리터럴 [1,2,3]의 prototype을 알아보기 위한 코드이다. 다음과 같은 출력이 나오는데 출력 코드를 한 번 더 클릭하여 펼쳐보자 클릭하면 [1,2,3]에 대한 정보가 나와있는데 [1,2,3]에 생성자가 array라는 것이..