하리하링웹

개요브라우저의 Javascript 엔진은 단일 스레드로 동작한다. 즉 Javascript는 하나의 스레드에서 모든 로직을 순차적으로 실행한다. 여기에는 UI 업데이트 작업도 포함되어있으며 스레드가 하나이기에 UI 업데이트 작업이 있더라도 앞에 다른 작업이 있다면 UI 업데이트가 중단되는 문제가 생기게 된다. React에서는 이러한 UI 업데이트 작업을 최적화기위해 Fiber라는 개념을 도입하였다. Fiber구조 에서 가장 중요한 키워드는 동시성 이며 Fiber는 동시성 스케쥴링을 통해 UI 업데이트 작업에 우선순위를 부여하여 더 높은 우선순위의 경우 먼저 처리해주는 방식으로 동작하도록 만들어주는 역할을 한다.이로 인해 javascript의 UI 업데이트 작업이 더 효율적으로 동작하게 된다.Fiber 알고..

AWS Lake Formation조직이 커지면 데이터가 파편화되어 저장되기때문에 분석 업무가 어려워진다 이를 해결하는 방법이 바로 데이터 레이크이다.데이터 레이크는 다양한 구조의 데이터를 수집 및 저장하는 중앙화 데이터베이스이다. 데이터 레이크에 데이터 저장 시 데이터 구조화, 정렬, 복제 등의 작업을 할 필요가 없으며, 데이터 레이크에 있는 그대로 검색, 분석, 시각화, 상관 관계 분석 작업 수행이 가능하다.AWS Lake Formation은 AWS 또는 온프레미스 어디에 있는 데이터여도 수집, 분석할 수 있는 데이터 레이크 서비스이며 또 다른 서비스인 AWS Glue를 이용해 Extract, Transform, Load 작업 즉 데이터 추출, 변환, 로딩 작업을 수행한다. AWS Glue는 Apach..

tsc는 컴파일시에 사용하지 않더라도 import 된 경로가 있다면 해당 경로의 타입에 문제가 있는지 없는지를 진단하는 과정을 거친다. (단 컴파일 결과에서는 제외됨) 사용하지 않는 import가 있고 만약 파일들이 많이 얽혀있다면 이로 인해 tsc 컴파일 시간이 증가할 가능성이 있다. 따라서 사용하지 않는 import 구문들을 제거한다면 tsc 컴파일 시간이 감소될것이라고 추측하였으며 이를 eslint를 사용하여 제거한 뒤 테스트를 진행해보기로 결정하였다. import와 관련된 eslint plugin는 여러가지가 있지만 기존 eslint rule의 변경이 필요한건 아니며 순수하게 unused import와 관련된 작업만 필요하기에 이와 딱 맞는 eslint plugin을 설치찾아 설치해준다. 이 경우..

도메인 네임 시스템(DNS)AWS에서 인터넷 네트워크로 연결되는 서비스 시작 시 해당 시버스를 도메인 네임으로 연결할 수 있으며 Amazon Route 53이 이를 도와주는 서비스이다.네임스페이스IP 주소를 사람이 식별하기 편한 이름으로 변경 시 중복되는 이름이 있으면 안되기떄문에 이러한 인터넷 네임 시스템은 네임스페이스라는 도메인 네임 체계로 관리된다. 인터넷은 퍼블릭, 프라이빗 IP를 통하거나 TLD를 통해 접근할 수 있는 네임스페이스로 구획이 나눠진 가상의 공간이라 말할 수 있다.네임 서버amazon.com과 IP 주소를 연결하는 일은 네임 서버가 담당한다. 모든 컴퓨터는 로컬에서 접근할 수 있는 간단한 네임서버 데이터베이스를 지니며 여기에 localhost와 같은 호스트네임 엔트리, IP 주소가 ..

CloudTrail, CloudWatch, AWS Config는 AWS 리소스, 애플리케이션 상태, 성능, 보안 수준을 관리하기 위한 모니터링 서비스이다.성능 모니터링: 리소스 스케일업, 스케일 아웃 필요 유무, 사용량 급증 시간대 등을 판단할 수 있다.애플리케이션 문제점 감지: 로그를 통해 잠재적 문제점을 파악할 수 있으며 데이터 오류, 타임아웃, 기타 이슈 해결 등 큰 사태를 미연에 방지할 수 있다.보안 문제점 감시: 사용자가 어떤 영역에 접근하는지, 접근 내역 감사를 통해 보안 위험을 조기에 차단할 수 있다.로그 이벤트: AWS 리소스 관련 모든 로그는 남게되며 보안, 문제 해결 등에서 사용할 수 있다. 상세한 기록은 문제 상황의 원인, 결과, 범위 파악에 큰 도움이 된다.AWS 리소스 인벤토리 관..

