번들러를 Webpack만 사용하다가 Vite로 최근 넘어오면서 퍼포먼스 차이를 확연하게 체감했다. 번들러에 대해서 따로 공부해보지 않았기에 이참에 정리해 보고 vite가 왜 빠른지 어떻게 번들링 되는지 정리하고자 한다. 본 글에서는 Webpack에 관한 디테일한 건 다루지 않고 단순 비교정도로 작성한다. 번들러란? 우선 번들러가 뭔지 알아보기 전에 번들러가 하는 일을 하지 않았을 때 문제부터 짚어보자. 중복네이밍의 Issue. 과거의 Web은 규모가 그렇게 크지 않았다. 그렇기에 적은 인원이 작업했고 코드 컨벤션이 없거나 지금처럼 버전관리를 하지 않는 상태로 각자의 개성에 맞게 함수나 파일명을 네이밍 했다. 하지만 Web의 규모가 커지게 되면서 문제가 생기기 시작했다. 각각 다른 파일에서 작업이 이루어지..
Recoil이란 React의 전역 상태관리 라이브러리다. 기존 React스러운 상태관리는 단방향으로 이루어져 드릴링을 통해 자식에게 상태를 내려보내줘야 했고 이 때문에 자식요소들 간의 상태공유가 어려웠고, 프로젝트의 규모가 커질수록 드릴링이 깊어지게 되면서 단순히 상태 전달만 하는 불필요한 코드가 발생하고 어디에서 상태가 관리되고 있는지 추적하는데 어려움이 생겼다. 때문에 store개념을 두고 한 곳에서 상태관리가 이루어지는 대안이 생겼고 뒤늦게 React는 상태관리를 위한 contextApi를 제공했다. 하지만 늘 이글의 주제가 Recoil이듯이 contextApi가 만족스럽지는 못했다. 를 앱 최상단에 래핑 해주게 되는데 context를 구독하는 컴포넌트들에게 변화가 감지되면 알려주는 역할이다. 하지..
시작 다량의 이미지를 처리하기 위한 서버를 구현해야 한다. 백엔드가 Node.js로 굴러가서 리사이징 같은 CPU 소모가 큰 작업 때문에 이미지 업로드는 백엔드에 맡기지 않고 람다에 전적으로 의존하기로 했다. 구조 잡기 단순 캡처파일이 아니라 실제로 촬영한 이미지가 스펙상 한 번에 10~20장 정도 업/다운로드를 생각하고 진행했다. 업로드는 어드민에서만 진행하기에 큰 이슈가 없었지만 사용자가 한 번에 10~20장의 이미지를 받아야 하기에 원본제공은 무리라고 생각했다. 그나마 다행인 건 어드민에서만 업로드가 진행될 거라 문제 발생 시 좀 유연하게 대처해도 될 거라 생각했고 어드민에서 업로드는 1일 30회 미만으로 될거같아 ColdStart 환경도 UX를 그렇게 해치지 않을 거라 판단했다. 프론트에서 S3로..
해당 게시글은 node.js환경을 기준으로 작성되었습니다. 시작 작업 중 다중 이미지 업로드를 구현할 일이 생겼다. 한 번에 열 장 정도 업로드 될 걸로 예상하지만 휴대폰으로 찍은 고화질 사진이기에 심하면 한 번에 200MB 정도 업로드 되는 최악의 경우를 대비해야겠다고 생각했다. 백엔드에서 리사이징을 진행하더라도 일단 업로드받아서 처리하는데 싱글스레드인 node.js가 버텨줄지 의문이었고 클러스터를 믿고 의존하고 그러기 싫었다. (사실 몰라서 못 믿는 거지만.) 프론트에서 리사이징 시켜서 업로드해 버릴까 생각도 했지만 좀 더 찾아보기로 했다. 사실 serverless는 니꼴라스같은 유튜버가 혁신이네 뭐네 하면서 강의하는 것만 봤지 실제로 써볼 생각은 안 했다. 서버가 있는데 왜 안 써..? 굳이..? ..
이슈 MUI사용 중 chip을 사용할 일이 생겼다. 수많은 옵션을 구현하기 적합하다고 판단해서 chip를 선택했지만 체크박스나 라디오박스처럼 클릭 시 색상이 변한다던지 구분이 되어야하는데 의외로 지원 안 해준다. 정작 clickable 메서드는 만들어 놓고 지원 안 하는 건 무슨 심보일까. https://mui.com/material-ui/react-chip/ React Chip component - Material UI Chips are compact elements that represent an input, attribute, or action. mui.com 나같이 생각한 사람들 에이 설마 하고 찾아보는데 없다. 나 같은 기능을 원하는 인간들이 종종 보이는데 원하는 답변은 안 나온다. 작성 기간을..
Lottie란 애니메이션을 JSON으로 변환한 파일이다. 디자이너는 Lottie를 통해 애니메이션을 이미지처럼 간단하게 옮길 수 있고 크기를 늘리거나 줄여도 해상도가 변하지 않는 장점이 있다. 개발 측면에서 Lottie란 Adobe 에프터이펙트로 만든 애니메이션 이미지를 가벼운 json 확장자로 export 하여 간단하게 웹 또는 앱(ReactNative)에서 애니메이션 구현을 가능하게 하는 라이브러리다. 결국 귀찮게 애니메이션을 구해오지 않아도 되고 무거운 파일크기를 신경 쓰지 않아도 된다. 또, 오픈소스처럼 무료로 공유되는 생태계가 점차 커지고 있어 디자이너가 없거나 예산 규모가 작은 개발팀에게 단비 같은 존재다. 설치 yarn add react-lottie yarn add -D @types/reac..
API를 만드는 도중 Axios를 통해 POST 하는 과정에서 왜 데이터를 헤더에 다 안 보내고 굳이 Body에 싣어서 날릴까 의문이 들었다. 그냥 헤더에 다 때려박으면 안될까 싶어서 찾아봤다. 아무래도 데이터크기 이슈가 있지 않을까 찾아봤는데 일단 정답은 HTTP 스펙상 헤더의 크기제한은 없다. 하지만 우리가 사용하는 엔진에서 이를 제한하고있다. 엔진에서 제한하는 기본 스펙은 아래와 같다. 아파치 - 8K Nginx - 4K-8K IIS - 8K-16K 톰캣 - 8K – 48K 노드(13) - 16K 엔진별로 헤더 크기를 바꾸거나 일부 엔진은 제한을 풀 수 있는 기능을 제공하지만 제한되지 않은 HTTP 헤더 크기는 서버를 공격에 노출시키고 유기적 트래픽을 제공하는 용량을 감소시킬 수 있기에 추천하지 않..
어쩌다가 AWS 비용이 겁나서 그냥 집에서 남아도는 구형피시로 NAS 겸 API서버를 돌리고 있는데 그럴싸한 모니터링 프로그램이 있으면 좋겠다는 생각이 들었다. 백엔드서버는 그냥 Node.js를 사용하고 서버 자체에서 API서버를 만들고 불필요한 DB연동은 다 빼버렸다. 인터벌을 줘서 일정 시간마다 DB로 쏘고 DB값을 가져다 쓸까 하다가 어차피 혼자 볼 건데 불필요하게 쌓일 거라 생각했다. 하드웨어 개조 시작 주목적은 온도체크 목적이다. 무슨 뜬금없는 소리냐 싶겠지만 커스텀케이스를 만든다고 공간확보가 필요했다. 그래서 CPU에 쿨러도 떼버렸다. (이때 멈췄어야 했다. 뭐든 필요해서 존재하는 거였다.) 그래서 안정성 검증을 빙자한 보험성 온도체크 모니터링이 필요했다. 소프트웨어 개발 Ubuntu에도 Se..
바텀시트란 이 처럼 바닥에서 위로 올라오는 화면을 바텀시트(Bottom Sheet)라고 한다. 본 글에서는 바텀시트를 구현하기위해 라이브러리를 사용할 것이다. 라이브러리 설치 먼저 아래 라이브러리를 설치해주자. yarn add @gorhom/bottom-sheet@^4 공식문서에 따르면 아래 종속된 패키지도 설치해야 한다고 한다. yarn add react-native-reanimated react-native-gesture-handler 이후 babel.config.js파일에 플러그인 맨 뒤에 추가해 준다. 이제 아래 두 태그를 최상단에 넣고 내부에 바텀시트를 선언해주고 사용해주면 된다. 공식문서의 예제에 뒤에 오버레이 스크린의 순서만 살짝 바꿔 자연스럽게 만들어준 코드는 아래와 같다. import R..
회원가입 기능을 구현하다가 문득 본인 인증이 필요했다. 아무래도 1인 1계정 이어야 할 서비스에서는 이메일 인증보다는 문자인증이 좀 더 완성도를 높여 줄것이다. 문자 인증 방식도 은근 종류가 많고 아래로 내려 갈수록 요금이 비싸다. 카카오 알림톡 카카오톡 사용자라면 플러스 친구에게 매일 같이 받는 그 카카오톡 메시지다. SMS 단문 문자 최대 80자 내외 LMS 장문 문자 우리가 문자 보낼 때 80자 넘어가면 전환되는 그 LMS가 맞다. MMS 미디어 문자 이미지나 파일 첨부등이 MMS다. 이번 포스팅에서는 간단하게 인증번호만 발송 할 예정이기에 SMS 인증으로 진행한다. 방식은 다 비슷하거나 같다. 간단하니 걱정말고 10분만 투자하자. COOLSMS에서 API KEY 발급받기 발급 받은 KEY와 SDK..
Merge commit 이란? 협업을 하다 보면 하나의 비중 있는 브랜치를 단독적으로 사용하는 것이 현실적으로 불가능. 그래서 따로 해당 이슈에 맞게 브랜치를 [ex) my-branch] 따와서 해당 이슈에 관한 코드를 작성해야 함. 이후 내 브랜치의 작업 수정본을 기존 브랜치 [ex) master]에 커밋을 합쳐주어야 함. 이 과정을 병합(merge)라고 한다. 내가 수정하고 있는 사이 다른 사람이 코드를 master에 커밋하고 푸시해버렸다면 나의 브랜치와 master가 바라보는 지점이 다르게 돼버린다. 쉽게 말하면 내 브런치가 시대에(?) 뒤처져있다. 객관적으로 바라본다면 아래의 상황처럼 될 것이다. 처리시간이 빨라서 다른 사람이 master 브랜치에 손대기 전이라면 위 그림처럼 충돌 없이 (코드/커..
스포츠와 마찬가지로 어느 분야든 시간에 예민하다. 일반적인 스포츠라면 길어야 0.01초 단위까지 측정한다. 하지만 프로그램은 때에 따라서 ms(1/1000초)단위는 기본이고 ns 단위까지도 따져야하는 경우가 생긴다. JS에서 처음 시간을 측정할 때는 아래와 같은 방법을 사용했다. const MAX = 100_000_0000; console.log("Date.now() 사용"); for(let i = 0; i > ', end - start); } // /////////////////////..
