특정 문자열이 브라우저에서 이모지로 치환되어 보이는 이슈를 겪었습니다.예를 들어 "Balloon"이라는 문자열이 텍스트 그대로 출력되지 않고, 말풍선 모양 이모지로 렌더링되는 현상이 발생했습니다. 처음에는 상품 등록 과정에서 유니코드가 잘못 들어간 게 아닌가 의심했지만, 데이터에는 문제가 없었습니다.확인해 보니 렌더링 시점에 브라우저가 문자열을 자동으로 이모지로 변환하고 있었고, 이는 적용 중인 Noto Sans 폰트에서 발생하는 문제였습니다. 이를 해결하는 방법은 크게 두 가지였습니다.첫번째. 이모지로 치환되지 않는 다른 폰트를 사용두번째. 브라우저의 자동 치환 기능을 비활성화 하지만 폰트를 변경하는 것은 서비스 전체 디자인에 영향을 줄 수 있기에 채택하지 않았습니다.대신 CSS 속성으로 제어하는 방..

프로젝트에서 특정 버튼을 클릭 시 사용자정보를 fetch해서 response에 따라 비동기로 input에 focus하는 로직을 구현했습니다. 안드, 웹에서는 정상작동했지만 ios에서 input에 focus가 안되는 이슈가 있었습니다. 찾아보니 Ios는 사용자 인터렉션에 의해서만 input focus를 시킬 수 있다고 합니다. 해결방법이라기보다 제가 사용한 꼼수는 ios경우 버튼클릭 시 인풋에 포커스가 가게하고 비동기로 response받아서 이후 프로세스 처리하는 것으로 진행했습니다.사실 ios의 경우 활성화가 되면안되는경우도 활성화가 되었다가 비활성화 된다는 현상이 있었지만 사용성을 생각했을 때 키보드에 포커스가 가는게 더 낫다 생각을 했기때문에 진행했습니다. 참고 https://gist.github..

git에서 dist 폴더 추적하지 않게 .gitignore파일에 추가했는데계속 추적이 되는 이슈  gitignore하기 전에 한번 올렸던 적이있어서 색인이 되어 gitignore에 추가를 했음에도 계속 추적이 되고 있었다.  그런경우 기존에 올렸던 색인을 삭제해줘야한다. git rm -r --cached //git rm -r --cached dist 폴더는 로컬에서 유지되지만 더이상 추적되지 않음

react에서 사용했던 패키지를 next환경에서 써야하는 상황 next 환경에서 작동할수있도록 컴파일 해주는 패키지 발견 https://www.npmjs.com/package/next-transpile-modules 1. npm 모듈 설치 npm i next-transpile-modules 2. next.config 파일 설정하기 const config = require('config'); const { format } = require('date-fns'); const { ko } = require('date-fns/locale'); /** @type {import('next').NextConfig} */ const withTM = require("next-transpile-modules")([ "@f..

슬라이드 5장씩 이동하게 해달라는 요청사항을 받아서! Swiper.js api를 찾아보던 중 역시나!!! 그에 관련된 옵션 발견 (역시 없을리 없지..!) 아래 옵션만 넣어주면 된다. { slidesPerGroup: 5, } 1장씩 이동 할 때 5장씩 이동 할 때