본문 바로가기

javascript6

bundle-analyzer 이용한 Bundle size 최적화 저는 개인적으로 공부하다가 최적화 이슈를 발견하게 되었습니다. 그러다 보니 어떻게 성능을 잘 개선하면 되는지 연구를 계속하게 되었습니다. 그러다 보니 저는 bundle size를 최적화를 하여 조금더 필요없는 모듈을 정리 해야되겠다는 마음이 들어 모듈을 시각적으로 표현을 도와주는 bundle-analyzer 라는 것을 발견하였습니다. bundle-analyzer란? 우선 bundle-analyzer을 들어가기 앞서 bundle과 모듈이라는 용어는 미리 다 알고있다는 상태에서 말씀드리겠습니다. 잘 모르시겠다면, 각각 단어에 링크를 연결 해두겠습니다. bundle-analyzer는 정확히 프론트엔드 개발에서 사용하는 도구이며, 웹 어플리케이션에서 번들 사이즈를 분석하여 시각적으로 표현을 해줍니다. 번들안에서.. 2024. 1. 28.
React Native Navigation Navtigation 우선 어플의 Navigation을 이해하기 앞서 단어의 뜻을 이해하면, 항해와 운항을 의미한다. 말그대로 어플개발에 앞서 Navigtion 기능은 Application 쪽의 화면인 Activity 구성하며 화면의 흐름을 구성하는 요소라고 합니다. 위에 이미지는 어플이 흐름도의 이해를 위해서 붙여두었으며 이런식으로 페이지가 전환이 된다는 느낌을 주었습니다. 이미지를 보시면 어플의 Activity에서 다른 Activity로 넘어갈 수 있도록 흐름의 구조를 세팅하며, 페이지 전환을 돕도록 하는 기능이라고 보시면 됩니다. RN에서는 신기하게 RN 공식 홈페이지에서 이 Navigation을 지원하는 것이 아니라 다른 오픈소스를 통해서 사용을 합니다. 이야기를 듣기로는 RN에서는 자신들이 유지.. 2023. 11. 11.
Expo 프레임워크 자체 어플개발을 하면서 네이티브로 개발하거나 웹앱, 하이브리드 앱등 여러가지 방식 중 어떤 것을 결정하면 좋을지 고민을 하다가 expo 프레임워크를 이용하기로 하였습니다. expo프레임워크는 하이브리드 앱으로 expo로 개발했을시 조금더 쉽게 ios 어플이나, android 어플 개발하기가 쉬워진다는 이야기가 있었습니다. 그래서 expo를 결정하게 되었고, expo에 대해 깊이 정리를 해볼예정입니다. Expo Expo 프레임워크란 React Native를 조금 쉽게 만들 수 있게 도와주는 프레임워크입니다. RN(React Native)도 똑같이 하이브리드 앱으로 작동하며, RN or Expo 개발시 ios와 android어플을 더 쉽게 제작을 할수있습니다. 원래는 네이티브로 개발 할 때는 android와.. 2023. 11. 4.
VideoJS VideoJS 란? 저는 개발자로서 유튜브나 트위치 서비스를 운영하면서 어떻게 컨트롤을 제어하며, 미디어 컨트롤을 어떻게 제어하는지 궁금한 경우가 많았습니다. 그런데 마침 미디어 서비스를 개발하는 계기가 생겨서 어떻게 제작을 하면 되는지 검색을 하게 되었습니다. 미디어 라이브러리에는 Viblast, VideoJS, JW Player, Radiant Media Player, THEOplayer, Bitmovin, Shaka 등이 됩니다. 이렇게 라이브러리가 많은 것 중 제일 익숙하고 오픈소스로 유명한 VideoJS를 선택하게 되었습니다. VideoJS 는 웹사이트에서 미디어 서비스 기능을 사용하기 위한 Javascript or CSS 로 이루어진 라이브러리입니다. MP4 및 WebM과 같은 파일 형식을 지.. 2023. 10. 28.
배열 평탄화 작업 [ flat, flatMap ] - Javascript 2019년 1년차때 회사에서 배열을 풀어서 작업하는 과정이고 그때 그냥 map 함수와 foreach 등 여러가지 함수를 사용하며, 배열을 풀어내는 작업을 하다가 불편하여 한번에 할 방법이 없는가? 궁금해 했던 시기였다. ES10이 안정화 되기 전에 시기였다. const list = [1,3,4,5,[2,5,2]]; const array = [] list.forEach(v=>{ Array.isArray(v)? array.push(...v):array.push(v) }); console.log(array) 위에 해당하는 코드처럼 만들었다. 위에 코드에서 보면 concat() 을 이용한 방법도 있었지만, 나는 push를 이용하여 배열을 합쳤다. 위에 리스트가 [1,3,4,5,[2,5,2]] 였던 값이 code.. 2023. 9. 30.
Blob 대해서 브라우저안에서 파일과 이미지 데이터를 좀더 쉽게 다루는 방법이 없을까 하다가 Blob를 알게되어서 정리를 해볼려고합니다. 우선 Blob의 약자로 Binary Large Object라는 의미로 Binary 형태로 큰 객체를 저장할 것이라는 것을 추측을 할수있습니다. Blob은 데이터베이스에 저장되는 이진데이터의 모임으로 사용되는 부분으로 알고있는데, 데이터베이스 시스템이 정의되지 않았을때 데이터 기술을 위해서 도입이 되었다고 이야기를 합니다. 그리고 HTML5에 들어서면서 자바스크립트를 이용해서 파일을 다루어야 할 필요성이 생겨 File API 명세에 정의되었습니다. 밑에 사진을 보시면 Blob객체는 이러한 구조로 이루어져있는데 javascript 와 함께 설명을 해보겠습니다. 위에서 말하는 blob에 해.. 2020. 11. 20.