Zayden

No title

해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.

이번 글에서는 이미지 지연 로딩 관련한 최적화 기법에 대하여 설명드리겠습니다.

저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다.

네트워크 분석

네트워크를 확인할 때는 명확한 흐름을 파악할 수 있도록 네트워크에 throttling을 적용합니다. 물론 기본으로 제공되는 ‘Fast 3G’ 나 ‘Slow 3G’ 설정을 적용 할 수 있으나 이번에는 기본 설정보다 조금 더 빠른 환경으로 설정하기 위하여 직접 커스텀 설정을 만들어 보겠습니다.

throttling 옵션엣서 ‘Add…’를 선택하면 Network Throttling Profiles라는 설정 페이지가 나옵니다. 여기서 ‘Add custom profile…’ 버튼을 눌러 원하는 throttling 옵션을 추가하면 됩니다. 이번에는 ‘6000’이라는 이름으로 다운로드와 업로드 속도를 6000kb/s으로 설정하겠습니다.

여기서 잠깐 참고하면 Fast 3G의 다운로드 속도는 1500kb/s, 업로드 속도는 750kb/s이며 Slow 3G의 다운로드 속도는 780kb/s, 업로드 속도는 330kb/s입니다.

이제 이전에 설정하였던 커스텀 옵션으로 throttling을 적용하고 네트워크 분석을 해 봅시다.

위 사진에서 보듯이 처음에는 당장 필요한 리소스인 bundle 파일이 다운로드가 되고, 그 다음으로는 빨간색 박스표시가 된 이미지가 다운로드되는 것을 볼 수 있습니다. 그리고 가장 아래에 있는 빨간색 박스를 보면 banner-video 라는 파일인 해당 파일을 보시면 미디어 타입입니다. 그러 해당 banner-video는 페이지에서 가장 처음으로 사용자에게 보이는 콘텐츠인데 가장 나중에 로드되면, 사용자가 첫 화면에서 아무것도 보지 못한 채로 오랫동안 머물게 되므로 사용자 경험에 좋지 않을 겁니다.

이러한 문제를 해결하는 방법은 위 사진에 보시다시피 동영상의 다운로드를 방해하는 요소 즉, 이미지 다운로드가 끝나고 동영상 다운로드를 시작하니깐 당장 사용되지 않는 이미지를 나중에 다운로드되도록 하여 동영상이 먼저 다운로드되게 하는 것입니다. 다시 말하자면 이미지를 지연 로드하는 것입니다.

그러면 해당 이미지들을 페이지가 로드될 때 로드하지 않는다면 언제 로드해야 가장 좋은 방법 일까요?

그 시점은 바로 이미지가 화면에 보이는 순간 또는 그 직전에 이미지를 로드해야 합니다. 다시 말해 뷰포트에 이미지가 표시될 위치까지 스크롤 되었을 때 이미지를 로드할지 말지 판단할 수 있습니다.

Intersection Observer

그런데 여기서 하나 문제가 있습니다. 이미지 지연 로딩 작업을 위해 스크롤이 이동했을 때 해당 뷰포트에 이미지를 보이게 할지 판단해야 하는데, 스크롤 이벤트에 이 로직을 넣으면 스크롤할 때마다 해당 로직이 아주 많이 실행된다는 것입니다.

window.addEventListener("scroll", () => console.log('스크롤 이벤트 발생!'));

// 스크롤을 조금 움직일때 마다 엄청나게 많은 콜백함수가 실행됩니다.
// 위 코드를 크롬 브라우저에 console 탭에서 입력하고 해당 페이지에서 스크롤을 해보십시오

위 코드처름 스크롤 이벤트를 이용한다면 무거운 로직이 들어가기라도 한다면 브라우저의 메인 스레드에 무리가 갑니다. 성능을 향상시키려다가 오히려 악화시키게 되는 꼴인 거죠. 물론 throtle과 같은 방식으로 처리할 수 있겠지만, 근본적인 해결 방법이 될 수는 없습니다.

throttle은 짧은 시간에 여러 번 발생하는 연산을 일정 시간 동안 한 번만 실행하도록 하는 기술입니다.

이러한 문제를 Intersection Observer를 이용하여 해결할 수 있습니다. Intersection Observer는 브라우저에서 제공하는 API입니다. 이를 통해 웹 페이지의 특정 요소를 관찰하면 페이지 스크롤 시, 해당 요소가 화면에 들어왔는지 아닌지 알려 줍니다. 즉, 스크롤 이벤트처럼 스크롤할 때마다 함수를 호출하는 것이 아니라 요소가 화면에 들어왔을 때만 함수를 호출하는 겁니다. 따라서 성능 면에서 scroll 이벤트로 판단하는 것보다 훨씬 효율적입니다.

Intersection Observer 사용법 : https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Intersection Observer에 대하여 간략한 내용만 살펴보겠습니다.

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1.0.
};

const callback = (entries, observer) => {
  console.log('Entries', entries);
};

const observer = new IntersectonObserver(callback, options);

observer.observe(document.querySelector("#targer-element1"));

options는 Intersection Observer의 옵션입니다.

root: 대상 객체의 가시성을 확인할 때 사용되는 뷰포트 요소이고, 기본 값은 null 이고, null로 설정 시 브라우저의 뷰포트로 설정됩니다.
rootMargin: root 요소의 여백, 즉, root의 가시 범위를 가상으로 확장하거나 축소할때 사용됩니다.
threshold: 가시성 퍼센티지, 대상 요소가 어느 정도로 보일 때 콜백을 실행할지 결정합니다.

Intersection Observer 적용하기

이미지에 Intersection Observer를 활용하여 지연 로딩을 적용해 보겠습니다.

지금부터는 샘플코드 기반으로 설명 드리오니 샘플코드가 없는 분이시면 해당 내용만 알아 두시면 좋을것 같습니다.

function Card(props) {
  const imgRef = useRef(null);
  
  useEffect(() => {
    const options = {};
    const callback = (entries, observer) => {
      console.log('Entries', entries);
    };
    
    const observer = new IntersectionObserver(callback, options);
    
    observer.observe(imgRef.current);
    
    return () => {
      observer.disconnect();
    };
  }, []);
  
	return (
		<div className="Card text-center">
			<img src={props.image} ref={imgRef}/>
			{...중략...}
		</div>
	);
}

여기서는 useEffect 안에서 Intersection Observer를 생성하였습니다. 만약 useEffect를 사용하지 않으면 렌더링할 때마다 인스턴스가 생성되고, 대상 요소를 관찰하게 되면서 대상 요소에 여러 개의 콜백이 실행될 것입니다. 따라서 이와 같은 중복을 방지하고자 useEffect에서 인스턴스를 생성해야 합니다. 또한 생성된 인스턴스는 clean-up 함수에서 observer.disconnect 함수를 호출함으로써 리소스가 낭비되지 않도록 합니다.

이전 코드예시 입력한 console.log 함수에 출력들을 보면 위 사진과 같습니다. entries 값이 배열 형태로 다양한 정보를 담고 있는 것이 보입니다. 이중에서 가장 중요한 값은 바로 isIntersecting 이라는 값입니다. 이 값은 해당 요소가 뷰포트 내에 들어왔는지를 나타내는 값입니다. 이 값을 통해 해당 요소가 화면에 보이는 것인지, 화면에서 나가는 것인지 알 수 있습니다.

이제 다음은 화면에 이미지가 보이는 순간, 즉 콜백이 실행되는 순간에 이미지를 로드하는 일입니다. 이미지 로딩은 img 태그에 src가 할당되는 순간 일어납니다. 따라서 최초에는 img 태그에 src 값을 할당하지 않다가 콜백이 실행되는 순간 src를 할당함으로써 이미지 지연 로딩을 적용할 수 있습니다.

function Card(props) {
  const imgRef = useRef(null);
  
  useEffect(() => {
    const options = {};
    const callback = (entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          console.log("is intersecting", entry.target.dataset.src);
          entry.target.src = entry.target.dataset.src;
          observer.unobserve(entry.target);
        }
      });
    };
    
    const observer = new IntersectionObserver(callback, options);
    
    observer.observe(imgRef.current);
    
    return () => {
      observer.disconnect();
    };
  }, []);
  
	return (
		<div className="Card text-center">
			<img data-src={props.image} ref={imgRef}/>
			{...중략...}
		</div>
	);
}

이전에느 img 태그에 src 속성에 바로 해당 이미지 url를 할당하였지만 위 코드에서는 data-src 라는 속성에 이미지 url을 넣었습니다. 이렇게 하면 src 값이 할당되지 않기 때문에 해당 이미지를 로드 하지 않습니다. 그리고 주소를 data-src 속성에 넣은 이유는 나중에 이미지가 뷰포트에 들어 왔을때, data-src에 있는 값을 src로 옮겨 이미지를 로드하기 위해서입니다.

entry.isIntersecting 뷰포트에 해당 이미지가 들어왔을때 entry.target.src = entry.target.dataset.src 이미지 src 속성에 이미지 url을 할당합니다. 그리고 한 번 이미지를 로드한 후에는 다시 호출할 필요가 없으므로 observer.unobserve(entry.target) ‘unobserve’ 메서드를 이용하여 해제합니다.

이제 정리하면, 개발자 도구 Network 패널을 확인해보면 최초 페이지 로딩 시에는 해당 이미지가 로드되지 않고 있다가 스크롤이 해당 이미지 영역에 도달하면 이미지가 로드되는 것을 확인 할 수 있습니다. 즉, 최초 페이지 로딩 시에는 보이지 않는 이미지가 우선순위가 높은 콘텐츠(동영상)의 로딩을 방해하지 않고 나중에 필요할 때 로드되는 것입니다.

캐시 최적화

Sun, 13 Aug 2023 15:00:01 GMT

해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.

저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다.

Lighthouse를 통한 분석

해당 서비스를 Lighthouse를 사용하여 분석을 해보면 다음과 같이 결과가 나옵니다.

Diagnostics 섹션의 ‘Serve static assets with an efficient cache policy ’ 항목이 있습니다. 이 항목은 네트워크를 통해 다운로드하는 리소스에 캐시를 적용하라는 의미입니다. 해당 항목을 열면 캐시가 적용되어 있지 않은 리소스들을 보여줍니다.

Network 패널을 통해 캐시가 적용되지 않는 리소스를 확인해보면 응답 헤더에 캐시에 대한 설절인 Cache-Control이라는 헤더가 없는 것을 확인해 볼 수 있습니다. 즉, 서버측에서 캐시 설정이 제대로 되어 있지 않은 것입니다.

캐시란?!

캐시는 간단히 말하자면 자주 사용하는 데이터나 값을 미리 복사해 둔 임시 저장 공간 또는 저장하는 동작입니다. 웹에서는 서비스에서 사용하는 이미지나 자바스크립트 파일을 매번 네트워크를 통해 불러오지 않고 최초에만 다운로드하여 캐시에 저장해 두고 그 이후 요청 시에는 저장해 둔 파일을 사용합니다.

캐시의 종류

웹에서 사용하는 캐시는 크게 두 가지로 구분할 수 있습니다. 메모리 캐시와 디스크 캐시입니다.

메모리 캐시: 메모리에 저장하는 방식. 여기서 메모리는 RAM을 의미합니다.
디스크 캐시: 파일 형태로 디스크에 저장하는 방식입니다.

어떤 캐시를 사용할지는 직접 제어할 수 없습니다. 브라우저가 사용 빈도나 파일 크기에 따라 특정 알고리즘에 의헤 알아서 처리합니다. 직접 확인해 볼 수도 있습니다.

구글 홈페이지에서 개발자 도구 열기
Network 패널 확인
여러 리소스들에서 Size 항목에 memory cache or disk cache 라고 표시됩니다.

캐시가 적용된 리소스의 응답 헤더를 보면 Cache-Control이라는 헤더가 들어 있는 것을 볼 수 있습니다. 이 헤더는 서버에서 설정되면, 이를 통해 브라우저는 해당 리소스를 얼마나 캐시할지 판단합니다.

구글에서 단순 새로고침을 한 후 확인했다면 memory cache가 많을 것입니다. 왜나하면 이미 구글의 리소스가 메모리에 캐시 되었기 때문입니다. 브라우저를 완전히 종료한 후 구글에 접속하는 첫 네트워크 리소스를 확인하면 disk cache가 많을 것입니다. 브라우저가 완전히 종료되면 메모리에 있는 내용은 제거하고 다음 접속 때는 파일 형태로 남아 있는 캐시를 활용하기 때문입니다.

Cache-Control

Cache-Control은 리소스의 응답 헤더에 설정되는 헤더입니다. 브라우저는 서버에서 이 헤더를 통해 캐시를 어떻게, 얼마나 적용해야 하는지 판단합니다. Cache-Control에는 대표적으로 5가지 값이 조합되어 들어갑니다.

no-cache: 캐시를 사용하기 전 서버에 검사 후 사용
no-store: 캐시 사용 안함
public: 모든 환경에서 캐시 사용 가능
private: 브라우저 환경에서만 캐시 사용, 외부 캐시 서버에서는 사용 불가
Max-age: 캐시의 유효 시간

no-cache는 이름만 보면 캐시를 사용하지 않는것 처럼 보이지만 이 옵션은 캐시를 사용하지 않는 것이 아니라, 사용 전에 서버에 캐시된 리소스를 사용해도 되는지 한 번 체크하도록 하는 옵션입니다. 캐시를 사용하지 않는 옵션은 no-store입니다.

public과 private으로 설정하면 max-age에서 설정한 시간만큼은 서버에 사용 가능 여부를 묻지 않고 캐시된 리소스를 바로 사용합니다. 만갸 유효 시간이 지났다면 서버에 캐시된 리소스를 사용해도 되는지 다시 체크하고 유효 시간만큼 더 사용합니다. public과 private의 차이는 캐시 환경에 있습니다. 웹 리소스는 브라우저뿐만 아니라 웹 서버와 브라우저 사이를 연결하는 중간 캐시 서버에서도 캐시될 수 있습니다. 만약 중간 서버에서 캐시를 적용학 싶지 않다면 private 옵션을 사용합니다.

max-age는 초 단위로 얼마나 오래 캐시를 사용할 것인지 설정합니다. 만약 max-age=60이라면 60초 동안 캐시를 사용한다는 의미인 것입니다.

Cache-Control: max-age=60
- 60초 동안 캐시를 사용합니다. private 옵션이 없으므로 기본 값인 public으로 설정되어 모든 환경에서 캐시를 합니다.
Cache-Control: private, max-age=600
- 브라우저 환경에서만 600초 동안 캐시를 사용합니다.
Cache-Control: public, max-age=0
- 모든 환경에서 0초 동안 캐시를 사용합니다. 여기서 0초는 사실상 캐시가 바로 만료되는 상태이므로 매번 서버에 캐시를 사용해도 되는지 확인을 합니다. 즉, no-cache와 동일한 설정이라고 볼 수 있습니다.

캐시 적용

앞서서 설명드린것처럼 캐시는 응답 헤더에서 Cache-Control 헤더를 통해 설정된다고 했습니다. 여기서 중요한 것은 응답 헤더는 서버에서 설정해 준다는 것입니다. 이번글에서는 서버 샘플 코드를 이용하여 적용해보겠습니다. (서버는 노드 서버입니다.)

서버측에서 응답 헤더에 Cache-Control에 max-age=10으로 적용해보겠습니다.

res.setHeader('Cache-Control', 'max-age=10');

그리고 캐시를 적용후에 브라우저에 Network 패널을 확인해보면 다음과 같이 캐시가 적용된것을 볼 수 있습니다.

이전 캐시 유효 시간을 10초를 설정을 하였는데 만약에 10초가 지난후에 새로고침을 하면 어떻게 될까요?

위와 같이 Network 패널을 보면 Size 항목에는 memory cache가 없어지고 Status 항목에는 304로 변경되어진 것을 확인 할 수 있습니다. 왜냐하면 캐시 유효 시간이 만료되면서 브라우저는 기존에 캐시된 리소스를 그대로 사용해도 될지, 아니면 리소스를 새로 다운로드해야 할지 서버에 확인하기 때문입니다. 이번글에서는 서비스의 각 리소스가 변경되지 않아 브라우저에 캐시되어 있는 리소스를 그대로 사용해도 무방하기 때문에, 서버에서는 변경되지 않았다는 304 상태 코드를 응답으로 보냈습니다.

그러면 먼가 이상한점은 캐시된 리소스를 그대로 사용하였는데도 불구하고 리소스의 Size가 260B로 기록된 이유는 캐시를 사용해도 되는지 확인하기 위해 네트워크 요청을 보내고 응답을 받았기 때문입니다.

캐시된 리소스와 서버의 최신 리소스가 같은지 다른지 어떻게 체크할까?

캐시 유효 시간이 만료되면 브라우저는 캐시된 리소스를 계속 사용해도 될지 서버에 확인합니다. 이때 서버에서는 캐시된 리소스의 응답 헤더에 있는 Etag값과 서버에 있는 최신 리소스의 Etag 값을 비교하여 캐시된 리소스가 최신인지 아닌지, 즉, 계속 사용해도 되는지 아닌지 판단합니다. 만약 서버에 있는 리소스가 변했다면 Etag 값이 달라지고, 서버는 새로운 Etag 값과 함께 최신 리소스를 브라우저로 다시 보내줍니다.

적절한 캐시 유효 시간

모든 리소스에 동일한 캐시 설정이 적용되면 효율적이지 않습니다. 그 이유는 리소스마다 사용이나 변경 빈도가 달라 캐시의 유효 시간도 달라져야 하기 때문입니다.

일반적으로 HTML 파일에는 no-cache 설정을 적용합니다. 항상 최신 버전의 웹서비스를 제공하기 위해서입니다. HTML이 캐시되면 캐시된 HTML에서 이전 버전의 자바스크립트나 CSS를 로드하게 되므로 캐시 시간 동안 최신 버전의 웹 서비스를 제공하지 못합니다. 따라서 항상 최신 버전의 리소스를 제공하면서도 변경 사항이 없을 때만 캐시를 사용하는 no-cache 설정을 적용합니다.

빌드된 자바스크립트나 CSS는 파일명에 해시를 함께 가지고 있습니다(main.bb0ji21.js). 즉, 코드가 변경되면 해시도 변경되어 완전히 다른 파일이 되어 버립니다. 따라서 캐시를 아무리 오래 적용해도 HTML만 최신 상태라면 자바스크립트나 CSS 파일은 당연히 최신 리소스를 로드할 것입니다.

알고 쓰자 - async, await

Sat, 12 Aug 2023 15:00:00 GMT

이번 글에서는 우리가 자주 사용하는 async, await 관련해서 살펴보겠습니다. async, await에 대한 사용하는 방법에 대한 부분은 다루지 않고 어떻게 구현되어있는지에 대하여 알아보겠습니다.

async-await

async-await은 ECMAScript 2017에서 표준으로 정의되었습니다. 비동기 프로그래밍을 동기 방식처럼 직관적으로 표현할 수 있고, callback 지옥 문제를 해결해 줍니다.

비동기 로직을 쉽게 작성하기 위해, 즉 비동기가 들어간 비즈니스 로직은 중첩될수록 그 복잡도가 기하 급수적으로 늘어나며, 이를 간결하게 하여 유지보수성 향상에 기여할 수 있습니다.

그러나 한가지 문제점은 ECMAScript 2017를 지원하지 않는 하위 버전에 브라우저에서는 사용할 수 없다는 단점이 있습니다. 그래서 Babel과 같은 트랜스파일러를 이용하여 하위 버전 브라우저에서 이해 할 수 있는 ECMAScript 2016문법으로 변환을 하면 사용할 수 있습니다.

그러면 여기서 한가지 알 수 있는것은 ECMAScript 2016로 변환한다는 의미는 ECMAScript 2016로 구현이 가능하다는 것입니다. async-await 구문이 어떻게 ECMAScript 2016 문법으로 표현되는지 알아 보겠습니다.

async-await을 바벨로 변환

async-await 구문을 바벨을 이용하여 변환하게 된다면 아래와 같이 promise 와 generator로 구현되어 있는것을 확인 할 수 있습니다.

변환할 수 있는 사이트는 바벨로 변환을 참조 해주시면 됩니다.

**ECMAScript 2017**
async function sample() {
	await fetch("api");
}

**ECMAScript 2016**
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
  try {
    var info = gen[key](arg);
    var value = info.value;
  } catch (error) {
    reject(error);
    return;
  }
  if (info.done) {
    resolve(value);
  } else {
    Promise.resolve(value).then(_next, _throw);
  }
}

function _asyncToGenerator(fn) {
  return function () {
    var self = this,
      args = arguments;
    return new Promise(function (resolve, reject) {
      var gen = fn.apply(self, args);
      function _next(value) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
      }
      function _throw(err) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
      }
      _next(undefined);
    });
  };
}

function sample() {
  return _sample.apply(this, arguments);
}

function _sample() {
  _sample = _asyncToGenerator(function* () {
    yield fetch("api");
  });
  return _sample.apply(this, arguments);
}

async-await 과 promise, generator

바벨로 변환된 코드에 대하여 살펴보겠습니다.

**변환 전**
async function sample() {
	await fetch("api");
}

**변환 후**
function _sample() {
  _sample = _asyncToGenerator(function* () {
    yield fetch("api");
  });
}

변환된 코드를 간략히 하였습니다. 위 코드를 봤을때 무언가 차이점이 보이시나요? 제가 봤을때는 await 이 yield 로 바뀌고 async 가 function* () {} (제너레이터)로 바뀐것 같이 보이는데요. 일단 지금은 _asyncToGenerator 함수에 대해서는 잠시 보류하면 결국 async-await 은 제너레이터를 사용하여 구현되었다고 볼 수 있겠네요.

function* gen() {
  yield 1;
}

const generator = gen();

const one = gen.next();

console.log(one.value); // 1 출력

여기서 제너레이터에 대하여 간단히 설명하자면 제너레이터 함수를 실행하고 반환되어진 객체에 next() 메소드를 실행을 하였을때 가장 가까운 yield 문을 만날때까지 실행이 되고 해당 값이 반환 됩니다.

따라서 비동기 로직이 종료되었을 때마다 적절하게 next() 메서드를 호출해주기만 하면, async-await이 구현되어 지는것입니다.

그러면 이번에는 _asyncToGenerator 살펴보겠습니다.

function _asyncToGenerator(fn) {
  return function() {
    var self = this,
      args = arguments;
    return new Promise(function(resolve, reject) {
      var gen = fn.apply(self, args);
      function _next(value) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'next', value);
      }
      function _throw(err) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'throw', err);
      }
      _next(undefined);
    });
  };
}

_asyncToGenerator 함수는 함수를 인자로 받고 함수를 반환하고 있는것 같습니다. 반환하는 함수에 대하여 자세히 살펴보겠습니다.

여기서 인자로 전달 받은 함수는 다음과 같습니다.

function* () {
  yield fetch("api");;
}

반환하는 함수는 다음과 같습니다.

function () {
  return new Promise(function (resolve, reject) {

    ## 제너레이터 함수를 실행하여 반환되어진 제너레이터 객체
    var gen = fn.apply(self, args);

    function _next(value) {
      asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
    }
    function _throw(err) {
      asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
    }

    _next(undefined);
  });
};

위 코드와 같이 반한되어진 함수는 promise를 반환하고 있네요. promise의 콜백 함수를 보면 _next , _throw 메서드가 선언되어 있는것으로 보입니다. 두 함수 내부에는 asyncGeneratorStep 함수를 호출하고 있습니다.

asyncGeneratorStep 함수는 제너레이터 객체, resolve, reject 등등 다양한 인자를 전달하여 호출하고 있습니다.

여기까지 봤을때는 아직도 세부 구현이 어떻게 돌아가고 있는지 잘 파악이 되지 않습니다. 그래서 조금 더 깊이 들어보겠습니다.

이번에는 asyncGeneratorStep 함수에 대하여 살펴보겠습니다.

## gen: 제너레이터 함수를 실행하여 반환되어진 제너레이터 객체
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
  try {

    ## gen.next(arg) or gen.throw(arg)
    var info = gen[key](arg);

    ## { value: yield 구문에 있는 어떠한 로직이 실행되고 나서 결과값, done: 모든 yield 구문이 실행 여부 }
    var value = info.value;
  } catch (error) {
    reject(error);
    return;
  }

  if (info.done) {
    ## 제너레이터의 모든 yield 구문이 처리가 되었을때
    resolve(value);
  } else {
    Promise.resolve(value).then(_next, _throw);
  }
}

전달 받은 gen(제너레이터 객체)에 key는 “next” or “throw”이므로 gen[key]()는 gen[next]() (gen.next()) gen[throw] (gen.throw())가 됩니다. 즉, 제너레이터의 next 함수, throw 함수를 실행하는 부분입니다. 그리고 실행할때는 인자로 넘어온 arg 값이 next 또는 throw가 호출될때 인자로 넘겨집니다.

Promise.resolve(value).then(_next, _throw);

Promise.resolve(value)는 결괏값이 value인 이행 상태 프라미스를 생성합니다. 그래서 프로미스가 이행된 값이 then 메소드의 첫번째 메소드인 _next(프로미스 결과 값)으로 호출됩니다. 그리고 프로미스가 “rejected” 상태이면 즉, 오류가 발생하면 두번째 메소드인 _throw(에러)가 실행됩니다.

그러면 만약에서 여기서 _next(프로미스 결과 값)가 호출되면 다시 asyncGeneratorStep함수가 실행되고 이번엔 해당 함수가 실행되면서 arg로 인자로 프로미스가 이행된 결과 값을 전달하고 다시 gen.next(프로미스 결과 값) 이 실행됩니다. 그리고 제너레이터 next 함수에 인자로 넘어간 값은 yield 구문의 반환값으로 할당 됩니다.

function* generator() {
  ## next 함수 호출시 인자로 넘어간 값이 result에 할당 됩니다.
  const result = yield fetch("api");
}

<샘플 예시>
const gen = generator();

gen.next();
gen.next("결과");

result 변수에는 "결과"가 할당됩니다.

즉, 여기서 한번 정리를 하자면 asyncGeneratorStep 함수는 재귀함수를 통해 next() 메서드를 대신 호출하여 yield 구문의 결과 값이 나올때 next(“결과”) 호출할때 인자로 결과값을 넣어 yield 구문의 반환값을 할당하여 async-await 을 구현할 수 있습니다.

그리고 마지막으로는 해당 제너레이터 객체의 속성중 done 속성이 true 이면 해당 재귀함수는 멈춥니다. 즉, 제너레이터 함수의 모든 yield 구문을 처리하면 재귀함수는 멈춥니다.

async-await을 간단하게 구현해보기

앞서서 설명드린 바벨로 변환되어진 코드는 조금 복잡하니 해당 부분을 간단하게 한번 구현해보도록 하겠습니다.

function api(time) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(time);
    }, time);
  });
}

function _asyncToGenerator(genFunc) {
  return function() {
    const gen = genFunc();

    function next(value) {
      const genInfo = gen.next(value);

      if (!genInfo.done) {
        Promise.resolve(genInfo.value).then(next);
      }
    }

    next();
  };
}

function* sample() {
  const result = yield api(1000);

  console.log(result);
}

const asyncAwaitSample = _asyncToGenerator(sample);

asyncAwaitSample();

https://medium.com/@la.place/async-await%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EA%B5%AC%ED%98%84%ED%95%98%EB%8A%94%EA%B0%80-fa08a3157647

폰트 최적화

Fri, 11 Aug 2023 18:00:01 GMT

해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.

저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다.

폰트 분석하기

브라우저 개발자도구에서 Network 패널에서 throttle 설정을 ‘Fast 3G’로 설정 후 폰트가 적용된 부분을 확인하면 아래와 같습니다.

폰트 적용 전

폰트 적용 후

이러한 현상은 텍스트가 보이는 시점에 폰트 다운로드가 완료되지 않아 생기는 현상입니다. Network 패널에서 폰트를 확인해 보면 파일 크기가 750kB이고 다운로드하는데 21초가 걸린 것을 볼 수 있습니다.

즉, 페이지가 로드되고 21초 후에야 폰트가 제대로 적용된 모습을 볼 수 있다는 의미입니다. 이러한 현상은 당연히 사용성에 영향을 줍니다. 폰트가 바뀌면서 깜박이는 모습은 페이지가 느리다는 느낌을 줄 수 있습니다.

FOUT, FOIT

폰트의 변화로 발생하는 이 현상을 FOUT(Flash of Unstyled Text) 또는 FOIT(Flash of Invisible Text)라고 합니다.

FOUT

FOUT는 Edge 브라우저에서 폰트를 로드하는 방식으로, 폰트의 다운로드 여부와 상관없이 먼저 텍스트를 보여준 후 폰트가 다운로드되면 그때 폰트를 적용하는 방식입니다.

FOIT

FOIT는 크롬, 사파리, 파이어폭스 등에서 폰트를 로드하는 방식으로, 폰트가 완전히 다운로드되기 전까지 텍스트 자체를 보여 주지 않습니다. 그리고 폰트 다운로드가 완료되면 폰트가 적용된 텍스트를 보여 줍니다. 하지만 크롬에서는 폰트가 제대로 다운로드되지 않았는데도 텍스트가 보입니다. 그 이유는 완전한 FOIT가 아니라 3초만 기다리는 FOIT이기 때문입니다. 즉, 3초 동안은 폰트가 다운로드되기를 기다리다가 3초가 지나도 폰트가 다운로드되지 않으면 기본 폰트로 텍스트를 보여줍니다. 그런 다음 폰트가 다운로드되면 해당 폰트를 적용합니다. 그래서 크롬에서 텍스트가 표시되는 과정을 보면 페이지 로드 후, 첫 3초 동안은 텍스트가 보이지 않는 것을 알 수 있습니다.

여기서 중요한 것은 폰트를 최대한 최적화해서 폰트 적용 시 발생하는 깜박임 현상을 최소화하는 것입니다.

폰트 최적화 방법

폰트를 최적화하는 방법은 크게 두 가지가 있습니다. 폰트 적용 시점을 제어하는 방법 또는 폰트 사이즈를 줄이는 방법입니다.

폰트 적용 시점 제어하기

예시를 한가지 들어보겠습니다. 중요한 텏스트(뉴스 제목 등)의 경우 FOIT 방식으로 폰트를 적용하면 텍스트 내용이 사용자에게 빠르게 전달되지 않을 것입니다. 반면에 사용자에게 꼭 전달하지 않아도 되는 텍스트의 경우 FOUT 방식으로 인한 폰트 변화는 사용자의 시선을 분산시킬 수 있습니다. 따라서 서비스 또는 콘텐츠의 특성에 맞게 적절한 방식을 적용해야 합니다.

CSS의 font-display 속성을 이용하면 폰트가 적용되는 시점을 제어할 수 있습니다. font-display는 @font-face에서 설정할 수 있고 다음 값을 가집니다.

auto: 브라우저의 기본 동작 (기본 값)
block: FOIT (timeout = 3s)
swap: FOUT
fallback: FOIT (timeout = 0.1s) / 3초 후에도 불러오지 못한 경우 기본 폰트로 유지, 이후 캐시
optional: FOIT (timeout = 0.1s) / 이후 네트워크 상태에 따라 기본 폰트로 유지할지 결정, 이후 캐시

이러한 속성을 이용하면 FOUT 방식으로 폰트를 렌더링하는 Edge에 FOIT 방식을 적용하거나, FOIT 방식으로 폰트를 렌더링하는 크롬에 FOUT 방식을 적용할 수 있습니다.

fallback과 optional은 FOIT 방식이지만 텍스트를 보여 주지 않는 시간이 3초가 아닌 0.1초입니다. 차이점은 fallback의 경우 3초 후에도 폰트를 다운로드하지 못한 경우, 이후에 폰트가 다운로드되더라도 폰트를 적용하지 않고 캐시해 둡니다. 결국 최초 페이지 로드엣 폰트가 늦게 다운로드되면 폰트가 적용되지 않는 모습이 계속 보입니다. 하지만 페이지를 다시 로드했을때는 폰트가 캐시되어 있으므로 바로 폰트가 적용된 텍스트를 볼 수 있게 됩니다. optional의 경우 3초가 아니라 사용자의 네트워크 상태를 기준으로 폰트를 적용할지 기본 폰트로 유지할지 결정합니다.

@font-face {
  font-family: 폰트이름;
  src: url('폰트경로');
  font-display: block;
}

다시 한번 정리하면, font-display 속성을 이용해서 폰트가 적용되는 시점을 제어할 수 있습니다. 중요한 것은 서비스하는 콘텐츠의 특성에 맞게 적절한 값을 설정하는 것입니다.

이번글에서는 FOIT 방식인 block을 사용할 것입니다. 그 이유는 적용할 텍스트는 빠르게 보여 줘야 하거나 중요한 내용의 텍스트는 아니기 때문에 폰트가 적용된 상태로 보이는 것이 사용자에게 더 자연스러워 보이기 때문입니다. 여기서 문제는 block 옵션을 설정하면 안보이던 폰트가 갑자기 나타나서 조금 어색할 수도 있다는 점입니다. 이러한 문제를 해결하기 위해 페이드 인 애니메니션을 적용해 보려고 합니다.

폰트에 페이드 인 효과를 적용하려면 CSS가 아닌 자바스크립트의 도움이 필요합니다. 폰트가 다운로드되기 전에는 텍스트를 보여 주지 않다가 다운로드가 완료되면 페이드 인 효과와 함께 폰트가 적용된 텍스트를 보여 주는 것입니다. 그러려면 먼저 폰트가 다운로드 완료되는 시점을 알아야 합니다. 폰트의 다운로드 시점은 fontfaceobserver라는 라이브러리를 통해 알 수 있습니다.

https://fontfaceobserver.com/

간단히 샘플코드를 통해 fontfaceobserver를 사용해보겠습니다.

const font = new FontFaceObserver('BMYEONSUNG');

function Sample() {
  const [isFontLoaded, setIsFontLoaded] = useState(false);

  useEffect(() => {
    font.load(null, 20000).then(() => {
      setIsFontLoaded(true);
    });
  }, []);

  return (
    <div
      style={{
        opacity: isFontLoaded ? 1 : 0,
        transition: 'opacity 0.3s ease',
      }}
    >
      Test
    </div>
  );
}

위 코드와 같이 load 메서드를 통해 어느 시점에 폰트가 다운로드 되었는지를 알 수 있습니다. opacity를 폰트 로드 상태에 따라 0에서 1로 바꿔 주고 transition 속성을 설정하면 폰트가 로드될 때 텍스트가 애니메이션 효과와 함께 나타날 것입니다.

텍스트를 단순히 빠르게 띄우는 것도 좋지만, 이런 식으로 사용자에게 보기 편하게 서비스하는 것도 체감 성능을 높이는 데 중요합니다.

폰트 파일 크기 줄이기

이번에는 폰트 파일 크기를 줄여 폰트가 다운로드되는 시간을 단축하는 방법을 알아보겠습니다. 폰트 파일 크기를 줄이는 방법에는 두 가지가 있습니다. 하나는 이미지나 비디오와 마찬가지로 압축률이 좋은 폰트 포맷을 사용하는 것이고, 다른 하나는 필요한 문자의 폰트만 로드하는 것입니다.

폰트 포맷 변경하기

우리가 흔히 알고 있는 폰트 포맷은 TTF 및 OTF 포맷입니다. 이번글에서 사용하는 포맷은 TTF 포맷입니다. 하지만 TTF 포맷은 파일 크기가 매우 큽니다. 웹 환경에서는 해당 리소스(폰트)를 매번 다운로드 해야 하므로 적절하지 않습니다. 그래서 나온 것이 WOFF입니다.

WOFF는 Web Open Font Fomat의 약자로, 이름 그대로 웹을 위한 폰트입니다. 이 포맷은 TTF 폰트를 압축하여 웹에서 더욱 빠르게 로드할 수 있도록 만들었습니다. 더 나아갓서 WOFF2라는 더욱 향상된 압축 방식을 적용한 포맷도 있습니다.

파일 크기 : EOT > TTF/OTF > WOFF > WOFF2

하지만 WOFF와 WOFF2에도 브라우저 호환성 문제가 있습니다. 물론 모던 브라우저에서는 정상적으로 사용할 수 있지만, 버전이 낮은 일부 브라우저에서는 해당 포맷을 지원하지 않을 수 있습니다. 그래서 WOFF2를 우선으로 적용하고 만약 브라우저가 WOFF2를 지원하지 않으면 WOFF를, WOFF도 지원하지 않으면 TTF를 적용해보도록 하겠습니다.

앞서서 말한것처럼 현재 사용하고 있는 포맷은 TTF로 가정하고 이 포맷 폰트를 Transfonter 라는 서비스를 이용하여 WOFF와 WOFF2로 변환을 해보겠습니다.

https://transfonter.org/

해당 서비스를 이용하여 폰트를 변환하는 방법은 생략하겠습니다. 위에 해당 서비스 링크를 추가해두었으니 참고 부탁드립니다.

TTF 포맷을 WOFF와 WOFF2로 변환을 하게 된다면 1.9MB(TTF)에서 790KB(WOFF)와 447KB(WOFF2)로 폰트 파일의 크기가 줄어듭니다.

폰트를 적용하기 위해서는 @font-face 에 넣으면 되며, src 속성에 적용 우선순위가 높은 것부터 차례로 나열하면 됩니다.

@font-face {
  font-family: 폰트 이름;
  src: url('폰트.woff2') format('woff2'), url('폰트.woff') format('woff'),
    url('폰트.ttf') format('truetype');
  font-display: block;
}

