Dev Diary 💻

Intro 안녕하세요. 이번 시간에는 리액트에서 array 데이터의 마지막 자식 요소에 border bottom line 추가하는 방법에 대해 알아보겠습니다. How to solve the problem 1. map 함수를 사용하여 데이터 배열의 길이를 구해줍니다. const arrayLength = array.length; 2. map 함수에서 현재 데이터 요소의 인덱스 값을 받아 옵니다. array.map((item, index) => { //... }) 3. 인덱스 값이 배열 길이보다 1 작은 경우에는 border bottom을 추가합니다 array.map((item, index) => { const isLastItem = index === arrayLength - 1; return ( {item}..

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 안녕하세요. 이번 시간에는 react 에서 useRef 사용시 undefined / null 오류 발생 원인과 해결 방법에 대해 알아보도록 하겠습니다. 우선 제가 useRef를 사용한 코드 예제는 아래와 같습니다. clientHeight를 조절하기 위해 useRef를 사용하여 div tag에 적용했습니다. const divRef = useRef(null); const [handlePosition, setHandlePosition] = useState('300vh'); useEffect(() => { setHandlePosition(`${(divRef.current.clientHeight * 3) / 300}px`); }, []); return ( {/* some content */} ); 하지..

Intro 안녕하세요. 이번 시간에는 리액트 apexcharts x축 값을 특정 값으로 시작하도록 설정하는 방법에 대해 알아보도록 하겠습니다. How to solve the problem 제 경우에는 새벽 5시라는 특정 값으로 x축을 시작하고 싶었습니다. 따라서 저는 apxechart xaxis의 min 속성을 사용해 제가 원하는 시간을 아래와 같이 설정해주었습니다. x축 값은 상황에 따라 다를테니 년도/달/일 등이 필요하다면 커스텀하여 사용하면 됩니다. xaxis: { min: new Date(new Date().setHours(5, 0, 0, 0)).getTime(), } 아래는 전체 코드입니다. var options = { chart: { type: 'line' }, series: [{ name: ..

Intro 안녕하세요. 이번시간에는 리액트에서 툴팁을 구현하는 방법, 툴팁 외부 영역 클릭 시 툴팁을 숨기는 방법에 대해 알아보겠습니다. Let's look at detail 아래와 같은 부모 컴포넌트가 있다고 가정해봅시다. 3개의 툴팁 컴포넌트가 있고, 툴팁 컴포넌트에는 각기 다른 툴팁 설명을 props로 전달하고 있습니다. const SomeComponent: NextPage = props => { return ( 뉴스 쇼핑 지도 ); } export default SomeComponent; 툴팁 컴포넌트는 아래와 같습니다. 하지만 현재 구현되어 있는 툴팁 컴포넌트는 문제가 있었습니다, 선택된 툴팁이 있을 때 다른 툴팁이 선택되어도, 동시에 툴팁 desc가 표출됩니다. 또한 외부 영역을 클릭 할때 여..

Intro 안녕하세요. 이번시간에는 리액트에서 apexcharts 를 이용하여 커스텀 툴팁을 만드는 방법에 대해 알아보도록 하겠습니다. How to solve the problem apexcharts 를 사용한다는 가정하에, 아래의 series 데이터와 chart option이 있다고 생각해봅시다. const series: any = [ { name: 'EBAY', data: [ ['2023-03-20T07:00:22.625Z', '123124.82'], ['2023-03-20T06:00:20.103Z', '52353.83'], ['2023-03-20T05:00:16.960Z', '98943.91'], ['2023-03-20T04:00:15.051Z', '796756.65'], ['2023-03-20T0..

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