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