본문 바로가기

frontend

(7)
[번역] 빅테크 프론트엔드 기술 인터뷰 : CSS편 Front End Interview Handbook의 CSS 파트를 번역 및 정리한 글입니다 Meta, Amazon., Google과 같은 미국 빅테크 프론트엔드 면접의 기출 문제라 합니다. 2019년 기준으로 작성된 것들이 꽤 있어서, 몇가지 경험 기반 답변들은 스스로 생각해 보시는 것도 좋은 듯 합니다. 해당 링크에서 원문을 확인하실 수 있습니다. 1. CSS 셀렉터의 명시도(specificity)는 무엇이고, 어떻게 동작하나요? 브라우저는 CSS 규칙의 명시도에 따라 요소에 표시할 스타일을 결정합니다. 브라우저가 특정 요소에 매치되는 규칙을 이미 결정했다고 가정합시다. 매칭 규칙 중 명시도는 쉼표로 구분된 4개의 값인 a, b, c, d을 기반으로 각 규칙에 대해 계산됩니다. a는 인라인 스타일 여..
프론트엔드 성능 최적화 : layout thrashing 피하기 with requestAnimationFrame requestAnimationFrame API는 왜 중요한가요? 불필요한 레이아웃을 피하는 방법과, 불가피하다면 성능 영향을 줄이는 방법을 알아봅니다. 아래 글과 이어서 보면 좋습니다. https://itchallenger.tistory.com/838 브라우저의 이벤트 루프와 렌더링의 관계에 대해 알아보자 브라우저의 이벤트 루프와 렌더링은 어떤 관계가 있을까요? 원문 링크 : https://xnim.me/blog/javascript-browser-event-loop-layout-paint-composite-call-stack https://xnim.me/blog/javascript-browser-event-loop-layout-paint-composite-c itchallenger.tistory.com ..
개발자 관점에서 Next13 간단히 살펴보기 파이어십 형닙의 유투브 영상을 보고 정리한 내용입니다 : https://www.youtube.com/watch?v=_w0Ikk4JY7U 10월 26일에 NEXTj.js 13 버전이 발표되었는데요, 말 그대로 기존 튜토리얼들을 쓸모없게 만들 정도의 완벽한 멘탈 모델의 전환입니다. 우리는 새로운 패러다임을 받아들일 시간이 되었습니다. ... JS와 프레임워크 악몽만 빼고요. Turbopack 웹팩 개발자가 vercel에서 러스트로 작성했으며 중복 연산을 방지해주는 터보레포 솔루션과 결합하여 웹팩보다 700배, vite보다 10배 빠르답니다. 에반 유는 어느정도 패배를 승복하는 느낌입니다. vite를 많이 써본건 아니지만 HMR이 씹히는건 꽤 느껴졌는데, 이는 에반유도 인지하는 부분이더라구요. HMR 면에선 ..
[1일 1 알고리즘] 프론트엔드 JS 알고리즘 문제풀이 : 배열 평탄화(flatten) 임의의 레벨로 중첩되어 있는 배열을 평탄화하여 단일 중첩하는 알고리즘을 구해봅시다. 문제 예상 출력 // Single-level arrays are unaffected flatten([1, 2, 3]); // [1, 2, 3] // Inner arrays are flattened into a single level flatten([1, [2, 3]]); // [1, 2, 3] flatten([ [1, 2], [3, 4], ]); // [1, 2, 3, 4] // Flattens recursively flatten([1, [2, [3, [4, [5]]]]]); // [1, 2, 3, 4, 5] 문제 풀이 전에 명확화 할 것 배열에는 어떤 타입의 데이터가 포함되어 있나요? 일부 접근 방식은 특정 데이터 타입..
[번역] Idiomatic Redux: The Tao of Redux, Part 1 - Implementation and Intent 리덕스를 올바르게 사용하는 방법을 배워봅시다. 1편에서는 리덕스의 구현과 그렇게 구현한 의도를 다룹니다. 2편 링크 : https://itchallenger.tistory.com/687 [번역] Idiomatic Redux: The Tao of Redux, Part 2 - Practice and Philosophy 실무에서의 리덕스의 활용방법과 리덕스의 철학에 대해 좀 더 자세히 알아봅시다. 1편 번역 : https://itchallenger.tistory.com/685 원문 : https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-r.. itchallenger.tistory.com 원문 : https://blog.isquaredsoftwar..
React query의 tracked-query와 개방 폐쇄 원칙 https://github.com/TanStack/query/pull/1578 Feature/use tracked query by TkDodo · Pull Request #1578 · TanStack/query I made a first POC of what we discussed here: #1554 I tried it out in the simple example and it worked fine - just looks too easy to be true. Am I missing something obvious? Apart from: tests (no... github.com 리액트 쿼리에는 tracked-query라는 기능이 있습니다. 우리가 해당 기능이 있는지 없는지 아는가에 관계없이, 좌측 구..
2021년 하반기 야놀자 FE직무 경력공채 1차면접 후기 야놀자 | 여행의 모든 것, 한 번에 쉽게 (yanolja.com) 야놀자 | 여행의 모든 것, 한 번에 쉽게 국내 호텔 모텔 펜션/풀빌라는 물론 레저/액티비티에 해외 숙소까지 모두 초특가! 지금 야놀자로 최대 80% 할인받으세요. www.yanolja.com 야놀자 2021년 하반기 경력공채 1차 면접을 보았다. 일단 결과를 먼저 말하자면 탈락이다 원격으로 3대 1로 진행되었는데 순서는 다음과 같다. 1. 장표로 프로젝트를 설명하고, 2. 해당 프로젝트에 대한 상세한 질문 3. 기술면접 4. 코드리뷰 일단 프로젝트에 대해서는 실제 서비스를 운영하며 겪을만한 문제 및 트러블슈팅 방안에 대해 많이 질문한다. 또한 사용한 기술들에 대해서도 꽤 상세한 질문이 들어오기에, 그냥 사용한 수준 혹은 클론코딩이나 해..