홈
-
[스터디기록01/티코드(React)] 디바운싱(Debouncing) 구현방법 배우기조각조각/티코드 스터디(React) 2024. 3. 2. 22:59
🏔️ 티코드 스터디 소개 - 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디 - 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 👾 문제상황 검색어를 입력하면 API 요청을 통해 검색 결과를 받아오고 있다고 가정해보자. 엔터없이 검색어를 적을 때마다 일치하는 결과 여부를 보여주려면 onChange 이벤트가 사용자의 입력을 실시간으로 체크하고 있어야한다. 이때 문제는 한글자씩 입력할 때마다 API 요청이 들어가는데에 있다. 만약 대규모 서비스에서 이런 불필요한 이벤트가 동시다발적으로 발생하게 되면 어떻게 될까? 서버에 쿼리를 요청하는 횟수가 증가하면서 서버 비용과 자원 소모가 크게 증가하게 될 것이다. 이러한 문제는 사용자의 요청 ..
-
[🎯투두리스트 React] toLocaleDateString() 메서드로 원하는 날짜, 시간 포맷 구현하기프로젝트 기록/구현 연습 2024. 2. 28. 19:24
🤔 React 연습하려고 만들었던 투두 리스트에 오늘 날짜와 요일을 보여주고 싶었다. 날짜를 원하는 포맷으로 변경하려면 Date() 메서드를 사용해야 함은 알고 있었는데, 변환하기 꽤나 번거로웠던 기억이...⭐️ 다행히 toLocaleDateString() 메서드가 기억나서 쉽게 원하는 포맷으로 변환할 수 있었다. 📑 사용법은 어디서 볼 수 있는가? mdn과 devdic(개발자 사전) 사이트에서 자세한 내용을 확인할 수 있다. (좋은 사이트 하나 또 발견하게 되서 행복하다) 🧐 사용해보기 ⚠️ toLocaleDateString 메서드는 Date 객체가 생성된 시점의 날짜 부분을 현지 사용 언어에 맞는 문자열 형식으로 반환한다. 다만, toLocaleDateString이 호출될 때마다 현지 언어에 대한 데..
-
[🎯투두리스트 React] React 프로젝트에서 fontAwesome 사용하기(fontAwesome ver. 6.5.1)프로젝트 기록/구현 연습 2024. 2. 8. 17:40
📝 투두리스트에 사용할 버튼 아이콘으로 fontAwesome을 사용해야 했다. 자바스크립트에서는 CDN을 쓰면 됐지만, React는 어떻게 해야 하는지 몰랐기에 오늘도 방법을 찾으러 가봅니다. 📑 사용법은 어디서 볼 수 있는가? ✨공식문서✨에서 볼 수 있다. [🏡 공식문서 보러가기] 🛠️ 설치해봅시다. (vscode 터미널) 1. Core Package 추가하기 svg 아이콘을 실행할 수 있는 모든 유틸리티가 포함된 fontawesome-svg-core 패키지를 설치한다. npm i --save @fortawesome/fontawesome-svg-core 2. Icon Package 추가하기 사용하고자하는 아이콘 스타일(solid, regular, brands)에 대한 패키지도 설치해줘야한다. pro p..