Dev Record

들어가며 카카오뱅크 인재영입 페이지를 보면, 위와 같이 목록을 스크롤 함에 따라 강조되는 키워드가 다름을 알 수 있습니다. 스크롤에 따른 인터랙션은 웹에서 자주 사용되는 기능 중 하나로, 이번 포스트에서는 React에서 목록의 키워드를 스크롤에 따라 강조할 수 있는 기능을 구현해 볼 것입니다. 📌 완성된 결과를 미리보면 다음과 같습니다. 스크롤 이벤트란? 스크롤 이벤트는 웹 페이지의 스크롤바가 움직일 때마다 발생하는 이벤트입니다. JavaScript에서는 이를 감지하고, 특정 함수나 동작을 실행하는 데 활용할 수 있습니다. window.scrollY란? window.scrollY는 웹 페이지의 상단부터 현재 보이는 화면의 상단까지의 거리(픽셀 값)를 반환하는 속성입니다. 즉, 이 값은 사용자가 얼마나 많..

* 본 글은 Figma의 'How Figma's multiplayer technology works' 글을 키워드 중심으로만 간략히 살펴보고 이것저것 적은 내용입니다. 원문의 완벽한 번역글이 아니므로, 자세하고 정확한 내용은 아래 본문을 보시면 좋을 것 같습니다! How Figma’s multiplayer technology works A peek into the homegrown solution we built as the first design tool with live collaborative editing. www.figma.com 들어가며 Figma에서 멀티플레이어 기능을 개발하기 시작했을 때, 그들은 자체적인 솔루션을 개발하기로 결정했다고 한다. 다른 디자인 도구에서는 멀티플레이어 기능을 제공..

공부한 내용을 기록합니다. 잘못된 내용은 댓글 달아주시면 감사하겠습니다. 프로젝트에서 Next.js 사용하다 클라이언트 사이드 렌더링과 서버 사이드 렌더링에 대한 정리가 필요하겠다 싶어 글을 남깁니다. 참고로 이 글은 각 라이브러리, 프레임워크 동작에 대한 깊은 내용은 없습니다. 렌더링 방식에 대한 큰 그림을 그리기 위해 정리한 글이니 이 점 참고해주시면 감사하겠습니다. frontend server, backend server 먼저 웹에서의 각 구성요소들이 어떤 상호작용을 갖는지 전체적인 그림을 살펴봅시다. 일단 서버(server)는 네트워크를 통해 클라이언트에게 자원을 제공하는 컴퓨터를 의미하고, 어떤 대상이 요청을 보내면 요청에 대한 응답을 넘겨주는 모든 주체를 서버(server)라고 합니다. 웹 환..