Leo의 기술 블로그

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

문제 상황 if (this._audio.dataset.src === src) { if (Math.abs(clipStart - this._audio.currentTime) >= 0.3) { this._audio.currentTime = clipStart; } this.play(); return; } 현재 우리 mp3 재생은 버튼을 클릭시 서버에서 미리 받아온 clipStart 값을 통해 현재 audio 객체에 currentTime 설정해서 원하는 위치에 오디오를 재생시키도록 되어있다. 크롬에서는 문제가 없었지만 Safari 브라우저나 ios에서는 오디오 재생이 밀리는 문제가 발생했었다. 현재 서버에서 받아오는 mp3 파일이 135kb/s에 VBR..

문제 상황 브라우저에서 복사를 하게 되면 클립보드라는 저장소에 임시로 데이터가 저장된다. 클립보드 메서드중 copy 메서드를 이용해 데이터를 저장하는데 사파리에서 클립보드에 복사되지 않는 이슈가 있었다. button.onclick = () => { setTimeout(() => { copyToClipboard(); }, 100);}; 위와 같이 사용자의 상호작용에 대한 클립보드의 상호작용내에 비동기 호출후 클립보드를 복사하는 동작은 제대로 동작하지 않는다. 사파리내에 보안정책 때문에 사용자의 이벤트로 바로 클립보드를 호출하는게 아니면 동작하지 않게 막고있다. 해결책button.onclick = () => { copyToClipboard(); }; 해결책은 생각보다 간단하다 사용자 이벤트에 ..

이게 뭔데?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?..

이 글은 서비스에 다국어를 적용하는 과정에서 들었던 고민을 정리한 글입니다. 제가 정답은 아니지만 다국어를 처음 적용하려고 하거나 적용중인분한테 도움이 될꺼라고 생각합니다. 프로젝트 시작전 고민 다국어 서비스를 구현하기 위해서는 두가지 방법에 대한 고민이 있었습니다. 첫 번째는 라이브러리 없이 사용하는 경우입니다. 라이브러리 없이 전역 상태에 locale값을 선언해 이 상태값을 기준으로 조건문으로 영어와 한국어를 넣는 방법에 대해서 처음에 고민을 해봤습니다. 하지만 이 방법은 컴포넌트에 JSX가 길어져 가독성에 좋지 않겠다는 생각이 들었습니다. 그리고 영어 한국어 이외에 추가적인 언어를 지원하게 되는 경우 조건문이 복잡해지고 코드가 더러워져 가독성에도 좋지 않고 확장성에도 좋지 않다는 생각이 들었습니다...

이 글은 현업에서 개발을 하다 생긴 크로스 브라우징 이슈에 대해서 공유하고 어떻게 해결하는게 좋을지를 고민한 글입니다. 문제 상황 위에 화면은 모두 1920x1080 해상도의 모니터이고 모두 100% 상태입니다. 그리고 px로 정적으로 단위를 기입해서 크기를 지정했습니다. 하지만 실제로 화면상에는 두 화면이 다르게 보입니다. 왜 그런걸까요? 결론부터 얘기하면 디스플레이의 차이입니다. 위에 맥 OS의 경우 운영체제가 맥이라서가 아닌 레티나 디스플레이기 때문에 같은 크기의 px이라도 다르게 렌더링을 시켜줍니다. 디자이너분이 레티나 디스플레이에서 1080 환경을 기준으로 디자인을 주게 되면 일반 디스플레이에서는 상태표시줄 때문에 실제 1080 모니터라도 실제로는 900대 크기의 높이를 가진 디스플레이처럼 렌더..