본문 바로가기

전체 글37

[리렌더링] 01. reflow & repaint reflow와 repaint에 대해 아는대로 말해보세요해당 소제목은 내가 경험했던 면접 질문 중 하나였다.그냥 생각이나서 간단하게 끄적여보려고한다.reflow & repaint브라우저를 사용하다보면 UI들이 지속적으로 같은 스타일을 유지 하진 않는다.개발자의 의도에 따라 어떤 노드에 무언가를 추가하고어떤 요소는 스타일이 달라지기도 한다.이럴 때 발생하는것이 바로 reflow와 repaint만약 style이나 DOM 내부를 변경하는 DOM API가 사용됐다면 우리의 DOM은...1. 무엇이 변경됐는지 감지2. 브라우저 작동 과정을 수행  (HTML DOM 트리 & CSSOM 트리 생성 -> Render 트리 생성 -> paint)3. 리렌더링을 진행위와 같은 과정을 수행한다.리렌더링이 일어나는 방식 3가지.. 2024. 11. 25.
[테스트 코드] 00(Ep). 테스트 코드는 왜 작성할까? 프론트엔드 테스트 코드는 왜 작성해야할까?백엔드고 프론트엔드고 테스트 코드의 중요성은 지금까지 귀에 피가나도록 들어왔다.하지만 내가 직접 테스트 코드를 작성해본적은 단 한번도 없는걸?그래서 생각해보았다.내가 프론트엔드 테스트 코드를 작성해보고 싶은 이유는?프론트엔드 테스트 코드를 작성한다면 어떤 결과를 만들 수 있을까?내가 테스트 코드를 작성하고싶었던 이유- 지속가능한 테스트 자동화를 구축하고 싶어서- 지속적인 코드 검증을 통해 프로젝트 코드의 질을 높이고 싶어서- 앞으로도 안전한 코드를 꾸준히 작성하고 싶어서올바른 테스트 코드를 작성하면 좋은점은?- 사전에 결함을 찾아내고 수정할 수 있다!- 특정 모듈(React에서는 Component)이 사양에 잘 동작하는가 확인할 수 있다!- 좋은 설계에 대한 사.. 2024. 11. 25.
[이미지 최적화] 02. Next/Image의 한계점, 그에 대한 대책 오늘 제가 글쓰려고 하는 주제는 바로Vercel 무료플랜 사용 시 Next/Image의 한계점과 그에 대한 대책입니다.사용자가 없거나 작은 프로젝트의 경우에는 그대로 Next/Image를 써도 무방하니글을 읽어보고 비슷한 경험에 해당되는 사람은 저와 같은 고민을 해보는것도 좋을 것 같아요.글에 대한 수정 요청 및 정보 공유는 언제든지 환영입니다 ~.~Next/Image가 제공하는 장점- webp, avif등의 이미지 확장자 최적화- Lazy 로딩- placeholder제공을 통한 CLS 점수 개선- width, height값을 받아 reflow 현상을 최소화- sizes props를 통한 디바이스 크기 혹은 화면 해상도에 맞춰 적절한 크기의 이미지 제공- vercel을 통한 이미지 캐싱vercel을 통한.. 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.
[이미지 최적화] 01. Next/Image를 활용한 페이지 성능 개선 다독다독 프로젝트가 굉장히 오랫동안 진행하고 있는 와중에 인상깊게 배웠던것들을 블로그에 기록해보려한다.좋은 기회들을 계속해서 만들어갈 수 있도록 힘 써 주고 있는 팀원들에게 압도적 감사...!      페이지 성능 개선을 위해 손 볼 수 있는 요소는 참 많습니다당장 떠오르는 것만해도 이미지, 폰트, 캐싱 전략, 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.