메로그

15.2.3 이하 버전은 사용 금지.미국 샌프란시스코 기반 Vercel은 지난 18일 Next.js 15.2.3에서 해당 취약점을 패치한 뒤, 21일 보안 권고문을 발표했다. 해당 취약점은 보안 연구원 알람 라시드(Allam Rachid)와 알람 야서(Allam Yasser)가 발견해 지난달 27일 Vercel에 보고했으며, CVSS(공통 취약점 평가 시스템) 기준으로 심각도 9.1점을 기록.next start와 output: 'standalone'을 사용하는 모든 자체 호스팅 Next.js 배포는 즉시 업데이트할 것을 권장함.

이번 글은 Nextjs15 에서 폰트를 적용하는 방법에 대한 가이드를 하도록 하겠습니다.Pretendard 란현업에서 가장 많이 쓰이는 한글 폰트로 SIL 오픈 폰트 라이선스로 글꼴 단독 판매를 제외한 모든 상업적 행위 및 수정, 재배포가 가능합니다.  그래서 사용자들은 파일을 가져와서 커스텀하여 사용하기도 합니다.공공기관에서도 어느정도 표준으로 사용하고 있는 폰트로 신뢰가 있는 폰트입니다.다운로드해당 링크에서 github pretendard 파일을 다운받으시면 됩니다.web/variable 아래에 있는 woff2 를 가져와서 사용하시면 됩니다.폴더 구조fonts/pretendard 폴더를 만들어서 아래에 라이센스 파일과 woff2 파일을 넣어주시면 됩니다.셋팅app/layout.tsx 에 아래와 같이 ..

해당 프로젝트는 WebView 환경에서 동작하기 때문에, 모바일 앱 측으로 Google Analytics(GA) 트래킹 데이터를 전달해야 했습니다.아래는 Next.js 환경에서 모바일(WebView) 쪽으로 GA 트래킹 정보를 전달하는 방법에 대한 간단한 가이드입니다.브릿지 인터페이스 정의글로벌 윈도우 인터페이스를 확장하여 네이티브 브릿지와 GA4 메서드를 타입스크립트에서 인식할 수 있도록 함.export {}declare global { interface Window { webkit?: { messageHandlers?: { firebase?: { postMessage: (message: { command: string; ..

신규 프로젝트를 진행하게 되었는데, 이번 기회에 최신 React 버전을 직접 사용해보고 싶었다.또한 빠른 배포와 자동화된 워크플로우를 위해 AWS S3를 활용한 정적 사이트 배포와 GitHub Actions를 이용한 CI/CD 구성까지 함께 적용해보기로 했다.최근에는 간단한 CI/CD 환경을 누구나 쉽게 구성할 수 있는 도구들이 잘 갖춰져 있어서,이번 글에서는 React v19 버전 + AWS S3 + GitHub Actions 조합으로 프로젝트를 어떻게 세팅했는지따라하기 쉽게 정리해보려 한다.진행하는 프로젝트는 간단한 Admin 페이지로, SEO 최적화가 필요 없는 SPA(single-page application) 형태이기 때문에 React로 구성하는 데 부담이 없었다.사용기술우선 본격적인 진행에 앞..

모바일 앱에서 웹뷰(WebView)를 사용할 때, 웹 페이지와 네이티브 앱 간의 데이터 교환이 필요할 수 있습니다. 이를 위해 JavaScript 브릿지를 활용하면 웹과 앱이 서로 데이터를 주고받을 수 있습니다. 이번 포스팅에서는 안드로이드 WebView에서 JavaScript 브릿지를 설정하고, 간단한 데이터 송수신 테스트를 수행하는 방법을 설명합니다.1. WebView에서 JavaScript 인터페이스 추가하기안드로이드에서 웹 페이지의 JavaScript와 통신하려면 JavascriptInterface를 이용해야 합니다. 아래는 WebView 설정과 브릿지 구현 코드입니다.MainActivity.ktpackage com.example.bridge_testimport android.annotation...

Pull Request 에서 승인 처리 이후, 코드 검사기능을 추가하여 PR 을 완료한 소스가 이상이 없는지를 체크하는 기능을 추가합니다.깃허브 프로젝트를 이용하면 github actions 기능을 이용해 많이들 사용하는데 그에 대한 가이드를 간략하게 정리합니다. PR RullSetsRullSets 기능을 이용해 특정 룰을 만들고 해당 룰에 대해 셋업을 해줍니다. 타겟이 되는 브랜치, 일반적으로 dev 라는 브랜치라고 가정하고 진행해보겠습니다.아래에 Require a pull request before merging 을 체크하고 아래 옵션을 체크해줍니다. 보면 승인을 2명 이상이 해줘야지만, 이제 PR 을 처리할 수 있게끔 하고, 머지기능도 일반, Squash, Rebase 등을 지원합니다.하지만, 그리..