8편 pre Loading Component, Image 6편인가에서 Bundler의 특징으로 여러개의 파일을 하나로 압축해서 가져오는 것을 예방하기 위한 Code Splitting을 해주었다. 그래서 split된 파일을 필요할 때 가져오는 방식을 사용했습니다. 이번 글에서는 이러한 과정 속에 필요할 때가 아닌 현재 필요한 파일을 다 가져오는 로딩이 다 끝난 후 splitting 된 파일을 가져와 Cache에 담아두는 Pre loading을 해보겠습니다. Pre loading Component React를 Pre loading하기 위해서는 Pre Loading할 컴포넌트를 미리 import하면 된다. 1. React Component를 lazy로 불러올 수 있는 객체를 만들어줄 수 있는 함수를 만들어줍니..

7편 애니메이션 최적화 애니메이션 최적화에 대해서 알아보기 전에 브라우저가 어떻게 렌더링을 하는지 알아봐야 합니다. 애니메이션 작동 방법 애니메이션의 경우에는 이미지를 조합해서 나타낸다. 위와 같은 이미지들이 빠르게 순서대로 진행되며 만화와 같은 애니메이션으로 보이게 하는 것입니다. 그래서 일반적인 모니터의 경우에는 1초의 60FPS(1초에 이미지를 표현할 수 있는 개수)로 이미지를 표현할 수 있다. 요즘 비싼 모니터의 경우에는 144FPS까지 가능하다. 참고 영상 위의 동영상을 보면 알겠지만 1초에 얼마나 많은 이미지를 표현할 수 있냐에 따라서 애니메이션의 부드러움의 차이가 큰 것을 확인할 수 있다. 하지만 브라우저가 특정한 이유를 통해서 한번의 이미지를 표현할 수 있는 프레임이 작아진다면 30FPS,..

6편 Code Splitting 과 React lazy, Suspense 이전에 webpack을 통해서 비슷한 파일을 묶어서 하나의 파일로 만드는 것을 Bundling이라고 했다. 즉 js, css, html 각각을 하나의 파일로 묶어서 번들링 해준다. 물론 각각의 파일을 하나로 묶어주어서 여러 개의 파일을 가져올때 보다 훨씬 편해지겠지만 하나의 파일이 너무 용량이 커져버리면 오히려 가져오는데 더 오랜시간이 걸리고 힘들어진다. bundle-analyzer를 사용하면 이를 편하게 확인할 수 있다. webpack에 설정을 해줘야 하지만 필자는 현재 CRA를 통해서 만들었기 때문에 webpack 설정을 바꿀 수가 없어서 아래의 라이브러리를 사용하면 된다. www.npmjs.com/package/cra-bund..

5편 Performance 사용해서 오래걸리는 코드 찾아보기 크롬 관리자 도구 Performance Tab을 사용해서 오래 걸리는 코드를 찾아보고 Performance 탭을 어떻게 사용하는 건지 알아봅시다. Performance 탭은 페이지가 실행되면서 작업되는 태스크를 확인할 수 있는 크롬의 탭입니다. 사용하기 위해서는 관리자 탭에 Performance를 누른 다음에 새로고침 같이 보이는 것을 눌러주면 됩니다. 실행결과 Network: 네트워크의 경우에는 네트워크에서 일어나는 일들을 볼 수 있다. 예를 들어 사진을 받아오는 타임라인 이라던가 특정 파일을 받아오는 타임라인 등을 확인할 수 있다. 각 아티클 마다 이미지를 요청해서 가져온 것을 알 수 있다. Timing, Main Timing과 Main은 ..

팰린드롬이란 앞뒤가 똑같은 문자열인데 이번 문제는 하나의 문자열에서 가장 긴 팰린드롬을 구하는 문제이다. 2번째 문자부터 문자열의 길이가 홀수일 때, 짝수일 때의 인덱스 길이를 비교하여 가장 큰 길이를 구하고 string의 함수인 substr을 사용해서 문자열을 출력해준다. 여기서 홀수일때와 짝수일 때라는 말은 vector oddVector = getPalindorimDorim(str, index-1, index+1); vector evenVector = getPalindorimDorim(str, index-1, index); 팰린들롬을 구하는 부분 문자열의 길이를 짝수로 하나 홀수로 하나의 뜻이다. 예를 들어서 abbbbsserasers 위와 같은 문자열이 있다면 2번째 문자열을 시작으로 ab, abb..

이 문제는 AlgoExpert is the best!의 각 문자를 순서를 유지하며 뒤집는 문제이다. 각 문자의 시작을 체크해서 변수로 저장하고 다음 공백의 점의 인덱스를 저장해서 문자의 시작 인덱스부터 공백의 변수까지의 문자열을 넣어주면 된다. 그리고 양 옆의 각 요소들을 바꾸어 주면서 실행하면 된다. 더보기 using namespace std; void reverseList(vector &list); string reverseWordsInString(string str) { vector words; int startOfWord = 0; for(int idx = 0; idx < str.size(); idx++){ char character = str[idx]; if(character == ' '){ wo..