본문 바로가기

전체 글35

[임시] [성능 개선] Next/Image의 한계점, 그에 대한 대책 (2편) 내가 알고 있는 Next.JS의 Next/Image가 제공하는 컴포넌트의 장점- webp, avif등의 이미지 최적화- Lazy 로딩- placeholder제공을 통한 CLS 점수 개선- width, height값을 받아 reflow 현상 최소화- sizes props를 통한 디바이스 크기 혹은 화면 해상도에 맞춰 적절한 크기의 이미지 제공- vercel을 통한 이미지 캐싱오늘 제가 글쓰려고 하는 주제는 바로Vercel 무료플랜 사용 시 Next/Image의 한계점과 그에 대한 대책입니다.사용자가 없거나 작은 프로젝트의 경우에는 그대로 Next/Image를 써도 무방하니글을 읽어보고 비슷한 경험에 해당되는 사람은 저와 같은 고민을 해보는것도 좋을 것 같아요.글에 대한 수정 요청 및 정보 공유는 언제든지.. 2024. 7. 2.
[알고리즘] 124 나라의 숫자 조건 n 은 50,000,000 이하의 자연수 과정 숫자만 1, 2, 4일 뿐 3의 진수나 다름 없다. 주어진 10의 진수(n)을 3의 진수로 바꾸어 주자. 풀이 function solution(n) { let answer = ""; // 3의 진수 0, 1, 2을 대신 표기할 4, 1, 2 스키마 정의 const schema = ["4", "1", "2"]; while (n > 0) { // 3으로 나눈 나머지를 구한다 answer = schema[n % 3] + answer; // 나머지가 0일 경우: 몫에서 1을 빼준다. // 나머지가 0이 아닐 경우: 몫을 그대로 넘겨준다. n = n % 3 === 0 ? n / 3 - 1 : parseInt(n / 3); } return answer; } 2024. 3. 6.
[성능 개선] Next/Image를 활용한 페이지 성능 개선 (1편) 다독다독 프로젝트가 굉장히 오랫동안 진행하고 있는 와중에 인상깊게 배웠던것들을 블로그에 기록해보려한다. 좋은 기회들을 계속해서 만들어갈 수 있도록 힘 써 주고 있는 팀원들에게 압도적 감사...! 페이지 성능 개선을 위해 손 볼 수 있는 요소는 참 많습니다 당장 떠오르는 것만해도 이미지, 폰트, 캐싱 전략, CDN 활용, JS 번들 사이즈 줄이기 등등... 이외에도 정말 많을 것입니다 그 중 오늘 이야기할 내용은 바로, Next/Image 컴포넌트를 활용한 이미지 최적화! Next/Image 컴포넌트를 사용했을 때 얻을 수 있는 이점 3가지 이미지 최적화, lazyloading, placeholder에 대해 알아봅시다 이미지 최적화 Next/Image 컴포넌트를 가져다 쓰면 자동으로 최적화가 된다? 왜 그.. 2023. 11. 30.
[알고리즘] 폰켓몬 (해시) 1. 조건배열 `nums`의 최대 길이 10,000 2. 과정배열 `nums`를 순회하며 해시 테이블을 생성한다. - O(N)생성된 테이블 `table`의 길이에 따라 return 값을 정하는 조건문을 작성한다. 3. 풀이function solution(nums) { // 해시 테이블 생성 const table = {} for (let i = 0; i maxPickCount ? maxPickCount : tableLength} 4. 후기사실 배열 `nums`의 최대 길이가 길지않아 다른 방법으로도 시간 초과없이 풀 수 있었겠지만복습 겸 효율적인 방법인 해시 테이블을 활용해 보았다. 2023. 10. 27.
[알고리즘] 달리기 경주 (해시) 1. 조건 배열 `players` 의 최대 길이 50,000 배열 `callings` 의 최대 길이 1,000,000 2. 과정 `callings`을 최대 1,000,000 순회하면서 `players`에서 해당 문자열의 index찾고 업데이트 해야한다. POINT 선형 탐색을 할 경우 최대 1,000,000 * 50,000 (= 500억)의 리소스가 소모된다. (시간 초과되는것이 당연.) 해시 테이블을 최대 50,000의 리소스를 이용해서 먼저 만들어 준다면 `callings`의 길이만큼 `players`를 순회할 필요 없이 N(1)로 해당 Index를 바로 찾아낼 수있다. 3. 풀이 function solution(players, callings) { // ojb로 player: idx로 복사 cons.. 2023. 10. 25.
[알고리즘] 바탕화면 정리 0. 잡소리 코딩테스트... 꾸준히 하자 오랜만에 했더니 뇌가 굳어버린것 같다. ㅠㅠㅠ 1. 조건 문자열 최대 길이 50 배열 최대 길이 50 문자열은 .과 #로만 이루어져있다. 바탕화면의 드래그 최단 거리를 구하라 2. 과정 2차원 배열로 바꾸기 위해 split()을 활용했다. 2차원 배열을 순회를 하며 "#"이 포함된 좌표 x, y값을 각 배열에 집어 넣었다. 순회가 끝난 뒤 각 배열의 최대 최솟값 (이때 최대값에는 +1을 해준다)을 [lux, luy, rdx, rdy]순으로 return 한다. 3. 풀이 function solution(wallpaper) { const wallpaperArray = []; wallpaper.map((item) => wallpaperArray.push(item.spl.. 2023. 4. 15.
[알고리즘] 덧칠하기 1. 조건 n 미터 만큼 페인트가 칠해진 벽 포스터 등을 게시, 철거 과정에서 페인트가 벗겨짐 덧칠 작업 구역을 나누어 일부만 페인트 새로 칠하기로 1m씩 n개의 구역 왼쪽부터 1번 -> n번 1 ≤ m ≤ n ≤ 100,000 1 ≤ section의 length ≤ n 2. 과정 단순 순회일것이라고 생각하고 풀었다. 단순 순회는 맞았지만 처음 풀이시에 왜이렇게 복잡하게 풀었는지 모르겠다. 3. 풀이 function solution(n, m, section) { let answer = 0; while (section.length > 0) { const target = section.shift(); for (let idx = 1; idx n).. 2023. 3. 29.
[알고리즘] 대충 만든 자판 1. 조건 keymap, target의 길이와 그 원소들의 길이 1 ~ 100 경우1: 자판 전체에 같은 문자 여러 번 할당 경우2: 키 하나에 같은 문자 여러 번 할당 경우3: 아예 할당 되지 않은 경우 특정 문자열 작성할 떄 최소 몇 번 눌러야 가능한지 구하기 2. 풀이 과정 좀 오래동안 문제를 쳐다봐쓴ㄴ데 어떤 알고리즘을 활용해서 풀이해야할지 도무지 떠오르지 않았다. 그래서 그냥 무지성 코딩을 갈겼다 사실 내가 생각한대로면 최악의 경우를 생각해보면... 100*100*100*100이니까.. 100,000,000이 나온다 ㅋㅋㅋㅋㅋ!!!!! 시간 초과 날것을 예상하고 시간초과가 나면 조금씩 개선해보자는 생각으로... 3. 풀이 function solution(keymap, targets) { cons.. 2023. 3. 29.
[알고리즘] 카드 뭉치 1. 조건 카드 2뭉치 주어짐 원하는 뭉치에서 순서대로 1장씩 한 번 사용한카드는 사용 불가 카드를 사용하지 않고 다음 카드 사용 불가 기존에 주어진 카드 뭉치의 단어 순서 바꾸기 불가 각 카드 cards1, cards2의 길이: 1 2023. 3. 27.

티스토리툴바