본문 바로가기

전체 글

(24)
Python Nginx로 배포하고 Certbot으로 HTTPS 도메인까지 연결하기(+EC2) 들어가며Nginx로 파이썬을 배포하고 Certbot을 사용하여 Https 도메인 연결을 설정하는 설명하려 합니다. 정글에서 2박3일로 진행한 유사 해커톤 서비스😅를 배포했던 방법을 정리하는 글입니다. 파이썬 배포 및 AWS 콘솔을 활용하지 않은 Https 연결과 관련된 글이 없어 배포하는데 어려움을 겪었기에, 그런 분들을 위한 글이기도 하고, 저 스스로도 다시 하나 하나 뜯어보며 체화시키기 위한 개념 설명 및 적용 글입니다. NginxNginx란 무엇일까요? chatGPT를 통해 확인해보면 아래와 같이 나옵니다.Nginx는 웹 서버 소프트웨어로, HTTP 서버뿐만 아니라 리버스 프록시, 로드 밸런서, 메일 프록시 등의 역할을 할 수 있습니다. 높은 성능과 낮은 메모리 사용량을 자랑하며, 특히 정적 콘텐..
Next14 로컬폰트(LocalFont) 로딩으로 인한 LCP 문제 개선하기 들어가며웹 성능을 최적화하는 과정에서 중요한 측면 중 하나는 효율적인 폰트 로딩입니다. 이 글에서는 비효율적인 폰트 로딩으로 인해 발생한 LCP(Largest Contentful Paint) 문제를 해결하는 과정을 안내합니다. 다양한 폰트 형식 간의 차이점, 서브셋 사용의 장점, 그리고 이러한 개선 사항이 Next.js 14 버전을 사용하여 어떻게 구현되었는지 살펴보겠습니다. 문제 현상처음 성능 분석에서 웹사이트의 폰트 로딩에 큰 지연이 발생한다는 것을 확인했습니다. 아래의 성능 분석 스크린샷에서 볼 수 있듯이, LCP가 약 7초에 달해 전체 사용자 경험에 큰 영향을 미쳤습니다. 이러한 지연의 주원인은 비효율적인 폰트 파일 로딩이었습니다. 원인 분석 및 해결 과정부끄럽지만 저는 폰트 확장자에 대해 제대로..
리액트 네이티브 테스팅: Maestro E2E 테스트와 유닛 테스트 이 글에선처음 접해보는 리액트 네이티브에서는 어떻게 테스팅을 진행해야할까 고민했고, 참여하고 있는 번역 활동에서 리액트 네이티브 테스팅에 관한 공식 문서를 번역하기도 했습니다. 이에 기초하여 리액트 네이티브에서 E2E테스트와 유닛테스트를 하는 방법을 소개하고자 합니다. 자동화 테스트 라이브러리 비교부터 Sentry, Maestro, Appium 중 Maestro을 선택한 이유, 실제 예제 코드 그리고 유닛 테스트 작성까지의 과정을 다룹니다. 자동화 테스트 라이브러리 비교리액트 네이티브 앱의 E2E 테스트를 위해 여러 라이브러리를 고려해볼 수 있습니다. 그 중 저는 Sentry, Appium, Maestro를 표로 비교해보겠습니다. SentryAppiumMaestro주 용도애플리케이션 모니터링 및 오류 추..
React Native에서 딥링크 처리 및 푸시 알림 최적화하기 이 글에선React Native에서 딥링크 처리와 푸시 알림 기능을 최적화하는 방법에 대해 알아볼 것입니다. 특히, Firebase의 Messaging과 Notifee를 함께 사용한 이유에 대해서도 다루고 있습니다. 딥링크 설정, 푸시 알림 설정, 그리고 최적화된 코드 구조를 통해 효율적인 리액트 네이티브 link routing과 푸시 알림을 구축하는 방법을 설명해보겠습니다. 1. 딥링크 처리하기딥링크는 사용자에게 특정 콘텐츠를 제공하기 위해 앱의 특정 화면으로 직접 이동할 수 있도록 도와줍니다. React Native에서 딥링크를 처리하려면 @react-navigation/native의 LinkingOptions를 설정하고, 앱이 열릴 때 해당 URL을 처리하도록 구성해야 합니다. 우선, 딥링크를 설정..
창업하기전 꼭 고려해야할 것들(=쉬운게 없다) 원래 오늘은 테크글을 쓰려고 했지만, 2월 회고겸 복잡하고 속상한 마음을 정리할 겸, 일상글(MoA프로젝트 상황)을 쓴다. MoA 작년 가을쯤 시작했었던 프로젝트, 모아가 드디어 개발이 끝이 났다. 하지만 출시는 할 수 있을지 모르겠다. 너무 너무 마음이 아프고 속상하다. 가을부터 설문 조사, 기획, UI/UX를 끝내고 제대로 된 개발은 1월부터 진행했다. 사실 이 프로젝트는 내가 멱살을 끌고 가는 중이었다. 분명 같이 함께 해나가고 싶어서 시작했는데, 어쩌다보니 혼자 기획하고, 요구사항을 짜고, API 상세 명세까지도 도맡게 되었고, 다들 회사일과 병행하기 어렵다는 말로 나가게 되었다. 그러다 1월에 백엔드를 담당하게 된 귀인들을 만나서 여기까지 개발을 끝낼 수 있게 되었고, 이제 출시만을 앞두고 있었..
[ReactNative] react-query refetch가 안되는 문제와 해결 방법 문제 상황 리액트 쿼리는 기본적으로 화면이 focus될 경우, refetch되는 속성을 가지고 있다. 그래서 화면을 이탈했다 돌아오면, stale시간과 상관없이 다시 새로운 데이터로 fetching 되게 된다. 하지만 리액트 네이티브에선 화면의 focusing 여부를 알지 못했다. 그래서 아무리 다른 페이지에 갔다 돌아와도, 데이터가 변경이 되어도, 리액트 쿼리는 계속해서 이전의 데이터만을 보여주게 된다. 이를 어떻게 해결할 수 있을까? 해결 방법 직접 custom hook을 구현하는 것으로 해결할 수 있다! 스크린이 focus 될 때마다, react query의 refetch 함수를 실행시키는 훅을 만들 수 있다. 커스텀 훅에 원하는 refetch 함수를 파라미터로 넘겨주도록 만들어주면 된다. impo..
1월 회고, 생활습관 모임/MOA🎁 1월에 목표한 것 생활 습관 모임인 FOCUS의 공동 목표는 일찍 일어나는 습관과 꾸준한 운동이었다. 난 이번 기회로 [1] 재미있게 즐길 수 있는 운동 취미를 만들고, 매번 실패했던 [2] 미라클 모닝에 다시 도전해보고 싶었다. 그리고 이러한 생활 습관을 바탕으로 내가 이루고 싶었던 것은 [3] MoA 개발 진척도를 향상 시키고, 좀 더 [4] 깊어진 프론트엔드 지식을 가지는 것이었다. 그렇다면 현실은? 실제로 일어난 결과 [1] 생활 습관부터 돌아보자! 결론부터 말하자면 반은 성공, 반은 실패다. 운동은 코난 덕분에 클라이밍이라는 새로운 종목을 시도해보게 되었는데, 완전히 빠져들어서 즐겁게 운동을 하고 있다. 나는 성취에 대한 강박관념이 있는데, 이는 운동에서도 크게 다르지 않다🥲 만약 어제 뛴 러닝..
[ReactNative] ios .env파일 수정 후 적용이 안되는 현상 XCode -> Product -> Clean Build Folder 후, 재빌드하면 해결됩니다⭐️