개발 배경설명사이드 프로젝트로 데이팅앱을 개발 중.네이티브 앱에 대한 지식은 없어서 익숙한 리액트를 사용하여 React Native으로 하이브리드 앱 선택. 일부 기능 웹뷰를 띄워 앱과 웹뷰 혼합형태로 제작. 처음 사용해보는 RN, 웹소켓 통신 기술 --> 내가 얼마나 빠르게 새로운 기능 구현을 해볼수있을까 셀프 챌린지백엔드와 협력해서 대략 이틀만에 기능 구현(하루당 3시간?정도 소모) 기술 스택App: React Native, Expo, TypeScript, React-native-paper (빠른 생산성을 위해 UI 컴포넌트 직접구현 X)Web: Next v14, React v18, TypeScript 채팅 기능을 위해 소켓서버(redis)을 올리고 클라이언트에서 로그인인증 후 소켓연결.newMess..
들어가며최근 외주를 통해 프리랜서로 업무를 맡게 되었습니다. 마침 성능 최적화에 대해 공부중이었고 이를 적용해서 사이트를 분석 및 개선해볼 수 있었습니다.환경Next.js v12.3 Page routerReact.js v18.2.0Page Speed Insight와 LightHouse를 통해 확인하며 개발했고, 최종적인 느린 4G 네트워크의 모바일 환경에서 성능 지표 점수를 약 52%를 개선하였습니다. 기존 38점이던 지표에서 58점으로 개선하여 나쁨에서 개선 필요 단계로 상승할 수 있었습니다.아직 부족한 부분이 많지만, 개선 작업의 효과가 있어 공부한 내용을 Next.js 환경에 적용한 내용을 공유하려고 합니다.Page Speed Insight에서는 모바일 환경을 기본적으로 느린 4G 네트워크로 제한하..
웹 성능이 중요한 이유웹 성능은 브라우저 주소창에 도메인을 입력하고, 실제로 해당 사이트가 로딩되어 내용을 볼 수 있을 때까지의 시간. 즉 웹 로딩 시간을 의미한다.따라서, 웹 성능이 좋다는 것은 웹 로딩 시간이 짧아 빠르게 콘텐츠를 볼 수 있다는 것을 의미하고, 성능이 좋지 않다면 사용자가 만족할 수 없어 기다리지 않고 이탈할 수 있는 원인이 된다. 실제로 월마트 웹사이트에서 조사한 결과, 평균 로딩 시간을 1초 줄이면 구매율이 약 2% 증가한다는 통계가 있다. 로딩이 0-2초 내에 완료되었을 때 구매율이 가장 높았고, 그 이후부터 점점 떨어지게 되었다.직접적으로 물건을 판매하는 웹 서비스가 아니더라도, 기업 이미지에 부정적 영향을 줄 수 있고 선입견을 갖게할 수 있다. 그렇다면, 사용자들이 이탈하지 ..
이거 누가설치했어..?JS로 개발을 할 때, 여러 패키지들을 사용해서 개발하게 됩니다. 이때 패키지들을 다운로드하고, 버전을 관리하고, 수많은 패키지들의 복잡한 의존성을 편리하게 관리하기 위해 패키지 매니저를 사용하게 됩니다.기능 개발에 초점을 맞추어 구성하고만 넘어갔던 패키지 매니징에 대해 알아보게 되는 계기가 생겼습니다.잘 사용하던 라이브러리가 알고보니 package.json에 없었고, 설치한적이 없는 라이브러리였던 것이었습니다.이 이슈는 사용중이던 Storybook을 v8로 업데이트하면서 yarn v1에서 최신 버전으로 업데이트를 권장했기 때문에, yarn classic(v1)에서 yarn berry로 업그레이드하면서 발생하였습니다.yarn의 문제점 중 하나이던 유령 의존성에 의해 설치되었던 라이브..
Vanilla-extract만든 design system의 번들 사이즈가 너무 커요!CSS-in-TS 와 zero-runtime css 컨셉을 채택한 vanilla-extract css(이하 VE로 줄임!)로 NPM 라이브러리를 만들어 배포하였다. 사내 디자인 시스템을 만든 작업이었다. VE는 제로 런타임을 위해서 빌드 타임에 코드로 정의한 css와 타입정의를 뽑아주게 된다. 이 css와 타입을 라이브러리에 같이 shipping하도록 제작했다. 처음 라이브러리를 만들때에는 없는것보단 낫겠지 하는 심정으로 이것저것 필요해보이는 디자인 토큰과 기능들을 넣었다. 하지만 결론적으로 이런 접근 방식으로 큰 코를 다치게 되는데... 설정 살펴보기어느날 빌드를 하다가 바벨의 불평을 마주치게 되었다.\[BABEL\] ..