해당 폰트가 적용된 페이지를 브라우저에서 Network패널에서 확인해보면 WOFF2 포맷의 폰트가 로드되는 것을 볼 수 있습니다. 만약 브라우저가 WOFF2를 지원하지 않는다면 WOFF를 로드할 것입니다.

서브센 폰트 사용

앞서서는 폰트 포맷을 변경하여 파일 크기를 줄여 봤습니다. 꽤 의미 있는 수준으로 줄어들긴 했지만 447KB(WOFF2)이라는 용량은 여전히 너무 큽니다. 하지만 폰트라는 것은 모든 글자에 대한 스타일 정보를 모두 담고 있기 때문에 이 이상 줄이기 어려울지도 모릅니다. 그런데 만약 웹 서비스에서 웹 폰트를 사용하는 텍스트가 하나이거나 특정 부분일 경우에는 모든 문장의 폰트 정보를 가지고 있을 필요 없이 해당 문자의 폰트 정보만 있으면 된다는 의미입니다.

이렇게 모든 문자가 아닌 일부 문자의 폰트 정보만 가지고 있는 것을 서브셋 폰트라고 합니다.

서브셋 폰트는 이전에 폰트 포맷을 변경할때 사용하였던 Transfonter 서비스에서 생성할 수 있습니다.

위에 첨부된 사진을 보면 빨간색 박스로 하이라이트된 Charactors 속성에서 필요한 문자를 입력하면 해당 문자관련 서브셋 폰트 파일이 생성됩니다.

그래서 변환된 파일을 확인해보면 파일 크기가 매우 작음을 확인할 수 있습니다. 왜냐하면 기존에 폰트 파일에는 모든 문자의 폰트 정보가 포함되어 있었기 때문에 파일 크기가 굉장히 컷는데, 서브셋 폰트에서는 일부 문자를 제외하고 모두 제거했기 때문입니다.

해당 폰트도 이전 했던 방식처럼 @font-face 에 넣으면 됩니다.

@font-face {
  font-family: 폰트 이름;
  src: url('서브셋 폰트.woff2') format('woff2'), url('서브셋 폰트.woff') format('woff'),
    url('서브셋 폰트.ttf') format('truetype');
  font-display: block;
}

서브셋 폰트를 적용한 후 Network 패널에서 확인해보면, 서브셋 폰트가 아닌것보다 파일 크기가 줄었고, 빠르게 로드되는 것을 볼 수 있습니다.

여기서 또 다른 방법이 있습니다. 폰트를 파일 형태가 아닌 Data-URI 형태로 CSS 파일에 포함할 수 있습니다.

Data-URI랄 data 스킴이 접두어로 붙은 문자열 형태의 데이터인데, 쉽게 말해서 파일을 문자열 형태로 변환하여 문서(HTML, CSS, 자바스크립트 등)에 인라인으로 삽입하는 것입니다. 보통은 css 파일이 로드된 후 폰트를 적용하기 위해 폰트 파일을 추가로 로드해야 하지만, Data-URI 형태로 만들어서 css 파일에 넣어 두면 별도의 네트워크 로드 없이 css 파일에서 폰트를 사용할 수 있습니다.

폰트 파일을 Data-URI 형태로 css 에 포함하려면 먼저 폰트를 문자열 데이터로 변환해야 합니다. 이때도 Transfonter을 이용하면 됩니다. 해당 폰트를 Data-URI 형태로 추출하기 위해서 Base64 encode 옵션을 On으로 설정해 줍니다.

변환이 완료되면 변환된 파일 중 stylesheet.css 파일을 열어 @font-face에서 src속성에 url 부분을 복사해서 가져와 적용할 css 파일에 넣어주면됩니다.

@font-face {
  font-family: 폰트 이름;
  src: url('data:font/woff2;charset=utf-8;base64....') format('woff2'), url('서브셋 폰트.woff')
      format('woff'), url('서브셋 폰트.ttf') format('truetype');
  font-display: block;
}

그리고나서 해당 페이지를 브라우저 Network 패널에서 확인해보면 폰트가 Data-URI 형태로 로드되는 것을 볼 수 있습니다. 그리고 소요시간을 보면 매우 짧은것을 확인해 볼 수 있습니다.

기본적으로 브라우저에서 Data-URI를 네트워크 트래픽으로 인식해서 기록하지만 실제로는 이미 다른 파일 내부에 임베드되어 있어 별도의 다운로드 시간이 필요하지 않습니다. 그래서 시간이 매우 짧은 것입니다. 해당 Data-URI 항목을 클릭하여 Timing 탭을 살펴보면 다운로드 시간이 고려하지 않아도 될 만큼 작음을 알 수 있습니다.

여기서 주의할점은 Data-URI 형태가 항상 좋은 것은 아니라는 점입니다. 해당 폰트 내용은 css 파일에 포함된 것이므로 css의 다운로드 속도 또한 고려해야 합니다. Data-URI가 포함된 만큼 css 파일의 다운로드는 느려질 것입니다. 이번 글에서는 해당 폰트 파일을 서브셋을 통해 파일 크기를 매우 작게 만들었기 때문에 Data-URI 형태로 포함해도 큰 문제가 없지만, 매우 큰 파일을 Data-URI 형태로 포함한다면 포함한 파일 크기가 그만큼 커져 또 다른 병목을 발생시킬 수 있습니다.

이미지 사이즈 최적화

Fri, 11 Aug 2023 16:00:01 GMT

해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.

저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다.

느린 이미지 로딩 분석

개발자 도구에서 Network 패널을 통해 분석할 이미지를 살펴보면, 파일 크기가 매우 큰 것을 볼 수 있습니다. 이미지 사이즈가 크면 다운로드에 많은 시간이 걸리고 그만큼 다른 작업에 영향을 줍니다.

이미지 포맷 종류

이미지 사이즈 최적화는 간략히 말하면 이미지의 가로, 세로 사이지를 줄여 이미지 용량을 줄이고 그만큼 더 빠르게 다운로드하는 기법입니다.

이미지의 사이즈를 줄이기 전에, 이미지를 잘 다루기 위해 짚고 넘어가야 할 것이 있습니다. 이미지 포맷이라는 것입니다. 이미지 포맷중에서 SVG와 같은 백터 이미지가 아닌 비트맵 이미지 포맷 중 대표적인 세가지 포맷을 살펴보겠습니다.

백터 이미지와 비트맵 이미지란?!

https://imweb.me/faq?mode=view&category=29&category2=33&idx=71515

PNG
JPG
WebP

PNG

무손실 압축 방식으로 원본을 훼손 없이 압축하며 알파 채널을 지원하는 이미지 포맷입니다. 알파 채널은 투명도를 의미합니다. PNG 포맷으로 배경 색을 투명하게 하여 뒤에 있는 요소가 보이는 이미지를 만들 수 있습니다.

JPG(JPEG)

PNG와 다르게 압축 과정에서 정보 손실이 발생합니다. 하지만 그만큼 이미지를 더 작은 사이즈로 줄일 수 있습니다. 그래서 일반적으로 웹에서 이미지를 사용할 때는 고화질이어야 하거나 투명도 정보가 필요한게 아니라면 JPG를 사용합니다.

WebP

무손실 압축과 손실 압축을 모두 제공하는 최신 이미지 포맷으로, 기존의 PNG와 JPG에 비해서 대단히 효율적으로 이미지를 압축할 수 있습니다. WebP 방식은 PNG 대비 26%, JPG 대비 25 ~ 34% 더 나은 효율을 가지고 있다고 합니다.

WebP 관련하여 공식 문서

https://developers.google.com/speed/webp?hl=ko

앞서 설명으로만 봤을때는 PNG보다는 JPG, JPG보다는 WebP를 사용하는 것이 좋을 것 같지만, 마냥 간단한 문제는 아닙니다. 그 이유는 브라우저 호환성 때문입니다. WebP는 위에서 언급했듯 꽤나 최신 이미지 파일 포맷이라서 아직 지원하지 않는 브라우저도 있습니다.

WebP 브라우저 호환성: https://caniuse.com/?search=webp

사이즈: PNG > JPG > WebP
화질: PNG = WebP > JPG
호환성: PNG = JPG > WebP

Squoosh를 사용하여 이미지 변환

JPG or PNG 포맷의 이미지를 WebP 포맷으로 변환하여 고화질, 저용량의 이미지로 최적화해 보려고 합니다. 그러려면 이미지를 변환해 주는 컨버터가 필요한데, 여기서 사용할 컨버터는 Squoosh 라는 애플리케이션입니다.

https://squoosh.app/

Squoosh는 구글에서 만든 이미지 컨버터 웹 애플리케이션입니다. 별도의 프로그램 설치 없이 웹에서 이미지를 쉽게 여러 가지 포맷으로 변환할 수 있습니다. 그리고 원본과 비교하는 등 다양한 기능을 이용할 수 있습니다.

이번 글에서는 Squoosh를 사용하는 방법에 대하여 다루지 않겠습니다. 사용법은 아래 동영상 링크를 참고 부탁드립니다.

https://www.youtube.com/watch?v=8QYVWrBDz2Y

각 이미지들을 WebP 포맷으로 변경후 다시 Network 패널을 보면 이미지의 사이즈가 줄어들었고, 해당 이미지 크기가 줄어들었기 때문에 다운로드 시간도 짧아집니다.

예를 들어 아래 코드처럼 브라우저 사이즈에 따라 지정된 이미지를 렌더링하거나 지원되는 타입의 이미지를 찾아 렌더링합니다.

// 뷰포트에 따라 구문
<picture>
  <source media="(min-width:650px)" srcset="img1.jpg" />
  <source media="(min-width:465px)" srcset="img2.jpg" />
  <img src="img3.jpg" alt="img" style="width:auto" />
</picture>

// 이미지 포맷에 따라 구분
<picture>
  <source srcset="img1.avif" type="image/avif" />
  <source srcset="img2.webp" type="image/webp" />
  <img src="img3.jpg" alt="img" />
</picture>

이미지 지연 로딩

Tue, 08 Aug 2023 18:00:01 GMT

해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.

저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다.

네트워크 분석

여기서 잠깐 참고하면 Fast 3G의 다운로드 속도는 1500kb/s, 업로드 속도는 750kb/s이며 Slow 3G의 다운로드 속도는 780kb/s, 업로드 속도는 330kb/s입니다.

이제 이전에 설정하였던 커스텀 옵션으로 throttling을 적용하고 네트워크 분석을 해 봅시다.

그러면 해당 이미지들을 페이지가 로드될 때 로드하지 않는다면 언제 로드해야 가장 좋은 방법 일까요?

Intersection Observer

window.addEventListener('scroll', () => console.log('스크롤 이벤트 발생!'))

// 스크롤을 조금 움직일때 마다 엄청나게 많은 콜백함수가 실행됩니다.
// 위 코드를 크롬 브라우저에 console 탭에서 입력하고 해당 페이지에서 스크롤을 해보십시오

위 코드처럼 스크롤 이벤트를 이용한다면 무거운 로직이 들어가기라도 한다면 브라우저의 메인 스레드에 무리가 갑니다. 성능을 향상시키려다가 오히려 악화시키게 되는 꼴인 거죠. 물론 throtle과 같은 방식으로 처리할 수 있겠지만, 근본적인 해결 방법이 될 수는 없습니다.

throttle은 짧은 시간에 여러 번 발생하는 연산을 일정 시간 동안 한 번만 실행하도록 하는 기술입니다.

Intersection Observer 사용법 : https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Intersection Observer에 대하여 간략한 내용만 살펴보겠습니다.

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1.0.
};

const callback = (entries, observer) => {
  console.log('Entries', entries);
};

const observer = new IntersectonObserver(callback, options);

observer.observe(document.querySelector("#targer-element1"));

options는 Intersection Observer의 옵션입니다.

root: 대상 객체의 가시성을 확인할 때 사용되는 뷰포트 요소이고, 기본 값은 null 이고, null로 설정 시 브라우저의 뷰포트로 설정됩니다.
rootMargin: root 요소의 여백, 즉, root의 가시 범위를 가상으로 확장하거나 축소할때 사용됩니다.
threshold: 가시성 퍼센티지, 대상 요소가 어느 정도로 보일 때 콜백을 실행할지 결정합니다.

Intersection Observer 적용하기

이미지에 Intersection Observer를 활용하여 지연 로딩을 적용해 보겠습니다.

지금부터는 샘플코드 기반으로 설명 드리오니 샘플코드가 없는 분이시면 해당 내용만 알아 두시면 좋을것 같습니다.

function Card(props) {
  const imgRef = useRef(null);

  useEffect(() => {
    const options = {};
    const callback = (entries, observer) => {
      console.log('Entries', entries);
    };

    const observer = new IntersectionObserver(callback, options);

    observer.observe(imgRef.current);

    return () => {
      observer.disconnect();
    };
  }, []);

	return (
		<div className="Card text-center">
			<img src={props.image} ref={imgRef}/>
			{...중략...}
		</div>
	);
}

이전 코드에서 입력한 console.log 함수에 출력들을 보면 위 사진과 같습니다. entries 값이 배열 형태로 다양한 정보를 담고 있는 것이 보입니다. 이중에서 가장 중요한 값은 바로 isIntersecting 이라는 값입니다. 이 값은 해당 요소가 뷰포트 내에 들어왔는지를 나타내는 값입니다. 이 값을 통해 해당 요소가 화면에 보이는 것인지, 화면에서 나가는 것인지 알 수 있습니다.

function Card(props) {
  const imgRef = useRef(null);

  useEffect(() => {
    const options = {};
    const callback = (entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          console.log("is intersecting", entry.target.dataset.src);
          entry.target.src = entry.target.dataset.src;
          observer.unobserve(entry.target);
        }
      });
    };

    const observer = new IntersectionObserver(callback, options);

    observer.observe(imgRef.current);

    return () => {
      observer.disconnect();
    };
  }, []);

	return (
		<div className="Card text-center">
			<img data-src={props.image} ref={imgRef}/>
			{...중략...}
		</div>
	);
}

leetcode - 3Sum

Mon, 31 Jul 2023 14:00:10 GMT

문제 설명

정수 배열 nums가 주어졌을 때, i != j, i != k, j != k, nums[i] + nums[j] + nums[k] == 0이 되도록 모든 삼중 항 [nums[i], nums[j], nums[k]]을 반환합니다.

솔루션 집합에 중복된 삼중항이 포함되어서는 안됩니다.

예시 1

Input: nums = [-1,0,1,2,-1,-4]
Output: [[-1,-1,2],[-1,0,1]]
Explanation: 
nums[0] + nums[1] + nums[2] = (-1) + 0 + 1 = 0.
nums[1] + nums[2] + nums[4] = 0 + 1 + (-1) = 0.
nums[0] + nums[3] + nums[4] = (-1) + 2 + (-1) = 0.
The distinct triplets are [-1,0,1] and [-1,-1,2].
Notice that the order of the output and the order of the triplets does not matter.

예시 2

Input: nums = [0,1,1]
Output: []
Explanation: The only possible triplet does not sum up to 0.

예시 3

Input: nums = [0,0,0]
Output: [[0,0,0]]
Explanation: The only possible triplet sums up to 0.

제약 조건:

3 <= nums.length <= 3000
-105 <= nums[i] <= 105

문제 접근

입력받은 배열을 오름차순으로 정렬 후 세 개의 포인터를 이용히여 합이 0인지 비교해 나갑니다.

입력받은 배열을 복사하고 오름차순으로 정렬한다.
인덱스 i 부터 nums.length - 2 까지 반복한다. (세 개의 숫자가 필요하므로 nums의 자료 끝까지 반복할 필요가 없습니다.)
인덱스 j = i + 1, k = nums.length - 1 로 설정한다.
세 개의 값 모두 더한 값이 0 보다 작으면 인덱스 j 를 1 증가 시킨다.
1. 그 이유는 0 보다 작다는 것은 값이 너무 작다는 의미이므로 오름차순으로 정렬 되어있으므로 index를 1을 증가시켜 수를 크게 만듭니다.
세 개의 값 모두 더한 값이 0 보다 크면 인덱스 k 를 1 감소 시킨다.
1. 그 이유는 0 보다 크다는 것은 값이 너무 크다는 의미이므로 오름차순으로 정렬 되어있으므로 index를 1을 감소시켜 수를 작게 만듭니다.
숫자 값이 중복될 수 있으므로 숫자 값이 같을 경우 j++, k— 시킨다.
위 과정을 계속 반복하여 결과를 도출합니다.

function solution(nums) {
  const results = [];

	if (nums.length < 3) {
    return results;
  }

	const orderedNums = nums.slice().sort((a, b) => a - b);

	for (let i = 0; i < orderedNums.length - 2; i++) {
		if (i > 0 && orderedNums[i] === orderedNums[i - 1]) {
      continue;
    }

		let j = i + 1;
		let k = orderedNums.length - 1;

		while (j < k) {
			let sum = orderedNums[i] + orderedNums[j] + orderedNums[k];

			if (sum === 0) {
				results.push([orderedNums[i], orderedNums[j], orderedNums[k]]);

				while (orderedNums[j] === orderedNums[j + 1]) {
          j++;
        }
				while (orderedNums[k] === orderedNums[k - 1]) {
          k--;
        }

				j++;
				k--;
			} else if (sum < 0) {
				j++;
			} else {
				k--;
			}
		}
	}

	return results;
};

ES module로 깊은 다이빙~🐬

Sun, 30 Jul 2023 14:00:00 GMT

해당 글은 https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/ 글 기반으로 작성되었습니다.

모듈이 어떠한 문제를 해결하는가?!

javascript로 코드를 작성할때 변수를 선언하거나 변수를 가지고 어떠한 코드를 작성하거나 변수에 값을 할당하거나 즉, 변수 관리를 해본적이 있으실겁니다.

잘 생각해보면 코드를 작성하는 과정 대부분은 변수를 변경하는 것입니다. 그러므로 이러한 변수를 어떻게 구성하는지가 코드를 작성하는 능력이나 코드 유지 관리 능력에 큰 영향이 미칩니다.

자바스크립트에서 변수 관리를 조금 더 쉽게 해주기 위해 스코프라는 방법이 있습니다. 스코프가 동작하는 방식 때문에 함수는 다른 함수에 정의된 변수에 접근할 수 없습니다.

이러한 동작 방식 때문에 하나의 함수를 작업할 때 그 함수 하나만 생각하면 되기 때문에 다른 함수가 변수에 어떤 영향을 미칠지 걱정할 필요가 없습니다.

하지만 이러한 스코프때문에 단점도 있습니다. 서로 다른 함수간에 변수를 공유하기 어렵다는 점입니다. 변수를 스코프 외부에서 공유하기 위해서 가장 일반적인 방법은 해당 공유하려는 변수를 전역 스코프와 같이 상위 스코프에 배치하는 것입니다.

공유하려는 변수가 전역 스코프 위치한다고 가정을 한다면 이로 인해 코드 유지 관리가 까다로워집니다. 해당 전역 스코프 내에 있는 코드의 모든 부분이 변수를 변경할 수 있다는 점입니다. 해당 코드가 공유하는 변수를 실수로 덮어쓸 수 있는 문제가 잆습니다.

모듈이 문제를 해결하는 방법

모듈은 변수와 함수를 더 잘 정리할 수 있게 변수와 함수를 그룹화 할 수 있습니다.

이렇게 하면 함수와 변수가 모듈 스코프에 포함됩니다. 모듈 스코프는 모듈의 함수 간에 변수를 공유하는 데 사용할 수 있습니다. 하지만 함수 스코프와 달리 모듈 스코프에는 다른 모듈에서도 해당 변수를 사용할 수 있는 방법이 있습니다.

모듈의 변수, 클래스 또는 함수 중 어떤 것을 사용할 수 있는지 명시적으로 지정할 수 있습니다. 이러한 다른 모듈에서 사용할 수 있게 만드는것을 export(내보내기)라고 합니다.

모듈간에 변수를 내보내고 가져올 수 있는 기능이 있으면 코드를 서로 독립적으로 동작할 수 있는 작은 덩어리로 나누기가 훨씬 쉬어집니다. 그런 다음 레고 블록처럼 이러한 코드 조각을 결합하여 사용할 수 있습니다.

현재 활발하게 사용되고 있는 모듈 시스템은 두 가지입니다. CommonJS와 ESmodule이 있습니다.

ES modules 작동 방식

모듈로 개발할 때는 종속성 그래프를 작성합니다. 서로 다른 종속성 간의 연결은 사용하는 모든 import문에서 비롯됩니다.

이러한 import문은 브라우저나 Node.js가 로드해야 하는 코드를 정확히 파악하는 방법입니다. 그래프의 시작점으로 사용할 파일을 제공하면 됩니다. 거기서부터 import문을 따라 나머지 코드를 찾으면 됩니다.

그러나 이러한 파일 자체는 브라우저에서 사용할 수 있는 것이 아닙니다. 브라우저는 이러한 모든 파일을 파싱하여 Module Record라는 데이터 구조로 변환해야 합니다. 그래야만 파일에서 실제로 무슨 일이 일어나고 있는지 알 수 있습니다.

그리고 Module Record를 모듈 인스턴스로 전환해야 합니다. 인스턴스는 코드와 상태라는 두 가지를 결합합니다.

코드는 하나의 지침입니다. 무언가를 만드는 방법에 대한 레시피와 같습니다. 하지만 코드만으로 아무것도 할 수 없습니다. 그 지침과 함께 사용할 재료가 필요합니다.

상태는 위에서 말한 재료를 제공합니다. 상태는 특정 시점의 변수의 실제 값입니다. 이러한 변수는 값을 저장하는 메모리에 대한 별칭일 뿐입니다.

정리하면, 모듈 인스턴스는 코드(명령어 목록)와 상태(모든 변수의 값)를 결합니다.

결록적으로 진짜로 필요한것은 각 모듈에 대한 모듈 인스턴스입니다. 모듈 로딩 프로세스는 진입점(entry point)파일에서 모듈 인스턴스의 전체 그래프를 갖는 것으로 진행됩니다.

ES module에서는 해당 작업을 세 단계로 진행됩니다. 각 단계는 다음과 같습니다.

Construction(구성) - 모든 파일을 찾아서 다운로드하고 Module Record로 구문 분석을 합니다.
Instantiation(인스턴스화) - 메모리에서 내보낸 모든 값을 메모리 위치를 찾습니다. 그런 다음 exports와 import 모두 해당 메모리 위치를 가리키도록 합니다. 이를 연결이라고 합니다.
Evaluation(평가) - 코드를 실행하여 변수의 실제 값으로 해당 메모리 위치를 채웁니다.

ES module은 비동기적이라고 이야기 할 수 있습니다. 작업이 로드, 인스턴스화, 평가라는 세 가지 단계로 나뉘고 각 단계가 개별적으로 수행될 수 있기 때문에 비동기적이로 생각할 수 있습니다.

여기서 잠깐 CommonJS 이야기를 하면 CJS는 모듈과 그 아래의 종속성이 중간에 중단 없이 한번에 로드, 인스턴스화, 평가 됩니다.

그러나 단계 자체가 반드시 비동기식일 필요는 없습니다. 동기식으로 수행될 수도 있습니다. 로딩을 수행하는 항목에 따라 다릅니다. 모든 것이 ES 모듈 사양에 의해 제어되는 것은 아니기 때문입니다. 실제로 작업에는 서로 다른 사양이 적용되는 두 가지 반쪽이 있습니다.

ES Module Spec(사양)에는 파일을 모듈 레코드로 구문 분석하는 방법과 해당 모듈을 인스턴스화 및 평가하는 방법이 나와 있습니다. 그리고 HTML Spec(사양)에는 파일을 가져오는 로더와 관련된 사양이 나와 있습니다.

로더는 모듈이 로드되는 방식을 제어합니다. ES module 메서드인 ParseModule, Module.Instaniate, Module.Evaluate를 호출합니다.

각 단계에 대해여 조금 더 자세히 살펴보겠습니다.

Construction (구성)

구성 단계에서는 세 가지 일을 합니다.

모듈이 포함된 파일을 어디에서 다운로드할지 파악합니다.
URL에서 다운로드하거나 파일 시스템에서 로드하여 파일을 가져옵니다.
파일을 Module Record로 파싱합니다.

파일 찾기 및 가져오기

로더가 파일을 찾아서 다운로드하는 작업을 처리합니다. 먼저 진입점(entry point) 파일을 찾아야 합니다. HTML에서는 스크립트 태그를 사용하여 로더에 파일을 찾을 위치를 알려줍니다.

자바스크립트가 직접적으로 의존하는 다음 모듈을 찾기 위해서는 import문을 이용하여 로더에게 다음 모듈을 찾을 수 있는 위치를 알려줍니다.

하나의 파일을 구문 분석한 다음 종속성을 파악한 다음 종속성을 찾아 로드하는 방식으로 진행됩니다.

브라우저에서는 모든 파일을 각각을 다운로드할 때까지 메인 스레드를 차단하지 않습니다. 이런 메인 스레드를 차단하게 된다면 실제로 애플리케이션에서 모듈을 사용하기엔 너무 느릴 것입니다. 이러한 이유 때문에 ES module에서 구성, 인스턴스화, 평가 단계로 나눠놓은 이유입니다.

그래서 여러 단계로 분할하는 이 접근 방식은 ES module과 CommonJS 모듈의 주요한 차이점 중 하나입니다.

CommonJS는 파일 시스템에서 파일을 로드하는 것이기 때문에 인터넷을 통해 다운로드하는 것보다 훨씩 적은 시간이 걸리기 때문에 Nodejs는 파일을 로드하는 동안 메인 스레드를 차단할 수 있습니다. 그리고 파일이 이미 로드되었기 때문에 인스턴화 및 평가만 화면 됩니다. 즉, CommonJS에서는 별도의 단계로 분할하지 않습니다. 파일에 대한 모든 종속성을 로드, 인스턴스화 및 평가하면서 전체 종속성 트리를 따라 진행됩니다.

CommonJS 모듈이 있는 Nodejs에서는 해당 모듈에 주소를 입력하는 부분(require("여기"))에 변수를 사용할 수 있다는 것입니다. 다음 모듈을 찾기 전에 이 모듈의 모든 코드를 실행하기 때문입니다. 즉, 모듈 확인을 수행할 때 변수에 값을 갖게 됩니다.

하지만 ES module을 사용하면 평가를 수행하기 전에 전체 모듈 그래프를 미리 작성하게 됩니다. 즉, 변수에 아직 값이 없기 때문에 주소를 입력하는 부분( from 여기 )에 변수를 넣을 수 없습니다.

그러나 때로는 모듈 경로에 변수를 사용하는 것이 유용할 때가 있습니다. 예를 들어 코드가 수행하는 작업이나 실행 중인 환경에 따라 로드하는 모듈을 전환하고 싶을 때 Dynamic import(동적 가져오기)라는 방법이 있습니다. 이 기능을 사용하면 import(${path}/foo.js)와 같은 import 문을 사용할 수 있습니다.

이러한 동적 가져오기가 동작하는 방식은 import()를 사용하여 로드된 모든 파일이 별도의 그래프의 진입점으로 처리된다는 것입니다. 동적으로 가져온 모듈은 새 그래프를 시작하여, 이 그래프는 별도로 처리됩니다.

파일을 다운로드하는 로더는 가져온 모듈를 캐시합니다. 예를 들어 어떤 모듈 파일이 여러 모듈에 종속되어 있어도 한 번만 가져올 수 있습니다. 로더는 모듈 맵이라는 것을 사용하여 이 캐시를 관리합니다. 로더가 URL을 가져올 때 모듈 맵에 해당 URL을 저장하고 현재 파일을 가져오고 있다는 메모를 남깁니다. 그런 다음 요청을 전송하고 다음 파일 가져오기를 시작합니다.

다른 모듈이 동일한 파일에 종속되어 있으면 로더는 모듈 맵에서 각 URL을 조회합니다. 모듈 맵에서 해당 URL이 존재하면 다음 URL로 넘어갑니다.

Parsing(구문 분석)

이제 파일을 가져왔으니 모듈 레코드로 파싱해야 합니다. 이렇게 하면 브라우저가 모듈의 여러 부분을 이해하는 데 도움이 됩니다.

모듈 레코드가 생성되면 모듈 맵에 배치됩니다. 즉, 앞으로 요청이 있을 때마다 로더가 해당 모듈 맵에서 가져올 수 있습니다.

파싱에는 매우 큰 영향을 미치는 세부 사항이 하나 있습니다. 모든 모듈은 상단에 “use strict”(엄격 모드)가 있는 것처럼 파싱됩니다.

파싱을 시작하기 전에 어떤 종류의 파일(모듈인지 아닌지)을 파싱할지 알아야 합니다. 예를 들어 브라우저에서는 스크립트 태그에 type="module"을 입력하기만 하면 됩니다. 브라우저에 이 파일을 모듈로 파싱해야 함을 알립니다.

그러나 Nodejs 에서는 HTML 태그를 사용하지 않으므로 유형 속성을 사용할 수 있는 옵션이 있습니다. 이 문제를 해결하기 위해 시도한 한 가지 방법은 .mjs 확장자를 사용하는 것입니다. 이 확장자를 사용하면 Nodejs에 “이 파일은 모듈입니다”라고 알려줍니다.

로딩 프로세스(파일을 다운로드 하는 과정)이 끝나면 진입점 파일만 있던 상태에서 Module Record가 가득 채워진 상태로 바뀌게 됩니다.

다음 단계는 이 모듈을 인스턴스화하고 모든 인스턴스를 서로 연결하는 것입니다.

Instantiation (인스턴스화)

이전에 언급했듯이 인스턴스는 코드와 상태를 결합합니다. 상태는 메모리에 존재하므로 인스턴스화 단계에서는 메모리와 연결하는 작업이 전부입니다.

JS엔진이 모듈 환경 레코드를 생성합니다. 이 레코드는 모듈 레코드의 변수를 관리합니다. 그런 다음 메모리에서 모든 내보내기에 대한 메모리 주소를 찾습니다. 메모리에 있는 이러한 주소는 아직 값을 가져오지 않습니다. 실제 값이 채워지는 것은 평가단계 후에야 가능합니다.

모듈 그래프를 인스턴스화하기 위해 엔진은 그래프의 맨 아래, 즉 다른 것에 종속되지 않는 맨 아래에 있는 종속성까지 내려가서 해당 내보내기를 설정합니다.

엔진은 모듈이 의존하는 모든 내보내기를 연결하는 작업을 완료합니다. 그런 다음 다시 한 단계 위로 올라와 해당 모듈의 가져오기를 연결합니다. 내보내기와 가져오기는 모두 메모리에 동일한 위치를 가리킵니다.

CommonJS에서는 내보낼 때 전체 내보내기 객체가 복사됩니다. 즉, 내보내는 모든 값(예: 숫자)은 복사본이 됩니다. 내보내는 모듈이 나중에 해당 값을 변경해도 가져오는 모듈은 해당 변경 사항을 볼 수 없습니다.

이와 대조적으로 ES module은 라이브 바인딩이라는 것을 사용합니다. 두 모듈 모두 메모리에 동일한 위치를 가리킵니다. 즉, 내보내는 모듈에서 값을 변경하면 해당 변경 사항이 가져오기 모듈에 표시됩니다.

라이브 바인딩을 사용하는 이유는 코드를 실행하지 않고도 모든 모듈을 연결할 수 있기 때문입니다.

이 단계가 끝나면 모든 인스턴스와 내보내기/가져온 변수의 메모리 위치가 연결됩니다.

다음 단계는 코드 평가를 시작하고 해당 메모리 위치를 해당 값을 채울 수 있습니다.

Evaluation (평가)

마지막 단계는 각 메모리의 위치에 값을 채우는 단계입니다. JS 엔진은 최상위 코드를 실행하여 이 작업을 수행합니다.

평가는 수행 횟수에 따라 다른 결과를 가져올 수 있으므로 단 한 번만 평가해야 합니다. 이것이 모듈 맵이 필요한 이유 중 하나입니다. 모듈 맵은 각 모듈에 대해 하나의 모듈 레코드만 존재하도록 URL로 모듈을 캐시합니다. 이렇게 하면 각 모듈이 한 번만 실행됩니다.

서로 다른 모듈이 서로 가리키는 순환 참조 현상이 발생할 수도 있습니다.

이것이 CommonJS 모듈에서 어떻게 작동되는지 살펴보겠습니다. 먼저 main 모듈이 require 문까지 실행됩니다. 그런 다음 counter 모듈을 로드합니다.

그러면 counter 모듈이 내보내기 객체에서 메세지에 접근하려고 시도합니다. 하지만 아직 main 모듈에서 평가되지 않았기 때문에 정의되지 않은 상태로 반환됩니다. JS 엔진은 로컬 변수를 위한 메모리 공간을 할당하고 값을 정의되지 않은 것으로 설정합니다.

평가는 counter 모듈의 최상위에서 코드 끝까지 계속됩니다. main 모듈이 평가된 후 메시지에 대한 올바를 값을 얻을 수 있는지 확인하고 싶기 때문에 타임아웃을 설정합니다. 그런 다음 main 모듈에서 평가가 다시 시작됩니다.

메세지 변수가 초기화되고 메모리에 추가됩니다. 그러나 둘 사이에 연결이 없으므로 필요한 모듈에서 정의되지 않은 상태로 유지됩니다.

라이브 바인딩을 사용하여 내보내기가 처리되었다면 counter 모듈은 결국 올바른 값을 보게 될 것입니다. setTimeout이 실행될 때 쯤이면 main 모듈의 평가가 완료되어 값이 채워졌을 것입니다.

이러한 사이클을 지원하는 것이 ES module 설계의 큰 이유입니다. 이 3단계 설계가 이를 가능하게 합니다.

참조

https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/

leetcode - Longest Increasing Subsequence

Sun, 30 Jul 2023 12:00:10 GMT

문제 설명

정수 배열의 숫자가 주어지면, 엄격하게 증가하는 가장 긴 길이의 서브 시퀀스.

예시 1

Input: nums = [10,9,2,5,3,7,101,18]
Output: 4
Explanation: The longest increasing subsequence is [2,3,7,101], therefore the length is 4.

예시 2

Input: nums = [0,1,0,3,2,3]
Output: 4

예시 3

Input: nums = [7,7,7,7,7,7,7]
Output: 1

제약 조건:

1 <= nums.length <= 2500
-104 <= nums[i] <= 104

문제 접근

동적 계획법을 이용하여 접근합니다. 배열의 두번째 자료부터 시작하여 이전 요소와 비교합니다.

nums 배열의 길이만큰 빈 배열을 생성아여 모든 요소를 1로 채웁니다.
기준을 두번째 자료부터 시작하여 이전 요소까지 비교합니다.
기준 자료가 비교 대상보다 크면 1로 채운 배열을 업데이트 합니다.
해당 반복문을 마치고 temp 배열에 가장 큰 요소를 반환합니다.

function soultion(nums) {
  const temp = new Array(nums.length).fill(1);

  for (let i = 1; i < nums.length; i++) {
    for (let j = 0; j < i; j++) {
      if (nums[i] > nums[j]) {
        temp[i] = Math.max(temp[i], temp[j] + 1);
      }
    }
  }

  return Math.max(...temp);
};

leetcode - Find First and Last Position of Element in Sorted Array

Sat, 29 Jul 2023 16:00:10 GMT

문제 설명

감소하지 않는 순서로 정렬된 정수 배열이 주어졌을 때, 주어진 목표 값의 시작과 끝 위치를 구합니다.

배열에서 목표값을 찾을 수 없으면 [-1, -1]을 반환합니다.

런타임 복잡도가 O(log n)인 알고리즘을 작성해야 합니다.

예시 1

Input: nums = [5,7,7,8,8,10], target = 8
Output: [3,4]

예시 2

Input: nums = [5,7,7,8,8,10], target = 6
Output: [-1,-1]

예시 3

Input: nums = [], target = 0
Output: [-1,-1]

제약 조건:

0 <= nums.length <= 105
-109 <= nums[i] <= 109
nums is a non-decreasing array.
-109 <= target <= 109

문제 접근

투 포인터를 사용하여 left 는 배열의 첫 인덱스 부터 right 는 배열의 끝 인덱스 부터 하나씩 찾으면서 진행합니다.

left, right 각각 변수를 선언하여 각 index 위치를 할당합니다.
left는 1을 더하면서 right는 1을 빼면서 위치를 변경하여 target을 찾습니다.
위 과정을 left 와 right 의 위치가 만날때까지 반복합니다.

function solution(nums, target) {
  if (nums.length === 0) {
    return [-1, -1];
  }

  let left = 0;
  let right = nums.length - 1;

  while(left <= right) {
    if (nums[left] === target && nums[right] === target) {
      return [left, right];
    }

    if (nums[left] !== target) {
      left++;
    }

    if (nums[right] !== target) {
      right--;
    }
  }

  return [-1, -1];
};

퀵 정렬

Fri, 28 Jul 2023 18:30:01 GMT

퀵 정렬이란

퀵 정렬은 분할 및 정복 기반 알고리즘이며, 요소를 피벗으로 선택하고 정렬된 배열의 올바른 위치에 피벗을 배치하여 선택된 피벗을 중심으로 주어진 배열을 분할합니다.

퀵 정렬하는 과정을 간단히 정리하면 다음과 같습니다.

분할: 입력 배열을 피벗을 기준을 비균등하게 2개의 부분 배열(피벗보다 작은 요소들, 피벗보다 큰 요소들)로 분할합니다.
정복: 부분 배열을 정렬한다. 부분 배열의 크기가 충분히 작지 않으면 다시 분할하여 같은 과정을 진행합니다.
결합: 정렬된 부분 배열들을 하나의 바열에 합병한다.

퀵 정렬 동작 과정

