본문 바로가기

전체 글

 (176)
[매일메일] 디바운스와 쓰로틀, 무한 스크롤? (FE.250108) (개발자 강화/프론트엔드) 2025. 1. 14. 22:10 디바운스(Debounce)와 쓰로틀(Throttle)은 이벤트 핸들러가 너무 자주 실행되지 않도록 조절하는 기법 Debounce: 이벤트가 연속적으로 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 지나야 이벤트 핸들러 실행검색창에 사용자가 검색어를 입력할 때, 사용자가 입력을 멈춘 후 일정 시간이 지나면 검색 요청을 보냄Throttle: 일정 시간 간격 동안 발생한 이벤트 중 첫 번째 또는 마지막 이벤트만 처리함이벤트가 계속해서 발생해도 설정된 시간 동안은 한 번만 이벤트 핸들러가 실행됨사용자가 연속 광클을 시도할 경우, 일정 간격 내 한 번만 요청을 보냄무한 스크롤 구현 시 유리한 방법은?쓰로틀: 스크롤이 하단에 위치하게 된 순간 즉시 추가 데이터 요청을 수행해서 자연스러운 스크롤 경험을 제공함디..
[매일메일] 사용자가 웹사이트에 접근하면 발생하는 일?(FE.241225/BE.250110) (개발자 강화/프론트엔드) 2025. 1. 14. 21:52 프론트엔드 관점백엔드 관점[1단계] DNS 조회(DNS Lookup): 도메인을 IP 주소로 변환- 브라우저가 캐시된 DNS 기록을 확인함- 처음 접속하는 도메인인 경우 로컬 DNS 서버에 요청함- 도메인을 IP 주소로 변환함- 어플리케이션 계층(7th 계층)에서 이루어짐[2단계] TCP(Transmission Control Protocol) 연결- 브라우저는 서버와 3-way handshake를 수행해 TCP 연결함1. 브라우저가 SYN 패킷 보냄2. 서버가 SYN-ACK 패킷 보냄3. 브라우저가 ACK 패킷 보냄- 브라우저는 서버와 통신을 시작함- HTTP는 TCP/IP 기반으로 작동, TCP 3-Way Handshake수행- 전송 계층(4th 계층)에서 이루어짐[3단계] HTTP Request- 웹..
[매일메일] React에서 index를 key값으로 사용하면 안되는 이유(FE.250109) (개발자 강화/프론트엔드) 2025. 1. 14. 21:20 React의 key란 무엇인가?리스트를 랜더링 할 때 엘리먼트를 구분하는 고유 식별자 역할어떤 항목이 변경(추가, 삭제, 정렬 변경)되었는지 효율적으로 파악하고, 필요한 부분만 다시 렌더링함React의 index란?배열을 순회하며 리스트를 랜더링할 때(.map), 현재 요소가 몇 번째인지 나타내는 정수 값const fruits = ['Apple', 'Banana', 'Orange'];const fruitList = fruits.map((fruit, index) => { return ( {fruit} (index: {index}) );});간단하게 구현하는 경우에는 이처럼 key에 index값을 쓰곤 하는데, 사실 이러면 문제가 생길 수 있다. React의 리스트에서 index를..

티스토리툴바