Leo의 기술 블로그

글을 작성한 계기기존에 fontFamily에 폰트 스타일을 단순하게 적용하는 방법밖에 몰랐지만 이번에 우리 뷰어 서비스에 텍스트 필기를 넣게 되면서 생겼던 여러 폰트 스타일이 적용이 안되는 이슈를 확인하면서 확인한 내용에 대해서 정리하려고 한다. 새롭게 알게된 내용에 대한 정리폰트 파일은 사실 여러개의 파일들로 나누어져 있다. (하나의 파일로만 받을 수 있다.) 각 파일마다 지원하는 텍스트 범위가 다르다.폰트 파일 하나의 용량은 생각보다 크다.(대략 2MB) 하지만 서버를 통해 받아오면 압축해서 오기 때문에 0.03MB정도로 오게 된다.하나의 폰트 파일이 모든 언어를 지원하지는 않는다. (대략 중국어의 폰트 용량이 가장크고 영어가 가장 적다.)한국어 지원 폰트여도 모든 글자를 포함하지 않을 수 있다. (..

문제 상황우리 라이브러리는 오디오 재생을 위해서 브라우저의 Audio 객체를 사용중이다. 그리고 서버에서 오디오 파일의 응답 헤더에 Accept-Ranges: bytes가 있어 오디오 파일을 모두 받아오기 전에 재생이 가능하다고 판단이 되면 먼저 재생이 되도록 구현되어 있다. 하지만 우리 라이브러리를 사용하는 고객사중 한 곳의 네트워크에서만 오디오가 정상적으로 재생되지 않고 매번 처음부터 재생되는 이슈가 있었다.그 이유를 알아보니 해당 네트워크 프록시 서버에서 mp3 파일을 변조하는걸 응답 헤더에 via key값을 통해서 확인이 됐고 응답 헤더중 Accept-Ranges: bytes 값이 제외된걸 확인할 수 있었다. 해결 방법해당 고객사 네트워크에서만 발생하는 데이터 변조 이슈이고 차이점이 일단 Acce..

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진수의 값이다 이를 컴퓨터는 이..

문제 상황 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..

AI를 이용해서 Railway에 내 로컬에 존재하는 table을 등록하고 싶었는데 제대로 알려주지 않아 헤맸었다. 이를 위해 약간의 고민과 공식문서를 보고 알아낸 방법에 대한 글이다. 일단 내가 생성해서 배포하고자 하는 DB를 선택해준다. 필자의 경우 MySQL을 사용했다. 생성 후 tab에 Variables와 Settings를 이용하려고 한다. 일단 우리 로컬 터미널에 mysqldump -u root -p memo_app > memo_app.sql 위에 명령어를 입력해 로컬에 존재하는 table의 백업 파일 즉 덤프 파일을 만든다. mysql -h 프록시주소 -P 포트번호 -u 유저이름 -p비밀번호 DB이름 위에 명령어를 입력해줘서 Railway에 배포한 DB에 우리 로컬 table을 올려줘야..