Dev Diary 💻

Intro 안녕하세요. 타입스크립트 사용 중 다음의 에러가 발생했습니다. Error: Redundant double negation. no-extra-boolean-cast {text} Why 위 에러는 ESLint의 no-extra-boolean-cast 규칙으로, 불필요한 불리언 캐스트(불린 값을 강제로 캐스팅하는 것)를 방지하기 위한 규칙입니다. 현재 !!visible와 같은 형태로 불린 값을 강제로 캐스팅하고 하고 있습니다. 이미 불리언 값이 존재하기 때문에 이중 부정 연산자를 사용하여 불리언 값이 될 필요가 없습니다. How to solve 따라서 아래와 같이 이중 부정 연산자를 제거하면 ESLint 에러가 사라집니다. visible 자체를 사용해도 동일한 결과를 얻을 수 있습니다. {text}

Intro 안녕하세요. 타입스크립트 사용 중 다음의 에러가 발생했습니다. Could not find a declaration file for module Why? 이 오류 메시지는 연결된 declaration file 이 없는 타입스크립트 코드 안에 모듈이나 라이브러리를 사용할 때 발생하는 전형적인 오류입니다. declaration file(.d.ts)는 모듈이나 라이브러리의 types, functions 및 기타 속성을 설명하고 타입스크립트가 코드에서 이들을 사용하는 방법을 이해할 수 있도록 합니다. 따라서 설치된 특정 모듈/라이브러리에 대한 type 정의가 없어 타입스크립트에서 이해할 수 없으므로 다음의 오류가 발생한 것입니다. How to solve the problem 이 오류를 해결하기 위해서는..

Intro 안녕하세요. 코틀린 스트링을 코틀린 날짜로 변환하던 도중 아래와 같은 에러가 발생했습니다. import java.math.BigDecimal import java.math.RoundingMode import java.time.LocalDate import java.time.LocalDateTime import java.time.format.DateTimeFormatter import java.util.* fun main(args: Array) { val input = "2301" val formatter = DateTimeFormatter.ofPattern("yyMM", Locale.KOREA) val date = LocalDate.parse(input, formatter).minusYears..

Intro 안녕하세요. 이번 시간에는 CSS에서 긴단어 처리 시 줄바꿈 단어 기준을 정하는 방법에 대해 알아보겠습니다. How to solve the problem 아래의 html이 있다고 가정해봅시다. {item.desc} 처음에 제가 적용한 CSS는 다음과 같습니다. 단어 뒤에 elispsis 처리는 되었지만, 줄바꿈 처리가 제대로 안되고 있었습니다. > p { margin-bottom: 8rem; font-size: 10rem; line-height: 1.3; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; } 따라서 저는 word-break라는 속성을 이용하여 break-all 로 지정해줬습니..

Intro 안녕하세요. 타입스크립트를 사용하던 도중 아래와 같은 오류가 발생했습니다. Why? 해당 properties의 값을 읽을 수 없기 때문에 발생하는 오류입니다. How to solve the problem 해당 에러를 해결하는 방법은 여러가지인데요, 저는 그 중에서도 Optional Chaining 연산자 (물음표 연산자)를 사용하여 해당 오류를 해결할 수 있었습니다. 코드 사용 예제는 아래와 같습니다. return ( {item?.name} ) 이렇게 Optional Chaining 연산자 (물음표 연산자)를 사용할 경우 유효한 값이 없을 때는 undefined를 반환하고, 값이 있을 때는 Optional Chaining 연산자 이후 내용을 실행합니다. 따라서 해당 오류를 방지할 수 있습니다.

Intro 안녕하세요. 이번 시간에는 Moment.js 에서 오전/오후 표기의 위치를 조절하는 방법에 대해 알아보겠습니다. 제 경우 DB에서 받아온 datetime 시간을 23.03.15 오후 10:30 의 형태로 표현하고 싶었습니다. 하지만 momentjs 에는 다음의 예시가 없었습니다. 따라서 format을 커스텀하여 만들어 주기로 결정했습니다. How to solve the problem 저는 해당 표기법을 전역으로 적용해야 했기 때문에 공통 함수를 만들어줬습니다. datetime 시간과, format 의 2가지 파라미터를 받는 함수를 만들고, moment를 활용하여 format을 적용시켜줬습니다. 제 경우 DB의 datetime 타입이 string이고, YY.MM.DD hh:mm 형태였습니다. 이..

Intro 안녕하세요. 이번시간에는 코틀린에서 특정 문자열을 기준으로 자르는 방법에 대해 알아보겠습니다. How to solve the problem 코틀린에서 특정 문자열을 기준으로 자르는 방법은 다양한데요, 저는 split 함수를 사용해봤습니다. 아래와 같은 스트링이 있다고 가정해봅시다. 해당 스트링에서 split 함수를 사용하여 '-' 문자열 기준으로 잘라줍니다. fun main() { val string = "kotlin-typescript-javascript" val result = string.split('-'); println(result) println(result[0]) println(result[1]) println(result[2]) } 위 코드 실행 결과는 다음과 같습니다. [kot..

Intro 안녕하세요. 이번 시간에는 자바스크립트로 특정 문자열 수까지 표시하는 방법에 대해 알아보도록 하겠습니다. How to solve the problem 긴 문자열을 자르는 방법은 다양한데요, 보통 생략 (...)처리를 사용하여 줄바꿈을 방지하곤 합니다. 저의 케이스의 경우 특정 문자열 수까지만 표시하고 싶었기 때문에 다른 방법을 이용했습니다. 다음과 같이 긴 문자열이 있다고 합시다. let str = 'Some very long string'; 특정 문자열 수보다 클 경우 substring을 이용하여 해당 문자열 수까지 문자열을 잘라줍니다. if(str.length > 10) str = str.substring(0,10); https://stackoverflow.com/questions/3414..

Intro 안녕하세요. TypeScript 타입스크립트에서 ref를 사용하여 scrollTop 위치를 변경하던 도중 아래와 같은 에러가 발생하였습니다 someRef?.current?.scrollTop = 0; TS2779: The left-hand side of an assignment expression may not be an optional property access Why? 스펙 상에서 옵셔널 체이닝과 할당을 같이 사용할 수 없다고 합니다. The following is not supported, although it has some use cases; see Issue #18 for discussion: optional property assignment: a?.b = c How to solv..

Intro 안녕하세요. 이번 시간에는 코틀린에서 입력 받은 날짜로 경과일수를 구하는 방법에 대해 알아보겠습니다. How to solve the problem 아래 코드를 활용하면 입력 받은 날짜로 해당 경과 일수를 구할 수 있습니다. /** * You can edit, run, and share this code. * play.kotlinlang.org */ fun main() { // 윤년 판별 메소드 (1 윤년, 0 평년) fun isLeap(year: Int): Int { return if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) 1 else 0 } fun dayOfYear(year: Int, month: Int, day: Int): Int {..