오늘도 디벨롭✨ 오늘도 디벨롭✨

🌱 API로 필터링된 데이터를 받아오는 기능을 구현 중에 쿼리 스트링값을 확인하는 과정에서 이중 배열(중첩 배열)을 마주하게 되었다. 1차원 배열로 어떻게 평탄화를 시킬 수 있을지 찾아보다가 flat()이라는 메서드를 알게 되었다. 덕분에 손쉽게 원하는 형식의 데이터를 얻을 수 있었다. 📑 Array.prototype.flat() ? Array 인스턴스의 flat() 메서드는 모든 하위 배열 요소가 지정된 깊이까지 재귀적으로 연결된 새 배열을 생성합니다. - MDN 사용 방법은 아래와 같은데, 옵션으로 depth를 넣어주면 원하는 깊이만큼 평탄화가 가능하다! flat() flat(depth) ⚠️ flat()은 ECMAScript 2019(ES10)에 새롭게 추가된 메서드로, 현재 Opera Mini와 ..

🏔️ 티코드 스터디 소개- 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디- 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 👾  문제상황이미지 데이터를 대량으로 받아오는 페이지에 접속한다고 가정해 보자.예시처럼 좋은 화질의 이미지를 제공할수록 데이터의 용량은 커지고, 이미지를 받아오는 시간 또한 증가하게 된다.이에 따라 사용자는 이미지가 모두 받아와질 때까지 하염없이 빈 화면을 보며 기다려야 하는 상황을 마주하게 될 것이다. 사용자가 보고있는 화면(뷰포트)에 보이는 이미지만 먼저 로드되어 보여진다면 사용자 경험을 더 향상시킬 수 있지 않을까? 이 때 사용할 수 있는 최적화 기법 중 하나로 이미지 지연 로딩(Image Lazy..

🏔️ 티코드 스터디 소개 - 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디 - 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 👾 문제상황 검색어를 입력하면 API 요청을 통해 검색 결과를 받아오고 있다고 가정해보자. 엔터없이 검색어를 적을 때마다 일치하는 결과 여부를 보여주려면 onChange 이벤트가 사용자의 입력을 실시간으로 체크하고 있어야한다. 이때 문제는 한글자씩 입력할 때마다 API 요청이 들어가는데에 있다. 만약 대규모 서비스에서 이런 불필요한 이벤트가 동시다발적으로 발생하게 되면 어떻게 될까? 서버에 쿼리를 요청하는 횟수가 증가하면서 서버 비용과 자원 소모가 크게 증가하게 될 것이다. 이러한 문제는 사용자의 요청 ..

🤔 React 연습하려고 만들었던 투두 리스트에 오늘 날짜와 요일을 보여주고 싶었다. 날짜를 원하는 포맷으로 변경하려면 Date() 메서드를 사용해야 함은 알고 있었는데, 변환하기 꽤나 번거로웠던 기억이...⭐️ 다행히 toLocaleDateString() 메서드가 기억나서 쉽게 원하는 포맷으로 변환할 수 있었다. 📑 사용법은 어디서 볼 수 있는가? mdn과 devdic(개발자 사전) 사이트에서 자세한 내용을 확인할 수 있다. (좋은 사이트 하나 또 발견하게 되서 행복하다) 🧐 사용해보기 ⚠️ toLocaleDateString 메서드는 Date 객체가 생성된 시점의 날짜 부분을 현지 사용 언어에 맞는 문자열 형식으로 반환한다. 다만, toLocaleDateString이 호출될 때마다 현지 언어에 대한 데..

📝 투두리스트에 사용할 버튼 아이콘으로 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..