배열 [10, 80, 30, 90, 40]을 예를 들어 살펴 보겠습니다.

피벗은 40으로 합니다. 입력된 배열에 피벗을 기준으로 작은값, 큰값으로 나눕니다.
```
[10, 30] 40 [90, 80]
```
왼쪽 배열에서 피벗을 30으로 합니다. 입력된 배열에 피벗을 기준으로 작은값, 큰값으로 나눕니다
```
[10] 30
```
왼쪽 배열에서 피벗을 80으로 합니다. 입력된 배열에 피벗을 기준으로 작은값, 큰값으로 나눕니다.
```
80 [90]
```
해당 과정이 각각 분할된 배열의 크기가 0, 1이나 될때까지 반복하고, 그 이후에는 결합합니다.
```
[10, 30, 40, 80, 90]
```

퀵 정렬 구현 코드

function partition(arr, low, high) {
  // 가장 오른쪽 값을 피벗으로 설정
  const pivot = arr[high];

  // 피벗 왼쪽에 작은 요소들을 넣기 위한 index
  let i = low - 1;

  for (let j = low; j <= high - 1; j++) {
    // 피벗보다 작은 요소를 찾아
    if (arr[j] < pivot) {
      // Increment index of smaller element
      i++;
      [arr[i], arr[j]] = [arr[j], arr[i]];
    }
  }

  // 피벗을 알맞은 위치에 넣기
  [arr[i + 1], arr[high]] = [arr[high], arr[i + 1]];

  // 피벗을 반환한다
  return i + 1;
}

function quickSort(arr, low, high) {
  if (low >= high) {
    return;
  }

  // 분할
  const pivot = partition(arr, low, high);

  // 피벗 기준을 왼쪽, 오른쪽 배열을 재귀적으로 호출하여 정렬하는 과정 (정복)
  quickSort(arr, low, pivot - 1);
  quickSort(arr, pivot + 1, high);
}

const arr = [10, 7, 8, 9, 1, 5];

quickSort(arr, 0, arr.length - 1);

시간 복잡도 & 공간 복잡도

시간 복잡도

퀵 정렬의 최악의 경우 시간 복잡도는 O(n^2)입니다.
퀵 정렬의 평균적인 경우의 시간 복잡도는 O(nlogn)입니다.
최선의 경우의 시간 복잡도는 O(nlogn)입니다.

공간 복잡도

퀵 정렬의 공간 복잡도는 재귀 스택 공간을 고려하지않으면 O(1)이고 고려하면 O(N)입니다.

퀵 정렬의 특징

대용량 데이터에서 효율적입니다.
최악의 경우 O(N^2)의 시간 복잡도를 가집니다. (피벗이 잘못 선택되었을 때 발생합니다.)
작은 데이터에서는 적합하지 않습니다.
안정적인 정렬이 아닙니다. 즉, 두 요소의 키가 동일한 경우 퀵 정렬의 경우 정렬된 출력에서 상대적인 순서가 유지되지 않습니다.

참조

https://gmlwjd9405.github.io/2018/05/10/algorithm-quick-sort.html

https://www.geeksforgeeks.org/quick-sort/

https://gyoogle.dev/blog/algorithm/Quick%20Sort.html

병합 정렬

Fri, 28 Jul 2023 18:00:01 GMT

병합 정렬이란

병합 정렬은 더 자은 하위 배열로 나누고 각 하위 배열을 정렬한 다음 정렬된 하위 배열을 다시 병합하여 최종 정렬된 배열을 형성하는 정렬 알고리즘입니다. 즉, 분할 정복 방법을 통하여 구현됩니다.

병합 정렬하는 과정을 간단히 정리하면 다음과 같습니다.

분할: 입력 배열을 같은 크기의 2개의 부분 배열로 분할합니다.
정복: 부분 배열을 정렬한다. 부분 배열의 크기가 충분히 작지 않으면 다시 분할하여 같은 과정을 진행합니다.
결합: 정렬된 부분 배열들을 하나의 배열에 병합합니다.

병합 정렬은 배열을 더 이상 분할할 수 없을 때까지, 즉 배열에 요소가 하나만 남을 때까지 배열을 계속 반으로 분할하는 재귀 알고리즘입니다. (요소가 하나인 배열은 항상 정렬됨). 그런 다음 정렬된 하위 배열이 하나의 정렬된 배열로 병합됩니다.

병합 정렬 동작 과정

배열 [38, 27, 43, 10]을 예를 들어 살펴 보겠습니다.

배열을 두 개의 동일한 절반으로 나눕니다.
```
[38, 27] [43, 10]
```
더 이상 나눌 수 없는 단위까지 나누고, 해당 나눌 수 없는 단위(즉, 요소가 1개일때)는 항상 정렬된 상태입니다.
```
[38] [27] [43] [10]
```
하위 배열을 정렬하고 병합합니다.
```
[27, 38] [10, 43]
```
해당 병합 과정을 정렬된 배열이 만들어질 때까지 반복합니다.
```
[10, 27, 38, 43]
```

병합 정렬 구현 코드

function merge(arr, left, mid, right) {
  const leftArrLength = mid - left + 1; // 완쪽 배열의 길이
  const rightArrLength = right - mid; // 오른쪽 배열의 길이
  
  // 왼쪽 배열의 길이 만큼 임시 배열 생성
  const leftArr = new Array(leftArrLength); 
  
  // 오른쪽 배열의 길이 만큼 임시 배열 생성
  const rightArr = new Array(rightArrLength);
 
  // 왼쪽 배열에 알맞은 요소를 추가
  for (let i = 0; i < leftArrLength; i++) {
    // left + i : 기준을 left 값(왼쪽 배열의 첫번째 index)을 가지고 알맞은 요소를 하나씩 추가한다.
    leftArr[i] = arr[left + i];
  }
  
  // 오른쪽 배열에 알맞은 요소를 추가
  for (let i = 0; i < rightArrLength; i++) {
    // mid + 1 + i : 기준을 mid + 1 값(오른쪽 배열의 첫번째 index)을 가지고 알맞은 요소를 하나씩 추가한다.
    rightArr[i] = arr[mid + 1 + i];
  }
  
  let i = 0;
  let j = 0;
  let k = left;
  
  // 왼쪽 배열과 오른쪽 배열의 각 첫번쨰 요소 부터 비교하여 정렬 후에 배열 arr에 추가한다. (결합)
  while (i < leftArr.length && j < rightArr.length) {
    if (leftArr[i] <= rightArr[j]) {
      arr[k] = leftArr[i];
      i++;
    } else {
      arr[k] = rightArr[j];
      j++;
    }
    
    k++;
  }
  
  // 왼쪽 배열의 남은 요소들을 배열 arr에 추가한다.
  while (i < leftArrLength) {
    arr[k] = leftArr[i];
    i++;
    k++;
  }
  
  // 오른쪽 배열의 남은 요소들을 배열 arr에 추가한다.
  while (j < rightArrLength) {
    arr[k] = rightArr[j];
    j++;
    k++;
  } 
}

// left은 하위 배열의 왼쪽 인덱스이고 right은 하위 배열의 오른쪽 인덱스입니다.
function mergeSort(arr, left, right) {
  if (left >= right) {
    return;
  }
  
  const mid = parseInt((left + right) / 2); // 중간 위치
  
  mergeSort(arr, left, mid); // 0 ~ 중간 위치까지 배열
  mergeSort(arr, mid + 1, right); // 중강 위치 + 1 ~ 마지막 요소까지 배열
  merge(arr, left, mid, right); // 분할한 배열을 정렬하여 결합하는 과정
}

const tempArr = [ 12, 11, 13, 5, 6, 7 ];

mergeSort(tempArr, 0, tempArr.length - 1);

console.log(tempArr); // [5, 6, 7, 11, 12, 13]

시간 복잡도 & 공간 복잡도

시간 복잡도

병합 정렬의 최악의 경우 시간 복잡도는 O(nlogn)입니다.
병합 정렬의 평균적인 경우의 시간 복잡도는 O(nlogn)입니다.
최선의 경우의 시간 복잡도는 O(nlogn)입니다.

공간 복잡도

병합 정렬의 공간 복잡도는 O(N)입니다.

병합 정렬의 특징

최악의 경우 O(nlogn)의 시간 복잡도로 인하여 대규모 데이터 집합을 정렬하는데 유용합니다.
외부 정렬을 사용합니다.
안정적인 정렬입니다. 즉, 입력 배열에서 동일한요소의 상대적인 순서를 유지합니다.
병합된 하위 배열을 저장하기 위해 추가 메모리가 필요합니다.
제자리 정렬이 아닙니다.
작은 데이터 세트의 경우 성능이 느려질 수 있습니다.

참조

https://gmlwjd9405.github.io/2018/05/08/algorithm-merge-sort.html

https://www.geeksforgeeks.org/merge-sort/

https://gyoogle.dev/blog/algorithm/Merge%20Sort.html

선택 정렬

Fri, 28 Jul 2023 17:30:01 GMT

선택 정렬이란

선택 정렬은 해당 순서에 원소를 넣을 위치는 이미 정해져 있고, 어떤 원소를 넣을지 선택하는 알고리즘입니다. 간단하게 말하면 해당 자리를 선택하고 그 자리에 오는 값을 찾는것이라고 생가하면 될 것 같습니다.

선택 정렬하는 과정을 간단히 정리하면 다음과 같습니다.

첫 번쨰 자료를 두 번째 자료 부터 마지막 자료까지 차례대로 비교하여 가장 작은 값을 찾아 첫 번째에 둡니다.
두 번쨰 자료를 세번째 자료 부터 마지막 자료까지 차례대로 비교하여 그 중 가장 작은 값을 찾아 두 번째에 둡니다.
배열의 마지막 요소까지 위 과정을 반복합니다.

1회전을 수행하고 나면 가장 작은 값의 자료가 맨 앞에 오게 되므로 그 다음 회전부터는 두 번째 자료를 가지고 비교합니다.

선택 정렬 동작 과정

배열 [64, 25, 12, 22, 11]을 예를 들어 살펴 보겠습니다.

첫 번째 자리에 들어갈 가장 작은 값을 찾습니다, 가장 작은 값은 11 이므로 64와 11 자료의 위치를 바꿉니다.
```
[11, 25, 12, 22, 64]
```
두 번째 자리에 들어갈 가장 작은 값을 찾습니다, 두 번째 자료부터 가장 작은 값은 12 이므로 25와 12 자료의 위치를 바꿉니다.
```
[11, 12, 25, 22, 64]
```
세 번째 자리에 들어갈 가장 작은 값을 찾습니다, 세 번째 자료부터 가장 작은 값은 22 이므로 25와 22 자료의 위치를 바꿉니다.
```
[11, 12, 22, 25, 64]
```
네 번째 자리에 들어갈 가장 작은 값을 찾습니다, 네 번째 자료부터 가장 작은 값은 25 이므로 자료의 위치를 바꾸지 않습니다.
```
[11, 12, 22, 25, 64]
```

선택 정렬 구현 코드

function selectionSort(arr) {
  let temp;
  let minIndex;
  
  for (let i = 0; i < arr.length - 1; i++) {    
    minIndex = i;
    
    for (let j = i + 1; j < arr.length; j++) {
      if(arr[j] < arr[minIndex]) {
      	minIndex = j;
      }
    }
    
    if (minIndex !== i) {
      temp = arr[i];
      arr[i] = arr[minIndex];
      arr[minIndex] = temp;
    }
  }
}

시간 복잡도 & 공간 복잡도

시간 복잡도

선택 정렬의 최악의 경우 시간 복잡도는 O(N^2)입니다.
선텍 정렬의 평균적인 경우의 시간 복잡도는 O(N^2)입니다.
최선의 경우의 시간 복잡도는 O(N^2)입니다.

공간 복잡도

선택 정렬의 공간 복잡도는 O(1)입니다.

선택 정렬의 특징

안정적인 배열이 아닙니다.
제자리 정렬 알고리즘입니다.
이해하고 구현하기 쉽습니다.

참조

https://gmlwjd9405.github.io/2018/05/06/algorithm-selection-sort.html

https://www.geeksforgeeks.org/selection-sort/

https://gyoogle.dev/blog/algorithm/Selection%20Sort.html

버블 정렬

Fri, 28 Jul 2023 17:00:01 GMT

버블 정렬이란

버블 정렬은 순서가 잘못된 경우 인접한 요소를 반복적으로 교체하는 방식으로 진행되는 알고리즘입니다.

버블 정렬하는 과정을 간단히 정리하면 다음과 같습니다.

첫 번째 자료와 두 번째 자료 비교
두 번째 자료와 세 번째 자료 비교
세 번째 자료와 네 번째 자료 비교
배열의 마지막 요소까지 위 과정을 반복합니다.

가장 처음 1회전 정렬을 수행하고 나면 가장 큰 자료가 맨 뒤로 이동합니다. 따라서 맨 큰에 있는 자료는 정렬에서 제외되어서 정렬을 수행할때마다 정렬에서 제외되는 데이터가 하나씩 늘어납니다.

버블 정렬 동작 과정

배열 [6, 3, 0, 5]을 예를 들어 살펴 보겠습니다.

6은 3보다 크므로 두 개의 위치를 바꾸고, 6은 0보다 크므로 두 개위 위치를 바꾸고, 6운 5보다 크므로 두 개의 위치를 바꿉니다. 가장 큰 요소는 배열의 끝에 배치됩니다.
```
[3, 0, 5, 6]
```
3은 0보다 크므로 두 개의 위치를 바꾸고, 3은 5보다 작으므로 두 개의 위치를 바꾸지 않습니다. 배열의 가장 끝 요소는 이미 정렬 되어있므로 비교하지 않습니다.
```
[3, 0, 5, 6]
```
3은 0보다 크므로 두 개의 위치를 바꿉니다. 배열의 가장 끝 - 1 인 요소는 이미 정렬된 되어있므로 비교하지 않습니다.
```
[0, 3, 5, 6]
```

버블 정렬 구현 코드

