본 포스트는 프론트엔드 성능 최적화를 보며 개인적으로 정리한 내용이다. Intersection Obeserver을 활용한 Lazy 로딩 이미지 최적화 기법에는 다양한 방법이 존재한다. 그 중 하나인 Intersection Obeserver API를 사용한 Lazy 로딩에 대해서 알아보도록 하자. Intersection Obeserver API란? I...

유데미 클린코드 자바스크립트 강의를 학습하며 실제로 적용해볼 수 있는 사례나 이론을 기록한 내용이다. Early Return을 활용한 else if 피하기 else if 및 else로 nested 된 이해하기 어려운 코드를 ealry return을 통해 좀 더 간결

이미지 사이즈를 불러올 때 레티나 디스플레이 같은 해상도를 대응하기 위해 기본 이미지 사이즈의 2배가 사용자가 사용하기 편하다. 물리적 거리의 한계를 극복하기 위해 소비자(사용자)와 가까운 곳에 컨텐츠 서버를 두는 기술이미지 CDN 프로세스를 활용해서 받아올 이미지 사

백트래킹, 브루트포스 알고리즘이 문제는 백트래킹 기법을 이용해 푸는 문제이다. 프로미싱 함수를 돌면서 해당 값이 유망한지를 판단하여 조건문을 계속 돌아줘야한다.마지막 depth까지 도달할 경우에 정답임으로 result 값을 올려주는 것으로 몇개의 정답이 나올지 측정해주

문제 링크 메모리: 113112 KB, 시간: 120 ms구현, 문자열, 수학문제 링크 메모리: 113112 KB, 시간: 116 ms구현, 수학

메모리: 227196 KB, 시간: 476 ms자료 구조, 연결 리스트, 스택창영이는 강산이의 비밀번호를 훔치기 위해서 강산이가 사용하는 컴퓨터에 키로거를 설치했다. 며칠을 기다린 끝에 창영이는 강산이가 비밀번호 창에 입력하는 글자를 얻어냈다.키로거는 사용자가 키보드를

메모리: 115004 KB, 시간: 128 ms자료 구조, 구현, 큐, 시뮬레이션여러분도 알다시피 여러분의 프린터 기기는 여러분이 인쇄하고자 하는 문서를 인쇄 명령을 받은 ‘순서대로’, 즉 먼저 요청된 것을 먼저 인쇄한다. 여러 개의 문서가 쌓인다면 Queue 자료구조

메모리: 126108 KB, 시간: 224 ms자료 구조, 스택이 문제의 핵심은 count라는 변수를 만들어서 필요한 1부터 n까지의 값을 tracking 해주는 것이다.while문을 통해 받은 input 값이 될때까지 stack에 count를 올리면서 넣어준다. wh

구현총 8개의 원소를 순환하기 때문에 1~8까지의 숫자를 고정값으로 넣어도 된다.원소의 앞뒤만 비교해가며 값을 false로 바꿔주며 최종값을 if else문을 통해 결과값을 출력한다.예를 들어서 배열이 8 1 7 2 6 3 5 4 이라고 가정해보자 0번쨰와 1번째 배열

이터러블 중심 프러그래밍 실무에 적용해보기 앞서 만들어 놓은 여러가지 이터러블 프로토콜 기반의 함수들을 실무적인 코드에 적용하는 방법을 알아보도록 하자 비동기: 동기성 프로그래밍 자바스크립트에서 비동기 동기성 프로그래밍을 하는 방법은 크게 두가지이다. callb

앞서 만들어 뒀던 map, fiter, reduce를 모듈화 해놓고 사용해보자. 아래 코드는 정상적으로 잘 작동하지만 중첩되어 있어서 이해하기 어렵다. 해당 코드와 똑같은 기능을 하는 코드를 좀 더 사용 친화적인 코드로 변환해보자

추상화 (Abstraction) 소프트개발에서의 추상화란 복잡한 자료, 모듈, 시스템등으로부터 핵심적인 개념 또는 기능을 간추려내는 것을 말한다.

해당 내용은 인프런 "함수형 프로그래밍과 Javascript ES6+"라는 강의를 보며 개인적으로 정리하는 내용이다코드가 계산 (Evaluation) 되어 값을 만드는 것값으로 다를 수 있다변수에 담을 수 있다함수의 인자로 사용될 수 있다함수의 결과로 사용할 수 있다함

Full- text search queries 지원Data-tiering을 사용해서 오래된 (3개월이상)된 데이터들을 자연스럽게 S3로 내려줄 수 있다. (Federated queries using MQL)Native visualization of MongoDB dat

코딩테스트를 위한 Python 문법 정리

리액트 공식 문서에 따르면 고차 컴포넌트는 "컴포넌트 로직을 재사용하기 위한 React의 고급 기술"이라고 표현한다.쉽게 표현하자면 기존 컴포넌트는 props를 받아 UI를 변환하는 역할을 한다면, 고차 컴포넌트 같은 경우에는 컴포넌트를 가져와 새 컴포넌트를 반환하는

간혹 마이크로프론트엔드에서 CSS가 제대로 적용 안되는 상황이 발생한다.

CI/CD 파이프라인 구축

Micro Frontend 마이크로 프론트엔드 아키텍쳐를 잘 활용하기 위해서 몇가지 지켜야하는 필수사항들이 있다. 컨테이너 외의 프로젝트들끼리는 공유되는게 없어야한다. 함수/객체/클래스 상태값(ex.redux,context) 라이브러리 컨테이너와 하

지난번에 이어서 마이크로 프론트엔드를 좀 더 파헤쳐 보자. 저번에 구현 부분을 네트워크탭에서 확인해보면 cart와 products에서 동시에 faker 모듈을 분리해서 불러오고 있는것을 볼 수 있다. 하지만 faker은 중첩된 모듈이고 번들 사이즈도 매우 큰편이기에 효