본문 바로가기

개발이야기28

[리렌더링] 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.