function bubbleSort(arr) {
  let temp;
  
  for (let i = 0; i < arr.length - 1; i++) {    
    for (let j = 0; j < arr.length - 1 - i; j++) {
      if(arr[j] > arr[j + 1]) {
        temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
}

시간 복잡도 & 공간 복잡도

시간 복잡도

버블 정렬의 최악의 경우 시간 복잡도는 O(N^2)입니다.
버르 정렬의 평균적인 경우의 시간 복잡도는 O(N^2)입니다.
최선의 경우의 시간 복잡도는 O(N^2)입니다.

공간 복잡도

삽입 정렬의 공간 복잡도는 O(1)입니다.

버블 정렬의 특징

추가 메모리 공간이 필요하지 않습니다.
구현이 매우 간단합니다.
안정적인 배열입니다.
제자리 정렬입니다.

참조

https://gmlwjd9405.github.io/2018/05/06/algorithm-bubble-sort.html

https://www.geeksforgeeks.org/bubble-sort/

https://gyoogle.dev/blog/algorithm/Bubble%20Sort.html

삽입 정렬

Fri, 28 Jul 2023 16:00:01 GMT

삽입 정렬이란

배열의 요소 중에 두 번쨰 자료부터 시작하여 그 앞(왼쪽)의 자료들과 비교하여 삽입할 위치를 지정한 후 자료를 뒤로 옮기고 지정한 자리에 자료를 삽입하여 정렬하는 알고리즘입니다.

삽입 정렬하는 과정을 간단히 정리하면 다음과 같습니다.

두 번째 자료는 첫번째 자료와 비교
세 번째 자료는 두 번째와 첫 번째 자료와 비교
네 번째 자료는 세 번째, 두 번째와 첫 번째 자료와 비교
배열의 마지막요소 까지 위 과정을 반복합니다.

삽입 정렬 동작 과정

배열 [12, 11, 13, 5, 6]을 예를 들어 살펴 보겠습니다.

11은 12 보다 작으므로 두 개의 위치를 바꿉니다.
```
[12, 11, 13, 5, 6]
```
13이 12보다 크므로 두 개의 위치를 바꾸지 않습니다, 두 개의 위치가 바뀌지 않았다는 말은 13과 11을 굳이 비교하지 않아도 됩니다. 그 이유는 [11, 12]은 이미 그 전 과정에서 오름차순으로 정렬이 되었기 때문입니다.
```
[11, 12, 13, 5, 6]
```
5는 13보다 작으므로 두 개의 자리를 바꿉니다. 그리고 5는 12 보다 작으므로 두 개의 자리를 바꿉니다. 그리고 5는 11보다 작으므로 두 개의 자리를 바꿉니다.
```
[5, 11, 12, 13, 6]
```
6은 13 보다 작으므로 두 개의 자리를 바꿉니다. 그리고 6은 12보다 작으므로 자리를 바꿉니다, 그리고 6은 11보다 작으므로 자리를 바꿉니다. 마지막으로 6은 5보다 크므로 자리를 바꾸지 않습니다.
```
[5, 6, 11, 12, 13]
```

삽입 정렬 구현 코드

function insertSort(arr) {
  let temp;
  let j;

  for (let i = 1; i < arr.length; i++) {
    temp = arr[i];
    j = i - 1;

    while (j >= 0 && arr[j] > temp) {
      arr[j + 1] = arr[j];
      j--;
    }

    arr[j + 1] = temp;
  }
}

시간 복잡도 & 공간 복잡도

시간 복잡도

삽입 정렬의 최악의 경우 시간 복잡도는 O(N^2)입니다.
삽입 정렬의 평균적인 경우의 시간 복잡도는 O(N^2)입니다.
최선의 경우의 시간 복잡도는 O(N)입니다.

공간 복잡도

삽입 정렬의 공간 복잡도는 O(1)입니다.

삽입 정렬의 특징

이 알고리즘은 구현이 간단한 가장 간단한 알고리즘 중 하나입니다.
기본적으로 삽입 정렬은 작은 데이터 값에 효율적입니다.
삽입 정렬은 이미 부분적으로 정렬된 데이터 집합에 적합합니다.
삽입 정렬은 요소가 역순으로 정렬된 경우 정렬하는 데 최대 시간이 걸립니다. 그리고 요소가 이미 정렬된 경우 최소 시간(O(n))이 소요됩니다.
삽입 정렬을 제자리 정렬 알고리즘입니다.
삽입 정렬은 안정적인 정렬 알고리즘입니다.
삽입 정렬은 요소 수가 적을 때 사용됩니다. 입력 배열이 거의 정렬이 되어 있고 전체 큰 배열에 몇 개의 요소만 잘못 배치된 경우에도 유용할 수 있습니다.

참조

https://gmlwjd9405.github.io/2018/05/06/algorithm-insertion-sort.html

https://www.geeksforgeeks.org/insertion-sort/

https://gyoogle.dev/blog/algorithm/Insertion%20Sort.html

leetcode - Find All Anagrams in a String

Fri, 28 Jul 2023 14:00:10 GMT

문제 설명

두 문자열 s와 p가 주어졌을 때, s에 있는 p의 애너그램의 모든 시작 인덱스의 배열을 반환합니다. 어떤 순서로든 답을 반환할 수 있습니다.

애너그램은 다른 단어 또는 구의 글자를 재배열하여 형성된 단어 또는 구문으로, 일반적으로 원래 글자를 모두 정확히 한 번 사용합니다.

예시 1

Input: s = "cbaebabacd", p = "abc"
Output: [0,6]
Explanation:
The substring with start index = 0 is "cba", which is an anagram of "abc".
The substring with start index = 6 is "bac", which is an anagram of "abc".

예시2

Input: s = "abab", p = "ab"
Output: [0,1,2]
Explanation:
The substring with start index = 0 is "ab", which is an anagram of "ab".
The substring with start index = 1 is "ba", which is an anagram of "ab".
The substring with start index = 2 is "ab", which is an anagram of "ab".

제약 조건:

1 <= s.length, p.length <= 3 * 104
s and p consist of lowercase English letters.

문제 접근

시작 인덱스, 끝 인덱스를 이용하여 슬라이딩 기법을 이용합니다.

문자열 p에 대하여 해당 문자열이 나오는 횟수를 info 객체에 저장합니다.
문자열 s에서 start, end 변수를 index로 활용합니다.
해당 맞는 문자가 나오면 count 수를 감소 시킵니다.
해당 count 수가 0 이되는 시점에 start 를 result 배열에 추가한다.
start ~ end 사이에 거리가 p의 길이와 같다면 start 에 1을 더한다 그리고 info 객체에 해당 start에 해당 문자의 횟수 값인 value를 1을 추가한다.
위 과정을 문자열의 s의 길이만큼 순회한다.

function solution(s, p) {
  const info = {};

  for (const char of p) {
    if (!info.hasOwnProperty(char)) {
      info[char] = 1;
    } else {
      info[char]++;
    }
  }

  let start = 0;
  let end = 0;
  let count = p.length;
  const result = [];

  while (end < s.length) {
    const char = s[end];

    if (info[char] > 0) {
      count--;
    }

    if (info.hasOwnProperty(char)) {
      info[char]--;
    }
    
    end++;

    if (count === 0) {
      result.push(start);
    }

    if (end - start === p.length) {
      if (info[s[start]] >= 0) {
        count++;
      }

      if (info.hasOwnProperty(s[start])) {
        info[s[start]]++;
      }

      start++;
    }
  }

  return result;
};

이미지 사전 로딩

Thu, 27 Jul 2023 21:00:01 GMT

해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.

저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다.

느린 이미지 로딩

이미지의 사이즈가 클때 다운로드 시간이 오래 걸려서 다운로드가 완료될 때까지 아무것도 뜨지 않는 현상이 발생합니다. 여기서 이미지가 화면에 제때 뜰 수 있도록 미리 다운로드하는 기법인 이미지 사전 로딩 기법을 적용해 보겠습니다.

이미지 사전 로딩

이미지는 이미지가 화면에 그려지는 시점, 즉 HTML 또는 CSS에서 이미지를 사용하는 시점에 로드됩니다. 하지만 이런 경우 외에 자바스크립트로 이미지를 직접 로드하는 방법이 한가지 있습니다. 자바스크립트의 Image 객체를 사용하는 방법입니다.

Image 객체는 아래와 같이 사용할 수 있습니다.

const img = new Image();
img.src = `{이미지 주소}`

해당 방법을 이용하여 샘플 코드에 적용해 보겠습니다.

해당 코드는 첫 페이지 마운트된 후인 타이밍에 이미지를 사전 로드하는 코드입니다.

useEffect(() => {
        LazyImageModal.preload();

        const img = new Image();
        img.src = 'https://stillmed.olympic.org/media/Photos/2016/08/20/part-1/20-08-2016-Football-Men-01.jpg?interpolation=lanczos-none&resize=*:800';
}, []);

위와 같은 코드가 이미지 사전 로딩이 가능한 이유는 이미지를 로드할 때 브라우저가 해당 이미지를 캐싱해 두기 때문입니다.

위에 사진을 보면 네크워크 패널에서 확인한 결과입니다. 조금 더 살펴보면 사전 로드한 이미지의 Size 항목이 disk cache라고 적혀 있습니다. 그리고 다운로드 시간이 매우 짧은 것을 볼 수 있습니다. 그 이유는 페이지가 로드된 후 바로 이미지를 사전 로드해 뒀기 때문입니다.

그런데 여기서 한가지 고민해볼것은 몇 장의 이미지까지 사전 로드해 둘 것인가입니다. 사전 로딩을 하는 순간 브라우저의 리소스를 그만큼 많이 사용하기 떄문에 다른 성능 문제를 야기할수도 있습니다. 따라서 어떤 콘텐츠를 사전 로드할 때는 정말 사전 로딩이 필요한지 고민해야 합니다.

컴포넌트 사전 로딩

Thu, 27 Jul 2023 19:00:01 GMT

해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.

저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다.

지연 로딩의 단점

일단 먼저 이전에 컴포넌트 지연 로딩 기법을 적용해 보았습니다. 이 기법을 적용하면 최초 페이지를 로드할 때 당장 필요 없는 코드가 포함되지 않아, 로드할 파일의 크기가 작아지고 초기 로딩 속도나 자바스크립트의 실행 타이밍이 빨라져서 화면이 더 빨리 표시된다는 장점이 있습니다.

하지만 해당 지연 로딩 기법은 초기 화면 로딩 시에는 효과적일지 몰라도 지연 로딩이 된 코드를 실행되는 시점에는 한계가 있습니다. 코드를 분리했기 때문에 해당 코드가 실행되는 시점에 새로 로드해야 하며 로드가 완료되어야 해당 코드를 실행 할 수 있기 때문입니다. 즉, 진연 로딩이 된 코드(즉, 분리된 코드)가 실행되기까지 약간의 지연이 발생 할 수 있다는 것입니다.

이러한 문제는 사전 로딩(Preloading) 기법을 이용하면 됩니다. 사전 로딩 기법은 나중에 필요한 모듈을 필요해지기 전에 미리 로드하는 기법입니다. 예를 들면 모달을 화면에 노출되어야 하는데 모달 코드가 필요한 시점은 사용자가 버튼을 클릭하는 시점입니다. 만약에 사용자가 버튼을 클릭하기 전에 미리 모달 코드를 로드해두면 네트워크를 통해 코드를 불러오는 시간과 준비하는 데 드는 시간을 단축할 수 있어 빠르게 모달을 노출 시킬수 있습니다.

그러나 해당 방법에는 문제가 있습니다. 사용자가 버튼을 언제 클릭할지 모르니 모달 코드를 언제 미리 로드해 둘지 기준을 정하기 애매하다는 것입니다. 여기서 고려할 수 있는 타이밍이 두가지 있습니다. 하나는 사용자가 버튼 위에 마우스를 올려놨을 때(mouseenter)이고, 다른 하나는 최초에 페이지가 로드되고 모든 컴포넌트의 마운트가 끝났을 때입니다.

컴포넌트 사전 로딩 타이밍

샘플 코드를 통해 한번 적용해보겠습니다.

버튼 위에 마우스를 올려놓았을때 사전 로딩

버튼을 클릭하기 위해서는 선행적으로 마우스를 버튼 위에 올려 두어야 합니다. 그래서 잘 생각해보면 마우스가 버튼에 올라오면 사용자가 버튼을 클릭해서 모달을 띄울 것이라고 예측할 수 있습니다. 더 자세히 말하자면 아직 버튼을 클릭하지 않았지만 곧 클릭할 것이기에 모달 컴포넌트를 미리 로드해 두는 겁니다.

function App() {
    const [showModal, setShowModal] = useState(false);

    const handleMouseEnter = () => {
        const component = import('./components/ImageModal');
    };

    return (
        <div className="App">
            ...
            <ButtonModal 
                onClick={() => { setShowModal(true) }}
                onMouseEnter={handleMouseEnter}
            >
                올림픽 사진 보기    
            </ButtonModal>
        		...
        </div>
    );
}

const ButtonModal = styled.button`
    border-radius: 30px;
    border: 1px solid #999;
    padding: 12px 30px;
    background: none;
    font-size: 1.1em;
    color: #555;
    outline: none;
    cursor: pointer;
`

여기서 문제점은 handleMouseEnter 핸들러 함수 안에 있는 사전 로딩되어 있는 컴포넌트를 어떻게 밖에서 사용할 수 있을까요?

function lazyWithPreload(factory) {
    const Component = React.lazy(factory);
    Component.preload = factory;

    return Component;
}

const LazyImageModal = lazyWithPreload(() => import('./components/ImageModal'));

function App() {
    const [showModal, setShowModal] = useState(false);

    const handleMouseEnter = () => {
        LazyImageModal.preload();
    };

    return (
        <div className="App">
            ...
            <ButtonModal 
                onClick={() => { setShowModal(true) }}
                onMouseEnter={handleMouseEnter}
            >
                올림픽 사진 보기    
            </ButtonModal>
        		 <Suspense fallback={null}>
                {showModal 
                 	? <LazyImageModal closeModal={() => { setShowModal(false) }} /> 
                 	: null}
            </Suspense>
        </div>
    );
}

위 코드처럼 팩토리 패턴을 이용하여 lazyWithPreload 함수를 만들어 활용할 수 있습니다.

컴포넌트의 마운트 완료 후 사전 로딩

만약에 모달 컴포넌트가 크기가 커서 로드하는 데 1초 또는 그 이상의 시간이 필요할 수도 있습니다. 이런 경우에는 마우스 커서를 버튼에 올렸을 때보다 더 먼저 파일을 로드 해야합니다. 이때 생각해 볼 수 있는 타이밍은 모든 컴포넌트의 마운트가 완료된 후로, 브라우저에 여유가 생겼을 때 모달을 추가로 로드하는 겁니다.

function lazyWithPreload(factory) {
    const Component = React.lazy(factory);
    Component.preload = factory;

    return Component;
}

const LazyImageModal = lazyWithPreload(() => import('./components/ImageModal'));

function App() {
    const [showModal, setShowModal] = useState(false);

    useEffect(() => {
      LazyImageModal.preload();
    }, []);

    return (
        <div className="App">
            ...
            <ButtonModal 
                onClick={() => { setShowModal(true) }}
            >
                올림픽 사진 보기    
            </ButtonModal>
        		 <Suspense fallback={null}>
                {showModal 
                 	? <LazyImageModal closeModal={() => { setShowModal(false) }} /> 
                 	: null}
            </Suspense>
        </div>
    );
}

위 사진과 같이 네트워크 기록되어 있는것을 확인해보겠습니다. 오른쪽 Waterfall 부분을 보면 초기 페이지에 필요한 파일인 0.chunk.js는 우선 다운로드하고 페이지가 로드가 완료된 후에야 모달 코드인 1.chunk.js, 2.chunk.js를 다운로드하고 있습니다.

이렇게 두가지 방법으로 사전 로딩 기법을 적용해 봤습니다. 중요한 부분은 어느 타이밍에 사전 로드하는 것이 해당 서비스에서 가장 합리적인지 판단하는 일입니다.

컴포넌트 지연 로딩

Thu, 27 Jul 2023 18:00:01 GMT

해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.

저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다.

컴포넌트 지연 로딩에 대하여 간략하게 어떤건지 알아보겠습니다. 단일 컴포넌트를 코드 분할을 하여 해당 컴포넌트가 쓰이는 순간에 불러도록 하는 작업입니다.

번들 파일 분석

먼저 컴포넌트 지연 로딩 작업을 진행하기 전에 적용해야할 서비스에 어떤 문제가 있는지 파악하기 위해 번들 파일을 분석해 보겠습니다. 분석 툴은 CRA를 사용한 프로젝트는 cra-bundle-ananlyzer 툴을 사용하고 직접 webpack을 통해 구성했다면 webpack-bundle-analyzer툴을 사용하면 됩니다.

저는 CRA를 통해 구성하여서 cra-bundle-ananlyzer 툴을 사용하겠습니다. 그러면 해당 툴을 다음과 같이 설치하고 실행해보겠습니다.

해당 툴 사용법은 다음 링크를 참고해주세요.

https://www.npmjs.com/package/cra-bundle-analyzer

해당 툴을 실행하면 다음과 같은 화면을 볼 수 있습니다.

분석된 결과를 하나씩 살펴보겠습니다. static/js/2.1f42a86.chunk.js(간략히 2.chunck.js로 부르겠습니다.) 블록은 node_modules에 있는 라이브러리 코드를 담고 있는 청크입니다. 그리고 오른쪽 파란색 블록은 해당 서비스의 코드입니다. 그리고 2.chunck.js의 포함된 내용들을 보면 react-dom, styles-components 그리고 react-image-gallery라는 외부 라이브러리를 포함하고 있습니다.react-image-gallery에 커서를 올려두면 대략적인 사이즈를 알 수 있는데 26KB 정도로 나옵니다. 그런데 react-image-gallery는 해당 샘플코드 서비스에 첫 화면부터 필요하지 않습니다. 이 라이브러리가 필요한 시점은 사진 갤러리가 포함된 화면이 나올때입니다.

그러면 해당 react-image-gallery를 효율적으로 사용하기 위해 이 라이브러리를 코드를 분할하고 지연 로딩을 적용해보겠습니다. (물론 해당 라이브러리가 26KB 정도여서 그렇게 큰 용량은 아닙니다.)

코드 분리하기

코드 분할과 지연 로딩을 하기 위해서는 Suspense 컴포넌트와 lazy함수를 불러와야합니다. 저는 샘플코드를 통해 해당 코드에 적용시켜보겠습니다.

해당 샘플코드를 간략하게 설명드리자면 ImageModal 컴포넌트를 코드 분할 및 지연 로딩을 적용시키는 작업입니다.

/* 1. ImageModal 지연 로딩 작업 */

import React, { useState, Suspense, lazy } from 'react';
// import ImageModal from './components/ImageModal';

const LazyImageModal = lazy(() => import('./components/ImageModal'));

위 코드를 설명하면 정적으로 import되어서 번들 파일과 함께 포함되었던 ImageModal 컴포넌트와 그 안에서 사용되고 있는 react-image-gallery 라이브러리가 별도의 파일로 분리됩니다.

/* 2. Suspence로 LazyImageModal 감싸기*/

function App() {
    const [showModal, setShowModal] = useState(false);

    return (
        <div className="App">
          ...
          <Suspense fallback={null}>
            {showModal 
              ? <LazyImageModal closeModal={() => { setShowModal(false) }} /> 
              : null}
          </Suspense>
        </div>
    );
}

위 코드를 설명하면 LazyImageModal이 로드되기 전에 발생하는 에러를 방지하기 위해 Suspense 컴포넌트로 감싸 주었습니다.

Network 패널을 확인해보면 분할된 청크 파일이 로드 되는것을 확인 하실수 있습니다.

다시 cra-bundle-ananlyzer툴을 사용하여 분석 하였을때 위 와 같이 나왔습니다. 이 분석 결과를 하나씩 살펴보면, 첫번째는 오른쪽 파라색 블록에 react-image-gallery 라이브러가 분리되었고 하늘색 블록으로 ImageModal 컴포넌트가 분리되었습니다. 여기서 한가지 특이한 점은 react-image-gallery만 분할될 것이라 생각했는데, react-image-gallery에서 참조하고 있는 모든 라이브러리가 함께 묶여 분할되었다는 점입니다.

Programmers - 스킬 트리

Thu, 27 Jul 2023 13:20:10 GMT

문제 설명

선행 스킬이란 어떤 스킬을 배우기 전에 먼저 배워야 하는 스킬을 뜻합니다.

예를 들어 선행 스킬 순서가 스파크 → 라이트닝 볼트 → 썬더일때, 썬더를 배우려면 먼저 라이트닝 볼트를 배워야 하고, 라이트닝 볼트를 배우려면 먼저 스파크를 배워야 합니다.

위 순서에 없는 다른 스킬(힐링 등)은 순서에 상관없이 배울 수 있습니다. 따라서 스파크 → 힐링 → 라이트닝 볼트 → 썬더와 같은 스킬트리는 가능하지만, 썬더 → 스파크나 라이트닝 볼트 → 스파크 → 힐링 → 썬더와 같은 스킬트리는 불가능합니다.

선행 스킬 순서 skill과 유저들이 만든 스킬트리1를 담은 배열 skill_trees가 매개변수로 주어질 때, 가능한 스킬트리 개수를 return 하는 solution 함수를 작성해주세요.

제한 조건

스킬은 알파벳 대문자로 표기하며, 모든 문자열은 알파벳 대문자로만 이루어져 있습니다.
스킬 순서와 스킬트리는 문자열로 표기합니다.
- 예를 들어, C → B → D 라면 “CBD”로 표기합니다
선행 스킬 순서 skill의 길이는 1 이상 26 이하이며, 스킬은 중복해 주어지지 않습니다.
skill_trees는 길이 1 이상 20 이하인 배열입니다.
skill_trees의 원소는 스킬을 나타내는 문자열입니다.
- skill_trees의 원소는 길이가 2 이상 26 이하인 문자열이며, 스킬이 중복해 주어지지 않습니다.

입출력 예

skill	skill_trees	return
`"CBD"`	`["BACDE", "CBADF", "AECB", "BDA"]`	2

입출력 예 설명

“BACDE”: B 스킬을 배우기 전에 C 스킬을 먼저 배워야 합니다. 불가능한 스킬트립니다.
“CBADF”: 가능한 스킬트리입니다.
“AECB”: 가능한 스킬트리입니다.
“BDA”: B 스킬을 배우기 전에 C 스킬을 먼저 배워야 합니다. 불가능한 스킬트리입니다.

문제 접근

skill_trees의 각 스킬에서 필요한 스킬만 남기고 필요없는 스킬을 제외시킨 배열을 만들고, 각 스킬과 스킬트리에 순서를 하나씩 확인하고 모두 스킬트리 진행했다면 count 값을 증가시킵니다.

스킬트리에 각 스킬들에서 필요없는 스킬을 제외하고 필요한 스킬만 뽑아서 새로운 배열을 생성합니다.
해당 필요한 스킬이 스킬트리와 순서와 맞는지 비교하여 맞으면 count 값을 증가 시킵니다.

function solution(skill, skill_trees) {
    let count = 0;

    const skillSet = new Set(skill);

    const skillTrees = skill_trees.map((skill) => {
        let str = "";

        for (let i = 0; i < skill.length; i++) {
            if (skillSet.has(skill[i])) {
                str += skill[i];
            }
        }

        return str;
    });

    skillTrees.forEach((value) => {
       for (let i = 0; i < value.length; i++) {
           if (value[i] !== skill[i]) {
               return;
           } 
       } 

       count++;
    });

    return count;
}

leetcode - Find Pivot Index

Thu, 27 Jul 2023 13:00:10 GMT

문제 설명

정수 배열이 주어지면 이 배열의 피벗 인덱스를 계산합니다.

피벗 인덱스는 인덱스의 왼쪽에 있는 모든 숫자의 합이 인덱스의 오른쪽에 있는 모든 숫자의 합과 같은 인덱스입니다.

인덱스가 배열의 왼쪽 가장자리에 있으면 왼쪽에 요소가 없으므로 왼쪽 합계는 0입니다. 이는 배열의 오른쪽 가장자리에도 적용됩니다.

가장 왼쪽 피벗 인덱스를 반환합니다. 그러한 인덱스가 존재하지 않으면 -1을 반환합니다.

예시 1

Input: nums = [1,7,3,6,5,6]
Output: 3
Explanation:
The pivot index is 3.
Left sum = nums[0] + nums[1] + nums[2] = 1 + 7 + 3 = 11
Right sum = nums[4] + nums[5] = 5 + 6 = 11

예시2

Input: nums = [1,2,3]
Output: -1
Explanation:
There is no index that satisfies the conditions in the problem statement.

예시3

Input: nums = [2,1,-1]
Output: 0
Explanation:
The pivot index is 0.
Left sum = 0 (no elements to the left of index 0)
Right sum = nums[1] + nums[2] = 1 + -1 = 0

제약 조건:

1 <= nums.length <= 104
-1000 <= nums[i] <= 1000

문제 접근

왼쪽 합, 오른쪽 합 변수를 각각 선언하여 배열을 순회하면서 왼쪽에 하나씩 더하고, 오른쪽에는 하나씩 빼서 왼쪽 합 그리고 오른쪽 합을 비교한다.

left(왼쪽 합), right(오른쪽 합) 선언
배열을 순회하면서 왼쪽에는 숫자 더하기, 오른쪽에는 숫자 빼기 진행
왼쪽 합과 오른쪽 합을 비교

function solution(nums) {
  if (nums.length === 1) {
    return 0
  }

  let left = 0
  let right = nums.slice(1).reduce((acc, value) => acc + value)

  if (left === right) {
    return 0
  }

  for (let i = 1; i < nums.length; i++) {
    left += nums[i - 1]
    right -= nums[i]

    if (left === right) {
      return i
    }
  }

  return -1
}

애니메이션 최적화

Wed, 26 Jul 2023 18:00:01 GMT

해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.

이번 글에서는 최적화 기법중 애니메이션 최적화가 무엇이고, 어떻게 적용할 수 있는지에 대하여 알아 보겠습니다.

저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다.

문제의 애니메이션 찾기

일단 최적화를 적용하기전에 어떠한 부분의 애니메이션이 문제가 있는지 살펴보겠습니다. 애니메이션이 끊기는 부분을 확인할때는 만약 컴퓨터의 성능이 좋다면 잘 느껴지지 않을 수 있습니다. 그래서 이러한 상황일때는 Performance 패널의 CPU 설정을 ‘6xslowdown’ 으로 설정 후 해당 애니메이션이 끊기는 현상을 더 잘 확인할 수 있습니다.

애니메이션이 끊기는 현상을 쟁크(jank)라고 합니다. 샘플 코드에서 이러한 쟁크 현상이 발생하는 이유를 한번 살펴보겠습니다.

const BarGraph = styled.div`
  ... width: ${({ width }) => width}%;
  transition: width 1.5s ease;
  ...;
`

위 코드를 보면 해당 애니메이션을 일으키는 속성은 transition이 적용된 width 속성입니다. 아직까지는 뭔가 확실한 이유를 잘 모르겠네요. 그러면 브라우저에서 애니메이션이 어떻게 작동하는지, 그리고 브라우저는 어떤 과정을 거쳐 화면을 그리는지 이해할 필요가 있습니다.

애니메이션의 원리

애니메이션의 원리는 여러 장의 이미지를 빠르게 전환하여 우리 눈에 잔상을 남기고, 그로 인해 연속된 이미지가 움직이는 것처럼 느껴지게 하는 것입니다.

일반적으로 사용하는 디스플레이의 주사율은 60Hz입니다. 즉, 1초에 60장의 정지된 화면을 빠르게 보여 준다는 의미입니다. 따라서 브라우저도 이에 맞춰 최대 60fps로 1초에 60장의 화면을 새로 그립니다.

참고: 웹 브라우저에서 대부분은 60fps를 가지지만 디스플레이(모니터)에 주사율에 따라 맞춰서 적용됩니다.

만약에 애니메이션이 끊기는 현상인 쟁크 현상이 발생한 이유는 브라우저가 정상적으로 60fps로 화면을 그리지 못했기 때문이라고 유추해 볼 수 있습니다. 예를 들어 CPU가 다른 일을 하느라 바빠서 초당 60 프레임(장면)을 그리지 못하고, 40프레임, 아니면 더 적게 20프레임을 그려 애니메이션이 끊기는 느낌을 준 것입니다.

그럼 여기서 브라우저는 초당 60프레임을 그리지 못하는 이유에 대하여 살펴보겠습니다. 해당 이유를 알기 위해서는 브라우저가 화면을 그리는 과정을 알아야 합니다.

브라우저 렌더링 과정

DOM + CSSOM > 렌더 트리 > 레이아웃 > 페인트 > 컴포지트

브라우저는 기본적으로 위와 같은 과정을 거쳐서 화면을 그립니다. 이러한 과정을 주요 렌더링 과정(Critical Rendering Paht) 또는 픽셀 파이브라인(Pixel Pileline)이라고 합니다.

DOM + CSSOM

가장 처음에는 HTML 파일과 CSS 등 화면을 그리는 데 필요한 리소스를 다운로드합니다.

HTML은 브라우저가 이해할 수 있는 형태로 변환하는 파싱과정을 거칩니다. 그리고 요소 간의 관계가 트리구조로 표현되어 있는 DOM(Document Object Model)을 만듭니다.

CSS는 HTML과 비슷한 과정을 거쳐 브라우저가 이해할 수 있는 트리 구조인 CSSOM(CSS Object Model)이 생성됩니다. CSSOM은 각 요소가 어떤 스타일을 포함하고 있는지에 대한 정보를 포함합니다.

렌더 트리

렌더 트리는 DOM과 CSSOM의 결합으로 생성됩니다. 이 렌터 트리는 화면에 표시되는 각 요소의 레이아웃을 계산하는 데 사용됩니다. 그리고 display: none으로 설정되어 화면에 표시되지 않는 요소는 렌더 트리에 포함되지 않습니다.

display: none은 렌더 트리에 포함되지 않지만, opacity: 0 이나 visibility: hidden인 요소는 렌더 트리에 포함됩니다. 이러한 속성은 사용자 눈에는 보이지 않지만 요소 자체가 없어진 것은 아니기 때문입니다.

레이아웃

레이아웃 단계에서는 화면 구성 요소의 위치나 크기를 계산하고, 해당 위치에 요소를 배치하는 작업을 합니다. 즉, 화면의 레이아웃을 잡는 과정입니다.

페인트

페인트 단계에서는 화면에 배치된 요소에 색을 채워 넣는 작업을 합니다. 예를 들어 배경 색을 채워 넣거나 글자 색을 결정하거나 테두리 색을 변경하는 겁니다. 이때 브라우저는 효율적인 페인트 과정을 위해 구성 요소를 여러 개의 레이어로 나눠서 작업을 합니다.

레이어(layer): 여러개의 층으로 나누는 개념입니다.

예를 들어 요소 A와 요소 B라는 두 개의 겹치는 요소가 있습니다. A는 z-index: 9를 가지며 이는 z-index 속성이 없는 B보다 더 중요합니다. A는 B의 상단에 표시됩니다. 먼저 B를 페인트하고 다음 그 위에 A를 페인트합니다.

브라우저가 레이어로 나누는 기준은 다음과 같습니다.

stacking context가 있는 요소: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context

잘린 요소:

잘린 요소의 일반적인 사례는 오버플로우된 텍스트 요소입니다.

300px * 300px div가 있다고 가정해 봅시다. div 상자의 긴 텍스트가 넘칩니다. div 상자를 overflow: auto 를 지정하면 div 내부에서 텍스트가 스크롤 가능하게 됩니다.

오버플로우된 텍스트 요소는 세 개의 레이어를 생성합니다.

하나는 잘라낸 텍스트를 위한 레이어로, 300px * 300px 영역에 표시됩니다.

하나는 스크롤할 수 있도록 전체 텍스트 콘텐츠용입니다.

하나는 스크롤 막대용

컴포지트

컴포지트 단계는 각 레이어를 합성하는 작업을 합니다. 페인트 단계에서 설명했듯이 브라우저는 화면을 그릴 때 여러 개의 레이어로 화면을 쪼개서 그립니다. 그런 다음 마지막에 그 레이어를 하나로 합성하는 단계가 컴포지트 단계입니다.

지금까지 브라우저 렌더링 과정에 대하여 한번 살펴보았는데 이 과정을 크롬 개발자 도구에서 Performance 패널에서 메인 스레드 작업을 살펴보면 볼 수 있습니다.

화면이 전부 그려진 후, 일부 요소의 스타일을 변경하거나 추가, 제거하게 된다면 주요 렌더링 경로에서 거친 과정을 다시 한 번 실행하면서 새로운 화면을 그립니다. 이것을 리플로우(Reflow) 또는 리페인트(Repaint)라고 합니다.

리플로우와 리페인트

예를 들어 처음 화면이 그려진 후, 자바스크립트로 인해 화면 내 어떤 요소의 너비와 높이가 변경이 되었을때 브라우저는 해당 요소의 가로와 세로를 다시 계산하여 변경된 사이즈로 화면을 새로 그릴 것입니다.

앞서 설명드린 주요 렌더링 경로에 대입해 보면,

요소의 스타일이 변했으니 CSSOM을 새로 만듭니다.
CSSOM을 이용하여 새로운 렌더 트리를 만듭니다.
요소의 가로와 세로를 변경했으니 레이아웃 단계에서 요소의 크기와 위치를 다시 고려해야 합니다.
변경된 화면 구성에 맞게 페인트 과정을 진행하고 분할된 레이어를 하나로 합성하는 컴포지트 과정을 거칩니다.

위 와 같은 과정을 리플로우라고 합니다.

리플로우는 주요 렌더링 경로의 모든 단계를 재실행합니다. 그렇기 때문에 브라우저 리소를 많이 사용합니다.

이번에는 또 다른 경우를 예를 들어보겠습니다. 한 요소의 가로, 세로와 같은 레이아웃 속성이 아니라 글자 색이나 배경 색 등, 색생 관련 속성이 변경되었다고 가정해 봅시다.

스타일 속성이 변경되었기 때문에 새로운 CSSOM이 생성됩니다.
CSSOM을 이용하여 렌더 트리가 생성됩니다.
레이아웃 단계는 실행되지 않습니다. 그 이유는 변경된 내용이 색상에 관련된 내용이지 요소의 위치나 크기에 영향을 주지 않기 때문입니다.
색을 입히는 페인트 단계 그리고 레이어를 합성하는 컴포지트 단계를 거칩니다.

위 와 같은 과정을 리페인트라고 합니다.

리페인트 작업은 레이아웃 단계를 건너뛰었기 때문에 리플로우 작업보다는 조금 더 빠르지만, 리페인트 역시 거의 모든 단계를 거치기 때문에 리소스를 꽤 잡아먹습니다.

리플로우와 리페인트를 발생시키는 속성

리플로우: position, display, width, float, height, font-familiy, top, left, font-size, font-weight, line-height, min-height, margin, padding, border 등등
리페인트: background, background-image, background-position, border-radius, border-style, box-shadow, color, line-style, outlint 등등

여기서 한번 정리해보면, 요소의 상태 변화가 일어나면 리플로우나 리페인트 과정을 거치는데, 이런 과정은 브라우저의 리소스를 많이 잡아먹기 떄문에 결국 화면을 새로 그리는 것이 느릴 수밖에 없다는것을 의미합니다.

리플로우와 리페인트를 피하는 방법이 있습니다. transform, opacity와 같은 속성을 사용하는 방법입니다. 이런 속성을 사용하면 해당 요소를 별도의 레이어로 분리하고 작업을 GPU에 위임하여 처리함으로써 레이아웃 단계와 페인트 단계를 건너띌 수 있습니다. 이러한 방법을 하드웨어 가속이라고 합니다.

하드웨어 가속(GPU 가속)

하드웨어 가속은 CPU에서 처리해야 할 작업을 GPU에 위임하여 더욱 효율적으로 처리하는 방법입니다. GPU는 애초에 그래픽 작업을 처리하기 위해 만들어진 것이므로 화면을 그릴 때 활용하면 굉장히 빠릅니다.

특정 요소에 하드웨어 가속을 사용하려면 요소를 별도의 레이어로 분리하여 GPU로 보내야 하는데, transform 속성과 opacity 속성이 이 역활을 합니다. 분리된 레이어는 GPU에 의해 처리되어 레이아웃 단계와 페인트 단계 없이 화면상의 요소의 스타일 변경할 수 있습니다. 따라서 리플로우와 리페인트을 일으키는 width, height, color 등의 속성이 아닌 transform 또는 opacity 속성을 이용한 애니메이션이 성능이 더 좋을 수밖에 없습니다.

transform: translate()는 처움부터 레이어를 분리하지 않고 변확 일어나는 순간 레이어를 분리합니다. 반면에 transform: translate3d() 또는 scale3d()와 같은 3d 속성들 또는 will-change 속성은 처음부터 레이어를 분리해 주기 때문에 변화에 더욱 빠르게 대처할 수 있습니다. 하지만 레이어가 너무 많아지면 그만큼 메모리를 많이 사용하기 때문에 주의 해야합니다.

const BarGraph = styled.div`
    ...
    width: ${({width}) => width}%;
    transition: width 1.5s ease;
    ...
`

다시 샘플코드로 돌아와서 확인해보면 현재는 애니메이션을 width를 변경되도록 구현이 되어있습니다. 이렇게 되면 width가 변할 때마다 리플로우가 발생하고, 브라우저가 아주 짧은 순간마다 화면을 갱신해야 하여 모든 단계를 재시간에 처리하지 못하는 쟁크 현상이 발생하게 됩니다. 해당 문제를 해결하기 위해서는 리플로우나 리페인트가 일어나느 속성이 아닌 GPU를 활용하여 레이아웃 단계와 페인트 단계를 건너 띌 수 있는 transfrom같은 속성을 사용하는 것입니다.

애니메이션 최적화

문제의 원인과 해결 방법을 알았으니 width로 되어 있는 애니메이션을 trasform으로 변경하여 최적화 해보겠습니다. transfrom 속성중에 scale을 사용하여 수정해보겠습니다.

const BarGraph = styled.div`
    ...
    width: 100%;
    transform: scaleX(${({width}) => width / 100});
    transform-origin: center left;
    ...
`

참조

https://cabulous.medium.com/how-does-browser-work-in-2019-part-iii-rendering-phase-i-850c8935958f

requestAnimationFrame은 도대체 어떤것인가?!

Wed, 26 Jul 2023 16:00:00 GMT

이번글에서는 requestAnimationFrame에 대하여 알아보겠습니다.

프레임

일단 requestAnimationFrame을 알아보기전에 프레임이 어떤것인지부터 살펴보겠습니다. 예를 들어 영화나 애니메이션을 보는 것은 사실 짧은 시간 간격에 이어지는 장면을 보는 것입니다. 이 각각의 장면을 frame이라고 합니다. 즉, 프레임은 한 장의 사진이라 봐도 무방할것 같습니다. 그리고 fps는 frame per second의 약자이며 뜻은 특정 시간 내에 보여지는 프레임의 갯수라고 알고 계시면 좋을것 같습니다.

보통 사람의 눈은 1초에 60개의 프레임을 넘어야가 부드럽게 인지한다고 합니다. 즉, 초당 60번의 장면을 보여준다는 의미입니다.

브라우저에서 부드러운 애니메이션 효과를 주기 위해선 이전에 설명했듯이 초당 60개의 프레임을 렌더링을 해야합니다. 즉, 16.6밀리초 간격으로 프레임을 보여주어야 한다는것을 의미합니다.

정리하면 자바스크립트로 사용자에게 부드러운 애니메이션을 구현하려면 16.6밀리초 마다 애니메이션 로직을 호출하는 식으로 구현해야합니다.

타이머 함수로 애니메이션 구현

setInterval과 setTimeout 을 이용하여 60fps에 맞게 구현하려면 아래 예시 코드처럼 할 수 있습니다.

const animationLogic = () => {
  // 애니메이션 로직
};

setInterval(animationLogic, 1000 / 60);

const animationLogic = () => {
  // 애니메이션 로직

  setTimeout(animationLogic, 1000 / 60);
};

setTimeout(animationLogic, 1000 / 60);

하지만 이렇게 타이머 함수를 이용하게 되면 문제가 있습니다. setInterval과 setTimeout 의 문제점은 주어진 시간내에 동작할 뿐 프레임을 신경 쓰지 않는다는 점입니다. 즉, 타이머 함수는 프레임 단위로 프레임 시작 시간에 맞춰 실행하는것을 보장하지 못합니다.

16밀리초 간격으로 프레임 단위가 진행되어야 하는데, 브라우저가 다른 작업 수행으로 인해 16밀리초가 지난 시점에서 실행될수도 있다는 뜻입니다. 이러한 일이 발생하는 이유는 setInterval과 setTimeout 로 애니메이션 작업을 수행하면 webAPI를 통해 주어진 시간 간격으로 해당 작업을 마친뒤 Task queue에 해당 작업이 추가되고나서 콜 스택에 다른 작업이 존재하면 실행될 수 없고 콜 스택이 비어져있을때만 해당 작업이 실행될 수 있기 때문입니다.

requestAnimationFrame

requestAnimationFrame은 브라우저가 렌더링하는 빈도 60fps에 맞춰서 실행됩니다. 이 말은 초당 60프레임 단위를 조금 더 보장 해준다는 의미입니다.

정리하면 실제 화면이 갱신되어 표시되는 주기에 따라 함수를 호출해주기 때문에 프레임 시작시 실행되도록 보장해주어 setTimeout, setInterval 과 같이 밀림 현상을 방지해줍니다.

requestAnimationFrame(callback);

브라우저에게 수행하기를 원하는 애니메이션 작업을 알리고 다음 리페인트 바로 전에 브라우저가 애니메이션을 업데이트할 함수를 요청합니다.
callback함수의 실행 횟수는 보통 1초 60회지만, 일반적으로 대부분의 웹 브라우저에서는 디스플레이(화면, 모니터) 주사율과 일치됩니다.
배터리 수명과 성능 향상을 위해 대부분의 브라우저에서 백그라운드 탭들이나 숨겨진 iframe 태그들이 실행될 때 중단됩니다.

requestAnimationFrame 장점

백그라운드 동작 중지

setInterval 같은 경우 브라우저의 다른 탭 화면을 보거나 브라우저가 최소화되어 있을 때 타이머가 진행되어 작업이 진행되기 때문에 시스템 리소스 낭비 및 불필요한 전력을 소모하게 됩니다.

그러나 requestAnimationFrame은 페이지가 비활성화 된 상태이면 페이지 화면 그리기 작업도 브라우저에 의해 일시 중지됨으로 CPU 리소스나 배터리 수명을 낭비하지 않게 됩니다.

프레임이 디스플레이 주사율에 맞게 진행

브라우저는 디스플레이의 주사율에 따라서 만약에 모니터 144hz 이면 1초에 144번 requestAnimationFrame의 등록된 작업이 진행됩니다.

Animation frame 큐

requestAnimationFrame은 일반적인 task queue 가 아닌 animation frame 큐에서 처리됩니다. animation frame 큐는 task queue 보다 우선순위를 갖고 있습니다.

animation frame 은 브라우저의 렌더링 엔진이 다음 프레임을 그리기 전에 실행해야 하는 requestAnimationFrame에 등록한 작업들을 담는 큐입니다. requestAnimationFrame도 브라우저의 CPU나 GPU 사용량 여부 등에 따라 콜백 함수 실행이 밀릴 수도 있습니다.

requestAnimationFrame 적용하는 방법

requestAnimationFrame을 아래코드처럼 callback 함수에 원하는 작업을 등록하여 사용합니다. 그리고 프레임 단위로 동작하기 때무에 별도의 시간을 입력하지 않아도 됩니다.

const animationLogic = () => {
  // 애니메이션 로직

  requestAnimationFrame(animationLogic);
};

requestAnimationFrame(animationLogic);

requestAnimationFrame을 취소하는 방법으로는 cancelAnimationFrame을 사용하면됩니다.

const animationLogic = () => {
  // 애니메이션 로직

  // 취소
  cancelAnimationFrame(raf);

  requestAnimationFrame(animationLogic);
};

requestAnimationFrame(animationLogic);

간단하게 requestAnimationFrame 정리 하면 다음과 같습니다.

브라우저에서 최적화할 수 있으므로 애니메이션이 더 부드러워집니다.
비활성 탭의 애니메이션이 중지되어 CPU의 자원 낭비 감소합니다.
배터리 친화적

참조

https://inpa.tistory.com/entry/%F0%9F%8C%90-requestAnimationFrame-%EA%B0%80%EC%9D%B4%EB%93%9C

https://css-tricks.com/using-requestanimationframe/

https://dev.to/moyedx3/10-settimeout-setinterval-and-requestanimationframe-1io4

https://developer.mozilla.org/ko/docs/Web/API/window/requestAnimationFrame

Programmers - 방문 길이

Wed, 26 Jul 2023 14:00:10 GMT

문제 설명

게임 캐릭터를 4가지 명령어를 통해 움직이려 합니다. 명령어는 다음과 같습니다.

U: 위쪽으로 한 칸 가기
D: 아래쪽으로 한 칸 가기
R: 오른쪽으로 한 칸 가기
L: 왼쪽으로 한 칸 가기

캐릭터는 좌표평면의 (0, 0) 위치에서 시작합니다. 좌표평면의 경계는 왼쪽 위(-5, 5), 왼쪽 아래(-5, -5), 오른쪽 위(5, 5), 오른쪽 아래(5, -5)로 이루어져 있습니다.

예시는 하단 링크를 참고 부탁드립니다.

https://school.programmers.co.kr/learn/courses/30/lessons/49994

문제 접근

방문했던 좌표를 시작점 - 끝점 그리고 끝점 - 시작점을 저장하여 중복되는 요소를 제거하면 진행한다.

현재 위치에서 그 다음 위치로 이동할때 그 다음 위치가 정해진 범위 내에 있는지를 확인한다.
정해진 범위 내에 있으면 시작점 - 끝점 그리고 끝점 - 시작점를 문자열로 Set 에 추가한다.
현재 위치를 업데이트한다.
dirs 배열 길이만큼 위 과정을 반복한다.
마지막으로 결과는 Set 크기에 2로 나눈 몫 값을 반환한다.
- 2로 나누는 이유: 시작점 - 끝점 과 끝점 - 시작점은 같은 것으로 판단하기 떄문이다.

function solution(dirs) {
    const moveList = new Set();
    const moveInfo = {
        U: [0, 1],
        D: [0, -1],
        R: [1, 0],
        L: [-1, 0],
    };
    
    let position = [0, 0];
    
    for (const dir of dirs) {
        const [directionX, directionY] = moveInfo[dir];
        const isRangeX = position[0] + directionX <= 5 && position[0] + directionX >= -5;
        const isRangeY = position[1] + directionY <= 5 && position[1] + directionY >= -5;
        
        if (isRangeX && isRangeY) {
            const startToEnd = `${position[0]}${position[1]}${position[0] + directionX}${position[1] + directionY}`;
            const endToStart = `${position[0] + directionX}${position[1] + directionY}${position[0]}${position[1]}`;
            
            moveList.add(startToEnd);
            moveList.add(endToStart);
            
            position[0] = position[0] + directionX;
            position[1] = position[1] + directionY;
        }
    }
    
    return moveList.size / 2;
}

leetcode - Partition Array According to Given Pivot

Wed, 26 Jul 2023 12:00:10 GMT

문제 설명

인덱스가 0인 정수 배열 num과 정수 피벗이 주어집니다. 다음 조건을 만족하도록 nums를 재배열합니다:

피벗보다 작은 모든 요소가 피벗보다 큰 모든 요소 앞에 나타납니다.
피벗과 같은 모든 요소가 피벗보다 작은 요소와 피벗보다 큰 요소 사이에 나타납니다.
피벗보다 작은 요소와 피벗보다 큰 요소의 상대적 순서가 유지됩니다.

재배치 후 nums를 반환합니다.

문제 접근

fivot 보다 작은 배열, fivot 배열, fivot 보다 큰 배열을 만들어 각각 알맞은 갑들을 넣어준다.

fivot 보다 작으면 left 배열에 추가
fivot 과 같은면 fivotList 배열에 추가
fivot 보다 크면 right 배열에 추가
nums 크기 만큼 위 과정을 반복한다.
마지막에는 left, fivotList, right 배열을 합쳐 반환한다.

function solution(nums, pivot) {
  const left = [];
  const pivotList = [];
  const right = [];

  for (const value of nums) {
    if (value === pivot) {
      pivotList.push(value);
    } else if (value < pivot) {
      left.push(value);
    } else {
      right.push(value);
    }
  }

  return [...left, ...pivotList, ...right];
};

leetcode - Group the People Given the Group Size They Belong To

Tue, 25 Jul 2023 21:00:10 GMT

문제 설명

n명의 사람들이 알 수 없는 수의 그룹으로 나뉘어 있습니다. 각 사람에게는 0에서 n-1까지의 고유 ID가 부여됩니다.

정수 배열 groupSizes가 주어지며, 여기서 groupSizes[i]는 사람 i가 속해 있는 그룹의 크기입니다. 예를 들어 groupSizes[1] = 3이면 사람 1은 크기가 3인 그룹에 속해야 합니다.

각 사람 i가 groupSizes[i] 크기의 그룹에 속하는 그룹의 목록을 반환합니다.

각 사람은 정확히 하나의 그룹에 나타나야 하며, 모든 사람은 한 그룹에 속해야 합니다. 정답이 여러 개 있으면 그 중 하나를 반환합니다. 주어진 입력에 대해 유효한 해가 하나 이상 있다는 것이 보장됩니다.

예시 1

Input: groupSizes = [3,3,3,3,3,1,3]
Output: [[5],[0,1,2],[3,4,6]]
Explanation: 
The first group is [5]. The size is 1, and groupSizes[5] = 1.
The second group is [0,1,2]. The size is 3, and groupSizes[0] = groupSizes[1] = groupSizes[2] = 3.
The third group is [3,4,6]. The size is 3, and groupSizes[3] = groupSizes[4] = groupSizes[6] = 3.
Other possible solutions are [[2,1,6],[5],[0,4,3]] and [[5],[0,6,2],[4,3,1]].

예시2

Input: groupSizes = [2,1,3,3,3,2]
Output: [[1],[0,5],[2,3,4]]

문제 접근

빈 객체를 하나 선언하여 해당 객체의 key를 이용하여 같은 size인 사람들을 저장한다.

size 를 key로 사용하는 빈 객체 하나를 선언한다.
해당 객체에 size 가 key가 없으면 빈 배열에 index를 추가한다.
해당 객체에 size 가 key로 존재하면 해당 배열에 index를 추가한다.
해당 key의 value인 배열이 size 와 동일하면 해당 배열을 result에 추가한다. 그리고 해당 key인 프로퍼티는 제거한다.
위 과정을 해당 groupSizes 배열에 길이만큼 순회한다.

function solution(groupSizes) {
    if (groupSizes.length === 1) {
      return [[0]];
    }

    const result = [];
    const info = {};

    for (let i = 0; i < groupSizes.length; i++) {
      const size = groupSizes[i];

      if (info.hasOwnProperty(size)) {
        info[size].push(i);
      } else {
        info[size] = [i];
      }

      if (info[size].length === size) {
        result.push(info[size]);
        delete info[size];
      }
    }

    return result;
}

텍스트 압축

Tue, 25 Jul 2023 18:00:01 GMT

해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.

이번 글에서는 최적화 기법중 텍스트 압축이 무엇이고, 어떻게 적용할 수 있는지에 대하여 알아 보겠습니다.

저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다.

production 환경과 development 환경

텍스트 압축을 설명하기전에 production 환경과 development 환경에 차이에 대하여 한번 살펴보겠습니다. create-react-app을 사용하는 경우에는 production 환경일 때는 webpack에서 경량화라든지 난독화(uglify) 같은 추가적인 최적화 작업을 합니다. 반면에 development 환경에서는 그런 최적화 작업 없이 서비스를 실행합니다. 즉, 각 환경에서 성능을 측정할 때 차이가 있으므로 최종 서비스의 성능을 측정할 때는 실제 사용자에게 제공되는 production 환경으로 빌드된 서비스의 성능을 측정해야 합니다.

production 환경으로 측정하기 위해서는 물론 netlify 나 vercel 등등 웹 호스팅 서비스를 이용할 순 있지만 해당 방법은 조금 불편하므로 serve 라는 외부 라이브러리를 사용할 수 있습니다.

https://www.npmjs.com/package/serve
해당 라이브러리를 통해 빌드된 파일을 실행할 수 있습니다.

production 환경과 development 환경에서 어떤 차이가 있는지 살펴 보겠습니다.

development 환경

production 환경

위 두개의 사진으로 비교하면 전반적인 자바스크립트 파일의 크기가 줄어든것으로 보입니다. 왜냐하면 빌드할 때(production 환경) 경량화 같은 최적화 작업이 이루어졌기 때문입니다.

Lighthouse 를 통해 어떤 페이지를 검사한 결과가 다음과 같습니다.

Lighthouse 분석 결과가 점수가 굉장히 낮게 나왔습니다. 그럼 Opportunities 섹션을 한번 보면 Enable text compression 이라는 항목이 있습니다.

해당 항목은 서버로부터 리소스를 받을 때, 텍스트 압축을 해서 받아라 라는 의미입니다. 그리고 이 항목을 자세히 보면 총 616KiB -> 403KiB로 줄일수 있고 그중에서 가장 많이 차지 하고 있는 3.5af7 ee7a.chunk.js 파일을 444KiB -> 286KiB 로 줄일수 있는걸로 보입니다. 만약에 해당 청크 파일 용량을 줄인다면 0.2초 정도 단축시킬수 있다고 합니다.

텍스트 압축

웹 페이지를 로드할 때는 다양한 리소스를 다운로드합니다. 대표적으로 HTML, CSS, 자바스크립트와 같은 텍스트 형태의 파일이 있습니다. 이런 리소스를 다운로드할 때 파일 크기가 클수록 로딩이 완료되는 데 오래 걸립니다. 따라서 리소스가 빠르게 다운로드될 수 있도록 코드 분할 같은 최적화 기법을 적용하여 리소스 크기를 줄일 수 있습니다. 그리고 또 텍스트 압축 기법도 리소스의 크기를 줄이는 기법중 하나 입니다.

텍스트 압축이라는 것은 말 그대로 텍스트를 압축하는 것입니다. HTML, CSS, 자바스크립트는 텍스트 기반의 파일이기 때문에 텍스트 압축 기법을 사용할 수 있습니다. 이런 파일을 압축하여 더 작은 크기로 빠르게 전송 한 뒤, 사용하는 시점에 압축을 해제합니다.

이때 압축한 만큼 파일 사이즈가 작아질 테니 리소스를 전송하는 시간도 단축됩니다.

압축 여부를 확인하려면 HTTP의 헤더를 살펴보면 됩니다. HTTP 헤더는 개발자 도구에서 Network 패널로 진입후 각 항목를 선택하여 응답헤더 ‘Content-Encoding: gzip’ 이라고 되어 있는 것을 확인하면 됩니다.

압축 적용 한 텍스트

압축 방식

웹에서 사용하는 압축 방식에는 Gzip과 Deflate가 있습니다. Deflate는 LZ77이라는 알고리즘과 허프먼 코딩을 사용하여 데이터를 감싸는 압축 방식입니다. Gzip은 블록화, 휴리스틱 필터링, 헤더와 체크섬과 함께 내부적으로 Deflate를 사용하는 압축 방식입니다. Gzip은 여러 가지 기법이 추가되었기 때문에 Deflate를 단독으로 사용하는 것보다 더 좋은 압축률을 제공합니다.

텍스트 압축 적용

샘플코드를 기반으로 텍스트 압축을 적용해보겠습니다. 텍스트 압축은 이 리소를 제공하는 서버에서 설정해야 합니다. 제가 말씀드린 서버는 serve라는 라이브러리입니다. 해당 serve 라이브러리를 통하여 빌드된 파일을 실행하게 되면 텍스트 압축을 진행합니다.

실제 서버에서 텍스트 압축 적용

다른 서버를 통해 번들 파일을 서비스한다면, 해당 서버에 직접 텍스트 압축 설정을 해야 합니다. 만약 단일 서버가 아닌 여러 서버를 사용하고 있다면, Nginx와 같은 게이트웨이 서버에 공통적으로 텍스트 압축을 적용할 수 있습니다.

텍스트 압축에 대하여 조금 더 자세히 알고싶으시면 아래 링크를 참고해주시면 좋을것 같아요.

https://patterns-dev-kr.github.io/performance-patterns/compressing-javascript/

코드 분할 & 지연 로딩

Tue, 25 Jul 2023 16:00:01 GMT

해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.

이번 글에서는 코드 분할 그리고 지연 로딩 관련한 최적화 기법에 대하여 설명드리겠습니다.

저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다.

번들 파일 분석

Performance 패널의 검사 내용을 볼때 가장 크고 다운로드가 오래 걸린 자바스크립트 파일이 하나 있습니다. 0.chunck.js 파일입니다.

화면을 그리는 데 필요한 리소스의 다운로드가 늦어지면, 다운로드가 완료된 후에나 화면을 그릴 수 있기 때문에 다운로드가 오래 걸린만큼 화면도 늦게 뜬다는 문제가 있습니다. 이때 자바스크립트 파일을 최적화 해보겠습니다.

가장 먼저 해당 자바스크립트 파일이 어떤 코드로 이루어져 있는지 알아야 합니다. 이 청크 파일의 구성을 상세히 보기 위해 Webpack Bundle Analyzer 툴을 이용할 수 있습니다.

해당 툴은 webpack을 통해 번들링된 번들 파일이 어떤 코드로 이루어져 있는지 트리뱁으로 시각화하여 보여 줍니다.
https://www.npmjs.com/package/webpack-bundle-analyzer

그런데 여기서 한가지 문제점은 해당 툴(Webpack Bundle Analyzer)을 사용하려면 webpack 설정을 직접 해야 한다는 것입니다. 예를 들어 Create React App 으로 프로젝트를 구성 하였다면 webpack에 대한 설정이 숨겨저 있으므로 npm run eject 를 이용해 설정 파일들을 추출해야 하거나 react-app-rewired 나 craco 같은 툴을 이용하는 방법이 있습니다. 이 부분은 더 간편하게 번들 사이즈를 분석할 수 있게 도와주는 cra-bundle-analyzer 툴을 사용할 수 있습니다.

https://www.npmjs.com/package/cra-bundle-analyzer
해당 툴을 사용하는 방법은 위 링크를 참고 부탁드립니다.

해당 툴을 사용하명 아래와 같이 보실 수 있습니다.

파일의 실제 크기에 따라 비율로 보여 주기 때문에, 어떤 패키지가 어느 정도의 용량을 차지하고 있는지도 쉽게 알 수 있습니다.

분석한 결과를 살펴보면, 가장 많은 부분을 차지하고 있는것은 static/is/2.6140cefb.chunk.js(이하 2.chunk.js 로 부르겠습니다.) 파일이 보입니다. 비중과 이름을 봤을때 앞서 Performance 패널에서 분석할 때 용량이 크고 다운로드가 느린 0.chunk.js 파일과 동일한 번들 파일이라고 유추할 수 있습니다. 그리고 바로 하위에 있는 node_modules 는 npm을 통해 설치한 외부 라이브러리라는 것을 알 수 있습니다.

분석 결고 오른쪽 상단에 보면 위 사진과 같이 파란색 블록이 보일겁니다. 그 안의 이름들로 유추해 봤을때, 서비스에서 작성된 코드임을 알 수 있습니다. 해당 번들된 파일 이름은 static/js/main.cf4e56ff.chunk.js(이하 main.chunck.js로 부르겠습니다.)

여기서 한번 정리하면 직접 작성한 서비스 코드는 main.chunck.js라는 이름으로, 외부 모듈은 2.chuck.js라는 이름으로 번들링되었습니다.

그래서 다시 본론으로 돌아와 어떤 패키지 때문에 2.chunck.js 파일이 큰 것인지 확인해 보면, 해당 파일이 내부에는 크게 refactor 와 react-dom 이 큰 비중을 차지 하고 있습니다. 그러면 react-dom은 리액트를 위한 코드이브로 생략하고, refractor 패키지의 출처를 확인해 봅시다.

패키지 출처는 package-lock.json 파일에 명시되어 있습니다. npm install 을 하면 package-lock.json을 참조해서 설치하고자 하는 패키지가 어떤 버전의 패키지에 의존성이 있는지 확인해서 함께 설치해줍니다.

그러면 refractor 패키지를 package-lock.json 파일이에서 cmd + f를 눌러 해당 내용에 대한 것을 찾아보겠습니다.

"react-syntax-highlighter": {
  "version": "12.2.1",
  "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz",
  "integrity": "sha512-CTsp0ZWijwKRYFg9xhkWD4DSpQqE4vb2NKVMdPAkomnILSmsNBHE0n5GuI5zB+PU3ySVvXvdt9jo+ViD9XibCA==",
  "requires": {
    "@babel/runtime": "^7.3.1",
    "highlight.js": "~9.15.1",
    "lowlight": "1.12.1",
    "prismjs": "^1.8.4",
    "refractor": "^2.4.1"
  }
}

찾아보니 react-syntax-highlighter 패키지에서 refractor를 참조하고 있는것이 보입니다.

react-syntax-highlighter는 마크다운의 코드 블록에 스타일을 입히는 데 사용되는 라이브러리입니다.

잠깐, 여기서 생각해보면 react-syntax-highlighter 패키지는 마크다운을 표시하는 데 필요하니 이번 샘플코드에서는 글 목록을 보여주는 페이지에서는 필요가 없다는것을 알 수 있습니다. 그래서 굳이 처음 진입하는데에서는 해당 패키지를 다운로드 할 필요가 없습니다.

하나로 합쳐져 있는 이 번들 파일을 페이지별로 필요한 내용만 분리하여 필요 할때만 따로따로 로드하면 좋을것 같습니다.

코드 분할이란

페이지에서 필요한 코드만 따로 로드하면 불필요한 코드를 로드하지 않아 더욱 빨라진다는 것은 알았습니다. 그러면 지금부터는 어떻게 필요한 코드를 따로 로드를 해야 하는 방법에 대하여 알아보겠습니다.

코드 분할(Code Splitting) 기법을 이용해서 페이지별로 코드를 분리할 수 있습니다. 코드 분할 기법은 하나의 번들 파일을 여러 개의 파일로 쪼개는 방법입니다.

그리고 분할된 코드는 사용자가 서비스를 이용하는 중 해당 코드가 필요해지는 시점에 로드되어 실행됩니다. 이것을 지연 로딩이라고 합니다.

추가로 코드 분할 기법에는 여러 가지 패턴이 있습니다. 페이지별로 코드를 분할할 수도 있고 각 페이지가 공통으로 사용하는 모듈이 많고 그 사이즈가 큰 경우에는 페이지별로 분할하지 않고 모듈별로 분할할 수도 있습니다. 물론 그 밖에도 다양한 방식으로 코드를 분할할 수 있지만, 핵심은 불필요한 코드 또는 중복되는 코드 없이 적절한 사이즈의 코드가 적절한 타이밍에 로드되도록 하는것 입니다.

코드 분할 적용하기

동적 import 사용하기

기본적으로 import는 다음과 같이 특정 모듈을 불러올 때 사용됩니다.

import { add } from './math';

위 처럼 사용하면 해당 모듈은 빌드 시에 함께 번들링이 됩니다.

import('add').then((module) => {
	const { add } = module;
});

위 와 같이 import 문을 사용하면 빌드할 때가 아닌 런타임에 해당 모듈을 로드합니다. 그것을 동적(dynamic) import라고 합니다.

webpack은 동적 import 구문을 만나면 코드를 분할하여 번들링합니다. 하지만 이 방식에는 한가지 문제가 있습니다. 동적 impot 구문은 Promise 형태로 모듈을 반환해 준다는 것입니다. import하려는 모듈은 컴포넌트이기 때문에 Promise 내부에서 로드된 컴포넌트를 Promise 밖으로 빼내야 합니다.

리액트에서는 이러한 문제를 해결하기 위해 lazy 와 Suspense를 제공합니다. 이 함수를 이용하면 비동기 문제를 신경 쓰지 않고 간편하게 동적 import를 할 수 있습니다. 예시 코드는 다음과 같습니다.

import React, { Suspense } from 'react';

const SomeComponent = React.lazy(() => import('./SomeComponent'));

function MyComponent() {
  return (
  	<div>
    	<Suspense fallback={<div>로딩중...</div>}>
        <SomeComponent />
      </Suspense>
    </div>
  );
}

여기까지 코드분할 & 지연로딩을 하기위해 번들링된 파일을 분석하고 어떤 파일을 분할하면 될지 알아보고 해당 파일을 어떻게 코드분할 할지, 즉 코드 분할 방법에 대하여 알아보았습니다.

이제 부터는 샘플코드 기반으로 코드 분할 작업 내용입니다.

import React, { Suspense, lazy } from 'react';
import { Switch, Route } from 'react-router-dom';
import './App.css';
// import ListPage from './pages/ListPage/index';
// import ViewPage from './pages/ViewPage/index';

const ListPage = lazy(() => import('./pages/ListPage/index'));
const ViewPage = lazy(() => import('./pages/ViewPage/index'));

function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>로딩중...</div>}>
        <Switch>
          <Route path="/" component={ListPage} exact />
          <Route path="/view/:id" component={ViewPage} exact />
        </Switch>
      </Suspense>
    </div>
  );
}

