전체 글162 CSS : font-synthesis 속성으로 모바일 IOS Safari 글꼴 굵게 표시되는 버그 수정하기 (feat: pretendard 폰트) 문제점 최근 개발 중에 개발 중인 반응형 웹 페이지의 폰트를 pretendard 폰트로 바꾸는 작업을 진행하였습니다. 이때 이상하게 모바일로 들어갔을 때 IOS Safari에서 bold로 처리한 폰트들의 글꼴이 유독 굵게 보였는데요, 원래 IOS에서는 pretendard 폰트가 이렇게 보이는 게 맞는지 몰라 디자이너분께 보여줬는데, 폰트가 조금 이상한 것 같다고 말씀해 주셨습니다. 실제 OS별로 확인을 해봐도 안드로이드 기기에서는 정상적으로 출력이 되고, 유독 IOS Safari에서 이상하게 보이는 것 같아서 원인을 찾아보게 되었습니다. font-synthesis 속성font-synthesis는 CSS 속성 중 하나로, 웹 페이지에서 특정 글꼴이 볼드, 이탤릭, 또는 소문자 대체(small-caps) 스.. 2024. 10. 14. HTML : polyfill.io 사이트 이용시 대체방법 (공급망 공격 issue) 개요 혹시 웹사이트를 개발할 때 polyfill.io 사이트를 CDN으로 사용하고 있나요? 저는 이전에 작업했던 프로젝트에서 에러가 발생하여 살펴보니 2024년 2월 이후부터 CDN으로 사용하고 있던 polyfill.io 사이트가 중지가 되었습니다. Polyfill 이란? polyfill이란, "충전 솜" 이라는 의미를 가지고 있는데요, 웹개발에서 polyfill은 신규 자바스크립트에서 도입된 문법을 구형 브라우저에서 돌아갈 수 있도록 도와주는 역할을 합니다. 즉 Promise 나 Set 객체등과 같이 우리가 당연히 알고 있는 자바스크립트의 요소들이 구형 브라우저에서 지원되지 않을 때 polyfill을 통해 이를 메꿔줄 수 있습니다. polyfill.io CDN 사용의 문제점 웹 애플리케이션에 pol.. 2024. 9. 13. Git : git clone 이후 모든 브랜치를 원격에서 로컬 브랜치로 가져오기 원격 브랜치를 로컬 브랜치로 가져올때 유의점 Git을 clone한 이후 모든 브랜치를 가져왔다고 생각하지만 보통 현재 활성화된 브랜치(default) 만 가져올 때가 많습니다. 보통 `git fetch --all (원격 저장소 변경사항 반영)` 또는 `git pull --all (브랜치를 로컬로 병합)` 명령어를 통해서 브랜치를 가져오게 되는데요, 이때 모두 올바르게 가져왔다고 생각하지만 이는 원격 추적 브랜치 의 변경사항만을 업데이트한것으로 실제 브랜치들은 로컬 브랜치로 가져오지 않습니다. 여기서, 원격에 있는 브랜치들의 상태 (삭제, 생성, 업데이트 갱신)을 로컬에서 추적하고 있는 브랜치를 원격 추적 브랜치 라고 합니다. 만약 이상태에서 원격의 연결이 끊어지게 되면 현재 브랜치가 아닌 다른 브랜치.. 2024. 8. 14. React : react-webcam 을 이용하여 기기에서 지원하는 최대 해상도 비디오 스트림 얻어오기 모바일이나 데스크톱 웹 애플리케이션을 개발할때 현재 디바이스의 카메라 화면을 가져오고 싶을때가 있습니다. React로 개발할때 이를 쉽게 구현해주는 `react-webcam` 이라는 패키지를 활용하면 쉽게 카메라 화면(Stream)을 가져와서 기능 구현에 활용할 수 있습니다. react-webcam 사용법 react-webcamReact webcam component. Latest version: 7.2.0, last published: 8 months ago. Start using react-webcam in your project by running `npm i react-webcam`. There are 297 other projects in the npm registry using react.. 2024. 7. 4. Nginx : X-Forwarded-For(XFF) 헤더를 통해 IP 로그 남기기 Nginx의 기본 로그 포맷 Nginx에서는 기본적으로 IP에 대한 아래와 같이 기본적으로 정의되어 있는 combined 로그 포맷으로 로그를 남겨줍니다. 127.0.0.1 - frank [10/Oct/2000:13:55:36 -0700] "GET /apache_pb.gif HTTP/1.0" 200 2326 "http://www.example.com/start.html" "Mozilla/4.08 [en] (Win98; I ;Nav)" 해당 로그 포맷은 보통 아래와 같은 규칙에 따라 표현됩니다. log_format combined '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_.. 2024. 6. 13. Vite : React 웹서버 서브 디렉토리 배포 설정하기 React를 통해 빌드를 하고 웹서버에 배포하기 위해서는 웹서버 설정이 추가적으로 필요합니다. 예를 들어, react-router와 같은 브라우저 라우터를 사용하게 되면 모든 경로에 대해 Web Root의 index.html로 rewrite 해주는 명령어가 필요합니다. Nginx의 경우 try_files 옵션을 설정하여야 하고, Apache의 경우 RewriteRule 옵션을 통해 설정할 수 있습니다. 위 설정을 해주지 않으면 새로고침시에 404 에러가 발생하는데, 이는 클라이언트에서 라우팅을 처리할때, 서버에 해당 자원이 없다고 인식하기 때문에 이러한 문제가 발생합니다. SPA에서는 모든 요청을 Base가 되는 index.html에서 처리하는데, 다른 경로로 접속하면 해당 경로에 일치하는 파일을 웹서.. 2024. 6. 11. NextJS : LocalStorage 에러 (ReferenceError: localStorage is not defined) 해결방법 오늘을 NextJS에서 LocalStorage 사용시 발생하는 에러에 대한 해결법을 간단히 공유해보도록 하겠습니다. 문제 상황 LocalStorage에서 값을 불러오고 저장하기 위해 아래와 같은 Util 함수를 만들어서 사용하고 있었는데요, next build 시에 아래와 같은 에러가 발생하였습니다. 문제 원인 문제 원인은 클라이언트 사이드가 아닌 서버사이드 렌더링 시에 브라우저의 전역객체를 사용할수 없기 때문에 발생하였습니다. 저는 빌드 타임에 에러가 발생했는데요, 실제로 런타임중이 아니더라도 빌드 타임에 NextJS는 Node 환경에서 코드를 실행하기 때문에 브라우저 전역객체를 사용할 수 없다고 합니다. 해결 방법 해결방법은 위와 같이 window 객체가 참조 되지 않을 경우에는 해당 코드를 실.. 2024. 5. 21. Vite : 라이브러리 wasm 에러 발생시 해결방법 (both async and sync fetching of the wasm failed) Vite를 통해 React를 개발하던 중 npm 라이브러리에서 `both async and sync fetching of the wasm failed` 에러가 발생할 때가 있습니다. 위와 같은 에러 발생 시 해결방법을 공유해 보도록 하겠습니다. 문제 발생 상황 모바일 애플리케이션을 만들던 중 비디오 녹화를 통해 `mp4-wasm` 이라는 패키지를 사용해야 할 상황이 발생하였습니다.(참고 : https://www.npmjs.com/package/mp4-wasm) 위 라이브러리의 사용법은 간단한데요 import loadMP4Module, { isWebCodecsSupported } from 'https://unpkg.com/mp4-wasm@1.0.6' 이런 식으로 mp4Module 이라는 객체를 호출.. 2024. 4. 30. React : 모바일 사파리 focus, blur 이벤트 감지 훅 만들어보기 (useWindowFocus) IOS Safari 브라우저에서 window.focus 및 window.blur가 제대로 동작하지 않는 문제 `Focus` 이벤트는 브라우저 창, 탭, 팝업이 사용자로부터 포커스를 받았을대 호출되는 이벤트로, 사용자가 브라우저창을 클릭하거나 다른 애플리케이션에서 현재 창으로 들어왔을때 쓰이는 등 여러 상황에서 자주 사용이 되는 이벤트입니다. `Blur` 이벤트는 반대로 사용자가 페이지를 떠나거나 다른 탭으로 이동했을때 발생되는 이벤트입니다. 하지만 IOS Safari 브라우저를 개발하다보면 Window의 Focus, Blur 이벤트를 등록을 했는데도 제대로 동작하지 않을때가 있습니다. (IOS에서는 탭 간 전환시 비활성화/ 활성화가 브라우저처럼 제대로 구분되어 있지 않은것 같다고 합니다.) visi.. 2024. 4. 24. Nginx : autoindex 를 통한 파일 목록 출력하기 오늘은 간단하게 Nginx에서 autoindex 기능을 통해 파일 목록을 출력하는 방법에 대해 알아보겠습니다. autoindex가 false일때 nginx 동작 기본적으로 nginx에서는 autoindex가 꺼져있는데요 이때 nginx에서 호스팅하고 있는 webroot를 기준으로 존재하는 폴더로 이동했을때에는 아래와 같이 404 not found가 출력됩니다. autoindex가 true일때 nginx 동작 하지만 요구사항에 따라 디렉토리 내의 파일을 목록화해서 파일을 다운로드 할 수 있는 디렉토리 리스팅 기능을 켜고 싶을때가 있는데요, 즉 파일리스트를 출력하고 싶을때 autoindex 기능을 사용합니다. 설정은 아래와 같습니다. 단순히 서버 block 안에서 `autoindex on;` 이라고 명시해.. 2024. 3. 11. 이전 1 2 3 4 ··· 17 다음
