Dev Diary 💻

Intro 안녕하세요. select element 에서 dropdown icon 바꾸는 방법에 대해 알아보도록 하겠습니다 :) How to solve problem Option 1 Option 2 Option 3 /* Hide the default dropdown arrow */ .custom-select { appearance: none; /* For Firefox */ -webkit-appearance: none; /* For Chrome, Safari, Opera */ -moz-appearance: none; /* For Firefox */ background-image: url('custom-dropdown-icon.png'); /* Custom arrow icon */ background-pos..

이 글은 원글을 참고하여 정리한 내용입니다. Definition TypeScript Generics는 재사용 가능한 구성요소를 생성하는 방법을 제공하는 도구입니다. generics는 프로그램이 장기적으로 확장가능할 뿐만 아니라 유연할 수 있도록 보장해줍니다. Example # Props interface Props { renderItem: (item: T) => React.ReactNode; keyExtractor: (item: T) => string; data: T[]; } data: 제네릭 타입 T를 받을 배열 요소 renderItem: 타입 T의 react 요소를 반환하는 함수 keyExtractor: 키를 추출하는 함수 # Component 정의 const GenericList = ({ data,..

Intro 안녕하세요. 이번 새로 프로젝트를 시작하면서 yarn 에서 yarn berry를 도입하기로 결정했습니다. 이번시간에는 Yarn Berry에 대해 알아보도록 하겠습니다. What is yarn berry? Yarn Berry는 JS 패키지 매니저인 Yarn의 다음 버전입니다. yarn version 2부터 yarn berry라고 부릅니다. What is the difference between yarn and yarn berry? 가장 달라진 점은 Plug'n'Play (PnP) 시스템이라고 할 수 있습니다. PnP 시스템은 node_modules 폴더를 사용하지 않고, 패키지의 종속성을 프로젝트의 단일 디렉토리 트리에 직접 설치합니다. 일반적으로 npm 이나 yarn version 1을 사용할..

이 글은 udemy의 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 강좌를 바탕으로 정리한 내용입니다 1. 환영 pass 2. TypeScript란 무엇이며 왜 사용해야 하는가? 타입스크립트는 자바스크립트의 superset 입니다. 새로 만들어진 언어가 아닌 자바스크립트 언어를 사용해 새로운 기능과 장점을 추가하는 언어입니다. 코드를 실행하여 타입스크립트 코드를 JS로 컴파일하는 강력한 컴파일러입니다. 타입을 추가하여 브라우저 런타임에서 에러가 발생하기 전에 코드의 에러를 미리 확인할 수 있습니다. 개발 중 런타임 에러로 발생하는 에러를 초기에 수정할 수 있습니다. 단점) 브라우저와 같은 자바스크립트 환경에서 실행할 수 없습니다. node.js도 마찬가지입니다. 3..

16.1 내부 슬롯과 내부 메서드 내부 슬롯 (internal slot)과 내부 메서드 (internal method)는 JS 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티 pseudo property와 의사 메서드 pseudo method 입니다. 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 갖습니다. 내부 슬롯은 JS 엔진의 내부 로직이므로 원칙적으로 직접 접근할 수 없지만 __proto__를 통해 간접 접근이 가능합니다. 16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 Js 엔진은 프로퍼티를 생성할 때 프로퍼티의 어트리뷰트를 기본값으로 자동 정의합니다. 프로퍼티의 상태란 값 (value), 값의 갱신 가능 여부 (writable), 열거..

15.1 var 키워드로 선언한 변수의 문제점 15.1.1 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능합니다. 15.1.2 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정합니다. 함수 레벨 스코프는 전역 변수를 남발할 가능성을 높이고 전역 변수가 중복 선언되는 경우가 발생합니다. 15.1.3 변수 호이스팅 var 키워드 변수 선언 시 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작합니다. // 이 시점에는 변수 호이스팅에 의해 이미 foo 변수가 선언됨 (1.선언 단계) // 변수 foo는 undefined로 처기화 됨 (2. 초기화 단계) console.log(foo); // undefined // 변..

14.1 변수의 생명주기 14.1.1 지역 변수의 생명주기 지역 변수의 생명 주기는 함수의 생명 주기와 일치합니다. function foo() { var x = 'local' // 변수 x 생성, 변수 x에 값 할당 console.loog(x) return x // 변수 소멸 } foo(); console.log(x); // x is not defined 호이스팅은 스코프를 단위로 동작합니다. 호이스팅은 변수 선언이 스코프이 선두로 끌어 올려진 것처럼 동작하는 JS 고유의 특징을 말합니다. 14.1.2 전역 변수의 생명 주기 함수와 달리 전역 코드는 명시적인 호출 없이 실행됩니다. var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 됩니다. 이는 전역 변수의 생명 주기가 전역 객체의 생명 주기와 ..

Intro 안녕하세요. 모바일 네비게이션 메뉴에서 스크롤 이동을 표현해야 했습니다. 여러 방법이 있겠지만 저는 특정 요소 위치로 스크롤 이동할 수 있는 scrollIntoView 함수를 사용했습니다. Syntax scrollIntoView() scrollIntoView(alignToTop) scrollIntoView(scrollIntoViewOptions) alignToTop - true : aligned to the top 상단 기준 스크롤 이동 | scrollIntoViewOptions: {block: "start", inline: "nearest"} - false : aligned to the bottom 하단 기준 스크롤 이동 | scrollIntoViewOptions: {block: "end",..

13.1 스코프란?모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유 범위가 결정되비다. 이를 스코프라고 합니다. 즉 스코프는 식별자가 유효한 범위를 말합니다. var x = 'global' function foo() { var x = 'local' console.log(x) //local } foo() console.log(x) //global 13.2 스코프의 종류코드는 전역과 지역으로 구분할 수 있습니다 13.2.1 전역과 지역 스코프전역이란 코드의 가장 바깥 영역을 말합니다. 전역은 전역 스코프를 만듭니다. 전역 변수는 어디서든 참조할 수 있습니다. 13.2.2 지역과 지역 스코프지역이란 함수 몸체 내부를 말합니다. 지..

12.1 함수란? 프로그래밍 언어의 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것입니다. 함수 내부로 입력을 전달받는 변수를 (parameter), 입력을 (argument), 출력을 반환값return value)라고 합니다. 12.2 함수를 사용하는 이유 코드의 재사용 측면, 유지보수와 편의성을 높이고 코드의 신뢰성을 높이는 효과가 있습니다. 12.3 함수 리터럴 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호로 사용해 값을 생성하는 표기 방식을 말합니다. 즉 리터럴은 값을 생성하기 위한 표기법입니다. 따라서 함수 리터럴도 평가되어 값을 생성하며, 이 값은 객체입니다. 즉 함수는 객체입니다. 12.4 함수 정의 1. 함수 선언문 fu..