꿈꾸는 개발자

리액트에서 글이 많은 컴포넌트를 작성할 때 때로는 bold 형식의 글이 필요할 때가 있다. 하지만 매번 그럴 때 마다 태그를 쓰기 귀찮아서, 뭔가 새로운 방법이 없을까 여러 코드를 탐험하던 중 흥미로운 코드를 찾았다. import React from "react"; export function TranslateBold({ children, className, as = "p" }) { const pattern = /(\*\*.*?\*\*)/; const text = children; const parts = text.split(pattern).filter((x) => x.length > 0); const elements = parts.map((part, index) => { if (part.match(pa..

목적 옵셔널 체이닝을 JS DeepDive를 접하면서 처음으로 알게 됐지만, 그 이후 크게 사용하는 경우가 개인적으로 없어서 잊고 지내고 있다가.....타입스크립트로 개발을 본격적으로 시작하면서 옵셔널 체이닝의 강력함을 깨닫고 잊었던 기억을 다시 되살리고자 옵셔널 체이닝에 대해 정리하고자 한다. 옵셔널 체이닝의 프로퍼티가 없는 중첩 객체를 접근할 때 보다 안전하게 접근을 할 수 있다. 예시 let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 보통 위와 같은 경우에선 타입 에러가 발생하게 된다. 이전에는 && 연산자를 주로 사용해서 위와 같은 상황을 ..

정의/용법 nullish 병합 연산자는 JS에 있는 문법으로 타입을 중시하는 TS에서 많이 사용되는 문법 중 하나이다. a ?? b a가 null도 아니고 undefined도 아니면 a 그 외에는 b ??을 사용하지 않고 위와 동일한 코드를 작성하면 아래와 같다 x = (a !== null && a !== undefined) ? a : b; 추가 예시 let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛 위 코드에서 ?? 병합 연산자를 통해 간편하게 실제로 값이 들어있는..