이렇게 하면 각 페이지 컴포넌트가 분할되고, 사용자가 목록 페이지에 접근했을 때 전체 코드가 아닌 ListPage 컴포넌트의 코드만 동적으로 import하여 화면을 띄웁니다.

그러면 이제 번들된 결과를 다시 확인해 보겠습니다.

static/js/3.5af7ee7a.chunk.js: refractor를 포함하는 react-syntax-highlighter 사용하고 있는 페이지에 대한 번들 파일
static/js/0.33f1b109.chunk.is: react-syntax-highlighter를 사용하지 않는 글 목록페이지에 대한 번들 파일

Performance 패널도 같이 한번 확인해보겠습니다. 이전에 없던 다른 자바스크립트 파일이 추가되었고 이전에는 4.2MB 였던 파일의 크기가 1.9MB로 감소하였습니다. 그리고 다운로드 시간도 감소하였습니다.

병목 코드 최적화

Mon, 24 Jul 2023 23:00:01 GMT

해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.

이번 글에서는 병목 코드를 어떻게 찾고 해당 코드를 최적화하는 방법에 대하여 알아보겠습니다.

자바스크립트 코드 때문에 서비스가 너무 느리게 다운로드되거나 느리게 실행되는 경우가 있습니다. 이처럼 서비스를 느리게 만드는 코드를 병목 코드라고 합니다.

저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다.

Performance 패널 살펴보기

병목 코드를 확인하고자하는 웹 서비스를 크롬 브라우저에서 lighthouse 툴을 이용하여 검사한 결과 항목에서 Diagnostics 섹션의 Reduce Javascript execution time 항목을 살펴보겠습니다.

해당 항목을 펼쳐 상세 정보를 확인하여 …chunk.js 파일을 보면 1,313밀리초 동안 자바스크립트가 실행 되었음을 알 수 있습니다. 하지만 여기서 오랜동안 자바스크립트가 실행되었고 그 때문에 서비스가 느렸다는 것은 이해하였는데, 그 자바스크립트 코드가 도대체 어느 부분인지는 여기서는 알 수 없습니다. 그래서 해당 느린 작업이 무엇인지 확인하기 위해서는 Performance 패널을 활용할 수 있습니다.

Performance 패널을 활용하는 방법

첫번째는 Lighthouse 결과 페이지에 ”View Original Trace“라는 버튼을 눌러 Performance 패널로 이동하는 방법입니다. 이 버튼을 통해 이동하면, Lighthouse를 통해 분석한 내용을 Performance 패널로 가져가서 보여 줍니다.

두번째는 직접 크롬 개발자 도구의 Performance 패널로 이동하여 분석을 진행하는 방법입니다. Performance 패널로 진입후 가장 왼쪽에 있는 새로고침 버튼을 누르면 됩니다. 그러면 페이지가 다시 로드되면서 그 과정에서의 여러 작업을 기록합니다.

Performance 패널을 이용한 분석이 완료되면 위 와 같은 화면을 볼 수 있습니다.

그러면 이제부터는 Performance 패널에 대하여 하나씩 살펴보겠습니다.

1. CPU 차트, Network 차트, 스크린샷

가장 맨 위에 위치하고는 항목입니다.

CPU 차트는 시간에 따라 CPU가 어떤 작업에 리소스를 사용하고 있는지 비율로 보여 줍니다. 해당 차트를 통해 어느 타이밍에 어떤 작업이 주로 진행되고 있는지 파악할 수 있습니다. 그리고 해당 차트위에 세로줄로 있는 빨간색 선은 병목이 발생하는 지점을 의미합니다. 즉, 특정 작업이 메인 스레드를 오랫동안 잡아 두고 있다는 뜻입니다.

노란색: 자바스크립트 실행 작업
보라색: 렌더링/레이아웃 작업
초록색: 페인팅 작업
회색: 기타 시스템 작업

Network 차트는 CPU 차트 밑에 막재 형태로 표시됩니다. 대략적인 네트워크 상태를 보여줍니다.

위쪽 진한 막대: 우선순위가 놓은 네트워크 리소스
아래쪽 옅은 막대: 우선순위가 낮은 네트워크 리소스

스크리샷은 그 아래 서비스가 로드되는 과정을 스크린샷 리스트로 보여줍니다.

2. Network 타임라인

Network 타임라인은 Network 패널과 유사하게 서비스 로드 과정에서의 네트워크 요청을 시간 순서로 보여줍니다.

각 네트워크 요청 막대에서 의미하는 것은 다음과 같습니다.

왼쪽 회색 선: 초기 연결 시간
막대의 옅은 색 영역: 요청을 보낸 시점부터 응답을 기다리는 시점까지의 시간(TTFB, Time to First Byte)
막대의 짙은 색 영역: 콘텐츠 다운로드 시간
오른쪽 회삭 선: 해당 요청에 대한 메인 스레드의 작업 시간

3. Frames, Timings, Main

Frames 섹션은 화면의 변화가 있을 때마다 스크린샷을 찍어 보여 줍니다.

Timings 섹션은 User Timing API를 통해 기록된 정보를 기록합니다. 여기 표시된 막대들은 리액트에서 각 컴포넌트의 렌더링 시간을 측정한 것입니다.

리액트의 User Timing API 코드는 리액트 버전 17이후로 정확성 및 유지 보수 문제로 인해 지원이 종료 되었습니다. 해당 부분 참고 부탁드립니다.

Main 섹션은 브라우저의 메인 스레드에서 실행되는 작업을 플레임 차트로 보여줍니다. 이를 통해 어떤 작업이 오래 걸리는지 파악할 수 있습니다.

4. 하단 탭

하단에 있는 Summary, Bottom-Up, Call Tree, Event Log 탭에서는 전체 또는 선택된 영역에 대한 상세 내용을 확인할 수 있습니다.

Summary 탭: 선택 영역에서 발생한 작업 시간의 총합과 각 작업이 차지하는 비중을 보여 줍니다.
Bottom-Up 탭: 가장 최하위에 있는 작업부터 상위 작업까지 역순으로 보여줍니다.
Call Tree 탭: Bottom-Up과 반대로 가장 상위 작업부터 하위 작업 순으로 작업 내용을 트리뷰로 보여 줍니다.
Event Log 탭: 발생한 이벤트를 보여 줍니다.

페이지 로드 과정 살펴보기

localhost (파란색 막대): HTML 파일에 대한 요청
bundle.js, 1.chunck.js, main.chunk.js (황색 막대): 자바스크립트 파일에 대한 요청

여기서 다른요청보다 1.chunck.js 파일의 로드 시간이 길다라는것이다. 실제로 해당 막대를 클릭에 하단에 summary 탭을 보면 파일의 크기가 4.2MB로 크다는 것을 알 수 있습니다. 지금 환경이 development 환경이라 번트 파일이 경량화되어 있지 않기 때문에 더욱 큰 것인데요. 그럼에도 너무 큰 것 같으니 해당 부분을 살펴볼 필요가 있습니다.

위 사진에서 보시다시피 HTML 파일이 다운로드되고 나서 시점을 보면 메인 스레드에서는 ‘Parse HTML’ 이라는 작업을 하고 있습니다. 네트워크를 통해 받은 HTML을 처리하고 있는 듯합니다.

1.chunck.js의 다운로드가 끝난 시점을 보면, 이어서 자바스크립트 작업이 실행되고있습니다. 위 사진에 보시다시피 App.js 라는 항목이 보입니다. 즉, 이 작업들은 리액트 코드를 실행하는 작업이라고 볼 수 있습니다. 그리고 Timings 섹션에서 확인해보면 메인 스레드의 자바스크립트 작업이 끝나는 시점에 컴포넌트에 대한 렌더링(App[mount]) 작업이 기록되어 있는것을 확인 할 수 있습니다.

그리고 컴포넌트가 마운트되면 위 사진에서 보시다시피 Article 컴포넌트에서는 블로그 글 데이터를 네트워크를 통해 요청하는데, 그 정보가 Network 섹션에 articles (localhost) 라고 기록되어 있음을 확인할 수 있습니다. articles 데이터가 모두 다운로드되면 Timings 섹션에서 ArtcleList 컴포넌트가 렌더링 되는것을 확인할 수 있습니다.

이제 여기서 Timings 섹션에서 ArticleList 막대를 클릭 후 하단 Summary 탭을 확인해보면 실행 시간이 1.16초라는것을 확인할 수 있습니다. 네트워크 시간을 포함한 시간이 아니라 모든 데이터가 준비된 상태에서 단순히 데이터를 화면에 그리는 것일 뿐인데 말이죠. 조금더 자세히 살펴보겠습니다.

Main 섹션에서 해당 구간을 따라가 내려가보면 ‘removeSpecialCharacter’ 라는 작업이 보일겁니다. 해당 작업이 Article 컴포넌트의 렌더링 시간을 길어지게 했다는 이야기입니다. 즉, Article 컴포넌트가 렌더링 되는 과정에서 removeSpecialCharacter 함수가 아주 오래 실행 되었다는 뜻이고, 이 함수를 최적화하면 ArticleList의 실행 시간도 단축될 것입니다.

지금까지 성능 최적화할 포인트를 찾는 과정을 보여드렸습니다. 해당 과정에서 저는 샘플코드를 활용하였지만 다른 서비스에서도 해당 과정과 비슷하게 병목 코드를 찾을 수 있습니다.

병목 코드 개선

병목 코드인 removeSpecialCharacter 함수에 대하여 알아보겠습니다.

function removeSpecialCharacter(str) {
  const removeCharacters = ['#', '_', '*', '~', '&', ';', '!', '[', ']', '`', '>', '\n', '=', '-'];
  let _str = str;
  let j = 0;

  for (let i = 0; i < removeCharacters.length; i++) {
    j = 0;
    
    while (j < _str.length) {
      if (_str[j] === removeCharacters[i]) {
        _str = _str.substring(0, j).concat(_str.substring(j + 1));
        continue;
      }
      
      j++;
    }
  }

  return _str;
}

해당 함수는 인자로 넘어온 문제열에서 특수 문자를 제거하는 함수입니다. 해당 함수를 보면 반복문을 두 번 중첩해서 사용하고 있고 문자열을 제거하는 데도 substring 과 concat 함수를 사용하고 있습니다. 그래서 해당 로직은 상장히 비효육적임을 알 수 있습니다.

그래서 해당 코드를 개선해보면 다음과 같습니다.

