아이폰 천지인 키보드에서 "유요" 라는 글자를 입력할 때, "융" -> "유ᄋᆞ" -> "유ᄋᆢ" 이렇게 입력이 되는데 한글만 대응하기 위해 넣어두었던 regex 가 동작하면서 글자를 지워버리는 이슈가 발생했습니다. [기존 Regex]return target.replace(/[^가-힣ㆍᆞᆢㄱ-ㅎㅏ-ㅣa-zA-Z\s]/g, '');한글, 영어가 아닌 문자는 제거하기 위한 regex 입니다. [이슈 원인] 종성 자음과 ㆍᆞᆢ 같은 첨자가 합쳐지면서 새로운 유니코드 문자를 만듭니다. [변경된 Regex]/*** 아이폰 천지인을 대응합니다.* \u1100-\u1112 자음 ㄱ-ㅎ* \u318D\u119E\u11A2\u2022\u2025\u00B7\uFE55 - ㆍᆞᆢ•‥·﹕*/ret..

오늘은 Next JS에서 Client Data fetching 사용 시 마주할 수 있는 Anchoring 이슈에 대해 정리하려 합니다. Next JS docs에서 권장하고 있는 코드 스타일을 적용했을 때 생길 수 있는 이슈이기 때문에, 관련 이슈가 생겼을 때 저는 디버깅에 시간을 꽤나 썼습니다. 먼저 Next JS의 Data fetching에 대한 지식이 전무할 분들을 위해 개념부터 정리하고 이슈에 대한 해결 과정을 차례로 적어보겠습니다. Data fetching Next JS를 이용한 Data fetching에는 다음과 같은 방법을 사용할 수 있습니다. 자세한 내용은 공식 문서를 참조해주세요! getStaticProps / getServerSideProps : Server Side에서 미리 page h..

개발을 진행하면서 안드로이드 OS에서 네이버 앱을 사용할 때 (특정 안드로이드 버전 - 아마도 11 이상 에서만) flex 레이아웃이 깨지는 이슈가 발생하였다. css를 다방면으로 고쳐보면서 해결해보았는데, 원인은 'flex-shrink를 지원하지 않는 것'이었다. (caniuse) 반응형 웹을 구축할 경우 해당 사례를 피하기 위해 css 코드에 flex-shrink 사용을 지양하도록 하자.

문제 상황 next/link를 사용한 GNB의 mouseEnter event가 작동하지 않아서 메인 메뉴에 마우스를 움직여도 subMenu가 바뀌지 않는 이슈가 발생한다. 원인 GNB에서 사용하는 LinkContext의 SuperLink를 next/link로 처리했는데, next 12 version에서 mouseHover 이벤트가 제대로 작동하지 않는 문제가 있다. fix(Link): Do not ignore onMouseEnter prop with absolute href by ericmatthys · Pull Request #32012 · vercel/next.js Fixes #22733 Regardless of whether it's recommended that Link be used with e..

요약 css 내부의 font asset을 받아오는 path를 절대경로가 아닌 상대경로로 바꾸면 된다. 문제 css에 url로 정의해 둔 font asset이 개발모드(dev)에서는 잘 적용되다가 실서버(production)에서 반영되지 않는 이슈 실제 구현 /* style.css */ @font-face { font-family: spoqaSansNeo; font-weight: 700; src:url('/font/SpoqaHanSansNeo-Bold.ttf'); src: url('/font/SpoqaHanSansNeo-Bold.otf') format("opentype"), url('/font/SpoqaHanSansNeo-Bold.ttf') format("truetype"); } /* next.config..

React array state가 갱신되어도 view가 바뀌지 않을 때 const [members, setMembers] = useState([]); const deleteMember = (index: number) => { // member 삭제 const tmp = members; tmp.splice(index, 1); setMembers(tmp); } return( { members.map((member: string, index: number) => {member} } ); members라는 Array state의 값 하나를 삭제하는 함수이다. 해당 함수를 실행해도 표시되는 학생이 변하지 않는 이슈가 발생했다. 하지만 개발자도구를 통해서 보면 분명 해당 컴포넌트의 members State는 변경되..

쿠키가 발급되지 않을 때 KOS 프로젝트는 프론트엔드에 React.js를 사용하고 서버는 go lang 라이브러리 gin을 이용하여 진행중이다. 처음에 api를 만들고 나서는 postman이라는 툴로 제대로 동작하는지 검사한다. 처음에는 api연결이 순조롭게 되다가 로그인을 위해서 쿠키를 발급하는 api를 작성한 이후에 문제가 발생했다. 쿠키가 발급되지 않는다. 프론트엔드에서 받은 Network도 200으로 정상이고 set-cookie되는 것까지 보이며 response를 출력해보아도 정상이다. 그렇다면 왜 쿠키가 발급되지 않을까? 백엔드에서 프론트엔드에 쿠키를 저장시키기 위해서는 양쪽의 credential 속성을 모두 ON 해주어야하기 때문이다. 먼저 백엔드(go lang)의 코드는 다음과 같다. // ..

프론트에서 2가지 호출 api를 같은 함수에 두고 동시에 호출하였더니, 서버에서 뒷 순서로 호출된 api 실행 시 No database selecte error 가 난다. 해결 방법 : gorm.DB에 있는 sql.DB의 SetMaxOpenConns 함수를 이용하여, 동시에 허용 가능한 최대 커넥션 개수를 제한해주어야한다. Config.DB, err = gorm.Open(mysql.Open(Config.DBURL(Config.BuildDBConfig())), &gorm.Config{}) if err != nil { fmt.Println("Status: ", err) return } // 아래의 코드를 추가해준다. db, err := Config.DB.DB() if err != nil { fmt.Print..