본문 바로가기

분류 전체보기221

프론트엔드 개발자 포트폴리오 V2 📒 프론트엔드 개발자 포트폴리오 V2https://lasbe.kr/ 장성우 - 프론트엔드 개발자 포트폴리오프론트엔드 개발자 장성우(lasbe) 포트폴리오lasbe.kr 예전부터 개인적으로 Retro Window OS 테마의 웹을 하나 만들어보고 싶었는데,생각하다보니 제 포트폴리오에 하면 재미있겠다 싶어 기존 포트폴리오 사이트를 갈아 엎어 봤습니다. 재미난 것들 많이 넣었는데 간단히 소개 드립니다. 📌 OS 모방웹에서 윈도우 처럼 작동하는 것을 모방하기 위해 다음과 같은 기능을 추가했습니다. 🔎 바탕화면 아이콘 드래그 및 저장react-draggable 패키지와 localStorage를 이용하여 아이콘을 드래그 및 위치 좌표를 저장할 수 있습니다.창의 높이에 따라 아이콘이 잘리지 않게 정렬됩니다.바탕.. 2026. 3. 8.

React Native에서 OpenTelemetry 사용하기, OTEL Web SDK로 구현해보자 📒 React Native에서 OpenTelemetry 사용하기, OTEL Web SDK로 구현해보자React Native 앱의 옵저빌리티(Observability)를 높이고 싶어서 OpenTelemetry(OTEL)를 찾아봤습니다. 문서도 읽고, SDK 목록도 살펴봤는데, 없습니다. RN 전용 SDK가. Web SDK는 있고, Node SDK는 있고, iOS/Android 네이티브 SDK는 있는데, React Native를 위한 JavaScript SDK는 공식적으로 존재하지 않습니다. 그래서 Web SDK를 RN 위에서 돌리기로 했습니다. 생각보다 잘 됩니다. 단, metro 번들러가 협조하기 전까지는요. 환경 정보React Native 0.80.2@opentelemetry/sdk-trace-web.. 2026. 3. 4.

React Native Hermes를 적용했는데 Codepush 받고 왜 느려지지? 📒 Hermes를 적용했는데 Codepush 받고 왜 느려지지?React Native 앱에 Hermes를 적용하고 나서 콜드 스타트(cold start)가 확실히 빨라졌다고 느꼈는데, CodePush 업데이트를 받고 나서 뭔가 예전처럼 느려진 것 같은 기분이 드는 겁니다. 플라시보인가 싶었지만 그냥 넘기기엔 찜찜해서 바로 파봤습니다. 📌 Hermes가 왜 빠른가Hermes 엔진은 Meta에서 React Native를 위해 만든 JavaScript 엔진입니다. 기존 JavaScriptCore(JSC)와의 결정적인 차이는 빌드 시점에 JS 코드를 미리 바이트코드(Bytecode)로 컴파일해 둔다는 겁니다. 앱 실행 시 JS 파싱·컴파일 과정을 건너뛰고 바로 바이트코드를 실행하기 때문에 콜드 스타트가 빨라.. 2026. 2. 25.

2025년 5월 ~ 9월 회고, 내용증명 / FECONF 2025 / CloudFlare 세미나 📒 2025년 5월 ~ 9월 회고, 내용증명 / 컨퍼런스와 세미나📌 사이드 프로젝트와 내용증명어느 날....평소 루틴처럼 메일을 열었는데 허위사실 어쩌구 저쩌구 하는 메일 제목이 눈에 들어왔습니다.그냥 국가 공식 공공 API 데이터 긁어와서 만든 사이드 프로젝트인데, 냅다 내용증명 보낸다고 하니 손발이 벌벌 떨리지 않을 수 없습니다. 본인들이 제출한 데이터가 허위사실이라 하니 어이가 없었지만, 한낱 개인이 회사를 상대로 어찌 하겠습니까.납짝 기어야죠. 퇴근 후 바로 약속이 있었지만 괜히 피곤한 일 만들기는 싫어, 횟집에서 서버에 필터링 기능을 추가한 뒤 지금은 웃으며 말할 수 있는 해프닝이 되었답니다. 📌 FECONF 2025국내에서 진행하는 프론트엔드 관련 컨퍼런스 중 가장 규모가 큰 FECON.. 2025. 9. 13.