function removeSpecialCharacter(str) {
  let _str = str.substring(0, 300);
  _str = str.replace(/[#_*~&;![\]'>\n=\->]/g, '');

  return _str;
}

최적화 전후 비교

최적화하기 전에는 1.2초 걸렸던 작업이, 14밀리초로 줄어들었습니다. 또한 Lighthouse로 검사해보면 점수가 오른 부분과 이전에 문제가 되었던 Diagmostics 섹션에서 Reduce javascript execution 항목이 사리진것을 볼수 있습니다.

leetcode - Queries on Number of Points Inside a Circle

Mon, 24 Jul 2023 18:00:10 GMT

문제 설명

points[i] = [xi, yi]가 2D 평면에서 째 점의 좌표인 점 배열이 주어집니다. 여러 점이 동일한 좌표를 가질 수 있습니다.

또한 쿼리 배열 쿼리가 주어지며, 쿼리[j] = [xj, yj, rj]는 반지름이 rj인 (xj, yj)에 중심을 둔 원을 설명합니다.

각 쿼리 queries[j]에 대해 j번째 원 안에 있는 점의 수를 계산합니다. 원의 경계에 있는 점은 내부로 간주됩니다.

배열 응답을 반환하며, 여기서 answer[j]는 j번째 쿼리에 대한 응답입니다.

예시:

링크 참조 : https://leetcode.com/problems/queries-on-number-of-points-inside-a-circle/description/

문제 접근

원의 중심과 해당 포인트의 거리가 원의 반지름보다 같거나 작으면 해당 점은 원의 포함이된다는 의미이다.

원의 갯수 그리고 포인트 갯수만큼 반복문을 순회한다.
원의 중심과 포인트의 거리를 구한다.
이전에서 구한 거리가 반지름보다 작거나 같으면 count 를 증가시킨다.
반복할때마더 이전과정을 반복하여 결과를 구한다.

function(points, queries) {
  const result = [];

  for (let i = 0; i < queries.length; i++) {
    const [x, y, r] = queries[i];
    let count = 0;

    for (let j = 0; j < points.length; j++) {
      const [xPoint, yPoint] = points[j];
      const tempX = Math.abs(x - xPoint);
      const tempY = Math.abs(y - yPoint);

      if (tempX * tempX + tempY * tempY <= r * r) {
        count++;
      }
    }

    result.push(count);
  }

  return result;
}

Typescript - any vs unknown

Sat, 22 Jul 2023 19:00:01 GMT

any 타입의 변수에는 무엇이든 지정할 수 있습니다.

let myVar: any = 0;
myVar = '1';
myVar = false;

타입스크립트 가이드에서는 any 를 사용하면 타입 제한이 사라지기 때문에 사용을 권장하지 않습니다.

unknown 타입의 변수에는 무엇이든 지정할 수 있습니다.

let myVar: unknown = 0;
myVar = '1';
myVar = false;

그러면 any 와 unknown의 차이는 무엇일까요?

any vs unknown

예를들어 하나의 함수를 작성하겠습니다.

function invokeAnything(callback: any) {
  callback();
}

invokeAnything(1);

callback 매개변수는 어떤 유형이든 가능하므로 callback() 문은 type error 를 발생시키지 않습니다.

그러나 해당 코드를 실행하게 되면 런타임 오류가 발생합니다.

TypeError: callback is not a function

1은 숫자이므로 함수로 호출할 수 없기 떄문입니다.

unknown 타입 변수는 any와 마찬가지로 모든 값을 허용합니다. 그러나 unknown 변수를 사용하력 할때 타입스크립트는 유형 검사를 시행합니다.

이전과 비슷하나 unknown 타입을 코드를 예시를 들어보겠습니다.

function invokeAnything(callback: unknown) {
  callback(); // Type error: 'callback' is of type 'unknown'
}

invokeAnything(1);

callback 매개변수의 타입을 알 수 없기 때문에 타입 오류가 발생합니다.

위 코드를 정상적으로 실행하기 위해서는 unknown 타임의 변수를 사용하기 전에 타입 검사를 수행 하면 됩니다.

function invokeAnything(callback: unknown) {
  if (typeof callback === 'function') {
    callback();
  }
}

invokeAnything(1);

typeof callback === 'function' 구문을 추가하면 unknown 타입이 Function 타입으로 좁혀졌으므로 안전하에 callback() 을 호출할 수 있습니다. 그래서 타입 에러도 없고 런타임 에러도 없습니다.

any 와 unknown 의 차이점은 다음과 같습니다.

unknown 타입에는 무엇이든 할당할 수 있지만 unknown 타입에서 작업하려면 타입 검사를 수행해야 합니다.
any 타입에는 무엇이든 할당할 수 있으며 모든 타입에 대해 어떠한 작업이든지 수행할 수 있습니다.

참조

https://dmitripavlutin.com/typescript-unknown-vs-any/

이미지 최적화

Sat, 22 Jul 2023 18:00:01 GMT

해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.

비효율적인 이미지 분석

해당 분석하고자 하는 웹사이트를 Lighthouse 를 통해 분석합니다. 그리고 분석 결과에서 Opportunities 섹션의 ‘Properly size images’ 항목을 주목합니다. 이 항목은 이미지를 적절한 사이즈를 사용하도록 제안합니다.

해당 항목을 펼쳐서 내용을 살펴보면 어떤 이미지가 적절한지 않은 사이즈인지 리스트로 보여줍니다.

해당 웹 사이트에 포함된 이미지가 얼마나 크기에 로딩 시간을 단축시킬 수 있는 것인지 이미지를 직전 확인해 보겠습니다.

이미지를 확인하려면 크롬 개발자 도구 중 Elements 패널로 이동해야 합니다. 그리고 아래 사진처럼 이미지 요소를 선택합니다.

위 사진에서 내용을 확인하면 실제 이미지 사이지(Intrinsic size)는 1200 x 1200px 인데, 화면에 그려지는 이미지의 사이즈(Rendered size)는 120 x 120px이라고 합니다. 그래서 큰 사이즈의 이미지를 사용해도 1200 x 1200px로 표시하지 못하니, 처음부터 120 x 120px에 맞는 이미지를 사용하라는 의미입니다.

그렇다면 이 이미지를 어느 정도 사이즈로 만들어서 사용해야 적절할까요?

단순히 120 x 120px로 만들어야 된다고 생각할 수 있지만, 요즘 사용되는 레티나 디스플레이는 같은 공간(픽셀)에 더 많은 픽셀을 그릴 수 있기 때문에, 두 배 정도 큰 이미지를 사용하는것이 적절합니다. 즉, 240 x 240px 사이즈로 사용하는 것입니다.

이미지 사이즈를 어떻게 줄이는가?

해당 방법을 알기 위해서는 해당 이미지가 어디서 오는지 파악해야 합니다. 크롬 Network 패널에서 확인 할 수 있습니다. 현재 해당 이미지는 서버에서 전달해주고 있고 해당 전달된 데이터를 확인해보니 이미지 주소로 전달하고 있는걸로 확인이 됩니다.

이미지 정보가 어디서 오는지 확인해 봤는데, 한가지 문제가 생겼습니다. 자체적을 가지고 있는 정적 이미지라면 사진 편집 툴을 이용하여 직접 이미지 사이즈를 조절하면 되는데, 현재는 API를 통해 받아오고 있습니다.

이미지를 API를 통해 받아오는 경우 어떻게 이미지 사이즈를 조절할까요?

한 가지 방법은 Cloudinary나 Imgix 같은 이미지 CDN을 사용하는 방법입니다.

이미지 CDN

CDN(Content Delivery Network)이란 물리적인 거리의 한계를 극복하기 위해 사용자와 가까운 곳에 콘텐츠 서버를 두는 기술을 의미합니다.

예를 들어 한국에 있는 사용자가 미구에 있는 서버에서 이미지를 다운로드 하는 경우, 아무리 요즘 인터넷이 빨라졌다고 해도 서버와 사용자 사이에는 굉장히 큰 물리적 거리가 있기 때문에 다운로드에 시간이 오래 걸릴 것입니다. 이 문제를 해결하기 위해 다음과 같이 생각해 볼 수 있습니다.

미국에 있는 서버를 미리 한국으로 복사해 두고, 사용자가 이미지를 다운로드하려고 할 때 미국 서버가 아닌 한국 서버에서 다운로드하도록 하는 것입니다. 그러면 물리적 거리가 어느정도 해소가 됐으니 다운로드에 걸리는 시간도 단축이 됩니다.

이미지 CDN은 이미지에 특화된 CDN이라고 볼 수 있습니다. 기본적인 CDN 기능과 더불어 이미지를 사용자에게 보내기 전에 특정 형태로 가공하여 전해주는 기능까지 있습니다. 예를 들어 이미지 사이즈를 줄이거나, 특정 포맷으로 변경하는 증의 작업 가능합니다.

일반적인 이미지 CDN에서 제공하는 주소는 다음과 같이 이루어져 있습니다.

http://cdn.image.com?src=[img src]&width=240&height=240

이런 이미지 CDN을 자체적으로 만들어서 사용할 수도 있지만, Imgix와 같은 이미지 CDN 솔루션을 사용할 수 있습니다.

imgix는 더 빠른 페이지, 더 나은 시각적 품질, 더 간단한 워크플로우를 위해 이미지와 비디오를 관리, 최적화 및 제공한다고 합니다.

최적화 기법 종류와 Lighthouse 툴

Sat, 22 Jul 2023 16:00:01 GMT

해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.

최적화 기법 종류

최적화 기법에는 이미지 사이즈 최적화, 코드 분할, 텍스트 압축, 병목 코드 최적화가 있습니다. 각 최적화 기법에 대하여 설명드리겠습니다.

이미지 사이즈 최적화

웹 서비스에서는 매우 다양한 이미지를 사용합니다. 하지만 너무 큰 사이즈의 이미지를 무분별하게 사용하면 네트워크 트래픽이 증가해 서비스 로딩이 오래 걸립니다. 그렇다고 이미지 사이즈를 무작정 작게 만들면 이미지 화질이 저하되어 서비스 이용이 불편해집니다. 따라서 어떤 이미지 사이즈가 적절한지 살펴봐야 합니다.

코드 분할

말 그대로 코드를 분할하는 기법입니다. 예를들면 리액트는 SPA(Single Page Application) 기반한 라이브러리입니다. SPA의 특성상 모든 리액트 코드가 하나의 자바스크립트 파일로 번들링되어 로드되기 때문에, 첫 페이지 진입 시 당장 사용하지 않는 코드가 포함이 되어 있을 수 있습니다. 이때 코드 분할을 통해 당장은 필요 없는 코드를 떼어 내고, 해당 코드를 필요한 시점에 따로 로드할 수 있습니다.

dynamic import 구문 사용을 하거나 리액트를 사용한다면 React.lazy 함수를 통해 dynamic import 를 사용할 수 있습니다.

텍스트 압축

웹 페이지에 접속하면 HTML, CSS, 자바스크립트 등등 다양한 리소스를 내려받습니다. 이런 리소스는 다운로드 전에 미리 압축할 수 있습니다. 그러면 원래 사이즈보다 더 작은 사이즈로 다운로드할 수 있어 웹 페이지가 더 빠르게 로드됩니다.

예를들어, 자바스크립트에 있는 불필요한 공백을 지우고, 변수와 함수의 이름들을 a, b, 등등 변경하는 작업이 있습니다. 즉, 난독화 작업이라고도 할 수 있습니다. webpack 사용한다면 terser 플러그인을 활용할 수 있습니다.

병목 코드 최적화

자바스크립트 코드 때문에 서비스가 너무 느리게 다운로드되거나 느리게 실행되는 경우가 있습니다. 이처럼 서비스를 느리게 만드는 코드를 병목 코드라고 합니다.

리액트에서는 React.memo, useMemo(), useCallback() 활용할 수도 있을것 같습니다.

이러한 최적화 기법을 사용하기전에 웹 서비스에 어떠한 부분을 최적화해야 하는지 분석 하기 위한 분석관련 툴에 대하여 설명 드리겠습니다.

크롬 개발자 도구의 Network 패널

네트워크 패널은 현재 웹 페이지에서 발생하는 모든 네트워크 트래픽을 상세하게 알려 줍니다. 이를 통해 어떤 리소스가 어느 시점에 로드되는지, 해당 리소스의 크기 등을 확인할 수 있습니다.

크롬 개발자 도구의 Performance 패널

Performance 패널은 웹 페이지가 로드될 때, 실행되는 모든 작업을 보여줍니다. 브라우저의 메인 스레드에서 실행되는 자바스크립트를 차트 형태로 볼 수 있습니다. 따라서 이 패널을 통해 어떤 자바스크립트 코드가 느린지 확인할 수 있습니다.

크롬 개발자 도구의 Lighthouse 패널

Lighthouse는 구글에서 만든 툴로, 웹사이트의 성능을 측정하고 개선 방향을 제시해 주는 자동화 툴입니다. Lighthouse를 이용하여 웹사이트의 성능 점수를 측정하고 개선 가이드를 확인함으로써 어떤 부분을 중점적으로 분석하고 최적화해야 하는지 알 수 있습니다.

webpack-bundle-analyzer

webpack을 통해 번들링된 파일이 어떤 코드, 즉 어떤 라이브러리를 담고 있는지 보여줍니다. 이 툴을 사용해 최종적으로 완성된 번들 파일 중 불필요한 코드가 어떤 코드이고, 번들 파일에서 어느 정도의 비중을 차지하고 있는지 확인 할 수 있습니다.

https://github.com/webpack-contrib/webpack-bundle-analyzer

Lighthouse 툴을 이용한 페이지 검사

Lighthouse 검사하기

Mode는 기본 값인 ‘Navigation’으로 설정하고, Categories 항목에서 원하는 검사 주제를 선택하면 됩니다. 그리고 Device 항목은 모바일 환경으로 검사할지, 테스크톱 환경으로 검사할지 결정합니다. 만약 ‘Mobile’을 선택하면, Lighthouse는 모바일 사이즈의 화면에서 좀 더 느린 CPU와 네트쿼크 환경으로 검사를 진행합니다.

Mode 항목 값

Navigation: Lighthouse의 기본 값으로, 초기 페이지 로딩 시 발생하는 성능 문제를 분석
Timespan: 사용자가 정의한 시간 동안 발생한 성능 문제를 분석
Snapshot: 현재 상태의 성능 문제를 분석

Categories 항목 값

Performance: 웹 페이지의 로딩 과정에서 발생하는 성능 문제를 분석
Accessibility: 서비스의 사용자 접근성 문제를 분석
Best Practices: 웹사이트의 보안 측면과 웹 개발의 최신 표준에 중점을 두고 분석
SEO: 검색 엔진에서 얼마나 잘 크롤링되고 검색 결과에 표시되는 분석
Progressive Wep App: 서비스 워커와 오프라인 동작 등, PWA와 관련된 문제를 분석

Lighthouse 검사 결과

위 사진에 점수 아래에 METRICS 항목에 있는 지표를 웹 바이탈(Web Vitals)이라고 부릅니다.

Lighthouse에서 검사한 웹 바이탈을 하나씩 살펴 보겠습니다.

First Contentful Paint(FCP)

FCP는 페이지가 로드될 때 브라우저가 DOM 콘텐츠의 첫 번째 부분을 렌더링 하는 데 걸리는 시간에 관한 지표입니다.

Speed Index(SI)

SI는 페이지 로드 중에 콘텐츠가 시각적으로 표시되는 속도를 나타내는 지표입니다.

Largest Contentful Paint(LCP)

LCP는 페이지가 로드될 때 화면 내에 있는 가장 큰 이미지나 텍스트 요소가 렌더링되기까지 걸리는 시간을 나타내는 지표입니다.

Time to Interactive(TTI)

TTI는 사용자가 페이지와 상호 작용이 가능한 시점까지 걸리는 시간을 측정한 지표입니다. 여기서 상호 작용이란 클릭 또는 기보드 누름 같은 사용자 입력을 의미합니다. 즉, 이 시점 전까지는 화면이 보이더라도 클릭 같은 입력이 동작하지 않습니다.

Total Blocking Time(TBT)

TBT는 페이지가 클릭, 키보드 입력 등의 사용자 입력에 응답하지 않도록 차단된 시간을 종합 지표입니다.

Cumulative Layout Shift(CLS)

CLS는 페이지 로드 과정에서 발생하는 예기치 못한 레이아웃 이동을 측정한 지표입니다. 레이아웃 이동이란 화면상에서 요소의 위치나 크기가 순간적으로 변하는 것을 말합니다.

Opportunities 섹션과 Diagnostics 섹션

이 두 섹션은 웹 페이지의 문제점과 해결 방안, 그리고 문제를 해결함으로써 얻을 수 있는 이점이 무엇인지 보여 줍니다. Opportunities 섹션은 페이지를 더욱 빨리 로드하는 데 잠재적으로 도움되는 제안을 나열하며, Diagnostics 섹션은 로드 속도와 직접적인 관계는 없지만 성능과 관련된 기타 정보를 보여 줍니다.

따라서 이 두 섹션을 통해 해당 서비스의 어느 부분을 개선해야 성능을 향상할 수 있는지 쉽게 파악할 수 있습니다.

성능 최적화는 왜 필요할까?

Sat, 22 Jul 2023 15:00:01 GMT

해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.

프론트엔드라는 개발 분야가 등장한지 오랜 시간이 지났고, 그 후 굉장히 빠르게 발전하고 있습니다. 지금까지는 사람들은 새로운 기술이 나오는데 주목했다면 최근에는 성능 최적화라는 주제에 관심을 갖기 시작했습니다.

성능이 저하되면 사용자가 떠나고 매출이 감소한다.

위 문장을 다르게 해석한다면 성능이 향상되면 그만큼 사용자가 늘고 매출이 오른다는 뜻입니다.

이것이 웹 성능 최적화 중요한 이유입니다.

성능 최적화는 어떻게 이루어질까?

웹 성능을 결정하는 요소는 크게 로딩 성능과 렌더링 성능으로 나눌 수 있습니다.

로딩성능

로딩 성능 : 서버에 있는 웹페이지와 웹페이지에 필요한 기타 리소를 다운로드할 때의 성능

예를들어 웹페이지에 고화질 이미지가 포함되어 있을 때, 느린 인터넷 환경에서는 이 이미지가 매우 늦게 표시될 것입니다.

만찬가지로 HTML, 자바스크립트, CSS 파일의 크기가 크게된다면 다운로드 하는 데 시간이 오래 걸려 사용자에게 웹 페이지가 느리게 표시 될 것입니다.

따라서 로딩 성능을 개성하는 가장 좋은 방법은 다운로드해야 하는 리소스수를 줄이거나 크기를 줄이는 것입니다. 그 밖에는 코드를 분할하여 댜운로드하거나 리소스에 우선순위를 매겨 중요한 리소스를 먼저 다운로드하는 방법이 있습니다.

렌더링 성능

렌더링 성능 : 다운로드한 리소스를 가지고 화면을 그릴 때의 성늘을 말합니다.

렌더링 성능에 크게 영향을 주는 것은 자바스크립트 코드입니다. 코드를 얼마나 효율적으로 작성했느냐에 따라 화면이 그려지는 속도와 사용자 인터렉션의 자연스러운 정도가 달라집니다.

렌더링 성능을 개선하는 방법은 매우 다양하며, 서비스의 유형에 따라서도 다릅니다. 그래서 자신의 서비스에 필요한 최적화 기법을 적용하려면 브라우저의 동작 원리나 사용하는 프레임워크의 라이브사이클 등 웹 개발의 기본 지식을 이해하고 있어야 합니다.

async vs defer (script)

Sat, 22 Jul 2023 14:00:01 GMT

이 글은 스크립트 태그에 대하여 최적화하는 방법에 대하여 설명합니다.

async 및 defer는 모두 HTML의 스크립트 태그에 대한 속성으로, 이를 통해 외부 javascript를 로드하는 방법을 지정할 수 있습니다.

async, defer 를 사용하는 이유?!

DOM 요소 접근 불가

<head>
  <script>
    console.log(document.querySelector('h1'));
  </script>
</head>
<body>
  <h1>제목</h1>
</body>

위 코드에서 h1태그를 사용할 수 있기 전에 javascript를 실행하기 때문에 console.log 는 null 를 출력합니다. 따라서 querySelector 는 실제로 요소가 아직 존재하지 않기 때문에 요소에 접근할 수 없습니다.

스크립트 아래에 있는 DOM 요소에 접근할 수 없다. 따라서 DOM 요소에 핸들러를 추가하는 것과 같은 여러 행위가 불가능해진다.

문서 차단

<p>...스크립트 앞 콘텐츠...</p>

<script src="../"></script>

<!-- 스크립트 다운로드 및 실행이 끝나기 전까지 아래 내용이 보이지 않습니다. -->
<p>...스크립트 뒤 콘텐츠...</p>

페이지 위쪽에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지 생성하는것을 막아버려서 페이지에 접속하는 사용자들은 스크립트를 다운받고 실행할 때까지 스크립트 아래쪽 페이지를 볼 수 없게 됩니다.

<body>
  ... 스크립트 위 콘텐츠들 ...

  <script src="..."></script>
</body>

위 코드처럼 스크립트를 페이지 맨 아래 놓는 것이 하나의 방법이 될 수 있지만 완벽한 해결 방법은 아닙니다. 그 이유는 만약에 HTML 문서 자체가 아주 큰 경우에 브라우적 HTML 문서 전체를 다운로드 한 다음에 스크립트를 다운받게 하면 페이지가 정말 느려집니다.

네트워크 속도가 빠른 곳에서 페이지에 접속하고 있다면 이런 지연은 눈에 잘 띄지 않겠지만, 네트워크 환경이 느린곳에서는 그렇지 않습니다.

그래서 이러한 문제를 해결할 수 있는 스크립트 속성인 asycn, defer 가 있습니다.

1. async 속성

async 스크립트는 백그라운드에서 다운로드됩니다. 따라서 HTML 페이지는 async 스크립트 다운이 완료되길 기다리지 않고 페이지 내 콘텐츠를 처리, 출력합니다. 그리고 async 스크립트 실행중에는 HTML 파싱이 멈춥니다.

async 는 외부 스크립트를 포함하는 데 사용할 때 스크립트 태그의 속성입니다. 사용하는 방법은 다음과 같습니다.

<script src="jquery.js" async></script>

async는 스크립트가 다른 모든 리소스와 병렬로 로드되고 브라우저가 DOM을 빌드하고 동시에 스크립트를 로드할 수 있음을 의미합니다. async는 스크립트 로드가 더 이상 DOM을 차단하지 않도록 보장합니다.

스크립트가 로드를 완료하는 즉시 스크립트가 즉시 실행되어 브라우저가 무엇을 하든 차단합니다.

스크립트가 언제 로드되고 언제 실행될지 명확하지 않습니다.

따라서 스크립트가 DOM에 있는 무언가에 접근하려고 하지만 당시에는 존재하지 않을 수 있어 문제가 발생할 수 있습니다.

<script src="library.js"></script>
<script src="app.js"></script>

위와 같이 async 속성없이 두 스크립트를 포함하면 library.js가 항상 먼저 실행되거나 사용할 수 있습니다. 브라우저는 위에서 아래로 이동하며 각각의 스크립트가 로드되고 실행될 때까지 일시 정지하기 때문입니다.

<!-- library.js 가 app.js 보다 용량이 더 크다.  -->
<script src="library.js" async></script>
<script src="app.js" async></script>

이제 두 가지를 모두 async를 포함하면 중요한 점은 library.js 가 app.js보다 당연히 훨씬 더 크기 때문에 로드 시간이 길어진다는 것입니다. 그래서 두 스크립트가 병렬로 로드되지만 크기가 다르기 때문에 완료되는 시점이 달라집니다. 결론적으로는 로드시간이 더 짧은 app.js 스크립트가 더 일찍 로드되어 더 일찍 실행됩니다

async 스크립트는 방문자 수 카운터나 광고 관련 스크립트처럼 각각 독립적인 역할을 하는 서드 파티 스크립트를 현재 개발 중인 스크립트에 통합하려 할 때 아주 유용합니다.

2. defer 속성

브라우저는 defer 속성이 있는 스크립트를 ‘백그라운드’에서 다운로드 합니다. 따라서 지연 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않습니다. 그리고 defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연 됩니다.

defer는 스크립트를 로드할 때 브라우저를 차단하지 않습니다.

async를 사용하면 실행 중에 브라우저가 차단될 수 있다는 점이 결정적인 문제였는데, defer을 사용하면 그렇지 않습니다.

defer에 포함된 스크립트는 DOM이 준비되었을 때만 실행되므로 DOM 액세스가 보장되는 스크립트에 이상적입니다.

async와 defer의 공통점은 스크립트가 DOM 구성과 병렬로 로드된다는 점이며, 스크립트가 실행되는 시점만 두 가지 모두 다릅니다. 지연을 사용하면 DOM이 준비되었을 때만 실행되도록 보장됩니다.

<!-- library.js 가 app.js 보다 용량이 더 크다.  -->
<script src="library.js" defer></script>
<script src="app.js" defer></script>

물론 library.js가 더 크기 때문에 로드하는 데 시간이 더 오래 걸리지만 library.js가 먼저 실행되고 그 다음에 app.js가 실행됩니다.

defer는 스크립트 태그의 순서로 지정한 실행 순서를 정확히 따르기 때문입니다. 그리고 defer의 경우 평소와 같이 DOM이 준비되었을 때만 실행됩니다.

참조

https://ko.javascript.info/script-async-defer

https://javascript.plainenglish.io/async-and-defer-the-complete-guide-to-loading-javascript-properly-ce6edce1e6b5

연결 리스트

Fri, 21 Jul 2023 14:00:01 GMT

링크드 리스트는 데이터를 일직선으로 나영한 형태를 가지고 있습니다. 데이터 추가나 삭제는 쉽지만, 원하는 데이터에 접근하려면 시간이 많이 걸립니다.

배열 vs 링크드리스트

배열은 메모리 상에서 연속적인 공간을 할당받아 데이터를 저장한다. 배열에서는 데이터를 접근할때 인덱스(index)라는 데이터의 주소를 가리키는 식별자를 통해 빠르게 특정 데이터에 접근할 수 있다. 하지만 이러한 특징으로 인해 중간에 데이터를 삽입 또는 삭제하는 과정이 느리다.

반면에 링크드 리스트는 메모리 상에서 연속적인 공간에 데이터를 저장하지 않을 수 있다. 리스트의 각 데이터들은 다음 데이터에 위치를 알 수 있는 정보, 즉 포인터를 가지고 있다. 이러한 특징 때문에 배열과 다르게 데이터를 삽입 또는 삭제하는 과정이 빠르다. 하지만 특정 데이터에 접근을 할때 배열처럼 인덱스로 접근할 수 없기때문에 첫번째 데이터부터 선형 검색을 해야하기 때문에 배열보다 느리다.

링크드 리스트 구현

노드 생성

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

링크드 리스트에서 각 데이터에 정보(값, 다음 데이터 위치)를 가지고 있는 노드를 구현합니다.

링크드 리스트 생성자 함수

class LinkedList {
  constructor() {
    this.head = null;
    this.size = 0;
  }
}

링크드 리스트를 생성하기 위해서 생성자 함수를 선언하고 그 함수 안에는 링크드 리스트에 첫번째 데이터를 담당하고 있는 “head” 프로퍼티를 선언합니다. 그리고 링크드 리스트에 노드의 갯수를 알기 위한 size 프로퍼티를 선언합니다.

이후 과정부터는 class 를 제외하고 해당 구현하고자 하는 메소드만 표현하겠습니다.

add - 리스트 끝에 노드를 추가

add(value) {
  // 노드 생성
	const node = New Node(value);

  if (this.head === null) {
    // 현재 head 가 비어있으면 head에 node를 할당한다.
    this.head = node;
  } else {
    // 현재 노드
  	let currentNode = this.head;

    // 해당 노드의 다음 값이 없을때까지 리스트를 탐색한다.
    while (currentNode.next) {
      currentNode = currentNode.next;
    }

    // 마지막 노드에 추가할 노드를 할당한다.
    currentNode.next = node;
  }

  // 리스트의 크기를 증가한다.
  this.size++;
}

목록 끝에 요소를 추가하는 경우 고려사항

리스트가 비어 있으면 요소를 추가하면 헤드가 됩니다.
리스트가 비어 있지 않으면 리스트 끝까지 반복하고 리스트 끝에 요소를 추가합니다.

insertAt(value, index) - 리스트에 지정된 index에 요소를 추가한다.

insertAt(value, index) {
	if (index < 0 || index > this.size) {
    // index가 0보다 작거나 리스트 크기보다 클때
    console.log("유효한 인덱스를 입력하세요.");
  } else {
    const node = New Node(value);

    let currentNode = this.head;

    if (index === 0) {
      // 첫번째에 추가하기
      node.next = head.next;
      this.head = node;
    } else {
      let currentIndex = 0;
      let previousNode = null;

      // 리스트에서 삽입할 위치를 탐색
      while (currentIndex < index) {
        currentIndex++;
        previousNode = currentNode;
        currentNode = currentNode.next;
      }

      // 노드 추가
      node.next = currentNode; // 노드(추가할)에 다음 요소를 현재 노드로 설정
      previousNode.next = node; // 이전 노드에 다음 요소를 노드(추가할)로 설정
    }

    this.size++;
  }
}

리스트의 지정된 인덱스에 요소를 추가하기 위해 다음과 같은 조건을 고려 해야합니다.

인덱스가 0이면 리스트의 앞쪽에 요소를 추가하고 head로 만듭니다.
인덱스가 목록의 마지막 위치인 경우 리스트 끝에 요소를 추가합니다.
인덱스가 0 ~ this.size -1 사이인 경우 인덱스까지 반복하고 해당 인덱스에 요소를 추가합니다.

remove(value) - 목록에서 요소를 제거합니다. 제거된 요소를 반환하거나 요소를 찾을 수 없는 경우 -1을 반환합니다.

remove(value) {
	let currentNode = this.head;
  let previousNode = null;

  // 리스트 순회
  while (currentNode !== null) {
    if (currentNode.value === value) {
      if (previousNode === null) {
        // 현재 노드가 head 일때
        // head 에 head 다음 요소 할당(즉, head 제거)
        this.head = currentNode.next;
      } else {
        // 현재 노드가 head가 아닐때
        // 이전 노드의 next 에 현재 노드의 next 할당(즉, 현재 노드 제거)
        previousNode.next = currentNode.next;
      }

      this.size--;
      return currentNode.value;
    }

    // 리스트를 순회하면서 이전노드, 현재노드 계속 변경
    previousNode = currentNode;
    currentNode = currentNode.next;
  }

  return -1;
}

전체 코드

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

class LinkedList {
	constructor() {
    this.head = null;
    this.size = 0;
  }

  add(value) {
    // 노드 생성
    const node = New Node(value);

    if (this.head === null) {
      // 현재 head 가 비어있으면 head에 node를 할당한다.
      this.head = node;
    } else {
      // 현재 노드
      let currentNode = this.head;

      // 해당 노드의 다음 값이 없을때까지 리스트를 탐색한다.
      while (currentNode.next) {
        currentNode = currentNode.next;
      }

      // 마지막 노드에 추가할 노드를 할당한다.
      currentNode.next = node;
    }

    // 리스트의 크기를 증가한다.
    this.size++;
  }

  insertAt(value, index) {
    if (index < 0 || index > this.size) {
      // index가 0보다 작거나 리스트 크기보다 클때
      console.log("유효한 인덱스를 입력하세요.");
    } else {
      const node = New Node(value);

      let currentNode = this.head;

      if (index === 0) {
        // 첫번째에 추가하기
        node.next = head.next;
        this.head = node;
      } else {
        let currentIndex = 0;
        let previousNode = null;

        // 리스트에서 삽입할 위치를 탐색
        while (currentIndex < index) {
          currentIndex++;
          previousNode = currentNode;
          currentNode = currentNode.next;
        }

        // 노드 추가
        node.next = currentNode; // 노드(추가할)에 다음 요소를 현재 노드로 설정
        previousNode.next = node; // 이전 노드에 다음 요소를 노드(추가할)로 설정
      }

      this.size++;
    }
  }

  remove(value) {
    let currentNode = this.head;
    let previousNode = null;

    // 리스트 순회
    while (currentNode !== null) {
      if (currentNode.value === value) {
        if (previousNode === null) {
          // 현재 노드가 head 일때
          // head 에 head 다음 요소 할당(즉, head 제거)
          this.head = currentNode.next;
        } else {
          // 현재 노드가 head가 아닐때
          // 이전 노드의 next 에 현재 노드의 next 할당(즉, 현재 노드 제거)
          previousNode.next = currentNode.next;
        }

        this.size--;
        return currentNode.value;
      }

      // 리스트를 순회하면서 이전노드, 현재노드 계속 변경
      previousNode = currentNode;
      currentNode = currentNode.next;
    }

    return -1;
  }
}

Programmers - 요격 시스템

Wed, 19 Jul 2023 14:00:10 GMT

문제 설명

A 나라가 B 나라를 침공하였습니다. B 나라의 대부분의 전략 자원은 아이기스 군사 기지에 집중되어 있기 때문에 A 나라는 B 나라의 아이기스 군사 기지에 융단폭격을 가했습니다. A 나라의 공격에 대항하여 아이기스 군사 기지에서는 무수히 쏟아지는 폭격 미사일들을 요격하려고 합니다. 이곳에는 백발백중을 자랑하는 요격 시스템이 있지만 운용 비용이 상당하기 때문에 미사일을 최소로 사용해서 모든 폭격 미사일을 요격하려 합니다. A 나라와 B 나라가 싸우고 있는 이 세계는 2 차원 공간으로 이루어져 있습니다. A 나라가 발사한 폭격 미사일은 x 축에 평행한 직선 형태의 모양이며 개구간을 나타내는 정수 쌍 (s, e) 형태로 표현됩니다. B 나라는 특정 x 좌표에서 y 축에 수평이 되도록 미사일을 발사하며, 발사된 미사일은 해당 x 좌표에 걸쳐있는 모든 폭격 미사일을 관통하여 한 번에 요격할 수 있습니다. 단, 개구간 (s, e)로 표현되는 폭격 미사일은 s와 e에서 발사하는 요격 미사일로는 요격할 수 없습니다. 요격 미사일은 실수인 x 좌표에서도 발사할 수 있습니다. 각 폭격 미사일의 x 좌표 범위 목록 targets이 매개변수로 주어질 때, 모든 폭격 미사일을 요격하기 위해 필요한 요격 미사일 수의 최솟값을 return 하도록 solution 함수를 완성해 주세요.

제한 사항

1 ≤ targets의 길이 ≤ 500,000
targets의 각 행은 [s,e] 형태입니다.
- 이는 한 폭격 미사일의 x 좌표 범위를 나타내며, 개구간 (s, e)에서 요격해야 합니다.
- 0 ≤ s < e ≤ 100,000,000

입출력 예

targets	result
[[4,5],[4,8],[10,14],[11,13],[5,12],[3,7],[1,4]]	3

문제 접근

targets 배열을 내림차순으로 정렬(시작지점 기준으로 - index 0)

현재 요격대상의 끝점이 현재 미사일 요격지점보다 작다면 요격할 수 없다는것을 의미
그래서 요격 지점을 타켓의 시작지점으로 업데이트 후, count 값을 증가
모든 요격 대상을 순회하면서 위 과정을 반복한다.

function solution(targets) {
    const arr = targets.slice().sort((a, b) => b[0] - a[0]);
    let count = 1;
    let check = arr[0][0]
    
    for (let i = 1; i < arr.length; i++) {
        const [left, right] = arr[i];
        
        if (check >= right) {
            check = left;
            count++;
        }
    }
    
    return count;
}

Programmers 이진 변환 반복하기

Wed, 19 Jul 2023 14:00:01 GMT

문제 설명

0과 1로 이루어진 어떤 문자열 x에 대한 이진 변환을 다음과 같이 정의합니다.

x의 모든 0을 제거합니다.
x의 길이를 c라고 하면, x를 “c를 2진법으로 표현한 문자열”로 바꿉니다.

예를 들어, x = "0111010"이라면, x에 이진 변환을 가하면 x = "0111010" -> "1111" -> "100" 이 됩니다.

0과 1로 이루어진 문자열 s가 매개변수로 주어집니다. s가 “1”이 될 때까지 계속해서 s에 이진 변환을 가했을 때, 이진 변환의 횟수와 변환 과정에서 제거된 모든 0의 개수를 각각 배열에 담아 return 하도록 solution 함수를 완성해주세요.

제한사항

s의 길이는 1 이상 150,000 이하입니다.
s에는 ‘1’이 최소 하나 이상 포함되어 있습니다.

문제 접근

문자열 s 길이가 1일 될때까지 계속 반복한다

문자열 s 에서 “1” 인 문자만 추출하여 새로운 배열 생성
기존 문자열 - 새롭게 만든 문자열 을 계산하변 지원진 0의 갯수를 알아낼수있다.
그리고 문자열의 길이로 2진수 변환
해당 과정 반복

function solution(s) {
    let str = s;
    let count = 0;
    let removeZeroCount = 0;

    while (str.length !== 1) {
        const temp = str.split("").filter((value) => value === "1");
        removeZeroCount += str.length - temp.length;

        str = temp.length.toString(2);

        count++;
    }

    return [count, removeZeroCount];
}

Codility Lesson 15 - MinAbsSumOfTwo

Tue, 18 Jul 2023 14:05:00 GMT

문제 설명

A를 N개의 정수로 구성된 비어 있지 않은 배열이라고 가정합니다.

한 쌍의 인덱스(P, Q)에 대한 둘의 내적합은 0 ≤ P ≤ Q < N에 대해 절대값 |A[P] + A[Q]|입니다.

예를 들어, 다음 배열 A:

  A[0] = 1
  A[1] = 4
  A[2] = -3

에는 (0, 0), (0, 1), (0, 2), (1, 1), (1, 2), (2, 2)의 인덱스 쌍이 있습니다.

(0, 0) 쌍에 대한 2의 합은 A[0] + A[0] = |1 + 1| = 2입니다.
(0, 1) 쌍에 대한 2의 내적합은 A[0] + A[1] = |1 + 4| = 5입니다.
(0, 2) 쌍에 대한 2의 내적합은 A[0] + A[2] = |1 + (-3)| = 2입니다.
(1, 1) 쌍에 대한 2의 내적합은 A[1] + A[1] = |4 + 4| = 8입니다.
(1, 2) 쌍에 대한 2의 내근 합은 A[1] + A[2] = |4 + (-3)| = 1입니다.
(2, 2) 쌍에 대한 2의 내적합은 A[2] + A[2] = |(-3) + (-3)| = 6입니다.
함수를 작성합니다:

function solution(A);

이 함수는 N개의 정수로 구성된 비어 있지 않은 배열 A가 주어졌을 때 이 배열의 모든 인덱스 쌍에 대해 2의 최소합을 반환합니다.

예를 들어 다음 배열 A가 주어집니다:

  A[0] = 1
  A[1] = 4
  A[2] = -3

이면 위에서 설명한 대로 함수는 1을 반환해야 합니다.

배열 A가 주어졌습니다:

  A[0] = -8
  A[1] = 4
  A[2] = 5
  A[3] =-10
  A[4] = 3

이면 함수는 |(-8) + 5| = 3을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [1..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [-1,000,000,000..1,000,000,000] 범위 내의 정수입니다.

문제 접근

투포인터 이용

배열을 오름차순으로 정렬
left + right 가 0 보다 작으면 왼쪽이 음수라는 의미 왼쪽 위치++
left + right 가 0 보다 크면 오른쪽 값이 더 크다는 의미이므로 오른쪽 위치—
해당 배열을 순회하면서 가장 작은값을 찾는다.
합계가 0 이면 return
반복문은 왼쪽 인덱스가 오른쪽인덱스를 따라잡거나 보다 커질때 까지 반복문을 순회한다.
교차한다는 의미는 전체 배열을 모두 순회했다는 뜻이다.

function solution(A) {
    const arr = A.slice().sort((a, b) => a - b);

    let left = 0;
    let right = A.length - 1;
    let minSum = Number.MAX_SAFE_INTEGER;

    while (left <= right) {
        let sum = arr[left] + arr[right];

        minSum = Math.min(minSum, Math.abs(sum));

        if (sum === 0) {
            break;
        }

        if (sum < 0) {
            left++;
        } else {
            right--;
        }
    }

    return minSum;
}

Codility Lesson 15 - CountTriangles

Tue, 18 Jul 2023 14:03:00 GMT

문제 설명

N개의 정수로 구성된 배열 A가 주어집니다. 삼중항(P, Q, R)은 변의 길이가 A[P], A[Q], A[R]인 삼각형을 만들 수 있다면 삼각형입니다. 즉, 삼중항(P, Q, R)은 0 ≤ P < Q < R < N이면 삼각형입니다:

A[P] + A[Q] > A[R],
a[q] + a[r] > a[p],
a[r] + a[p] > a[q].

예를 들어 다음과 같은 배열 A를 생각해 봅시다:

  a[0] = 10 a[1] = 2 a[2] = 5
  a[3] = 1 a[4] = 8 a[5] = 12

이 배열의 요소로 구성할 수 있는 삼각형 삼중항은 (0, 2, 4), (0, 2, 5), (0, 4, 5), (2, 4, 5) 등 네 가지가 있습니다.

함수를 작성합니다:

function solution(A);

이 함수는 N개의 정수로 구성된 배열 A가 주어지면 이 배열에 있는 삼각형 삼중 항의 개수를 반환합니다.

예를 들어 배열 A가 주어지면

  a[0] = 10 a[1] = 2 a[2] = 5
  a[3] = 1 a[4] = 8 a[5] = 12

이면 위에서 설명한 대로 함수는 4를 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [0..1,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [1..1,000,000,000] 범위 내의 정수입니다.

문제 접근

삼각형 조건을 배열 A를 오름 차순으로 정렬하면 하나의 조건만 고려하면된다.

function solution(A) {
    const arr = A.slice().sort((a, b) => a - b);
    let result = 0;

    for (let p = 0; p < arr.length - 2; p++) {
        let r = p + 2;

        for (let q = p + 1; q < arr.length - 1; q++) {
            while(arr[p] + arr[q] > arr[r]) {
                r++;
            }

            result += r - q - 1;
        }
    }

    return result;
}

Codility Lesson 15 - CountDistinctSlices

Tue, 18 Jul 2023 14:02:00 GMT

문제 설명

정수 M과 음수가 아닌 정수 N으로 구성된 비어 있지 않은 배열 A가 주어집니다. 배열 A의 모든 정수는 M보다 작거나 같습니다.

0 ≤ P ≤ Q < N인 한 쌍의 정수(P, Q)를 배열 A의 슬라이스라고 하며, 이 슬라이스는 A[P], A[P + 1], …, A[Q] 요소로 구성됩니다. 고유 슬라이스는 고유 번호로만 구성된 슬라이스입니다. 즉, 슬라이스에서 개별 번호가 두 번 이상 발생하지 않습니다.

예를 들어 정수 M = 6과 배열 A를 생각해 봅시다:

A[0] = 3
A[1] = 4
A[2] = 5
A[3] = 5
A[4] = 2

(0, 0), (0, 1), (0, 2), (1, 1), (1, 2), (2, 2), (3, 3), (3, 4) 및 (4, 4) 등 정확히 9개의 슬라이스가 있습니다.

목표는 고유한 조각의 수를 계산하는 것입니다.

함수를 작성합니다:

function solution(M, A);

정수 M과 N개의 정수로 구성된 비어 있지 않은 배열 A가 주어지면 고유한 조각의 개수를 반환하는 함수입니다.

고유 조각의 수가 1,000,000,000보다 크면 함수는 1,000,000,000을 반환해야 합니다.

예를 들어 정수 M = 6과 배열 A가 주어지면 다음과 같습니다:

A[0] = 3
A[1] = 4
A[2] = 5
A[3] = 5
A[4] = 2

이면 위에서 설명한 대로 함수는 9를 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [1..100,000] 범위 내의 정수입니다;
M은 [0..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [0..M] 범위 내의 정수입니다.

문제 접근

투 포인터를 이용하여 배열에서 슬라이스의 갯수는 “end - front + 1” 이다

투 포인트 이용
M 길이의 빈 배열 생성
중복 숫자를 나오는 index 고정 (end)
start 는 제외하고 그다음부턴 중복 숫자를 나오는 위치를 알고 있다.
다음에 start 가 해당 중복숫자이면 false 로 초기화 하기 때문에

function solution(M, A) {
    const check = new Array(M + 1).fill(false);
    let end = 0;
    let result = 0;

    for (let start = 0; start < A.length; start++) {
        while (end < A.length && !check[A[end]]) {
            result += end - start + 1;
            check[A[end]] = true;
            end++;
        }

        check[A[start]] = false;
    }

    return Math.min(result, 1000000000);
}

Codility Lesson 15 - AbsDistinct

Tue, 18 Jul 2023 14:01:00 GMT

문제 설명

N개의 숫자로 구성된 비어 있지 않은 배열 A가 주어집니다. 배열은 내림차순이 아닌 순서로 정렬됩니다. 이 배열의 절대 고유 개수는 배열의 요소 중 고유한 절대 값의 수입니다.

예를 들어 배열 A가 다음과 같다고 가정해 보겠습니다:

  A[0] = -5
  A[1] = -3
  A[2] = -1
  A[3] = 0
  A[4] = 3
  A[5] = 6

이 배열의 요소에는 0, 1, 3, 5, 6의 5개의 고유 절대값이 있으므로 이 배열의 절대 고유 개수는 5입니다.

함수를 작성합니다:

function solution(A);

N개의 숫자로 구성된 비어 있지 않은 배열 A가 주어졌을 때, 배열 A의 절대 고유 개수를 반환하는 함수입니다.

예를 들어, 배열 A가 주어졌을 때

  A[0] = -5
  A[1] = -3
  A[2] = -1
  A[3] = 0
  A[4] = 3
  A[5] = 6

인 경우 함수는 위에서 설명한 대로 5를 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [1..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [-2,147,483,648..2,147,483,647] 범위 내의 정수입니다;
배열 A는 감소하지 않는 순서로 정렬됩니다.

문제 접근

배열의 요소를 절대값으로 변경후 Set 을 이용하여 중복된 요소를 제거한다.

function solution(A) {
    const arr = A.map((value) => {
        return Math.abs(value);
    });

    const set = new Set(arr);

    return set.size;
}

Codility Lesson 14 - MinMaxDivision

Tue, 18 Jul 2023 14:00:54 GMT

문제 설명

정수 K, M과 N개의 정수로 구성된 비어 있지 않은 배열 A가 주어집니다. 배열의 모든 요소는 M보다 크지 않습니다.

이 배열을 연속된 요소로 구성된 K 블록으로 나누어야 합니다. 블록의 크기는 0에서 N 사이의 정수이며, 배열의 모든 요소는 어떤 블록에 속해야 합니다.

X에서 Y까지의 블록의 합은 A[X] + A[X + 1] + … + A[Y]와 같습니다. + A[Y]입니다. 빈 블록의 합은 0입니다.

큰 합은 모든 블록의 최대 합입니다.

예를 들어 정수 K = 3, M = 5와 배열 A가 주어집니다:

  A[0] = 2
  A[1] = 1
  A[2] = 5
  A[3] = 1
  A[4] = 2
  A[5] = 2
  A[6] = 2

배열은 예를 들어 다음과 같은 블록으로 나눌 수 있습니다:

[2, 1, 5, 1, 2, 2, 2], [], [], 15의 큰 합으로;
2], [1, 5, 1, 2], [2, 2], [2, 2]의 큰 합계가 9입니다;
[2, 1, 5], [], [1, 2, 2, 2], 큰 합계가 8인 경우;
2, 1], [5, 1], [2, 2, 2], [2, 2, 2]의 큰 합이 6입니다.

목표는 큰 합을 최소화하는 것입니다. 위의 예에서 6은 최소 큰 합계입니다.

함수를 작성합니다:

function solution(K, M, A);

정수 K, M과 비어 있지 않은 N개의 정수로 구성된 배열 A가 주어졌을 때 최소의 큰 합을 반환하는 함수입니다.

예를 들어 K = 3, M = 5, 배열 A가 주어지면 다음과 같습니다:

	A[0] = 2
  A[1] = 1
  A[2] = 5
  A[3] = 1
  A[4] = 2
  A[5] = 2
  A[6] = 2

이면 위에서 설명한 대로 함수는 6을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N과 K는 [1..100,000] 범위 내의 정수입니다;
M은 [0..10,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [0..M] 범위 내의 정수입니다.

문제 접근

중간값을 이용하여 이분 탐색을 진행한다.

중간값을 기준으로 최종값에 범위를 줄여나가면서 비교한다.

function solution(K, M, A) {
    let minValue = Math.max(...A);
    let maxValue = A.reduce((acc, value) => acc + value);

    if (K === 1) {
        return minValue;
    }

    if (K >= A.length) {
        return maxValue;
    }

    while (minValue <= maxValue) {
        let mid = Math.floor((maxValue + minValue) / 2);

        let sum = 0;
        let count = 0;

				// 블록수가 K 보다 작으면 값이 너무 크다는 의미
				// 블록수가 K 보다 크면 기준 값이 너무 작다는 의미
        let isValid = true;

        for (let i = 0; i < A.length; i++) {
            if (sum + A[i] > mid) {
                sum = A[i];
                count++;
            } else {
                sum += A[i];
            }

            if (count >= K) {
                isValid = false;
                break;
            }
        }

        if (isValid) {
            maxValue = mid - 1;
        } else {
            minValue = mid + 1;
        }
    }
    
    return minValue;
}

Codility Lesson 12 - ChocolatesByNumbers

Tue, 18 Jul 2023 14:00:52 GMT

문제 설명

두 개의 양의 정수 N과 M이 주어집니다. 정수 N은 0에서 N-1까지 번호가 매겨진 원 안에 배열된 초콜릿의 개수를 나타냅니다.

당신은 초콜릿을 먹기 시작합니다. 초콜릿을 먹은 후 포장지만 남깁니다.

0번 초콜릿부터 먹기 시작합니다. 그런 다음 원 안에 있는 다음 M-1개의 초콜릿 또는 포장지를 생략하고 다음 초콜릿을 먹습니다.

더 정확하게 말하면, 초콜릿 번호 X를 먹었다면 다음에는 숫자 (X + M) 모듈로 N(나머지 나눗셈)이 있는 초콜릿을 먹습니다.

빈 포장지를 발견하면 먹기를 중단합니다.

예를 들어, 정수 N = 10과 M = 4가 주어집니다. 다음 초콜릿을 먹습니다: 0, 4, 8, 2, 6.

목표는 위의 규칙에 따라 먹을 초콜릿의 개수를 세는 것입니다.

함수를 작성합니다:

function solution(N, M);

두 개의 양의 정수 N과 M이 주어지면 먹을 초콜릿의 개수를 반환하는 함수를 작성합니다.

예를 들어 정수 N = 10, M = 4가 주어지면 위에서 설명한 대로 함수는 5를 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성하십시오:

N과 M은 [1..1,000,000,000] 범위 내의 정수입니다.

문제 접근

규칙은 최대공약수의 배수이다.

유클리드 호제법을 이용하여 최대공약수를 구할수이다.

// 단, a가 b보다 커야함.
function gcd(a, b) { 
  let r;
  
  while ((a % b) > 0)  {
    r = a % b;
    a = b;
    b = R;
  }
  
  return b;
}

유클리드 호제법을 이용하여 최대공약수를 구한다.
N을 최대공약수로 나누게 되면 갯수가 나온다.

function solution(N, M) {
    let a = N;
    let b = M;
    let remain = 0;

    while (a % b !== 0) {
        remain = a % b;
        a = b;
        b = remain;
    }

    return Math.floor(N / b);
}

Codility Lesson 11 - CountSemiprimes

Tue, 18 Jul 2023 14:00:50 GMT

문제 설명

소수는 정확히 두 개의 나눗셈이 있는 양의 정수 X입니다: 1과 X. 처음 몇 개의 소수는 2, 3, 5, 7, 11, 13입니다.

준소수는 두 개의 (반드시 구별되는 것은 아닌) 소수의 곱인 자연수입니다. 처음 몇 개의 준소수는 4, 6, 9, 10, 14, 15, 21, 22, 25, 26입니다.

비어 있지 않은 두 개의 배열 P와 Q가 주어지며, 각 배열은 M개의 정수로 구성됩니다. 이 배열은 지정된 범위 내의 소수 개수에 대한 쿼리를 나타냅니다.

쿼리 K는 1 ≤ P[K] ≤ Q[K] ≤ N 범위(P[K], Q[K]) 내의 소수 개수를 구해야 합니다.

예를 들어 정수 N = 26과 배열 P, Q를 고려합니다:

p[0] = 1 q[0] = 26
p[1] = 4 q[1] = 10
p[2] = 16 q[2] = 20

이러한 각 범위 내의 반소수의 수는 다음과 같습니다:

(1, 26)은 10입니다,
(4, 10)은 4입니다,
(16, 20)은 0입니다.

함수를 작성합니다:

function solution(N, P, Q);

이 함수는 정수 N과 비어 있지 않은 두 개의 비어 있지 않은 배열 P와 Q가 주어지면 모든 쿼리에 대한 연속적인 답을 지정하는 M개의 요소로 구성된 배열을 반환합니다.

예를 들어 정수 N = 26과 배열 P, Q가 주어지면 다음과 같습니다:

p[0] = 1 q[0] = 26
p[1] = 4 q[1] = 10
p[2] = 16 q[2] = 20

인 경우 함수는 위에서 설명한 대로 [10, 4, 0] 값을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [1..50,000] 범위 내의 정수입니다;
M은 [1..30,000] 범위 내의 정수입니다;
배열 P와 Q의 각 요소는 [1..N] 범위 내의 정수입니다;
P[i] ≤ Q[i].

문제 접근

에라토스테네스의 체 의 방법으로 소수를 구한다.

소수, 준소수를 구하여 각 숫자의 준소수의 갯수를 동적계획법으로 하나씩 더한다. 마지막엔 범위 마지막 요소시점에서 총 준소수 개수 - 범위 시작 요소시점에서 총 준소수 개수 가 답이다.

소수, 준소수 빈배열을 만든다 (배열의 길이는 N + 1; 숫자는 1 부터 시작이기 때문에)
에라토스테네스의 체의 방법으로 소수를 구한다.
구한 소수를 가지고 준소수를 구한다.
해당 준소수 배열에서 각 숫자까지의 준소수의 총 갯수 동적계획법을 이용하여 구한다.
마지막엔 범위 마지막 요소시점에 준소수 총 개수 - 시작 요소시점에 준소수 총 개수 를 구한다.

function solution(N, P, Q) {
    const primeArr = new Array(N + 1).fill(1);
    const semiPrimeArr = new Array(N + 1).fill(0);

    primeArr[0] = 0;
    primeArr[1] = 0;

    for (let i = 2; i <= Math.sqrt(N); i++) {
        if (primeArr[i]) {
            for (let j = i * i; j <= N; j += i) {
                primeArr[j] = 0;
            }
        }
    }

    const primeList = [];

    primeArr.forEach((value, index) => {
        if (value === 1) {
            primeList.push(index);
        }
    });

    for (let i = 0; i < primeList.length; i++) {
        for (let j = 0; j < primeList.length; j++) {
            const value = primeList[i] * primeList[j];

            if (value <= N) {
                semiPrimeArr[value] = 1;
            }
        }
    }

    for (let i = 2; i < semiPrimeArr.length; i++) {
        semiPrimeArr[i] += semiPrimeArr[i - 1];
    }

    const result = P.map((value, index) => {
        return semiPrimeArr[Q[index]] - semiPrimeArr[value - 1];
    });

    return result;
}

Codility Lesson 11 - CountNonDivisible

Tue, 18 Jul 2023 14:00:46 GMT

문제 설명

N개의 정수로 구성된 배열 A가 주어집니다.

0 ≤ i < N인 각 숫자 A[i]에 대해 A[i]의 나눗셈이 아닌 배열의 원소 수를 세고 싶습니다. 이러한 원소를 제수가 아닌 원소라고 합니다.

예를 들어 정수 N = 5와 배열 A를 생각해 봅시다:

A[0] = 3
A[1] = 1
A[2] = 2
A[3] = 3
A[4] = 6

다음 요소의 경우:

A[0] = 3, 제수가 아닌 요소는 다음과 같습니다: 2, 6,
A[1] = 1인 경우, 비제수는 다음과 같습니다: 3, 2, 3, 6,
A[2] = 2, 비제수는 다음과 같습니다: 3, 3, 6,
A[3] = 3, 비제수는 다음과 같습니다: 2, 6,
A[4] = 6, 비소수가 없습니다.

함수를 작성합니다:

funtion solution(A);

이 함수는 N개의 정수로 구성된 배열 A가 주어졌을 때 나눗셈이 아닌 정수의 양을 나타내는 정수의 시퀀스를 반환합니다.

결과 배열은 정수의 배열로 반환되어야 합니다.

예를 들어, 주어진

A[0] = 3
A[1] = 1
A[2] = 2
A[3] = 3
A[4] = 6

함수는 위에서 설명한 대로 [2, 4, 3, 2, 0]을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [1..50,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [1..2 * N] 범위 내의 정수입니다.

문제 접근

빈 배열에 배열 A의 각 숫자가 나오는 횟수를 저장하고 배열 A 를 순회하면서 각 숫자의 약수를 구해 배열 A 전체 길이에서 빼준다.

배열의 A의 최대값까지 빈 배열을 만들어 0 으로 채운다.
0 으로 채운 배열에 배열 A 나오는 숫자들의 횟수를 저장한다.
배열 A 를 순회하면서 각 숫자의 약수를 구한다.
A.length - 약수의 갯수 를 구한다. (배열의 총 길이에서 약수의 갯수를 뺴면 나머지 숫자들이 나누어지지 않는 숫자이다.)

function solution(A) {
    const arr = new Array(Math.max(...A) + 1).fill(0);

    A.forEach((value) => {
        arr[value]++;
    });

    const result = [];

    for (let i = 0; i < A.length; i++) {
        const current = A[i];
        let count = 0;

        for (let j = 1; j <= Math.sqrt(current); j++) {
            if (current % j === 0) {
                count += arr[j];

                if (current / j !== j) {
                    count += arr[current / j];
                }
            }
        }

        result.push(A.length - count);
    }

    return result;
}

Codility Lesson 10 - Flags

Mon, 17 Jul 2023 14:00:46 GMT

문제 설명

N개의 정수로 구성된 비어 있지 않은 배열 A가 주어집니다.

피크는 이웃 요소보다 큰 배열 요소입니다. 더 정확하게는 0 < P < N - 1, A[P - 1] < A[P] > A[P + 1]이 되는 인덱스 P입니다.

예를 들어, 다음 배열 A:

A[0] = 1
A[1] = 5
A[2] = 3
A[3] = 4
A[4] = 3
A[5] = 4
A[6] = 1
A[7] = 2
A[8] = 3
A[9] = 4
A[10] = 6
A[11] = 2

에는 정확히 4개의 피크가 있습니다: 요소 1, 3, 5, 10.

아래 그림과 같이 상대적인 높이가 배열 A로 표시되는 여러 산으로 여행을 떠난다고 가정해 보겠습니다. 얼마나 많은 깃발을 가져갈지 선택해야 합니다. 목표는 특정 규칙에 따라 봉우리에 최대 깃발 수를 설정하는 것입니다.

깃발은 봉우리에만 설정할 수 있습니다. 또한 K개의 깃발을 사용하는 경우 두 깃발 사이의 거리는 K보다 크거나 같아야 합니다. 인덱스 P와 Q 사이의 거리는 절대값인 |P - Q|입니다.

예를 들어, 위의 배열 A로 표시된 산맥이 있고 N이 12라고 가정해 보겠습니다:

깃발이 두 개이면 봉우리 1과 5에 설정할 수 있습니다;
깃발이 3개이면 봉우리 1, 5, 10에 설정할 수 있습니다;
플래그가 4개인 경우 피크 1, 5, 10에 플래그 3개만 설정할 수 있습니다.
따라서 이 경우 최대 3개의 플래그만 설정할 수 있습니다.

함수를 작성합니다:

function solution(A);

비어 있지 않은 정수 배열 A가 주어지면 배열의 피크에 설정할 수 있는 최대 플래그 수를 반환하는 함수입니다.

예를 들어, 다음 배열 A를 살펴보겠습니다:

A[0] = 1
A[1] = 5
A[2] = 3
A[3] = 4
A[4] = 3
A[5] = 4
A[6] = 1
A[7] = 2
A[8] = 3
A[9] = 4
A[10] = 6
A[11] = 2

이면 위에서 설명한 대로 함수는 3을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [1..400,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [0..1,000,000,000] 범위 내의 정수입니다.

문제 접근

이 문제 아직 잘 이해가 가지 않는다. … 조금 더 파악해봐야겠어요..

function solution(A) {
    const peaks = [];
  
    for (let i = 1; i < A.length - 1; i++){
    	if (A[i] > A[i-1] && A[i] > A[i+1]) {
      	peaks.push(i);
      }
    }
    // 1. 주어진 배열에서 피크를 찾아 'peaks' 배열에 저장합니다. 

    if (peaks.length === 0) return 0;
    // 2. 만약 피크가 없다면, 플래그를 위치시킬 수 없으므로 0을 반환합니다.

    let result = 1;
    let possibleResult = Math.min(peaks.length, Math.floor(Math.sqrt(A.length - 1)) + 1);
    // 3. 'possibleResult'는 가능한 플래그의 최대 수를 의미하며, 이는 피크의 수와 배열 길이의 제곱근 중 작은 값입니다.

    for (let i = possibleResult; i >= 1; i--){
    	let flags = 1;
      let pos = peaks[0];
      
      for (let j = 1; j < peaks.length; j++){
        if (peaks[j] >= pos+i){
          pos = peaks[j];
          flags++;
        }
        
        if (flags === i) {
          break;
        }
      }
      
      result = Math.max(result, flags);
    }
    // 4. possibleResult부터 1까지 모든 값을 확인하면서, 각각의 값에 대해 최대한 많은 플래그를 배치해 봅니다. 
    // 만약 i개의 플래그를 배치할 수 있다면, 그것이 최대 값이 됩니다.

    return result;
    // 5. 최종적으로 가장 많은 플래그를 배치할 수 있는 값을 반환합니다.
}

Codility Lesson 10 - MinPerimeterRectangle

Mon, 17 Jul 2023 14:00:44 GMT

문제 설명

어떤 직사각형의 면적을 나타내는 정수 N이 주어집니다.

변의 길이가 A와 B인 직사각형의 넓이는 A * B이고 둘레는 2 * (A + B)입니다.

이 사각형의 변은 정수여야 하며, 면적이 N과 같은 직사각형의 최소 둘레를 구하는 것이 목표입니다.

예를 들어 정수 N = 30이 주어지면 면적 30의 직사각형이 있습니다:

(1, 30), 둘레 62,
(2, 15), 둘레가 34,
(3, 10), 둘레가 26,
(5, 6), 둘레가 22입니다.

함수를 작성합니다:

function solution(N);

이 함수는 정수 N이 주어지면 면적이 N과 정확히 같은 직사각형의 최소 둘레를 반환합니다.

예를 들어 정수 N = 30이 주어지면 위에서 설명한 대로 함수는 22를 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성하십시오:

N은 [1..1,000,000,000] 범위 내의 정수입니다.

문제 접근

둘레는 면적에 약수이다, 즉 면적의 약수 두개의 더한값이 가장 작은 값을 구하면 된다.

면적의 제곱근까지 순회한다.
순회하면서 각 약수 두개가 발견되면 두개를 더한다.
더한 값이 현재 최솟값이랑 비교하면서 작은값을 저장해 나간다.

function solution(N) {
    let result = Number.MAX_SAFE_INTEGER;

    for (let i = 1; i <= Math.sqrt(N); i++) {
        if (N % i === 0) {
            const b = N / i;

            result = Math.min(result, 2 * (i + b));
        }
    }

    return result;
}

Codility Lesson 10 - CountFactors

Mon, 17 Jul 2023 14:00:42 GMT

문제 설명

N = D * M이 되는 정수 M이 존재하는 경우 양의 정수 D는 양의 정수 N의 인수입니다.

예를 들어, M = 4는 위의 조건(24 = 6 * 4)을 만족하므로 6은 24의 인수입니다.

함수를 작성합니다:

function solution(N);

양수 N이 주어지면 그 요소의 개수를 반환하는 함수를 작성합니다.

예를 들어 N = 24가 주어지면 24에는 1, 2, 3, 4, 6, 8, 12, 24 등 8개의 요인이 있으므로 함수는 8을 반환해야 합니다. 24의 다른 요인은 없습니다.

다음 가정에 대한 효율적인 알고리즘을 작성하십시오:

N은 [1..2,147,483,647] 범위 내의 정수입니다.

문제 접근

숫자의 약수는 해당 숫자의 제곱근까지 순회하면서 나머지가 0인 숫자의 갯수 * 2를 하면된다.

숫자의 제곱근까지 순회하면서 나머지 0인 경우 갯수를 구한다.
순회 완료 후에 갯수에 2 를 곱한다.
그리고 제곱근이 완전히 정수 일수도 있으니 정수이면 갯수에 1을 더한다.

function solution(N) {
    let count = 0;

    for (let i = 1; i < Math.sqrt(N); i++) {
        if (N % i === 0) {
            count++;
        }
    }

    count = count * 2;

    if (Number.isInteger(Math.sqrt(N))) {
        count++;
    }

    return count;
}

Codility Lesson 9 - MaxDoubleSliceSum

Mon, 17 Jul 2023 14:00:40 GMT

문제 설명

N개의 정수로 구성된 비어 있지 않은 배열 A가 주어집니다.

0 ≤ X < Y < Z < N이 되는 삼중항(X, Y, Z)을 이중 슬라이스라고 합니다.

이중 슬라이스(X, Y, Z)의 합은 A[X + 1] + A[X + 2] + … + A[Y - 1] + A[Y + 1] + A[Y + 2] + … + A[Z - 1]입니다.

예를 들어, 배열 A는 다음과 같습니다:

A[0] = 3
A[1] = 2
A[2] = 6
A[3] = -1
A[4] = 4
A[5] = 5
A[6] = -1
A[7] = 2

에는 다음 예제 이중 슬라이스가 포함되어 있습니다:

이중 슬라이스 (0, 3, 6), 합계는 2 + 6 + 4 + 5 = 17입니다,
이중 슬라이스 (0, 3, 7), 합계는 2 + 6 + 4 + 5 - 1 = 16입니다,
이중 슬라이스 (3, 4, 5), 합계는 0입니다.

목표는 모든 이중 슬라이스의 최대 합을 찾는 것입니다.

함수를 작성합니다:

function solution(A);

이 함수는 N개의 정수로 구성된 비어 있지 않은 배열 A가 주어졌을 때 모든 이중 슬라이스의 최대 합을 반환합니다.

예를 들어, 주어진

A[0] = 3
A[1] = 2
A[2] = 6
A[3] = -1
A[4] = 4
A[5] = 5
A[6] = -1
A[7] = 2

이면 배열 A의 이중 슬라이스 중 17보다 큰 합이 없기 때문에 함수는 17을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성하십시오:

N은 [3..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [-10,000..10,000] 범위 내의 정수입니다.

문제 접근

Y 를 기준으로 왼쪽 부분에 대한 부분 값, 오른쪽 부분에 대한 부분 값

예를들면,

1. Y = 2: [2] [6 - 1 ... ] 각 부분의 최댓값
2. Y = 3: [2 + 6] [-1 + 4 ... ] 각 부분의 최댓값
.....

이렇게 나누어질 수 있다.

왼쪽 부분 배열, 오른쪽 부분 배열 생성
왼쪽은 index = 1 부터 left 배열에 가장 큰 값을 저장해 나간다.
오른쪽은 배열의 끝 - 2 부터 right 배열에 가장 큰값을 저장해 나간다.
마지막에는 왼쪽, 오른쪽 배열 두개를 순회하면서 가장 큰 값이 나오는 경우를 찾는다.

function solution(A) {
  if (A.length <= 3) {
    return 0
  }

  const leftArr = new Array(A.length).fill(0)
  const rightArr = new Array(A.length).fill(0)
  let result = 0

  for (let i = 1; i < A.length - 1; i++) {
    leftArr[i] = Math.max(0, leftArr[i - 1] + A[i])
  }

  for (let i = A.length - 2; i > 0; i--) {
    rightArr[i] = Math.max(0, rightArr[i + 1] + A[i])
  }

  for (let i = 1; i < A.length - 1; i++) {
    result = Math.max(result, leftArr[i - 1] + rightArr[i + 1])
  }

  return result
}

Codility Lesson 9 - MaxSliceSum

Mon, 17 Jul 2023 14:00:37 GMT

문제 설명

N개의 정수로 구성된 비어 있지 않은 배열 A가 주어집니다. 0 ≤ P ≤ Q < N인 한 쌍의 정수(P, Q)를 배열 A의 슬라이스라고 하며, 한 슬라이스(P, Q)의 합은 A[P] + A[P+1] + … + A[Q]의 총합입니다. + A[Q]입니다.

함수를 작성합니다:

function solution(A);

이 함수는 N개의 정수로 구성된 배열 A가 주어졌을 때 A의 모든 슬라이스의 최대 합을 반환합니다.

예를 들어 배열 A가 주어졌을 때

a[0] = 3 a[1] = 2 a[2] = -6
a[3] = 4 a[4] = 0

이면 함수는 5를 반환해야 합니다:

(3, 4)는 합이 4인 A의 조각입니다,
(2, 2)는 합이 -6인 A의 조각입니다,
(0, 1)은 합이 5인 A의 조각입니다,
A의 다른 어떤 부분도 (0, 1)보다 큰 합을 갖지 않습니다.

다음 가정에 대한 효율적인 알고리즘을 작성하십시오:

N은 [1..1,000,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [-1,000,000..1,000,000] 범위 내의 정수입니다;
결과는 [-2,147,483,648..2,147,483,647] 범위 내의 정수가 됩니다.

문제 접근

배열을 순회하면서 현재까지 더한값이 max 값보다 큰지 작은지 비교해간다.

배열을 순회하면서 현재까지 더한 값(sum) vs 현재 값(A[i]) 비교하여 큰값을 sum 재할당.
현재 가장큰값과 현재 sum 값을 비교하여 큰값을 다시 재할당한다.

function solution(A) {
  if (A.length === 1) {
    return A[0]
  }

  let result = A[0]
  let sum = A[0]

  for (let i = 1; i < A.length; i++) {
    sum = Math.max(A[i], sum + A[i])
    result = Math.max(result, sum)
  }

  return result
}

Codility Lesson 9 - MaxProfit

Mon, 17 Jul 2023 14:00:35 GMT

문제 설명

N개의 정수로 구성된 배열 A가 주어집니다. 여기에는 연속된 N일 동안의 주식 일별 가격이 포함되어 있습니다. 단일 주식을 P일에 매수하고 Q일에 매도한 경우, 여기서 0 ≤ P ≤ Q < N이면 해당 거래의 수익은 A[Q] ≥ A[P]인 경우 A[Q] - A[P]와 같습니다. 그렇지 않으면 거래는 A[P] - A[Q]의 손실을 가져옵니다.

예를 들어 다음과 같은 6개의 요소로 구성된 배열 A를 생각해 봅시다:

  A[0] = 23171
  A[1] = 21011
  A[2] = 21123
  A[3] = 21366
  A[4] = 21013
  A[5] = 21367

주식을 0일에 매수하고 2일에 매도한 경우, A[2] - A[0] = 21123 - 23171 = -2048이므로 2048의 손실이 발생합니다. 4일째에 주식을 매수하고 5일째에 매도했다면 A[5] - A[4] = 21367 - 21013 = 354이므로 354의 이익이 발생합니다. 가능한 최대 수익은 356입니다. 1일차에 주식을 매수하고 5일차에 매도한 경우입니다.

함수를 작성합니다,

functino solution(A);

이 함수는 N일 연속된 기간 동안 주식의 일일 가격이 포함된 N개의 정수로 구성된 배열 A가 주어지면, 이 기간 동안 한 거래에서 가능한 최대 이익을 반환합니다. 이 함수는 이익을 얻을 수 없는 경우 0을 반환해야 합니다.

예를 들어 다음과 같은 6개의 요소로 구성된 배열 A가 주어집니다:

  A[0] = 23171
  A[1] = 21011
  A[2] = 21123
  A[3] = 21366
  A[4] = 21013
  A[5] = 21367

이면 함수는 위에서 설명한 대로 356을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [0..400,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [0..200,000] 범위 내의 정수입니다.

문제 접근

가장 작은 값을 기준으로 배열을 순회하면서 큰 수익을 비교하면서 저장한다.

가장 작은 값을 기준으로 하는 이유는 값 - 가장 작은 값 일때 가장 큰 수익이 나기 때문이다.

index 1 부터 배열을 순회한다.
순회하면서 수익을 계산한다.
현재 가장 작은 값이 현재 배열의 index인 값보다 크다면 가장 작은 값을 교체 한다.

function solution(A) {
    if (A.length < 2) {
        return 0;
    }
    
    let minPrice = A[0];
    let result = 0;
    let temp = 0;

    for (let i = 1; i < A.length; i++) {
        temp = A[i] - minPrice;

        if (A[i] < minPrice) {
            minPrice = A[i];
        }

        result = Math.max(temp, result);
    }

    if (result < 0) {
        return 0;
    }

    return result;
}

Codility Lesson 8 - EquiLeader

Mon, 17 Jul 2023 14:00:32 GMT

문제 설명

N개의 정수로 구성된 비어 있지 않은 배열 A가 주어집니다.

이 배열의 리더는 A의 요소 중 절반 이상에서 발생하는 값입니다.

이퀘이 리더는 0 ≤ S < N - 1이고 두 시퀀스 A[0], A[1], …, A[S]와 A[S + 1], A[S + 2], …, A[N - 1]이 같은 값의 리더를 갖는 인덱스 S입니다.

예를 들어 다음과 같은 배열 A가 주어집니다:

A[0] = 4
A[1] = 3
A[2] = 4
A[3] = 4
A[4] = 4
A[5] = 2

두 개의 이퀴 리더를 찾을 수 있습니다:

0, 시퀀스이기 때문입니다: (4) 및 (3, 4, 4, 4, 4, 2)는 값이 4인 동일한 리더를 갖습니다.
2, 왜냐하면 시퀀스: (4, 3, 4) 및 (4, 4, 2)는 값이 4인 동일한 리더를 갖기 때문입니다.

목표는 등호 리더의 수를 세는 것입니다.

함수를 작성합니다:

function solution(A);

이 함수는 비어 있지 않은 정수 배열 A가 주어졌을 때, N개의 정수로 구성된 등차수열의 개수를 반환합니다.

예를 들어, 주어진

A[0] = 4
A[1] = 3
A[2] = 4
A[3] = 4
A[4] = 4
A[5] = 2

이면 위에서 설명한 대로 함수는 2를 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [1..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [-1,000,000,000..1,000,000,000] 범위 내의 정수입니다.

문제 접근

배열을 두부분으로 나누어 생각한다, 그리고 동적계획법을 이용한다.

예를들어

left = []
right = [4, 3 ... 2]

처음에 두 변수에 하나에는 빈 배열 또 다른 하나에는 배열의 모든 요소

배열을 순회하면서
left 에는 요소를 추가하여 리더 요소 확인
right 에는 요소를 삭제하여 리더 요소 확인
두개 리더 요소가 같을때를 찾는다.

function solution(A) {
   let result = 0;

   const right = {};
   const left = {};
   let leftLength = 0;
   let rightLength = A.length;
   let leftLeader = 0;
   let leftLeaderCount = 0;

   A.forEach((value) => {
       if (right.hasOwnProperty(value)) {
           right[value]++;
       } else {
           right[value] = 1;
       }
   });

   A.forEach((value) => {
       if (left.hasOwnProperty(value)) {
           left[value]++;
       } else {
           left[value] = 1;
       }

       right[value]--;

       leftLength++;
       rightLength--;

       if (left[value] > leftLeaderCount) {
           leftLeader = value;
           leftLeaderCount = left[value];
       }

       if (
           right[leftLeader] > (rightLength / 2) 
           && leftLeaderCount > (leftLength / 2)
       ) {
           result++;
       }
   });

   return result;
}

Codility Lesson 8 - Dominator

Mon, 17 Jul 2023 14:00:30 GMT

문제 설명

N개의 정수로 구성된 배열 A가 주어집니다. 배열 A의 지배자는 A의 요소 중 절반 이상에서 발생하는 값입니다.

예를 들어 배열 A가 다음과 같다고 가정해 보겠습니다.

 a[0] = 3 a[1] = 4 a[2] = 3
 a[3] = 2 a[4] = 3 a[5] = -1
 a[6] = 3 a[7] = 3

A의 8개의 요소 중 5개(즉, 인덱스가 0, 2, 4, 6, 7인 요소)에서 발생하고 5가 8의 절반 이상이기 때문에 A의 도미네이터는 3입니다.

함수 작성

function solution(A);

이 함수는 N개의 정수로 구성된 배열 A가 주어졌을 때, A의 지배자가 있는 배열 A의 모든 요소의 인덱스를 반환합니다. 배열 A에 지배자가 없는 경우 함수는 -1을 반환해야 합니다.

예를 들어 다음과 같은 배열 A가 주어지면

 a[0] = 3 a[1] = 4 a[2] = 3
 a[3] = 2 a[4] = 3 a[5] = -1
 a[6] = 3 a[7] = 3

함수는 위에서 설명한 대로 0, 2, 4, 6 또는 7을 반환할 수 있습니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [0..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [-2,147,483,648..2,147,483,647] 범위 내의 정수입니다.

문제 접근

배열의 값의 노출 횟수를 저장하고 배열의 길이 절반 이상 노출되면 지배자이다.

배열의 값들에 노출 횟수 저장
각 노출 횟수가 배열 길이의 절반이상인지 확인

function solution(A) {
    const info = {};
    let result = -1;

    A.forEach((value, index) => {
        if (info.hasOwnProperty(value)) {
            info[value][0]++;
        } else {
            info[value] = [1, index];
        }
    });


    for (const [count, index] of Object.values(info)) {
        if (count > A.length / 2) {
            result = index;
        }
    }

    return result;
}

Codility Lesson 7 - StoneWall

Mon, 17 Jul 2023 14:00:23 GMT

문제 설명

돌담을 만들려고 합니다. 벽은 직선이고 길이가 N미터여야 하며 두께는 일정해야 하지만 장소에 따라 높이가 달라야 합니다. 벽의 높이는 N개의 양의 정수로 구성된 배열 H로 지정됩니다. H[I]는 I에서 왼쪽 끝의 오른쪽으로 I+1미터까지 벽의 높이입니다. 특히 H[0]은 벽의 왼쪽 끝의 높이이고 H[N-1]은 벽의 오른쪽 끝의 높이입니다.

벽은 직육면체 돌 블록으로 만들어져야 합니다(즉, 이러한 블록의 모든 면이 직사각형입니다). 여러분의 임무는 벽을 만드는 데 필요한 최소 블록 수를 계산하는 것입니다.

함수를 작성합니다:

function solution(H);

벽의 높이를 지정하는 N개의 양의 정수 배열 H가 주어지면 벽을 만드는 데 필요한 최소 블록 수를 반환하는 함수입니다.

예를 들어, N = 9개의 정수를 포함하는 배열 H가 주어집니다:

  H[0] = 8 H[1] = 8 H[2] = 5
  H[3] = 7 H[4] = 9 H[5] = 8
  H[6] = 7 H[7] = 4 H[8] = 8

함수는 7을 반환해야 합니다. 그림은 7개의 블록의 가능한 배열 중 하나를 보여줍니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [1..100,000] 범위 내의 정수이다;
배열 H의 각 요소는 [1..1,000,000,000] 범위 내의 정수입니다.

문제 접근

현재 보고 있는 벽 높이가 스택의 맨 위에 있는 벽 높이보다 높으면 새로운 벽을 쌓아야 한다는 점

현재 보고 있는 벽 높이가 스택의 맨 위에 있는 벽 높이보다 낮을 때까지 스택에서 벽을 제거

function solution(H) {
    const stack = [];
    let count = 0;

    for (let i = 0; i < H.length; i++) {
        const currentBlock = H[i];

        while (stack.length > 0 && stack[stack.length -1] > currentBlock) {
            stack.pop();
        }

        if (stack.length === 0 || stack[stack.length -1] < currentBlock) {
            stack.push(H[i]);
            count++;
        }
    }

    return count;
}

Codility Lesson 7 - Nesting

Mon, 17 Jul 2023 14:00:22 GMT

문제 설명

N개의 문자로 구성된 문자열 S가 다음과 같은 경우 올바르게 중첩된 문자열이라고 합니다:

S가 비어 있는 경우;

S의 형식이 “(U)“인 경우, 여기서 U는 올바르게 중첩된 문자열입니다;
S의 형식이 “VW”이고 V와 W가 올바르게 중첩된 문자열인 경우.

예를 들어 문자열 ”( ( ( ) ( ( ) ) ( ) )“는 올바르게 중첩되지만 문자열 ”( ) )“는 중첩되지 않습니다.

함수를 작성합니다:

function solution(S);

이 함수는 N개의 문자로 구성된 문자열 S가 주어졌을 때 문자열 S가 올바르게 중첩되면 1을 반환하고 그렇지 않으면 0을 반환합니다.

예를 들어 S = ”( ( ( ) ( ( ) ) ( ( ) )“이 주어지면 위에서 설명한 대로 함수는 1을 반환해야 하고, S = ”( ) )“이 주어지면 함수는 0을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [0..1,000,000] 범위 내의 정수입니다;
문자열 S는 ’(’ 및/또는 ’)’ 문자로만 구성됩니다.

문제 접근

스택구조를 이용하여 접근

스택 생성
”(” 일때는 push
”)” 일때는 스택에 마지막 값이 ”(” 이면 pop
마지막에는 스택이 비었을경우, 안비었을경우에 따라 알맞은 값 반환

function solution(S) {
    const stack = [];

    for (let i = 0; i < S.length; i++) {
        const char = S[i];

        if (char === "(") {
            stack.push(char);
            continue;
        }

        const lastChar = stack[stack.length - 1];
        
        if (char === ")" && lastChar === "(") {
            stack.pop();
        } else {
            return 0;
        }
    }

    const isEmpty = stack.length === 0;

    return isEmpty ? 1 : 0;
}

Codility Lesson 7 - Fish

Mon, 17 Jul 2023 14:00:21 GMT

문제 설명

N개의 정수로 구성된 비어 있지 않은 두 개의 배열 A와 B가 주어집니다. 배열 A와 B는 강에 있는 탐욕스러운 물고기 N마리를 나타내며, 강의 흐름을 따라 하류로 정렬되어 있습니다.

물고기의 번호는 0부터 N-1까지입니다. P와 Q가 두 물고기이고 P < Q인 경우, 물고기 P는 처음에 물고기 Q의 상류에 있습니다. 처음에는 각 물고기의 위치가 고유합니다.

물고기 번호 P는 A[P] 및 B[P]로 표시됩니다. 배열 A는 물고기의 크기를 포함합니다. 모든 요소는 고유합니다. 배열 B에는 물고기의 방향이 포함됩니다. 여기에는 0 및/또는 1만 포함됩니다:

0은 상류로 흐르는 물고기를 나타냅니다,
1은 하류로 흐르는 물고기를 나타냅니다.

두 물고기가 서로 반대 방향으로 이동하고 그 사이에 다른 (살아있는) 물고기가 없으면 결국 서로 만나게 됩니다. 그러면 한 마리만 살아남을 수 있는데, 큰 물고기가 작은 물고기를 잡아먹습니다. 더 정확하게는 두 물고기 P와 Q가 P < Q, B[P] = 1, B[Q] = 0이고 그 사이에 살아있는 물고기가 없을 때 서로 만난다고 말합니다.

그들이 만난 후:

A[P] > A[Q]라면 P는 Q를 먹고, P는 여전히 하류로 흐르고 있을 것입니다,
A[Q]> A[P]라면 Q가 P를 잡아먹고, Q는 여전히 상류로 흐르게 됩니다.

모든 물고기가 같은 속도로 흐른다고 가정합니다. 즉, 같은 방향으로 이동하는 물고기는 절대 만나지 않습니다. 목표는 살아남을 물고기 수를 계산하는 것입니다.

예를 들어 배열 A와 B가 다음과 같다고 가정해 보겠습니다:

  A[0] = 4 B[0] = 0
  A[1] = 3 B[1] = 1
  A[2] = 2 B[2] = 0
  A[3] = 1 B[3] = 0
  A[4] = 5 B[4] = 0

처음에는 모든 물고기가 살아 있고 1번 물고기를 제외한 모든 물고기가 상류로 이동하고 있습니다. 1번 물고기는 2번 물고기를 만나서 먹은 다음, 3번 물고기를 만나서 역시 먹습니다. 마지막으로 4번 물고기를 만나서 잡아먹힙니다. 나머지 두 물고기인 0번과 4번은 서로 만나지 않으므로 살아남습니다.

함수를 작성합니다:

function solution(A, B);

비어 있지 않은 두 개의 배열 A와 B가 주어졌을 때, N개의 정수로 구성된 물고기 중 살아남을 물고기 수를 반환하는 함수입니다.

예를 들어, 위에 표시된 배열이 주어지면 위에서 설명한 대로 함수는 2를 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성하세요:

N은 [1..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [0..1,000,000,000] 범위 내의 정수입니다;
배열 B의 각 요소는 다음 값 중 하나를 가질 수 있는 정수입니다: 0, 1;
A의 요소는 모두 고유합니다.

문제 접근

스택 구조를 활용하여 반복문을 순회하면서 살아남은 물고기들을 stack 에 담는다.

처음 스택에 가장 첫번째 물고기를 담는다.
반복문을 순회하면 아래 조건 거친디:
스택에 물고기를 담는다.
- 현재 물고기 (B[index]) 가 하류(1) 가는 경우 그리고 스택에 있는 마지막 물고기(stack[stack.length - 1])가 상류로 흐를경우
- 즉, 서로 만나지 않을경우
스택에 물고기를 꺼낸다.
- 잡아먹히는 경우 (A[index] > B[index])
마지막에 스택(배열)의 크기를 반환한다.

function solution(A, B) {
    const stack = [0];
    let index = 1;

    while (index < A.length) {
        const lastFish = stack[stack.length - 1];

        if (B[index] === 0 && B[lastFish] === 1) {
            if (A[index] > A[lastFish]) {
                stack.pop();
            } else {
                index++;
            }
        } else {
            stack.push(index);
            index++;
        }
    }

    return stack.length;
}

Codility Lesson 7 - Brackets

Mon, 17 Jul 2023 14:00:20 GMT

문제 설명

다음 조건 중 하나라도 해당하면 N개의 문자로 구성된 문자열 S가 올바르게 중첩된 것으로 간주됩니다:

S가 비어 있습니다;
S의 형식이 “(U)” 또는 ”[U]” 또는 “{U}“인 경우, 여기서 U는 올바르게 중첩된 문자열입니다;
S의 형식이 “VW”이고 V와 W가 올바르게 중첩된 문자열인 경우.

예를 들어 문자열 “{ [ ( ( ) ( ) ] }“는 올바르게 중첩되지만 “( [ ) ( ) ]“는 중첩되지 않습니다.

함수를 작성합니다:

function solution(S);

이 함수는 N개의 문자로 구성된 문자열 S가 주어졌을 때 S가 올바르게 중첩된 경우 1을 반환하고 그렇지 않은 경우 0을 반환합니다.

예를 들어 S = “{ [ ( ( ) ( ) ] }“이면 위에서 설명한 대로 함수는 1을 반환해야 하고, S = “( [ ) ( ) ]“이면 함수는 0을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [0..200,000] 범위 내의 정수입니다;
문자열 S는 ’(’, ’{’, ’[’, ’]’, ’}’ 및/또는 ’)‘와 같은 문자로만 구성됩니다.

문제 접근

스택 자료구조를 이용하여 열린 괄호이면 push 하고 닫힌괄호일때 마지막 아이템 괄호가 같은 종류에 열린괄호 이면 pop 한다.

괄호 정보를 객체로 선언
빈 배열 선언
문자열을 순회하면서 괄호들을 비교하여 stack에 push pop 과정을 거친다.
배열을 모두 순회하고도 반환되지 않는다면 stack 요소가 남아있는지를 확인하여 알맞은 값을 반환한다.

function solution(S) {
	const stack = [];
  const bracketInfo = {
      "(": ")",
      "[": "]",
      "{": "}",
  }

  for (let i = 0; i < S.length; i++) {
      const char = S[i];

      if (bracketInfo.hasOwnProperty(char)) {
          stack.push(char);
          continue;
      }

      const lastChar = stack[stack.length - 1];

      if (bracketInfo[lastChar] === char) {
          stack.pop();
      } else {
          return 0;
      }
  }

  const isEmpty = stack.length === 0;

  return isEmpty ? 1 : 0;
}

Codility Lesson 6 - NumberOfDiscIntersections

Mon, 17 Jul 2023 14:00:18 GMT

문제 설명

평면에 N개의 원판을 그립니다. 원판의 번호는 0부터 N-1까지입니다. 원반의 반지름을 지정하는 음수가 아닌 정수 N개의 배열 A가 주어집니다. J번째 원반은 중심이 (J, 0)이고 반지름이 A[J]인 원반을 그립니다.

J ≠ K이고 J 번째 원판과 K 번째 원판에 공통점이 하나 이상 있는 경우 J 번째 원판과 K 번째 원판이 교차한다고 합니다(원판에 테두리가 있다고 가정).

아래 그림은 N = 6과 A에 대해 다음과 같이 그려진 원판을 보여줍니다:

A[0] = 1
A[1] = 5
A[2] = 2
A[3] = 1
A[4] = 4
A[5] = 0

교차하는 원반 쌍은 11개(정렬되지 않은) 쌍이 있습니다:

원반 1과 4는 교차하고, 두 원반은 다른 모든 원반과 교차합니다;
원반 2는 원반 0 및 3과도 교차합니다.

함수를 작성합니다:

function solution(A);

위에서 설명한 대로 N개의 원반을 나타내는 배열 A가 주어지면 교차하는 원반의 (정렬되지 않은) 쌍의 수를 반환합니다. 교차하는 쌍의 수가 10,000,000개를 초과하면 함수는 -1을 반환해야 합니다.

위에 표시된 배열 A가 주어지면 위에서 설명한 대로 함수는 11을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성하십시오:

N은 [0..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [0..2,147,483,647] 범위 내의 정수입니다.

문제 접근

완전 탐색으로 풀어도되지만 성능측면에서 통과하지 못한다.

그래서 아래와 같은 조건을 제시한다.

원판이 시작되는 지점기준으로 오름차순으로 정렬한다.
기준이 되는 원판에 끝 지점이 타켓이 되는 원판에 시작 지점보다 작으면 교차하지 않는다.
- 오름차순으로 정렬했기때문에 그 이후에 모든 원판은 교차하지 않는다는것을 의미한다.

원판에 시작, 끝 지점을 배열을 순회하면 정보를 저장한다.
해당 정보를 시작지점 기준으로 오름차순으로 정렬한다.
반복문을 통해 타겟이 되는 원판 시작지점과 기준이 되는 원판 끝 지점을 비교하여
- 교차 한다면 갯수를 늘려나간다.

function solution(A) {
  let count = 0
  const arr = []

  A.forEach((value, index) => {
    const left = index - value
    const right = value + index

    arr.push([left, right])
  })

  arr.sort((a, b) => a[0] - b[0])

  for (let i = 0; i < A.length - 1; i++) {
    const [left, right] = arr[i]

    for (let j = i + 1; j < A.length; j++) {
      const [targetLeft, targetRight] = arr[j]

      if (targetLeft > right) {
        break
      }

      if (targetRight >= left) {
        count++
      }

      if (count > 10000000) {
        return -1
      }
    }
  }

  return count
}

Codility Lesson 6 - Triangle

Mon, 17 Jul 2023 14:00:17 GMT

문제 설명

N개의 정수로 구성된 배열 A가 주어집니다. 삼항식(P, Q, R)은 0 ≤ P < Q < R < N이면 삼각형입니다:

A[P] + A[Q] > A[R],
A[Q] + A[R] > A[P],
A[R] + A[P] > A[Q].

예를 들어 다음과 같은 배열 A를 생각해 봅시다:

  A[0] = 10 A[1] = 2 A[2] = 5
  A[3] = 1 A[4] = 8 A[5] = 20

삼항(0, 2, 4)은 삼각형입니다.

함수를 작성합니다:

function solution(A);

이 함수는 N개의 정수로 구성된 배열 A가 주어졌을 때, 이 배열에 대한 삼각형 삼중항이 존재하면 1을 반환하고 그렇지 않으면 0을 반환합니다.

예를 들어, 배열 A가 주어졌을 때

  A[0] = 10 A[1] = 2 A[2] = 5
  A[3] = 1 A[4] = 8 A[5] = 20

이면 위에서 설명한 대로 함수는 1을 반환해야 합니다. 다음과 같은 배열 A가 주어졌습니다:

  A[0] = 10 A[1] = 50 A[2] = 5
  A[3] = 1

이면 함수는 0을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [0..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [-2,147,483,648..2,147,483,647] 범위 내의 정수입니다.

문제 접근

배열 A 를 오름차순을 정렬한다

왜?! 오름차순을 정렬한다면 P < Q < R 이 조건을 만족한다. 그래서 아래 두조건을 무조건 만족한다.

P + R > Q
Q + R > P

그러므로 P + Q > R 이 조건만 확인하면 된다.

배열 A 를 오름 차순을 정렬한다.
배열 A 를 순회하면서 음수 일 경우는 제외한다.
P + Q > R 조건만 확인하여
- 만족하면 1 반환
- 만족하지 않으면 0 반환

function solution(A) {
  const arr = A.slice().sort((a, b) => a - b)

  for (let i = 0; i < A.length - 2; i++) {
    if (arr[i] < 0) {
      continue
    }

    for (let j = i + 1; j < A.length - 1; j++) {
      if (arr[j] < 0 || arr[j + 1] < 0) {
        continue
      }

      if (arr[i] + arr[j] > arr[j + 1]) {
        return 1
      }
    }
  }

  return 0
}

Codility Lesson 6 - MaxProductOfThree

Mon, 17 Jul 2023 14:00:16 GMT

문제 설명

N개의 정수로 구성된 비어 있지 않은 배열 A가 주어집니다. 삼중항(P, Q, R)의 곱은 A[P] _ A[Q] _ AR과 같습니다.

예를 들어, 배열 A는 다음과 같습니다:

  A[0] = -3
  A[1] = 1
  A[2] = 2
  A[3] = -2
  A[4] = 5
  A[5] = 6

에는 다음과 같은 예제 삼중 항이 포함되어 있습니다:

(0, 1, 2), 곱은 -3 * 1 * 2 = -6입니다.
(1, 2, 4), 곱은 1 * 2 * 5 = 10입니다.
(2, 4, 5), 곱은 2 * 5 * 6 = 60입니다.

목표는 모든 삼항식의 최대 곱을 찾는 것입니다.

함수를 작성합니다:

function solution(A);

비어 있지 않은 배열 A가 주어지면 모든 삼항식의 최대 곱의 값을 반환하는 함수를 작성합니다.

예를 들어, 배열 A가 주어졌을 때

  A[0] = -3
  A[1] = 1
  A[2] = 2
  A[3] = -2
  A[4] = 5
  A[5] = 6

인 경우 함수는 삼중항(2, 4, 5)의 곱이 최대이므로 60을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성하십시오:

N은 [3..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [-1,000..1,000] 범위 내의 정수입니다.

문제 접근

배열 A를 내림차순으로 정렬후 최대곱의 값을 구한다.

배열을 복사하여 내림차순으로 정렬한다.
index (0 , 1 , 2) 번째 값을 곱한 값을 구한다.
index (A.length - 1, A.length - 2, 0) 번째 값을 곱한 값을 구한다.
- 왜?! 음수 * 음수 = 양수 가 될 수 있으므로 마지막 두개의 값을 이용하여 양수를 만들고 첫번째 값을 곱한다.
두개 결과를 비교하여 큰 값을 반환한다.

function solution(A) {
  const sortedA = A.slice().sort((a, b) => b - a)
  const result = sortedA.slice(0, 3).reduce((acc, value) => acc * value)

  const result2 = sortedA[A.length - 1] * sortedA[A.length - 2] * sortedA[0]

  return Math.max(result, result2)
}

Codility Lesson 6 - Distinct

Mon, 17 Jul 2023 14:00:15 GMT

문제 설명

함수 작성

function solution(A);

이 함수는 N개의 정수로 구성된 배열 A가 주어졌을 때 배열 A의 고유값 개수를 반환합니다.

예를 들어, 6개의 요소로 구성된 배열 A가 주어지면 다음과 같습니다:

 a[0] = 2 a[1] = 1 a[2] = 1
 a[3] = 2 a[4] = 3 a[5] = 1

배열 A에는 1, 2, 3 등 3개의 고유한 값이 나타나므로 함수는 3을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [0..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [-1,000,000..1,000,000] 범위 내의 정수입니다.

문제 접근

배열 A에서 중복된 숫자를 제거하고 배열의 크기를 반환하면된다.

Set 이라는 자료구조를 통해 중복한 요소를 제외한다.

function solution(A) {
  return new Set(A).size
}

Codility Lesson 5 - MinAvgTwoSlice

Mon, 17 Jul 2023 14:00:14 GMT

문제 설명

N개의 정수로 구성된 비어 있지 않은 배열 A가 주어집니다. 0 ≤ P < Q < N이 되는 한 쌍의 정수(P, Q)를 배열 A의 슬라이스라고 합니다(슬라이스에는 적어도 두 개의 요소가 포함되어 있음에 유의하세요). 슬라이스(P, Q)의 평균은 A[P] + A[P + 1]+ … + A[Q]를 슬라이스의 길이로 나눈 값입니다. 정확히 말하면, 평균은 (A[P] + A[P + 1] + … + A[Q]) / (Q - P + 1)과 같습니다.

예를 들어, 배열 A는 다음과 같습니다:

A[0] = 4
A[1] = 2
A[2] = 2
A[3] = 5
A[4] = 1
A[5] = 5
A[6] = 8

에는 다음 예제 슬라이스가 포함되어 있습니다:

슬라이스 (1, 2), 평균은 (2 + 2) / 2 = 2입니다;
슬라이스 (3, 4), 평균은 (5 + 1) / 2 = 3입니다;
슬라이스 (1, 4), 평균은 (2 + 2 + 5 + 1) / 4 = 2.5입니다.

목표는 평균이 최소인 슬라이스의 시작 위치를 찾는 것입니다.

함수를 작성합니다:

function solution(A);

이 함수는 N개의 정수로 구성된 비어 있지 않은 배열 A가 주어졌을 때 최소 평균을 가진 슬라이스의 시작 위치를 반환합니다. 최소 평균을 갖는 슬라이스가 두 개 이상 있는 경우 해당 슬라이스의 가장 작은 시작 위치를 반환해야 합니다.

예를 들어 배열 A가 주어지면 다음과 같습니다:

A[0] = 4
A[1] = 2
A[2] = 2
A[3] = 5
A[4] = 1
A[5] = 5
A[6] = 8

이면 위에서 설명한 대로 함수는 1을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [2..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [-10,000..10,000] 범위 내의 정수입니다.

문제 접근

해당 문제에서는 슬라이스에서는 최소 2개 이상이 포함되어야한다이므로, 우리가 비교하는 부분은 슬라이스의 길이가 2 또는 3 일때만 비교하면된다.

왜?! 길이가 4 인 경우는 2개 + 2개 로 분할 할 수 있다. 이렇게 된다면 무조건 길이가 2인 경우보다 크다는것을 의미한다.
그래서 4개이상 길이는 비교 대상을 제외하고 길이가 2개 또는 3개로만 비교한다.

Index 0, 1 일때 먼저 계산한다.
1. 왜?! 나중에 반복문으로 순회할때 index 를 2 부터 시작하기때문
2. index 를 2 부터 시작하는 이유 : slice 길이가 3 개가 가능한 시점이기 때문
해당 반복문을 순회하면서 길이가 2 그리고 길이가 3 인 경우를 비교하여 최솟값을 찾는다.
해당 최솟값이 되는 슬라이스에 시작 index 를 반환한다.

function solution(A) {
  let minAvg = (A[0] + A[1]) / 2
  let minIndex = 0

  for (let i = 2; i < A.length; i++) {
    const avgWithThree = (A[i - 2] + A[i - 1] + A[i]) / 3
    if (minAvg > avgWithThree) {
      minAvg = avgWithThree
      minIndex = i - 2
    }

    const avgWithTwo = (A[i - 1] + A[i]) / 2
    if (minAvg > avgWithTwo) {
      minAvg = avgWithTwo
      minIndex = i - 1
    }
  }

  return minIndex
}

Codility Lesson 5 - GenomicRangeQuery

Mon, 17 Jul 2023 14:00:13 GMT

문제 설명

DNA 염기서열은 염기서열의 연속되는 뉴클레오타이드의 유형에 해당하는 문자 A, C, G, T로 구성된 문자열로 나타낼 수 있습니다. 각 뉴클레오타이드에는 정수인 임팩트 팩터가 있습니다. A, C, G, T 유형의 뉴클레오타이드는 각각 1, 2, 3, 4의 영향 계수를 가집니다. 이 형식의 몇 가지 질문에 답하게 될 것입니다: 주어진 DNA 서열의 특정 부분에 포함된 뉴클레오타이드의 최소 영향 계수는 얼마인가요?

DNA 서열은 N개의 문자로 구성된 비어 있지 않은 문자열 S = S[0]S[1]…S[N-1]로 주어집니다. 비어 있지 않은 배열 P와 Q에 각각 M개의 정수로 구성된 M개의 쿼리가 주어집니다. K 번째 쿼리(0 ≤ K < M)는 위치 P[K]와 QK 사이의 DNA 서열에 포함된 뉴클레오타이드의 최소 영향 계수를 구해야 합니다.

예를 들어 문자열 S = CAGCCTA와 배열 P, Q가 있다고 가정해 보겠습니다:

p[0] = 2 q[0] = 4
p[1] = 5 q[1] = 5
p[2] = 0 q[2] = 6

이러한 M = 3 쿼리에 대한 답은 다음과 같습니다:

2번과 4번 위치 사이의 DNA 부분에는 영향 계수가 각각 3과 2인 뉴클레오티드 G와 C(두 개)가 포함되어 있으므로 답은 2입니다. 5번과 5번 사이의 부분에는 영향 계수가 4인 단일 뉴클레오티드 T가 포함되어 있으므로 답은 4입니다. 위치 0과 6 사이의 부분(전체 문자열)에는 모든 뉴클레오타이드, 특히 영향 계수가 1인 뉴클레오타이드 A가 포함되어 있으므로 답은 1입니다.

함수를 작성합니다:

function solution(S, P, Q);

이 함수는 N개의 문자로 구성된 비어 있지 않은 문자열 S와 M개의 정수로 구성된 두 개의 비어 있지 않은 배열 P와 Q가 주어질 때 모든 쿼리에 대한 연속적인 답을 지정하는 M개의 정수로 구성된 배열을 반환합니다.

결과 배열은 정수의 배열로 반환되어야 합니다.

예를 들어 문자열 S = CAGCCTA와 배열 P, Q가 주어지면 다음과 같이 됩니다:

p[0] = 2 q[0] = 4
p[1] = 5 q[1] = 5
p[2] = 0 q[2] = 6

인 경우 함수는 위에서 설명한 대로 [2, 4, 1] 값을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [1..100,000] 범위 내의 정수입니다;
M은 [1…50,000] 범위 내의 정수입니다;
배열 P와 Q의 각 요소는 [0..N - 1] 범위 내의 정수입니다;
P[K] ≤ Q[K], 여기서 0 ≤ K < M;
문자열 S는 대문자 영어 문자 A, C, G, T로만 구성됩니다.

문제 접근

DNA 문자열인 S를 특정 범위로 문자열로 잘라서 각 A, C, G, T DNA 를 찾아 result 배열에 하나씩 담는다.

P, Q 배열 길이만큼 순회한다.
각 index 값으로 S 문자열을 자른다.
자른 문자열에서 A, C, G, T 를 찾아 각 알맞은 숫자를 담는ㄷ.

function solution(S, P, Q) {
  let temp = ''
  const result = []

  for (var i = 0; i < P.length; i++) {
    temp = S.slice(P[i], Q[i] + 1)

    if (dna.indexOf('A') !== -1) {
      result.push(1)
    } else if (dna.indexOf('C') !== -1) {
      result.push(2)
    } else if (dna.indexOf('G') !== -1) {
      result.push(3)
    } else {
      result.push(4)
    }
  }

  return result
}

또 다른 방법은 있다, 그것은 미리 모든 각 S 문자열에서 A, C, G, T 가 몇개씩 나오는지 미리 합을 계산하는 방법이다.

function solution(S, P, Q) {
  const len = S.length
  const prefixSums = {
    A: Array(len + 1).fill(0),
    C: Array(len + 1).fill(0),
    G: Array(len + 1).fill(0),
  }

  for (let i = 0; i < len; i++) {
    prefixSums.A[i + 1] = prefixSums.A[i] + (S[i] === 'A' ? 1 : 0)
    prefixSums.C[i + 1] = prefixSums.C[i] + (S[i] === 'C' ? 1 : 0)
    prefixSums.G[i + 1] = prefixSums.G[i] + (S[i] === 'G' ? 1 : 0)
  }

  const result = []

  for (let j = 0; j < P.length; j++) {
    const from = P[j]
    const to = Q[j] + 1
    if (prefixSums.A[to] - prefixSums.A[from] > 0) result.push(1)
    else if (prefixSums.C[to] - prefixSums.C[from] > 0) result.push(2)
    else if (prefixSums.G[to] - prefixSums.G[from] > 0) result.push(3)
    else result.push(4)
  }

  return result
}

Codility Lesson 5 - CountDiv

Mon, 17 Jul 2023 14:00:12 GMT

문제 설명

함수를 작성합니다:

function solution(A, B, K);

세 개의 정수 A, B, K가 주어졌을 때 [A..B] 범위 내에서 K로 나눌 수 있는 정수의 개수를 반환하는 함수입니다:

{ i : A ≤ i ≤ B, i mod K = 0 }.

예를 들어

A = 6, B = 11, K = 2인 경우

[6..11] 범위 내에 2로 나눌 수 있는 숫자는 6, 8, 10 등 세 개이므로 함수는 3을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성하십시오:

A와 B는 [0..2,000,000,000] 범위 내의 정수입니다;
K는 [1…2,000,000,000] 범위 내의 정수입니다;
A ≤ B.

문제 접근

배열의 모든 값을 순회하지말고 A를 K로 나눈 몫과 B를 K로 나눈 몫 사이에 존재하는 갯수를 확인하면 된다.

A, B 를 K 로 나눈 몫 을 구한다. (소수점 버림)
A가 K로 정확이 나누어 떨어진다면 해당 갯수에 A 를 포함 그렇지 않다면 A 를 포함하지 않는다.

function solution(A, B, K) {
  const start = Math.floor(A / K)
  const end = Math.floor(B / K)

  return A % K === 0 ? end - start + 1 : end - start
}

Codility Lesson 5 - PassingCars

Mon, 17 Jul 2023 14:00:11 GMT

문제 설명

N개의 정수로 구성된 비어있지 않은 배열 A가 주어집니다. 배열 A의 연속된 요소는 도로 위의 연속된 자동차를 나타냅니다.

배열 A에는 0 및/또는 1만 포함됩니다:

0은 동쪽으로 이동하는 자동차를 나타냅니다,
1은 서쪽으로 이동하는 자동차를 나타냅니다.

목표는 지나가는 자동차를 세는 것입니다. 0 ≤ P < Q < N인 한 쌍의 자동차(P, Q)는 P가 동쪽으로 이동하고 Q가 서쪽으로 이동하는 경우 지나가고 있다고 말합니다.

예를 들어 다음과 같은 배열 A를 생각해 봅시다:

A[0] = 0
A[1] = 1
A[2] = 0
A[3] = 1
A[4] = 1

(0, 1), (0, 3), (0, 4), (2, 3), (2, 4)의 다섯 쌍의 지나가는 차가 있습니다.

함수를 작성합니다:

function solution(A);

비어 있지 않은 정수 배열 A가 주어지면 지나가는 자동차 쌍의 수를 반환하는 함수입니다.

이 함수는 통과하는 자동차 쌍의 수가 1,000,000,000을 초과하면 -1을 반환해야 합니다.

예를 들어, 주어진

A[0] = 0
A[1] = 1
A[2] = 0
A[3] = 1
A[4] = 1

이면 함수는 위에서 설명한 대로 5를 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [1..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 다음 값 중 하나를 가질 수 있는 정수입니다: 0, 1.

문제 접근

이중 반복문으로 모든 경우를 확인하지 말고 동쪽으로 가는 차량 횟수를 변수에 저장하고 서쪽으로 가는 차량을 만난다면 동쪽으로 가는 차량 횟수만큼 더해주면 된다.

반복문을 순회하면서 동쪽으로 가는 차량 횟수 저장
서쪽으로 가는 차량을 만날시 동쪽으로 가는 차량만큼 더해준다.
```
if (A[i] === WEST) {
 passingCar += eastCar
}
```

function solution(A) {
  let passingCar = 0
  let eastCar = 0
  const EAST = 0
  const WEST = 1

  for (let i = 0; i < A.length; i++) {
    if (A[i] === EAST) {
      eastCar++
    } else if (A[i] === WEST) {
      passingCar += eastCar
    }

    if (passingCar > 1000000000) {
      return -1
    }
  }

  return passingCar
}

Codility Lesson 4 - MissingInteger

Sun, 16 Jul 2023 14:00:10 GMT

문제 설명

함수를 작성합니다:

function solution(A);

N개의 정수로 구성된 배열 A가 주어졌을 때 A에 존재하지 않는 가장 작은 양의 정수(0보다 큰 정수)를 반환하는 함수입니다.

예를 들어

A = [1, 3, 6, 4, 1, 2]가 주어지면 이 함수는 5를 반환해야 합니다.
A = [1, 2, 3]이 주어지면 함수는 4를 반환해야 합니다.
A = [-1, -3]이 주어지면 함수는 1을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성하십시오:

N은 [1..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [-1,000,000..1,000,000] 범위 내의 정수입니다.

문제 접근

배열 A에서 중복된 요소를 제거 한뒤 배열의 길이만큼 순회하여 해당 index 값이 배열(중복된 요소를 제거한 배열)에 존재하지 않는값을 반환한다.

배열 A에 중복된 요소를 제거한다.
1 부터 배열의 길이만큼 순회하면서 존재하지 않는 값을 찾는다.
존재하지 않는 값을 반환한다.
모든 순회를 마치었는데 return 되지 않았다면 마지막 요소가 존재하지 않는다는것을 의미하여 A.length + 1 을 반환한다.

function solution(A) {
  const info = new Set(A)

  for (let i = 1; i <= A.length; i++) {
    if (!info.has(i)) {
      return i
    }
  }

  return A.length + 1
}

Codility Lesson 4 - MaxCounters

Sun, 16 Jul 2023 14:00:09 GMT

문제 설명

처음에는 0으로 설정된 N개의 카운터가 주어지며, 이 카운터에는 두 가지 가능한 연산이 있습니다:

증가(X) - 카운터 X가 1씩 증가합니다,
최대 카운터 - 모든 카운터가 모든 카운터의 최대값으로 설정됩니다.

비어 있지 않은 M개의 정수로 구성된 배열 A가 주어집니다. 이 배열은 연속 연산을 나타냅니다:

A[K] = X, 즉 1 ≤ X ≤ N이면 연산 K는 증가(X)입니다,
A[K] = N + 1이면 연산 K는 최대 카운터입니다.

예를 들어 정수 N = 5와 배열 A가 있다고 가정해 보겠습니다:

A[0] = 3
A[1] = 4
A[2] = 4
A[3] = 6
A[4] = 1
A[5] = 4
A[6] = 4

는 각 연속 연산 후 카운터의 값이 됩니다:

(0, 0, 1, 0, 0)
(0, 0, 1, 1, 0)
(0, 0, 1, 2, 0)
(2, 2, 2, 2, 2)
(3, 2, 2, 2, 2)
(3, 2, 2, 3, 2)
(3, 2, 2, 4, 2)

목표는 모든 연산 후 모든 카운터의 값을 계산하는 것입니다.

함수를 작성합니다:

function solution(N, A);

정수 N과 M개의 정수로 구성된 비어 있지 않은 배열 A가 주어지면 카운터의 값을 나타내는 정수 시퀀스를 반환하는 함수입니다.

결과 배열은 정수의 배열로 반환되어야 합니다.

예를 들어, 주어진

A[0] = 3
A[1] = 4
A[2] = 4
A[3] = 6
A[4] = 1
A[5] = 4
A[6] = 4

함수는 위에서 설명한 대로 [3, 2, 2, 4, 2]를 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N과 M은 [1..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [1..N + 1] 범위 내의 정수입니다.

문제 접근

최대 카운터(maxCount)를 설정하는 방법을 모든 배열을 최대카운터를 한번에 설정(모든 배열을 순회하면서 설정)하게되면 성능측면에서 떨어지므로 다음 카운트를 증가할때 해당 인덱스만 최대카운터로 설정

반환되어야 할 배열을 생성하여 모두 0 으로 채운다.
최대카운터가 발생하면 별도의 변수로 설정한다.
최대카운터가 아닐 경우엔
1. 해당 index의 값보다 최대카운터가 크다면 result[index] 값을 최대 카운터로 초기화한다.
2. 해당 index의 값을 증가 시킨다.
마지막 모든 배열을 모두 순회하고 최대카운터를 설정하지 못한 경우(증가를 하지 못한 index 값)에 maxCount 를 설정해줍니다.

function solution(N, A) {
  let maxCount = 0
  let max = 0
  const result = new Array(N).fill(0)

  for (let i = 0; i < A.length; i++) {
    const index = A[i] - 1

    if (A[i] >= N + 1) {
      maxCount = max
    } else {
      if (maxCount > result[index]) {
        result[index] = maxCount
      }

      result[index]++

      if (result[index] > max) {
        max = result[index]
      }
    }
  }

  return result.map(value => {
    return value < maxCount ? maxCount : value
  })
}

Codility Lesson 4 - PermCheck

Sun, 16 Jul 2023 14:00:08 GMT

문제 설명

N개의 정수로 구성된 비어 있지 않은 배열 A가 주어집니다.

순열은 1부터 N까지의 각 원소를 한 번씩만 포함하는 시퀀스입니다.

예를 들어 배열 A는 다음과 같습니다:

A[0] = 4
A[1] = 1
A[2] = 3
A[3] = 2

는 순열이지만 배열 A는 다음과 같습니다:

A[0] = 4
A[1] = 1
A[2] = 3

는 값 2가 누락되었으므로 순열이 아닙니다.

목표는 배열 A가 순열인지 확인하는 것입니다.

함수를 작성합니다:

function solution(A);

배열 A가 주어졌을 때 배열 A가 순열이면 1을 반환하고 그렇지 않으면 0을 반환하는 함수입니다.

예를 들어 배열 A가 주어졌을 때

A[0] = 4
A[1] = 1
A[2] = 3
A[3] = 2

이면 함수는 1을 반환해야 합니다.

배열 A가 주어졌을 때

A[0] = 4
A[1] = 1
A[2] = 3

인 경우 함수는 0을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [1..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [1…1,000,000,000] 범위 내의 정수입니다.

문제 접근

빈 객체에 1부터 A.length 까지에 숫자를 저장하고 배열 A를 순회하면서 빈 객체를 존재하는 A[index] 값을 삭제한다.

마지막에 해당 객체의 숫자가 모두 없으면 순열(연속된 수)이고 그렇지 않으면 순열이 아니라는 것이다.

빈 객체에 1 부터 A.length 까지에 숫자를 추가한다.
배열 A 를 순회하면 A[index] 값이 객체 존재하면 객체에 해당 숫자를 삭제한다.
모든 순회를 다 진행하고 객체에 숫자가 존재하지 않으면 0 반환 그렇지 않으면 1 반환

function solution(A) {
  const info = new Set()

  for (let i = 1; i <= A.length; i++) {
    info.add(i)
  }

  for (let i = 0; i < A.length; i++) {
    if (info.has(A[i])) {
      info.delete(A[i])
    }
  }

  return info.size === 0 ? 1 : 0
}

Codility Lesson 4 - FrogRiverOne

Sun, 16 Jul 2023 14:00:07 GMT

문제 설명

작은 개구리가 강 반대편으로 가고 싶어 합니다. 개구리는 처음에 강의 한쪽 강둑(위치 0)에 있으며 반대쪽 강둑(위치 X+1)으로 가고 싶어 합니다. 나무에서 나뭇잎이 강 표면으로 떨어집니다.

떨어지는 나뭇잎을 나타내는 N개의 정수로 구성된 배열 A가 주어집니다. A[K]는 시간 K에 나뭇잎 하나가 떨어지는 위치를 초 단위로 측정합니다.

개구리가 강 건너편으로 점프할 수 있는 가장 빠른 시간을 찾는 것이 목표입니다. 개구리는 강을 가로지르는 모든 위치에 나뭇잎이 1에서 X까지 나타날 때만 건널 수 있습니다(즉, 1에서 X까지의 모든 위치가 나뭇잎으로 덮이는 가장 빠른 순간을 찾아야 합니다). 강물의 유속이 무시할 수 있을 정도로 작다고 가정하면, 즉 나뭇잎이 강물에 떨어지면 위치가 바뀌지 않는다고 가정할 수 있습니다.

예를 들어 정수 X = 5와 배열 A가 주어집니다:

A[0] = 1
A[1] = 3
A[2] = 1
A[3] = 4
A[4] = 2
A[5] = 3
A[6] = 5
A[7] = 4

두 번째 6에서 나뭇잎은 위치 5에 떨어집니다. 이것은 강을 가로질러 모든 위치에 나뭇잎이 나타나는 가장 빠른 시간입니다.

함수를 작성합니다:

function solution(X, A);

이 함수는 비어 있지 않은 정수 배열 A와 정수 X가 주어졌을 때 개구리가 강 반대편으로 점프할 수 있는 가장 빠른 시간을 반환합니다.

개구리가 강 반대편으로 점프할 수 없는 경우 함수는 -1을 반환해야 합니다.

예를 들어, X = 5와 배열 A가 주어지면 다음과 같습니다:

A[0] = 1
A[1] = 3
A[2] = 1
A[3] = 4
A[4] = 2
A[5] = 3
A[6] = 5
A[7] = 4

이면 위에서 설명한 대로 함수는 6을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N과 X는 [1..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [1..X] 범위 내의 정수입니다.

문제 접근

1 부터 X 까지의 모든 숫자가 나오는 시점인 index 를 구하라는 것이다.

빈 객체에 1 ~ X 의 값을 모두 미리 저장한다. 그리고 배열을 순회하면서 나온 숫자를 객체에서 하나씩 제거하면서 해당 객체의 모든 숫자가 없어졌을때 index 를 반환하면 된다.

빈 객채에 1 ~ X 에 숫자를 추가한다.
배열 A를 순회하면서 나온숫자를 객체에서 제거시킨다.
해당 객체에 숫자가 없어질때 index 가 정답이다.

function solution(X, A) {
  const info = new Set()

  for (let i = 1; i <= X; i++) {
    info.add(i)
  }

  for (let i = 0; i < A.length; i++) {
    if (info.has(A[i])) {
      info.delete(A[i])
    }

    if (info.size === 0) {
      return i
    }
  }

  return -1
}

Codility Lesson 3 - TapeEquilibrium

Sun, 16 Jul 2023 14:00:06 GMT

문제 설명

N개의 정수로 구성된 비어 있지 않은 배열 A가 주어집니다. 배열 A는 테이프에 있는 숫자를 나타냅니다.

0 < P < N이 되는 정수 P는 이 테이프를 비어 있지 않은 두 부분으로 나눕니다.

A[0], A[1], …, A[P - 1] 및 A[P], A[P + 1], …, A[N - 1].

두 부분의 차이는 다음의 값입니다:

|(a[0] + a[1] + … + a[p - 1]) - (a[p] + a[p + 1] + … + a[n - 1])| 입니다.

즉, 첫 번째 부분의 합과 두 번째 부분의 합 사이의 절대적인 차이입니다.

예를 들어 다음과 같은 배열 A를 생각해 봅시다:

A[0] = 3
A[1] = 1
A[2] = 2
A[3] = 4
A[4] = 3

이 테이프를 네 곳으로 나눌 수 있습니다:

P = 1, 차이 = |3 - 10| = 7
P = 2, 차이 = |4 - 9| = 5
P = 3, 차이 = |6 - 7| = 1
P = 4, 차이 = |10 - 3| = 7

함수를 작성합니다:

function solution(A);

비어 있지 않은 N개의 정수 배열 A가 주어졌을 때 얻을 수 있는 최소 차이를 반환하는 함수입니다.

예를 들어, 주어진

A[0] = 3
A[1] = 1
A[2] = 2
A[3] = 4
A[4] = 3

이면 위에서 설명한 대로 함수는 1을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [2..100,000] 범위 내의 정수입니다;
배열 A의 각 요소는 [-1,000..1,000] 범위 내의 정수입니다.

문제 접근

아래 두 구역으로 나누어서 생각해야 한다.

left : A[0]
right : A[1] + A[2] … A[N - 1]

동적계획법을 이용하여 배열을 index 1 부터 순회하면서 left 에 A[index]를 더하고 right 에 A[index] 를 빼주면된다.

A[0] 과 A[1] + A[2] .. + A[N - 1] 두 구역의 값을 구한다.
- left : A[0]
- right : A[1] + A[2] … A[N - 1]
배열을 순회하면서 아래 와 같은 로직을 수행한다.
- left : A[index] 더하기
- right: A[index] 빼기
각 배열을 순회하면서 |left - right| 값을 비교하여 가장 작은 값을 result 변수에 저장한다.
result 변수를 반환한다.

function solution(A) {
  let left = A[0]
  let right = A.slice(1).reduce((acc, current) => acc + current)
  let result = Number.MAX_SAFE_INTEGER

  for (let i = 1; i < A.length; i++) {
    result = Math.min(result, Math.abs(left - right))

    left += A[i]
    right -= A[i]
  }

  return result
}

Codility Lesson 3 - PermMissingElem

Sun, 16 Jul 2023 14:00:05 GMT

문제 설명

서로 다른 N개의 정수로 구성된 배열 A가 주어집니다. 배열에는 [1…(N + 1)] 범위의 정수가 포함되며, 이는 정확히 하나의 요소가 누락되었음을 의미합니다.

여러분의 목표는 그 누락된 요소를 찾는 것입니다.

함수를 작성합니다:

function solution(A);

배열 A가 주어지면 누락된 요소의 값을 반환하는 함수를 작성합니다.

예를 들어 배열 A가 주어졌을 때

A[0] = 2
A[1] = 3
A[2] = 1
A[3] = 5

인 경우 함수는 누락된 요소이므로 4를 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [0..100,000] 범위 내의 정수입니다;
A의 요소는 모두 고유하다;
배열 A의 각 원소는 [1…(N + 1)] 범위 내의 정수입니다.

문제 접근

(배열 A 길이 + 1 을 한 연속된 수의 합) - (배열 A 에 연속된 수의 합) 이 배열 A의 누락된 수이다.

배열 A 의 수의 합 구하기.
- 배열 A 에 연속된 수의 합
배열 A의 길이에서 더하기 1 을 한 배열에서 (index + 1) 이 숫자를 담당하므로 총 합을 구한다.
- 배열 A 길이 + 1 을 한 연속된 수의 합
(배열 A의 길이 + 1 을 한 연속된 수의 합) - (배열 A 에 연속된 수의 합) 을 구한다.

function solution(A) {
  if (A.length === 0) {
    return 1
  }

  const sumOfA = A.reduce((acc, value) => acc + value)
  const totalSum = new Array(A.length + 1)
    .fill(1)
    .reduce((acc, _, index) => acc + index + 1, 0)

  return totalSum - sumOfA
}

또 다른 공식이 있다

1부터 n까지의 합 공식은 n(n+1)/2
아래 코드로도 대신 할 수 있다.

const totalSum = ((A.length + 1) * (A.length + 2)) / 2

Codility Lesson 3 - FrogJmp

Sun, 16 Jul 2023 14:00:04 GMT

문제 설명

작은 개구리가 길 반대편으로 가고 싶어 합니다. 개구리는 현재 X 위치에 있으며 Y보다 크거나 같은 위치로 이동하려고 합니다. 작은 개구리는 항상 고정된 거리인 D를 점프합니다.

작은 개구리가 목표에 도달하기 위해 점프해야 하는 최소한의 횟수를 세십시오.

함수를 작성합니다:

function solution(X, Y, D);

세 개의 정수 X, Y, D가 주어졌을 때 X 위치에서 Y보다 큰 위치로 이동하는 최소 점프 횟수를 반환하는 함수를 작성합니다.

예를 들어, 주어진

X = 10
Y = 85
D = 30

이면 개구리의 위치는 다음과 같으므로 함수는 3을 반환해야 합니다:

첫 번째 점프 후, 위치 10 + 30 = 40에서
두 번째 점프 후, 위치 10 + 30 + 30 + 30 = 70
세 번째 점프 후, 위치 10 + 30 + 30 + 30 = 100에 위치합니다.

다음 가정에 대한 효율적인 알고리즘을 작성하십시오

X, Y, D는 [1..1,000,000,000] 범위 내의 정수입니다;
X ≤ Y.

문제 접근

총 이동 해야할 최소 거리를 구하여 해당 최소 거리를 D 로 나누게 된다면 최소한 점프수를 구할 수 있다.

총 이동 해야할 최소 거리를 구한다. (Y - X)
해당 최소 거리를 D로 나누고 몫을 올림 처리 하면 점프수가 나온다.
- 나머지 즉 몫이 소수점이 나오면 점프가 더 필요하다는 뜻이므로 소수점을 올림한다.

function solution(X, Y, D) {
  const distance = Y - X
  const count = Math.ceil(distance / D)

  return count
}

Codility Lesson 2 - OddOccurrencesInArray

Sun, 16 Jul 2023 14:00:03 GMT

문제 설명

N개의 정수로 구성된 비어 있지 않은 배열 A가 주어집니다. 배열은 홀수 개의 요소를 포함하며, 배열의 각 요소는 짝을 이루지 않은 한 요소를 제외하고 같은 값을 가진 다른 요소와 짝을 이룰 수 있습니다.

예를 들어 배열 A에서

a[0] = 9 a[1] = 3 a[2] = 9
a[3] = 3 a[4] = 9 a[5] = 7
A[6] = 9

인덱스 0과 2의 요소는 값 9를 가집니다,
인덱스 1과 3의 요소는 값 3을 가집니다,
인덱스 4와 6의 요소는 값 9를 가집니다,
인덱스 5의 요소는 값 7을 가지며 쌍을 이루지 않습니다.

함수를 작성합니다:

function solution(A);

위의 조건을 충족하는 N개의 정수로 구성된 배열 A가 주어지면 쌍을 이루지 않은 요소의 값을 반환하는 함수입니다.

예를 들어 배열 A가 주어졌을 때

a[0] = 9 a[1] = 3 a[2] = 9
a[3] = 3 a[4] = 9 a[5] = 7
A[6] = 9

이면 위의 예에서 설명한 것처럼 함수는 7을 반환해야 합니다.

다음 가정에 대한 효율적인 알고리즘을 작성합니다:

N은 [1…1,000,000] 범위 내의 홀수 정수입니다;
배열 A의 각 요소는 [1…1,000,000,000] 범위 내의 정수입니다;
A의 값 중 하나를 제외한 모든 값이 짝수 횟수만큼 발생합니다.

문제 접근

각 배열을 순회하면서 각 값이 존재하면 삭제하고, 존재하지 않으면 추가하는 방식으로 진행하면 마지막엔 홀수인 값만 남게 된다.

배열을 순회 하면서 해당 값이 존재하면 값을 추가.
배열을 순회 하면서 해당 값이 존재하지 않으면 값을 제거.
모든 배열을 다 순회했을때 짝수 갯수의 값은 모두 제거되 홀수 갯수인 값만 남게 된다.

자료 조회, 추가, 삭제가 효율적인 Set 자료구조를 선택

function solution(A) {
  const info = new Set()

  for (let i = 0; i < A.length; i++) {
    if (!info.has(A[i])) {
      info.add(A[i])
    } else {
      info.delete(A[i])
    }
  }

  const result = [...info]

  return result[0]
}

Codility Lesson 2 - CyclicRotation

Sun, 16 Jul 2023 14:00:02 GMT

문제 설명

N개의 정수로 구성된 배열 A가 주어집니다. 배열의 회전은 각 요소가 하나의 인덱스만큼 오른쪽으로 이동하고 배열의 마지막 요소가 첫 번째 위치로 이동하는 것을 의미합니다. 예를 들어 배열 A = [3, 8, 9, 7, 6]의 회전은 [6, 3, 8, 9, 7]입니다(요소가 인덱스 하나씩 오른쪽으로 이동하고 6이 첫 번째 위치로 이동).

목표는 배열 A를 K회 회전하는 것입니다. 즉, A의 각 요소를 오른쪽으로 K회 이동하는 것입니다.

함수를 작성합니다:

function solution(A, K);

이 함수는 N개의 정수로 구성된 배열 A와 정수 K가 주어지면 배열 A를 K번 회전한 값을 반환합니다.

예를 들어

A = [3, 8, 9, 7, 6]
K = 3

이면 함수는 [9, 7, 6, 3, 8]을 반환해야 합니다. 세 번의 회전이 이루어졌습니다:

[3, 8, 9, 7, 6] -> [6, 3, 8, 9, 7]
[6, 3, 8, 9, 7] -> [7, 6, 3, 8, 9]
[7, 6, 3, 8, 9] -> [9, 7, 6, 3, 8]

다른 예로, 주어진

A = [0, 0, 0]
K = 1

이면 함수는 [0, 0, 0]을 반환해야 합니다.

주어진

A = [1, 2, 3, 4]
K = 4

인 경우 함수는 [1, 2, 3, 4]를 반환해야 합니다.

가정합니다:

N과 K는 [0..100] 범위 내의 정수입니다; 배열 A의 각 요소는 [-1,000..1,000] 범위 내의 정수입니다. 솔루션에서 정확성에 중점을 둡니다. 솔루션의 성능은 평가의 초점이 아닙니다.

문제 접근

모든 배열을 반복 할 필요없이 배열의 길이로 K 로 나눈 나머지가 실제로 움직이는 횟수이다.

숫자 K 를 배열의 길이로 나눈 나머지를 구한다.
나머지 숫자를 배열의 끝에서부터 자른다.
이전에 자른 배열과 배열에 시작 부터 나머지 전까지의 값을 이어 붙인다.

function solution(A, K) {
  const num = K % A.length

  if (num === 0) {
    return A
  }

  const result = A.slice(-num)

  return result.concat(A.slice(0, A.length - num))
}

Codility Lesson 1 - BinaryGap

Sun, 16 Jul 2023 14:00:01 GMT

문제 설명

양수 N 내의 이진 갭은 N의 이진 표현에서 양쪽 끝이 1로 둘러싸인 연속된 0의 최대 시퀀스입니다.

예를 들어, 숫자 9는 이진 표현 1001을 가지며 길이 2의 이진 간격을 포함합니다. 숫자 529는 이진 표현 1000010001을 가지며 길이 4와 길이 3의 두 이진 간격을 포함합니다. 숫자 20은 이진 표현 10100을 가지며 길이 1의 이진 간격을 하나 포함합니다. 숫자 15는 이진 표현 1111을 가지며 이진 간격을 갖지 않습니다. 숫자 32는 이진 표현 100000을 가지며 이진 간격이 없습니다.

Write a function:

class Solution { public int solution(int N); }

함수는 양의 정수 N이 주어지면 가장 긴 이진 간격의 길이를 반환합니다. N에 이진 간격이 포함되지 않으면 함수는 0을 반환해야 합니다.

예를 들어, N이 1041이면 N은 이진 표현 10000010001을 가지므로 가장 긴 이진 간격은 길이 5이므로 함수는 5를 반환해야 합니다. N이 32이면 N은 이진 표현 ‘100000’을 가지므로 이진 간격이 없으므로 함수는 0을 반환해야 합니다.

Write an efficient algorithm for the following assumptions:

N is an integer within the range [1..2,147,483,647].

문제 접근

숫자를 2진수로 변환
2진수 문자열을 반복문을 진행하면서 처음 “1” 이 나올 경우 하고 그 다음 “1”인 나올 경우 사이에 수를 센다.
“1” 과 “1” 사이에 갯수 와 현재 가장 큰 갯수를 비교해가면 업데이트 한다.

function solution(N) {
  const binaryNumber = N.toString(2)
  let isFirst = false
  let startCountIndex = 0
  let maxCount = 0

  for (let i = 0; i < binaryNumber.length; i++) {
    if (isFirst && binaryNumber[i] === '1') {
      maxCount = Math.max(maxCount, i - startCountIndex - 1)
      isFirst = false
    }

    if (binaryNumber[i] === '1') {
      startCountIndex = i
      isFirst = true
    }
  }

  return maxCount
}

Codility Lesson 1 - BinaryGap

Sun, 16 Jul 2023 14:00:01 GMT

문제 설명

양수 N 내의 이진 갭은 N의 이진 표현에서 양쪽 끝이 1로 둘러싸인 연속된 0의 최대 시퀀스입니다.

Write a function:

class Solution { public int solution(int N); }

함수는 양의 정수 N이 주어지면 가장 긴 이진 간격의 길이를 반환합니다. N에 이진 간격이 포함되지 않으면 함수는 0을 반환해야 합니다.

Write an efficient algorithm for the following assumptions:

N is an integer within the range [1..2,147,483,647].

문제 접근

숫자를 2진수로 변환
2진수 문자열을 반복문을 진행하면서 처음 “1” 이 나올 경우 하고 그 다음 “1”인 나올 경우 사이에 수를 센다.
“1” 과 “1” 사이에 갯수 와 현재 가장 큰 갯수를 비교해가면 업데이트 한다.

function solution(N) {
  const binaryNumber = N.toString(2)
  let isFirst = false
  let startCountIndex = 0
  let maxCount = 0

  for (let i = 0; i < binaryNumber.length; i++) {
    if (isFirst && binaryNumber[i] === '1') {
      maxCount = Math.max(maxCount, i - startCountIndex - 1)
      isFirst = false
    }

    if (binaryNumber[i] === '1') {
      startCountIndex = i
      isFirst = true
    }
  }

  return maxCount
}

about

Sun, 27 Jan 2019 16:21:13 GMT

Your name

Thank you for reading my resume. If you want to contact me, Please send me an email.