Leo의 기술 블로그

문제 상황textarea 요소에 입력을 하고 enter 키를 누를때 한 번만 제출 될꺼라는 생각과 달리 중복돼서 제출이 되는 이슈가 있었다.이 현상이 발생하는 방법은 오로지 한글을 입력하고 enter 키를 누를때만 발생하는 이슈였다. onKeyDown(event: KeyboardEvent, formType: string): void { event.stopPropagation(); // 엔터키 누를 때 기본 동작(줄바꿈) 방지 if (event.key === 'Enter' && !CrossBrowsing.touchDevice) { event.preventDefault(); if (!this._inputValue.trim()) { ..

matchMedia는 무엇인가? window 객체에서 지원하는 메서드(API)이다. document 내부에 미디어 쿼리 상태를 javascript에 가져와서 사용이 가능한 함수라고 보면 된다. const isMobileScreen = matchMedia('(min-width: 780px)').matches; 위에처럼 사용하면 javascript로 현재 document에 너비가 780px인지 판단해서 boolean값이 isMobileScreen 변수에 할당된다. 그럼 해당 변수를 사용해서 현재 화면 크기에 따라 분기처리가 가능해진다. 그럼 언제 matchMedia가 필요할까? 위와 같이 화면 너비에 따라 분기처리가 필요할때도 사용 가능하지만 사내에서는 터치 기기에대한 분기처리를 위해 사용했다. expor..

고민 배경 어드민 페이지 개발중 서버로부터 받은 소수점 데이터에 100을 곱해 화면에 보여줘야하는 상황이 있었다. console.log(0.5295 * 100); // 52.949999999999996 내가 의도한건 52.95까지의 데이터가 나왔으면 했는데 실제로 화면에 표시되는건 의도하지 않은 데이터가 나왔다 이번 글은 이렇게 나온 이유에 대해서 컴퓨터가 어떻게 소수점을 표현하고 있는지도 같이 정리해보려고 한다. 부동소수점 방식 컴퓨터는 값을 2진수로 표현할 수밖에 없다. 왜냐하면 미세하게 작은 트랜지스터의 집합으로 이루어져 있는데 이 트랜지스터의 켜짐과 꺼짐에 따라 값을 표현하고 있기 때문이다. 즉 소수점도 2진수로 표현해야한다. 앞에서 사용한 0.5295 값은 10진수의 값이다 이를 컴퓨터는 이..

이게 뭔데?const uri = "https://example.com/search?query=안녕하세요";const encoded = encodeURI(uri);console.log(encoded); // https://example.com/search?query=%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94 직접 코드를 보는게 이해가 빠를꺼다. encodeURI는 :  /  ?  &  = 등의 특수기호는 변환하지 않고 나머지 문자들을 변환한다고 보면된다. 근데 여기서 특이한 점은 앞에 주소나 path는 인코딩 시켜주지 않는다는 점이다. 아마 이건 내부적으로 경로로 인정한 값을 제외한 값만 인코딩해준다encodeURI("https://example.com/search?..