Leo의 기술 블로그

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

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

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