javascript5 [리렌더링] 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. [이미지 최적화] 01. Next/Image를 활용한 페이지 성능 개선 다독다독 프로젝트가 굉장히 오랫동안 진행하고 있는 와중에 인상깊게 배웠던것들을 블로그에 기록해보려한다.좋은 기회들을 계속해서 만들어갈 수 있도록 힘 써 주고 있는 팀원들에게 압도적 감사...! 페이지 성능 개선을 위해 손 볼 수 있는 요소는 참 많습니다당장 떠오르는 것만해도 이미지, 폰트, 캐싱 전략, CDN 활용, JS 번들 사이즈 줄이기 등등...이외에도 정말 많을 것입니다그 중 오늘 이야기할 내용은 바로, Next/Image 컴포넌트를 활용한 이미지 최적화!Next/Image 컴포넌트를 사용했을 때 얻을 수 있는 이점 3가지이미지 최적화, lazyloading, placeholder에 대해 알아봅시다 이미지 최적화Next/Image 컴포넌트를 가져다 쓰면 자동으로 최적화가 된다?왜 그럴까.. 2023. 11. 30. [알고리즘] "객체생성" 을 활용한 문제 풀이 # 서론 - 문제 개요 - 어떻게 문제를 풀어야할까? - 풀이 이후 문제점 # javascript에서의 객체 생성 방법 # 객체 생성을 활용한 문제 풀이 - 맨 처음 코드 - 개선해야 할 점 - 정리가 된 코드 - 후기 (꼭 객체를 활용해서 풀어야하나?) ## 서론 문재 개요 (오늘의 문제는 2019 Kakao RECRUITMENT 에서 출제된 '실패율' 이다.) 이 문제는 제목 그대로 게임내의 스테이지 실패율을 구하고 조건에 따라 실패율이 높은 스테이지 부터 내림차순으로 스테이지 번호가 담겨있는 배열을 return 하는것이 주 목표이다. 어떻게 문제를 풀어야할까? 맨처음에는 간단하게 배열 몇가지를 정의하고 정렬시킨 이후에 배열간의 비교를 통해 조건에 맞게 순서를 return 시키면 되겠지 라고 생각했다.. 2022. 2. 11. 이전 1 다음
