목록1. Next.js, 웹뷰 도입 과정(1) - Expo 설치2. [현재 글] Next.js, 웹뷰 도입 과정(2) - 디버그 환경 구축3. Next.js, 웹뷰 도입 과정(3) - 오류 해결 목록 본 글은 웹뷰를 도입하면서 경험한 주관적인 과정입니다.리액트 네이티브의 확장 표준 라이브러리 Expo(v52), 안드로이드 스튜디오(v21)를 사용합니다. 1. 디버그 환경 구축# 스마트폰스마트폰은 다른 설정하지 않고 Expo 프로젝트를 바로 확인할 수 있어 편하지만 충전이 필요합니다.스마트폰에서 사용하는 방법은 웹뷰 URI에 IP주소를 할당한 다음 Expo 프로젝트를 CLI를 통해 구동합니다. 그 후 터미널로 QR 코드와 명령어가 출력됩니다. 스마트폰에서 Expo Go 앱을 다운로드 하고 QR코드를 인식하..

목록1. [현재 글] Next.js, 웹뷰 도입 과정(1) - Expo 설치2. Next.js, 웹뷰 도입 과정(2) - 디버그 환경 구축3. Next.js, 웹뷰 도입 과정(3) - 오류 해결 목록 본 글은 웹뷰를 도입하면서 경험한 주관적인 과정입니다. 리액트 네이티브의 확장 표준 라이브러리 Expo(v52)를 사용합니다. 1. Expo(리액트 네이티브) 프로젝트 생성# expo 설치npx create-expo-app@latest# expo 프로젝트 초기화npm run reset-project기본적으로 생성되는 프로젝트 디렉터리 구조를 그대로 사용하려면 초기화하지 않아도 됩니다. Expo 프로젝트 생성 공식문서 확인 2. 웹뷰 프로젝트 서버 설정개발하고 있는 프로젝트 서버를 설정해야 합니다. 이는 웹뷰..

'다시 간 하노이 그리고 권태기'  두 번째로 간 하노이, 내가 알던 하노이와 달랐다. 신호등이 생겼다. 무질서 교통체증은 보이지 않았다. 다들 정지선 뒤로 멈춰 신호를 기다렸다. 이게 무슨 일인지. 놀라웠다. 2년 만에 무슨 일이 있었던 건지 놀라울 따름이었다. 하롱베이는 몇 달을 지내야 섬을 돌아볼 수 있는 규모였다. 그중에서 가장 큰 동굴과 섬을 당일치기로 돌았다. 하롱베이로 출발하기 전, 픽업 장소에 도착했는 데 버스가 오지 않았다. 사기당한 건가 싶었다. 다른 관광객들은 픽업돼서 가는 데 내 이름은 불리지 않았다. 어디서 잘못되었는지 연락 수단을 빠르게 알아봤다 멘붕 상태였다. 전날에 온 메일에 연락처가 남겨져 있었다. 전날 오후에 공항으로 출발하느라 메일이 온지도 몰랐다. 카톡으로 연락을 하니..

"현재 상황"    시끄러운 소동이 지나갔다. 한바탕 소란스러웠지만 이제 조용하다. 가끔 소동이 일어나는데 금방 고요해진다. 지금 감정이 만족스럽다. 평온하달까. 무덤덤하다.    한 때 이루고 싶은 목표가 있었다. 혼자서 이루기 어려운 목표였다. 그럼 꿈이라 해야 하나. 함께 이룰 꿈을 상상하며 살아왔다. 상상만 해도 기분 좋았다. 안타깝게도 현실은 상상과 달랐다. 뭐든 한 번에 성공하는 법은 없었다. 그 한 번은 저번이 마지막인 줄 알았다. 그 한 번은 항상 지금이었다. 이제 내려놓을라 한다. 꿈은 남아 있지만 애쓰지 않으려 한다. 언젠가 이뤄지지 않을까 싶다. 그냥 한 살 한 살 미뤄질 뿐이다. 이루면 이루는 거고 아니면 아닌 거고. 기대가 줄어든 지금이 평온하다.   지금까지 살아오면서 조급했던 ..

Callback 호출 횟수 개선 (5s) 이전이후Customer1249311 (75%)Admin1249290 (77%)   QR-ORDER 프로젝트에서 Swiper를 React와 CSS를 사용해 직접 구현했다. 좌우로 드래그하면 스크롤 x 위치가 변해 Swiper 라이브러리와 유사하게 구현할 수 있었다. 다만 스크롤할 때 연산이 반복되었다. 불필요한 연산을 최소화 하면서 동일 결과를 내고 싶은 마음이 들었다. 성능 개선, "Throttle" 적용throttle은 callback 함수를 delay 이후에 실행하는 함수다. throttle 함수가 여러 번 호출되어도 delay 시간이 충족되지 않으면 callback을 실행하지 않는다.function throttle(callback, delay) { let ..

개선 결과리소스 마침 DOMContentLoaded 로드-378kB (-41%)-4.21s (-30%)-2.32s (-24%)-2.31s (-24%) 측정 환경 설명- 시크릿 탭: 확장자 프로그램 영향 최소화- 3G: 네트워크 설정 가능한 최저 속도- 빈 캐시 및 하드 새로고침: 캐시 유무에 따른 초기 리로드 영향 최소화3번의 로드 결과를 바탕으로 평균값을 도출했다.번들 분석은 "vite-bundle-visualizer"를 사용했다.* 빌드 출력 표는 빌드 파일이 많은 관계로 필요한 index 파일만 표시했다. 1. 첫 빌드 #61f8f32빌드 출력File Original size Gzip dist/index.html0.47 kB0.30 kBdist/assets/index-DmbkiVgs.css 31..