메로그

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

모바일 앱에서 웹뷰(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 등을 지원합니다.하지만, 그리..

현 프로젝트에서 Nextjs14 를 사용하고 있었는데, Nextjs15 의 안정적 버전이 나와 이번에 마이그레이션을 진행했습니다. 우선적으로 크게 바뀐 것은 동기 API 들이 비동기로 변경되었고, page, layout 에서 사용되는 params 또한 비동기로 변경되었습니다.그래서 간단하게 변화 부분에 대한 내용과 새롭게 추가된 내용을 간략하게 정리하겠습니다.🚀 Next.js 15 업그레이드Next.js 15 버전이 출시되면서 많은 주요 변경 사항과 새로운 기능들이 추가되었습니다. React 19 지원과 비동기 API 변화 등 프로젝트에 큰 영향을 줄 요소들이 많으므로, 이번 포스팅에서는 Next.js 15 업그레이드에 필요한 가이드와 새 기능을 최대한 쉽게 설명드리겠습니다.1. Next.js 15 업..

Nextjs14 에서 타사 라이브러리 사용하기해당 라이브러리를 활용하여 타사 라이브러리를 쉽고 빠르게 사용할 수 있는 라이브러리 입니다.이를 이용해서 GTM, GA 를 Nextjs 에서 적용해봅시다.@next/third-parties 라이브러리 설치해당 라이브러리는 인기있는 타사 라이브러리를 로딩할 때 성능과 개발자 경험을 개선하기 위한 라이브러리로 현재 v14.2.15 에서도 아직 활발하게 개발 중인 실험적 라이브러리입니다.npm install @next/third-parties@latest next@latestpnpm, yarn 을 쓰시는 분들은 맞는 문법으로 다운받으시면 됩니다. 필자는 pnpm 썻음.GTM, GA 연동해보기구글 태그 매니저(GTM)과 구글 애널리틱스(GA) 를 연동하기 위해서는 @..

Nuxt2를 사용해 프로젝트를 진행하면서 이미지를 AWS CDN에서 불러와 클라이언트에서 fetch로 요청하던 중, CORS(Cross-Origin Resource Sharing) 문제를 겪게 되었습니다. 이 글에서는 발생한 문제와 해결 과정을 단계별로 정리하고, 각각의 선택과 이유를 설명하겠습니다.1. 문제 상황: AWS CDN에서 이미지 로딩 시 CORS 발생이미지 파일은 AWS S3를 기반으로 한 CDN(Content Delivery Network)에서 제공되었습니다. 클라이언트 측에서 해당 이미지를 fetch로 가져오려 하자, CORS 에러가 발생했습니다.CORS 문제란?CORS는 다른 도메인에서 리소스를 요청할 때 보안상의 이유로 브라우저에서 제약을 거는 정책입니다. 서버가 CORS 헤더를 통해..