본문 바로가기

Typescript8

OR 논리 연산자 (||)를 이용하여 심플한 코드 짜기 방법 1 // getAppleStr 함수는 parameter가 true라면 "apple" 문자열을 반환하는 함수라 가정 const appleOrBanana = getAppleStr(true) ? getAppleStr(true) : "banana"; - getAppleStr() 함수의 return 값이 true 라면, getAppleStr() 함수를 재호출하여 return 값을 appleOrBanana에 할당하고, false라면 "banana"를 할당합니다. - getAppleStr()와 같은 기본적인 함수를 호출하는 것이 아니라, 시간이 오래 걸리는 작업을 호출하였을 땐 비효율적인 코드가 될 수 있습니다. 방법 2 // getAppleStr 함수는 parameter가 true라면 "apple" 문자열을 .. 2022. 12. 10.
boolean 배열에서 truthy 값이 하나라도 있는지 확인하는 법 (using reduce) forEach, map, filter를 이용할 수도 있지만, reduce를 이용하여 구할 수도 있습니다. // true 값이 존재 const test1 = [ false, false, false, false, false, true, false, false, false ]; // true 값이 존재. {}는 truthy 값 const test2 = [ false, false, false, false, false, {}, false, false, false ]; // true 값이 존재. []는 truthy 값 const test3 = [ false, false, false, false, false, [], false, false, false ]; // ''는 falsy 값. true 값은 없음 const .. 2022. 11. 6.
Map 자료구조를 사용하는 방법 회사에서 Map 자료구조를 사용할 기회가 있어서 사용해보았습니다. 불필요한 연산을 피하는데 중요한 역할을 하는 것 같아, 잊어먹고 싶지 않아 정리하려고 합니다. (아래 예시는 회사에서 만든 코드가 아닙니다. 그저 예시일 뿐입니다.) 3개의 영어 이니셜을 이어서 하나의 영어이름으로 만드는 예시 코드입니다. const nameInitialMap : Map = new Map(); const nameInitialItems = [ {first : 'K', second : 'J', third : 'H'}, {first : 'J', second : 'S', third : 'K'}, {first : 'P', second : 'S', third : 'S'}, {first : 'L', second : 'J', third .. 2022. 11. 5.
느낌표 두 개(!!)의 의미는? (논리 연산자 NOT) 논리 연산자 NOT은 느낌표 기호 (!) 를 이용하여 표현할 수 있습니다. 논리 연산자 NOT의 사용방법은 간단합니다. 아래처럼 피연산자 앞에 !를 붙이기만 하면 됩니다. const a = 1; console.log(!a) // false NOT 연산자를 1개만 붙였을 경우엔, 피연산자를 boolean 타입으로 변환하고, 그것의 역을 반환하는 역할을 수행합니다. truthy 값을 false로, falsy 값을 true로 변환하는 역할입니다. 그렇다면, NOT 연산자를 2개 붙이는 것은 어떤 의미일까요? 다른 타입의 데이터를 boolean 타입으로 명시적 타입 변환 (사용자가 직접 데이터의 타입을 변환) 을 수행한다는 의미입니다. 다시 말해, truthy 값을 true로, falsy 값을 false로 변환.. 2022. 11. 1.
코드 컨벤션과 특정 라인에 대한 eslint 규칙 끄기 많은 사람들과 협업을 할 때, 가독성이 높고 유지보수에 수월한 코드를 만드는 것은 매우 중요합니다. 많은 사람들이 함께 힘을 모아 이러한 코드를 만들려면 어떻게 해야 할까요? 모든 사람들이 하나의 규칙을 세우고, 그 규칙에 맞춰 코드를 만든다면 가능하지 않을까요? 우린 그 규칙을 코드 컨벤션이라고 부릅니다. ESLint는 자바스크립트의 수많은 코드 컨벤션 중 가장 활용도와 인지도가 높습니다. ESLint는 코드를 작성할 때 추천되는 코딩 스타일과 규칙들을 제시합니다. 프로젝트에 ESLint를 적용하여 작업한다면 코드의 가독성을 높여 다른 사람들과의 협업에 도움을 줍니다. 저는 현재 회사에서 Typescript를 이용하여 작업을 하고 있습니다. 그런데 작업을 하다 보면 특정 라인에서는 eslint 규칙을 .. 2022. 10. 19.
[Error 해결] No overload matches this call. 회사에서 첫 업무를 받았고, 업무를 하는 도중 No overload matches this call. 이라는 오류를 만나게 되었습니다. 구글링을 해보니 상황에 따라 다양한 해결방법이 있는 것 같았습니다. 일반적으로, type에 오류가 있을 때 많이 발생하는 오류인 것 같았고, 추론되는 type과 같지 않은 type을 가지고 있는 데이터가 매개변수로 전달되거나 리턴값으로 리턴되고 있을 때 많이 발생하는 상황인 것 같습니다. 저는 직접 제작한 함수에서 이 오류를 맞닥뜨렸는데요, 함수의 리턴값의 Type에 문제가 있는 경우였습니다. 혹시나 같은 상황에 처한 분이 계신다면 도움이 되길 바라는 마음에 간단히 정리해보겠습니다. 저의 상황은, 위와 같았습니다. 매개변수는 props와 ref라는 이름의 변수이고, 이 .. 2022. 10. 7.

티스토리툴바