Dev Diary 💻

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 {..

Intro 안녕하세요. 리액트에서 DatePicker로 Date 객체를 다루던 도중 해당 오류가 발생했습니다. RangeError: Invalid time value 로컬 PC 크롬 환경에서 테스트 했을 때는 나지 않았던 오류였고, IOS 웹앱 테스트를 하던 도중 발견하게 되었습니다. 바로 구글링을 해봤습니다. 참고로 저는 ex) 2023.03.01 형태의 스트링 문자를 new Date로 변환했습니다. Why? 크롬은 dot(.)형식을 포함하는 문자열을 new Date로 바꿀 수 있지만, 사파리의 경우 date 변환 시 format에 dot(.)를 포함할 경우 에러를 발생시킨다고 합니다. How to solve the problem 해당 에러를 해결할 수 있는 방법은 여러 가지가 있는데요. 저는 아래의 ..

Intro 안녕하세요. 이번시간에는 스프링부트 + mongodb MongoRepository에서 limit 사용하는 방법에 대해 알아보겠습니다. How to solve the problem 아래 코드와 같이 limit() 메서드를 활용하여 원하는 count 만큼 조회할 수 있습니다. suspend fun getRecentData(createAt: Instant): List? { val query = Query() query.with( Sort.by(Sort.Direction.DESC, "createAt") ) query.limit(3) return metaHotMongoTemplate.find(query, SomeDTO::class.java, collectionName).collectList() .awa..

Intro 안녕하세요. 이번시간에는 JavaScript array에서 배열의 마지막 값을 가져오는 방법에 대해 알아보겠습니다. How to solve the problem 아래의 number 가 들어있는 배열이 있다고 가정해봅시다. const arr = [1, 2, 3, 4, 5]; 배열의 총 길이에서 -1을 뺀 인덱스를 활용할 경우 배열의 마지막 값을 가져올 수 있습니다. arr[arr.length - 1];

Intro 안녕하세요. 이번 시간에는 리액트에서 종종 나타나는 오류인 Module not found: Can't resolve 에 대해 알아보려고 합니다. Module not found: Can't resolve "라이브러리명" 운영 이슈가 접수되어 해당 이슈를 해결하기 위해 project 를 열었는데요, 갑자기 run 타임에 위와 같은 오류가 발생했습니다. 따로 추가 설치한 라이브러리도 없었는데 왜 오류가 나는지 모르겠더라고요. 터미널에 나타난 해당 라이브러리를 설치해도 똑같은 에러가 발생했습니다. 버전을 바꾸고, 해당 라이브러리를 다시 설치해도 계속 같은 오류가 발생했구요. 그래서 최후의 수단으로 다음의 방법을 사용했습니다! How to solve 1. 아래 파일 및 폴더를 삭제합니다. - yarn-..

Intro 안녕하세요. 이번 시간에는 li 태그에 있는 점을 없애는 방법에 대해 알아보겠습니다. How to do 적용된 스타일 중 list-style-type을 none으로 바꿔주면 됩니다. list-style-type: none; list-style-type list-style-type의 종류는 다음과 같으니 참고 부탁드립니다. /* Partial list of types */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; list-style-type: trad-chinese-informal; list-style-type: ..

Intro 안녕하세요. react 에서 xlsx 라이브러리를 사용하여 엑셀 다운로드 가능을 구현했는데요, 웹앱이여서 PC 브라우저에서만 테스트 해보고, 실제 ios / android 에서는 테스를 해보지 못했습니다. 당연히 PC 브라우저에서 엑셀 파일이 잘 다운받아지고, 잘 열러서 동작이 잘 될거라고 생각했어요. 하지만, 실제 모바일 기기에서 테스트 해보니 엑셀 파일 다운은 되는데, 열리지가 않더라고요. 원인이 무엇일까 고민하며 구글링을 해봤습니다. How to solve the problem 기존에 저는 아래와 같이 확장자를 xlsx을 사용였는데요, XLSX.writeFile (wb,"sample.xlsx "); 이렇게 확장자를 xls로 바꾸고, 모바일에서 테스트 해보니 잘 열리더라고요. XLSX.wr..

Intro 안녕하세요. 이번 시간에는 document.getElementsByTagName()를 사용해서 css styles을 업데이트/수정하는 방법에 대해 알아보겠습니다. How to solve the problem 문제 해결을 위한 2가지 예시 코드를 보여드리겠습니다. #1 모든 blockqutoe 태그를 가져와서 길이만큼 loop를 돌면서 스타일을 업데이트 해줍니다. 아래의 코드에선 margin을 0, borderLeft 스타일을 '5px solid rgb(9 9 9)'로 수정해줬습니다. function changeBlockquote() { let li_tags = document.getElementsByTagName('blockquote'); for (let i = 0; i < li_tags.le..

Intro 안녕하세요. 이번 시간에는 apexcharts 에서 yaxis y축을 0부터 시작하는 방법에 대해 알아보겠습니다. apexcharts를 이용해서 차트를 사용하여 작업하고 있었는데요, 차트의 y축값을 0으로 고정하고 싶은데, 계속 숫자 범위가 달라지면서 값이 변하더라고요. 그래서 구글링을 해봤습니다. How to solve the problem 아래와 같이 yaxis 속성에서 min을 0을 적용하면 y축 값이 0으로 고정되어 세팅됩니다. yaxis: { tickAmount: 3.5, min: 0, forceNiceScale: true, labels: { show: true, rotate: 0, style: { colors: '#828282', fontSize: '11rem', fontFamily..