판민정음, 판교 사투리 번역기 📒 판민정음, 판교 사투리 번역기평일에 별 생각 없이 있다가, 이 사진을 보고야 말았습니다. 일상적인 언어들을 판교 사투리로 베베꼬은 말과 선민 의식이 느껴지는 듯한 답장까지. 너무 골때리고 웃겨서 한참동안 여운을 느끼다가, 이거 번역기로 만들면 재미있겠다는 생각이 스쳤습니다. 그 주말 바로 노트북을 챙겨 스터디 카페로 간 뒤, 예전에 만들어놨던 안성재 GPT를 뜯어 고쳐 새롭게 만들었습니다. 📌 판민정음https://panmin.vercel.app/ 판민정음:판교 사투리 번역기판교 사투리 번역기 판민정음과 함께라면 스타트업도 걱정 없어!panmin.vercel.app🔎 판교 사투리 -> 한국어어려운 판교 사투리도 척척 쉽게 이해할 수 있도록 일상어로 변환 해주는 기능!🔎 한국어 -> 판교 사투리.. 2025. 6. 29.

React Native Lazy Loading으로 앱 시작 속도 개선하기 📒 React Native Lazy Loading으로 앱 시작 속도 개선하기이번에 회사에서 앱 성능 개선 작업 업무를 하며 시작 속도 개선을 위해 Lazy Loading을 도입했습니다.그 과정에서 앱 시작 속도를 2~3배 개선하는 성과도 있었고, 이걸 측정하고 분석하느라 RN 구동 방식에 대해서도 깊게 파악하며 이리저리 공부가 많이 된 것 같습니다.그럼 react native에서의 Lazy Loading과 적용을 통한 속도 개선, 측정 방식까지 소개드립니다.📌 React Native 앱이 실행될 때React Native로 빌드한 앱은 기본적으로 내부에 단일 번들 파일이 존재합니다.이 번들 파일은 앱을 실행할 때 entry point인 index.js에서부터 모든 import를 타고 들어가 전체 JS .. 2025. 5. 19.

react-native-performance로 앱 시작 시간 측정하기 📒 react-native-performance로 앱 시작 시간 측정하기이번에 회사에서 앱 성능 개선 업무를 맡아 정말 열심히 했습니다.그 과정에서 앱 시작 속도도 정말 크게 개선되었는데, 수치로 보여주지 않으면 그저 감일뿐이겠죠? 수치화를 하려고 프로파일링 도구들을 많이 찾아보다 react-native-performance라는 패키지를 선택하게 되었습니다.가장 주요한 이유는 Cold Start 시 앱 번들 로드 시간을 측정할 수 있기 때문입니다.그럼 세팅부터 초기 번들 로드 시간 + 초기 화면 렌더링 시간 프로파일링까지 소개드립니다.📌 설치https://shopify.github.io/react-native-performance/$ yarn add @shopify/react-native-perfor.. 2025. 5. 17.

2025년 1월 ~ 4월 회고 📒 2025년 1월 ~ 4월 회고📌 새 회사생활새 회사에 입사한 지 얼마 안돼서 스쿼드에 참여하며 스프린트를 진행하다 보니 어느새 수습기간이 끝났다.초반엔 새로운 업무 방식과 코드베이스에 적응하느라 쉽지 않았지만, 역시 하다 보니 금세 적응이 된다.그러나 아직도 앱 배포할 때는 손발이 벌벌떨린다. 과연 언제쯤 배포에 무감각해질지 기대된다. 📌 오픈프차 업데이트 오픈프차 | 프랜차이즈 정보분석공정거래위원회의 가맹사업 정보공개서를 기반으로 창업 전, 프랜차이즈 본사 정보, 브랜드의 매출, 가맹점 수, 인테리어 금액, 창업 비용 정보를 편리하게 확인할 수 있습니다.www.openfranchise.kr취업하기 전 사이드 프로젝트로 개발했던 오픈프차.문득 생각나서 확인한 지표에서 점점 방문자 수가 늘어나는 .. 2025. 5. 3.

react-native 버전 업그레이드 가이드, v0.69 to v0.78 📒 react-native 버전 업그레이드 가이드, v0.69 to v0.78최근에 현재 개발하는 리액트 네이티브 앱의 버전을 업그레이드하는 업무를 맡게 되었습니다.리액트 네이티브 버전 업은 평소에도 악명이 자자해서 지래 겁부터 먹었지만, 생각보다 일정을 넉넉하게 받게 되어 차근차근 버전을 올리다 보니 0.69 버전에서 0.78 버전까지 올리게 되었습니다. 이왕 하는 거 기존에 호환성 문제 때문에 런타임 에러를 유발하던 Hermes 엔진도 enable 한 뒤 어느 정도 런타임 에러도 잡았겠다, 마냥 두려워했던 RN 버전 업그레이드에 대한 가이드를 작성해보려 합니다. 📌 전략 세우기RN 버전을 올린다는 것은 바뀐 네이티브 코드들을 반영하고 패키지 버전을 맞춰주는 게 알파이자 오메가인 작업입니다.제가 지.. 2025. 4. 19.

이전 1 2 3 4 ··· 25 다음

티스토리툴바