LasBe's Upgrade

최신 글

• 

  Shapic - SNS 이미지 리사이즈 최적화 윈도우, 맥 데스크톱 앱 ⚡️ Shapic - SNS 이미지 리사이즈 최적화 윈도우, 맥 데스크톱 앱이번에 사이드 프로젝트로 이미지 처리 데스크톱 앱을 만들어 봤습니다. 사진 취미를 갖고 있으면서, 인스타에 사진을 올릴 때 항상 갖고 있던 페인 포인트가 있었습니다. 올리려는 사진 파일 자체는 고화소인데, 이걸 그대로 인스타에 올려버리면 무자비한 압축으로 인해 계조 깨짐, 화질 뭉개짐, 디테일 무너짐 등등 사진이 망가져버리는 문제가 발생했습니다. 그렇다고 보정 다 끝난 사진을 고작 리사이즈 하겠다고 포토샵을 키기에는 너무나 귀찮고 번거로워서, 클로드도 있겠다 그냥 뚝딱 만들어 봤습니다. 📌 다운로드https://github.com/devlasbe/shapic GitHub - devlasbe/shapic: SNS 업로드용 사진 .. 댓글 0 2026.04.15

• 

  React Native, Web 크로스 플랫폼 디자인 시스템 Storybook 구축하기 📒 React Native, Web 크로스 플랫폼 디자인 시스템 Storybook 구축하기React Native로 앱을 만들고, 같은 디자인을 웹앱에도 적용해야 하는 상황이 반복 되어, 팀과 함께 react-native-web 기반의 크로스 플랫폼 디자인 시스템을 만들었습니다. 컴포넌트는 잘 나왔는데, 문제가 하나 있었습니다. 22개 컴포넌트가 전부 Compound Component(합성 컴포넌트) 패턴이라 "어떻게 조합해서 쓰는 건데?"라는 질문에 코드만 보여주기엔 한계가 있었습니다. 결국 Storybook을 직접 셋업했고, 그 과정에서 webpack 설정과 꽤 오래 싸웠습니다. 그 경험을 공유해보려 합니다. 환경 정보React Native, ExpoStorybook 8.6.4 (@storybook.. 댓글 0 2026.04.11

• 

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

• 

  React Native에서 OpenTelemetry 사용하기, OTEL Web SDK로 구현해보자 GitHub - devlasbe/react-native-otel-example: React Native 애플리케이션 OpenTelemetry 적용 템플릿React Native 애플리케이션 OpenTelemetry 적용 템플릿. Contribute to devlasbe/react-native-otel-example development by creating an account on GitHub.github.com📒 React Native에서 OpenTelemetry 사용하기, OTEL Web SDK로 구현해보자React Native 앱의 옵저빌리티(Observability)를 높이고 싶어서 OpenTelemetry(OTEL)를 찾아봤습니다. 문서도 읽고, SDK 목록도 살펴봤는데, 없습니다. RN 전용 .. 댓글 0 2026.03.04

• 

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

• 

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

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, Web 크로스 플랫폼 디자인 시스템 Storybook 구축하기 📒 React Native, Web 크로스 플랫폼 디자인 시스템 Storybook 구축하기React Native로 앱을 만들고, 같은 디자인을 웹앱에도 적용해야 하는 상황이 반복 되어, 팀과 함께 react-native-web 기반의 크로스 플랫폼 디자인 시스템을 만들었습니다. 컴포넌트는 잘 나왔는데, 문제가 하나 있었습니다. 22개 컴포넌트가 전부 Compound Component(합성 컴포넌트) 패턴이라 "어떻게 조합해서 쓰는 건데?"라는 질문에 코드만 보여주기엔 한계가 있었습니다. 결국 Storybook을 직접 셋업했고, 그 과정에서 webpack 설정과 꽤 오래 싸웠습니다. 그 경험을 공유해보려 합니다. 환경 정보React Native, ExpoStorybook 8.6.4 (@storybook.. 2026.04.11

• 

  React Native에서 OpenTelemetry 사용하기, OTEL Web SDK로 구현해보자 GitHub - devlasbe/react-native-otel-example: React Native 애플리케이션 OpenTelemetry 적용 템플릿React Native 애플리케이션 OpenTelemetry 적용 템플릿. Contribute to devlasbe/react-native-otel-example development by creating an account on GitHub.github.com📒 React Native에서 OpenTelemetry 사용하기, OTEL Web SDK로 구현해보자React Native 앱의 옵저빌리티(Observability)를 높이고 싶어서 OpenTelemetry(OTEL)를 찾아봤습니다. 문서도 읽고, SDK 목록도 살펴봤는데, 없습니다. RN 전용 .. 2026.03.04

• 

  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

• 

  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