LasBe's Upgrade

최신 글

• 

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

• 

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

• 

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

• 

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

React

• 

  Github-Actions Playwright Test Report 결과 PR Commnet로 남기기 📒 Github-Actions Playwright Test Report 결과 PR Commnet로 남기기Github Actions 파이프라인에서 Playwright로 E2E 테스트를 진행하고, 테스트 결과 및 소요 시간을 Pull Request Comment로 남기는 방법을 소개합니다. 📌 Playwright Report output 설정playwright.config.ts 파일에서 테스트 결과 report를 다음과 같이 설정해 주었습니다.export default defineConfig({ ... reporter: process.env.CI ? [["json", { outputFile: "results.json" }]] : "line", ...});Github Action 환경에서 돌아갈 때는.. 2024.12.01

• 

  [NextJS, SEO] AppRouter Dynamic Sitemap.xml 생성하기 📒 [NextJS, SEO] AppRouter Dynamic Sitemap.xml 생성하기검색 엔진 최적화(SEO)에서 중요한 요소로 사용되는 사이트맵은, 웹사이트의 페이지와 콘텐츠를 구조적으로 나열한 파일로, 검색 엔진과 사용자에게 웹사이트의 구조와 페이지 간 관계를 명확히 전달하는 역할을 합니다. 이번 프로젝트에서 각 프렌차이즈 브랜드마다 사이트맵을 생성하여 검색 결과에 걸리게 하기 위해 사용해봤습니다. 이번엔 NextJS AppRouter에서 사이트맵을 동적으로 생성하는 방법에 대해 소개합니다. 📌 sitemap.xml Route Handler 폴더 구조 잡기app ㄴ sitemap.xml ㄴ route.ts위와 같이 폴더 구조를 잡아주어 https://xxx.com/sitemap.xml로.. 2024.11.22

• 

  [NextJS, SEO] AppRouter Dynamic Metadata 생성하기 📒 [NextJS, SEO] AppRouter Dynamic Metadata 생성하기동적인 메타데이터를 사용하면 페이지마다 맞춤화된 메타 정보를 제공할 수 있습니다. 이를 통해 검색 엔진이 페이지의 목적과 내용을 더 정확히 이해할 수 있어 SEO를 향상시킬 수 있고,example.com/post/123와 example.com/post/456처럼 같은 페이지여도 독립적으로 색인될 가능성이 증가합니다. 📌 정적 메타데이터 생성NextJS에서 정적 메타데이터를 생성하는 방법은 다음과 같습니다.import type { Metadata } from 'next' export const metadata: Metadata = { title: '...', description: '...',} export defa.. 2024.11.21

React Native

• 

  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.05.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.05.17

• 

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

• 

  package.json scripts의 생명주기 스크립트, NPM LifeCycle Hook 📒 package.json scripts의 생명주기 스크립트, NPM LifeCycle Hook이번에 이직을 하게 되어 기존 코드를 이리저리 파악해 봤습니다.리드분과 Q&A를 하던 중 package.json scripts의 생명주기에 대한 이야기를 스치듯 들었고, 궁금해서 자세히 찾아보게 되었습니다. 📌 package.json의 scripts"scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint"},위는 next.js에서 흔히 보던 스크립트 필드입니다.해당 스크립트를 실행시키기 위해 사용하는 패키지 매니저에 따라 npm run dev / yarn dev / pnpm dev와 같.. 2024.12.30

• 

  지금 당장 pnpm으로 넘어가야 하는 이유 📒 지금 당장 pnpm으로 넘어가야 하는 이유 안전빵이란 이유로 계속해서 npm을 고집해 오다 최근에 pnpm으로 넘어갔습니다. 마이그레이션을 마친 지금 생각해보면 "왜 이제야 넘어갔을까"라고 생각이 됩니다. 아직 npm과 classic yarn을 사용하시는 분들께 npm의 단점부터 pnpm의 장점, 마이그레이션, 사용법까지 전부 소개합니다. 📌 pnpm이란? pnpm은 Performant Node Package Manager의 약자로, 기존 npm의 단점을 보완하기 위해 탄생한 패키지 매니저입니다. 사내에서 기존부터 npm을 사용했었는데, 시간이 지날수록 부각되는 단점들에 의해 패키지 매니저 변경을 결정했습니다. 현존하는 여러 패키지 매니저 중 고민 끝에 pnpm을 사용하기로 했는데요. pnpm을 선택.. 2024.04.10

• 

  [Javascript/Typescript] 논리 연산자 (‘&&’, ‘||’), nullish 병합 연산자 (‘??’) ⚡ 논리 연산자 ‘&&’, ‘||’ 📌 단축평가 console.log("aaa" || "bbb") // "aaa" console.log("aaa" && "bbb") // "bbb" 논리 연산자는 왼쪽부터 오른쪽으로 평가가 이루어지는데, 중간에 평가 결과가 나오면 형 변환 없이 피연산자를 그대로 반환합니다. 즉, 논리적으로 값이 참인지 거짓인지 판단만 하고, 연산자에 따라 값을 타입 그대로 반환합니다. console.log(true && "aaa") // "aaa" console.log(false && "aaa") // false &&(AND) 연산자의 경우 앞선 값이 거짓이면 바로 반환, 참이면 뒤따른 값을 반환합니다. console.log(true || "aaa") // true console.log(.. 2023.01.10

회고

• 

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

• 

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

• 

  2년 차 주니어 프론트엔드 개발자 이직 후기 📒 2년 차 주니어 프론트엔드 개발자 이직 후기24년 6월 말에 퇴사.여행, 휴식, 공부를 하며 지내다 10월부터 취업 준비를 시작.12월에 이직 성공까지의 일들과 느낀 점을 회고해 봅니다. 📌 타임라인🔎 24.07 ~ 24.09, 퇴사부터 이직 준비 전출근의 압박도 사라졌고, 아직 도전은 해보지 않았기에 이직은 손쉽게 할 수 있을 거란 오묘한 가능성에 취해 살았습니다.거기에 첫 해외여행도 가보며 매일매일이 행복이었던 시간.그러나 아주 조금씩 덮쳐오는 취업의 압박에 조금씩 공부하며 휴식이 계속되는 나날들.그래도 어느정도 준비는 해놓았기에 여유는 있어, 이력서는 넣지 않고 하고 싶은 것만 하고 지냈습니다. 🔎 24.10 ~ 24.12, 이직 준비와 성공좀 쉬다보니 이제는 불안하기도 하고 일이 하고 .. 2025.01.07