개발로그

원본: https://vercel.com/blog/latency-numbers-every-web-developer-should-know 웹 앱에서 웹 페이지 로드 시간과 사용자 액션에 대한 반응성은 사용자 만족도의 주요 요인이며, 두 가지 모두 네트워크 대기 시간에 의해 지배되는 경우가 많습니다.지연 시간 자체는 사용자가 인터넷에 연결(와이파이, LTE, 5G)하고, 사용자가 연결하고 있는 서버의 거리와 그 사이의 네트워크 품질의 함수입니다.지연 시간 숫자는 그 자체로 낮게 보일 수 있지만 빠르게 결합됩니다. 예를 들어, 300ms 링크의 3 depth 네트워크 폭포는 총 지연 시간 900ms로 이어집니다. 리액트 서버 컴포넌트와 같은 기술은 네트워크 폭포를 동일한 요청 패턴이 100배 더 빠를 수 있는..

최근 팀 내에서 e2e 테스트를 도입하기 위해 초기 컨벤션을 적용하는 작업을 진행하였다. 대부분 테스트 도구에서 제시하는 문법이나 구조를 따르지만 이 외에 팀원들과 논의하여 적용한 부분들도 있어서 소개해보고자 한다. Cypress vs Playwright 처음에는 기존에 cypress로 작성된 e2e 코드가 있었기 때문에 이것을 정상화시키는 동시에 커버리지를 올린다는 생각으로 그대로 진행했었다. 그러나 생각보다 Cypress 실행속도가 느렸고, 다른 팀에서도 Playwright를 대부분 도입했다고 하여 재검토 요청을 받아 Playwright를 처음으로 사용해보았다. 솔직히 여기저기서 많이 언급하는 실행속도의 경우는 개인적으로 엄청 큰 차이는 못느꼈다. 그리고 여러 브라우저 지원의 경우도 우리는 기존에도 ..

팀원 중 한명이 RN 프로젝트에 새로운 폰트를 추가했고 나는 그걸 pull 받았다. 처음엔 빌드는 잘 됐는데 unrecognized font family 에러가 떴다. 대충 이렇게 생긴 에러다. 그래서 폰트를 추가했던 그 팀원에게 물어봤더니 이 명령어를 치면 된다고 했다. npx react-native link --verbose 이거 폰트 관련 에러 검색할 때도 나왔던거 같은데 아직 정확히 react-native link가 뭐하는 앤지는 모르겠음... 아무튼 저거 치니까 처음에 다시 리로드 되서 잘 나오나 싶더니 로그인 버튼 누르니까 앱이 죽어버림. 다시 빌드 시도하니까 실패. 그 이후로 pod install, pod update, pod install --repo-update 등등 다해보고 node_m..

배경 우리 서비스에 사용되는 sms 발송 업체를 기존 비즈엠(웹에서 발송하는 카카오톡 및 SMS 기능 제공 서비스 업체)에서 ncloud(NAVER에서 운영하는 각종 클라우드 서비스)로 변경하기로 했다. 이를 위해 API 사용법을 알아보고 스웨거(Swagger - API 스펙 확인 및 테스트 가능한 환경)에서 테스트까지 수월하게 마쳤다. 그런데 실제 코드 단에서 테스트를 해보니 계속 401 Unauthorized 에러가 났다. 이유는 헤더에 전송하는 암호화한 데이터가 잘못되었던 것인데, 이를 해결하기 위해 암호화 알고리즘에 대해 많이 찾아보게 되었고 그 과정에서 알게 된 것들과 에러 해결 과정을 정리해 보려고 한다. 암호화 알고리즘? 암호화는 사실 깊게 파면 끝도 없을 주제일 것이다. 큰 분류만 보자면 ..

토이프로젝트를 진행하면서 AWS로 EC2 인스턴스를 만들어보고 서버를 올려보고 있다. 워낙 많은 자료들이 있어서 찾아보면서 따라하기는 어렵지 않았지만 내가 모르는게 너무 많아서 일일히 찾아봐야 하는게 번거롭긴 했다... 원격 서버 접속 먼저 인스턴스를 만들면서 받은 key로 인스턴스에 접속하려면 터미널을 열어 key가 있는 폴더로 가서 아래와 같이 입력한다. chmod 400 .pem ssh -i ".pem" ubunutu@ 안에는 자신의 파일명과 IP 주소에 맞게 알아서 입력하면 된다. 여기서 chmod란 리눅스 명령어로 change mod 라는 뜻으로 파일의 접근 권한을 변경하는 명령어다. chmod [레퍼런스] [연산자] [변경할 접근권한] [파일] 위와 같이 옵션을 지정할 수 있는데 [레퍼런스] ..

Promise 객체가 가진 핸들러들 .then(), .catch(), .finally() 는 모두 비동기적으로 실행된다. console.log('Start!'); Promise.resolve('Promise!').then(res => console.log(res)); console.log('End!'); // 아래와 같이 출력 // Start! // End! // Promise! 위 코드를 보면 Promise를 바로 resolve 해주어도 then이 실행되는 것은 동기 코드보다 나중이다. 왜 그럴까? 마이크로태스크(Microtasks)와 매크로태스크(Macrotasks) 이 때 등장하는 것이 바로 마이크로태스크다. ECMA에선 위와 같은 비동기 처리를 위해 PromiseJobs라는 내부 큐를 명시하는데 ..

Promise에는 5가지 정적 메서드가 있다. Promise.all Promise.allSettled Promise.race Promise.resolve Promise.reject 이 중 가장 유용하고 많이 쓰이는 것은 Promise.all 일 것이다. 그래서 공부겸 직접 구현해보았다. Promise.all 직접 구현해보기 function all(iterable = []) { if (!iterable || !iterable.length) return Promise.resolve([]); return new Promise((resolve, reject) => { const result = iterable.map(() => ({ state: 'pending', value: undefined })); iter..

참여 동기 우아한 테크러닝에 참여하면서 많은 사람들이 정말 열정적으로 공부하고 있구나를 알게 되었다. 초반에는 사람들 블로그 염탐도 많이 갔었다. 그러다가 몇몇분들이 스터디 모집글을 올리는걸 보고 자극받아서 여기저기 참여하게 되었는데 클린코드 스터디도 그 중 하나다. 사실 이 책은 여기저기서 추천하는 글들을 많이 보았는데 집에 사놓고 안 읽은 책만 수두룩했기 때문에 도전할 엄두가 안났었다. 그런데 마침 이 책을 가지고 스터디를 한다길래 잘됐다 싶어서 참여했다. 참여 과정 책은 회사 도서구매비로 결재를 올렸는데 팀장님이 자기 집에 이 책 두권이나 있다면서 결재올린건 회사에 두고 한 권을 나에게 공짜로 주셨다ㅎㅎ (팀장님도 다 안읽으셨다고...) 나는 사실 스터디 내내 거의 청강 느낌으로 참여했다. 스터디 ..