타입 스크립트 컴파일 시 declaration 옵션을 키면 컴파일 속도가 빨라질까? 최근 빌더 개선 작업을 하고있는데 통한 컴파일 시 타입 진단 작업이 너무 오래걸려 해당 시간을 줄이기 위해 가설을 하나 세웠다. 용량이 큰 모듈의 tsconfig에서 declaration 옵션을 켜서 컴파일 시 .d.ts 파일을 생성하게 해주고 이후 타입 진단 과정에서 이를 참조해서 타입을 진단하면 컴파일 속도가 빨라질 수도 있다, 그리고 이는 d.ts 파일을 생성하는데 걸리는 시간과 참조 타입을 사용하여 감소하는 시간을 적절히 고려해야한다는 가설이다. 이 글은 이 가설을 검증하기 위한 글이다. 가설큰 디렉토리를 컴파일할 때 해당 디렉토리에 d.ts 파일을 추가해 컴파일하면 d.ts 파일을 생성한 뒤 타입 진단을 진행하기..

개요웹 애플리케이션에서 초기 렌더링이 늦어지는 문제의 원인은 매우 다양하다. 이번에 해결한 이슈는 그 중 하나인 번들 사이즈 관련 문제이다. 일반적으로 개발자들은 다양한 오픈소스 번들러나, 경우에 따라서는 직접 개발한 번들러를 사용하여 자바스크립트 파일을 번들링한다. 그렇다면 왜 번들링 과정이 필요할까? 적절히 큰 규모의 프로젝트에서는 코드의 양이 수 기가바이트, 많으면 수십 기가바이트에 이를 수 있다. 사용자가 프로그램에 접속할 때 마다 모든 코드를 한 번에 가져오는 것은 현실적으로 부담이 너무 크기 때문에, 번들러에서는 이 과정에서 중복되는 코드 혹은 현재 상황에 필요 없는 코드를 제거하는 트리쉐이킹(Tree-shaking) 과정을 거친다. 이를 통해 큰 사이즈의 코드들을 아주 작은 단위로 줄여서 가..

회사의 번들링 결과 파일에서 중복된 Object.spread 함수가 생성되고 있는것을 확인하였다. 같은 번들임에도 중복 함수가 생성되고 있었으며 번들의 크기가 큰 경우 100~200개 까지도 중복 함수가 이름만 바뀌어 생성되는 것을 확인하였으며 이는 파일의 크기를 불필요하게 키우는 문제를 야기하기 때문에 이를 해결하기 위한 원인을 찾아보았다.문제 예시아래 예시는 중복된 _object_spread 함수들이 각각의 이름만 달리하여 생성된 예시이다.function _object_spread$3O(target) { for (var i = 1; i 원인중복된 _object_spread 함수의 생성 원인을 분석하기 위해 아래와 같은 코드를 작성하여 번들링을 진행해봤다.jsxCopy codeconst objec..

Inferred Type Predicates5.4functionmakeBirdCalls(countries: string[]) { // birds: (Bird | undefined)[]const birds = countries .map(country => nationalBirds.get(country)) .filter(bird => bird !== undefined);for (const birdof birds) { bird.sing(); // error: 'bird' is possibly 'undefined'. }}5.5functionmakeBirdCalls(countries: string[]) { // birds: Bird[]const birds = countries .map..

IAM 기반 신분 관리AWS 계정을 처음 생성하면 root user가 만들어진다. root user는 모든 서비스와 리소스에 접근할 수 있으며, root user의 권한으로만 할 수 있는 작업들도 있다. AWS는 root user와 관련된 보안 위협을 방지하고 root user 대신 다른 계정을 생성하여 사용하는 것을 권장한다. 이를 위해 제공되는 서비스가 바로 IAM(Identity and Access Management)이다. IAM 정책IAM 정책은 하나 이상의 AWS 리소스에 대한 동작의 허용 여부를 결정하는 문서이다. 정책 문서에 명시되지 않은 동작은 모두 불허한다. 하나의 신분에는 최대 10개의 정책을 적용할 수 있다. 만약 하나의 정책에서 S3 버킷 생성을 허용하고 다른 정책에서 이를 불허한..