자바스크립트 효율적으로 처리하기 (requestAnimationFrame, requestIdleCallback, Web Workers) 브라우저 성능 최적화의 핵심은 단순히 코드를 “빠르게” 만드는 것이 아니라,언제 실행할지와 어디서 실행할지를 적절히 나누는 데 있다. 브라우저의 메인 스레드는 하나다. 개발자가 작성한 JavaScript 실행뿐 아니라 이벤트 처리, 스타일 계산, 레이아웃, 페인트, 컴포지팅까지 대부분의 주요 작업이 같은 스레드에서 처리된다.따라서 JavaScript가 메인 스레드를 오래 점유하면 브라우저는 화면을 갱신하지 못한다. 사용자는 이를 스크롤 버벅임, 클릭 지연, 입력 랙, 애니메이션 끊김 같은 형태로 체감한다.브라우저가 일반적으로 목표로 하는 60fps 환경에서는 한 프레임에 사용할 수 있는 시간은 약 16.6ms뿐이다.이 짧은 시간 안에 JavaScript 실행, 스타일 계산, 레이아웃, 페인트까지 끝나야 ..
네이버랩스 6개월 인턴 회고 보호된 글입니다.
Biome 마이크레이션 후 린터 룰 적용기 최근 프로젝트에서 사용하던 ESLint와 Prettier를 제거하고 Biome으로 마이그레이션했다.기존에는 린팅과 포맷팅을 위해 11개의 라이브러리를 조합해 사용하고 있었지만, 이를 하나의 도구로 대체하면서 설정과 의존성을 단순화했다.이 글에서는 마이그레이션 이후 실제 코드에 린터 룰을 적용하며 구조를 개선했던 사례들을 정리했다.공개 가능한 형태로 정리하기 위해, 회사의 비즈니스 로직이 드러날 수 있는 변수와 도메인 용어는 모두 일반화했다.1. useExhaustiveDependencies (warn)의도React Hook의 의존성 배열 누락/과잉을 감지하여 stale closure 버그를 방지한다.케이스 A: 누락된 의존성 추가문제 코드const getItemId = (item) => item[idKe..
네이버랩스 Robot Web App Developer 합격 후기 (서류~최종면접) * 문제가 되는 내용은 지적해주신다면 바로 수정 조치 하겠습니다. 8월 초 즈음에 네이버랩스의 Robot Web App Developer 인턴에 지원했다. 후술하겠지만, 코딩테스트부터, 다수의 면접 절차가 있어 꽤나 오랜 프로세스를 거쳐왔다. 당근 다닐때 지원했는데 이제 결과가 나왔으니 두달 넘게 걸린것 .. 네이버랩스는 ARC Mind 가 출시되었던 작년에 알게 되었는데, 로봇 생태계의 확장 가능성이 궁금해서 한번 찾아봤던 회사였다. iOS 앱 창업, Today at apple 발표, 커뮤니티 (KWDC, Asyncswift) 오거나이징, 애플아카데미 등 .. 애플 개발자 생태계에서 다양한 활동을 해왔던 학생으로서, 한 생태계가 만들어지기 위해 필요한 건 OS 뿐만아니라 생태계를 이루는 개발..
getElementsByClassName 함수 구현하기 (+자바스크립트에서 유사배열과 배열, 변환 방법) 프론트엔드 라이브 코딩이나 화이트보드 테스트에서 자주 나오는 과제 중 하나가 DOM API를 직접 구현해보는 문제입니다. 그중 대표적인 것이 document.getElementsByClassName을 직접 만들어보라는 과제입니다. 이번 글에서는 이 문제를 어떻게 접근하면 좋을지 베이스케이스 → 엣지케이스 → 효율성 → 가독성 순서로 풀어봅니다. 문제 이해목표는 주어진 className을 가진 모든 요소를 찾아 배열로 반환하는 함수입니다.기본적으로는 DOM 트리를 순회하면서 조건에 맞는 요소를 모으면 됩니다.function getElementsByClassName(className) { const bodyChildrenEls = document.body.children; const result = [..
메모이제이션(Memoization)의 원리와 함수 구현해보기, 적용 프로그래밍을 하다 보면, 같은 연산을 반복해서 수행하는 상황을 자주 만납니다. 이런 경우, 이미 계산한 결과를 저장해 두었다가 재활용하면 성능을 크게 개선할 수 있는데요. 이 기법이 바로 메모이제이션(Memoization) 입니다.리액트에서의 useMemo 말고 직접 함수 구현은 처음이라 하나씩 공부하면서 정리해둔 내용입니다. 단순히 갖다 쓰기만 할줄 알았는데, 내부 로직을 직접 짜보니 흥미롭네요. 이번 글에서는 메모이제이션의 원리에서 시작하여 구현하며 비교해본 다양한 방법들, 그리고 적용까지 정리해 보겠습니다.1. 메모이제이션의 기본 원리메모이제이션은 간단히 말해 “입력 → 출력 결과”를 캐시에 저장해 두고, 같은 입력이 다시 들어왔을 때는 계산하지 않고 캐시에서 꺼내 쓰는 방식입니다.ex, 피보나치..
당근 프론트엔드 엔지니어 인턴 12-13주차 마지막 회고 (안녕!) 마지막 2주는, 독기가 올라서 (ㅋㅋ) 당근에서 할 수 있는 건 다 해보자는 마인드로.. 일하기로 했다. 안그래도 열심히 일하려 했건만,, 의도치않게 나오기 직전에 일이 많이 몰리는 바람에 야근을 매일하게 되었다. 일 원 없이 하고 간다!!! 12, 13주차는 매일까진 회고를 하지도 못했다. (너무 피곤해서 집가면 잠만 잠..), 마무리인만큼 오늘은 키워드 회고가 아니라 짧은 글과 사진을 놓고 가려한다. 와중에 추억용 사진도 몇장 남겨둬서, 평소 한두장 올릴 게 있던 반면 올릴 사진들이 좀 있다. 마지막 날, 세어보니 3개월동안 개인 피쳐 배포만 40건을 했다. 이중 1/3은 마지막 2주동안 한 것 같다. 내게 주어지는 테스크를 돌아보니 나는 운이 좋았고, 앞으로 개발자로 성장하기에 좋은 토대가 되는 인..
당근 프론트엔드 엔지니어 인턴 11주차 키워드 회고 보호된 글입니다.
당근 프론트엔드 엔지니어 인턴 10주차 키워드 회고 보호된 글입니다.

티스토리툴바