🙋🏻React Query 리액트 쿼리 장점 안녕하세요 TriplexLab 입니다. React Query에 대한 이야기를 다시한번 해보도록 하겠습니다. (지난번에 트러블슈팅 글을 작성했었는데 링크 참고하세요) 최근에 nomadcoder에서 "React JS 마스터클래스"라고 하는 인강을 듣고 있는데 여기서 나오는 이야기가 다음 밑에있는 코드블럭을 React Query를 쓰면 자동으로 해준다. 이 모든 것들을 우리를 위해 숨겨준다. 라고 하고 있습니다. function Coins() { useEffect(() => { (async () => { const response = await fetch("https://api.coinpaprika.com/v1/coins"); const json = await res..

💡 CSS에서 데이터 속성 사용하기 안녕하세요 TriplexLab 입니다. 오늘은 css에서 데이터 속성 사용는 방법에 관해서 살펴보도록 하겠습니다. HTML 문법 HTML 태그에 data-로 시작하는 속성을 사용해서 어떠한 데이터든 몰래 담아놓을수 있습니다. ... CSS 에서 접근하기 data- 속성은 순 HTML 속성이기 때문에 CSS에서도 접근할 수 있습니다! 다음과 같이 접근해서 데이터 값을 가져올수도 있습니다. (유용하게 사용할수 있을것 같네요ㅎㅎ) article::before { content: attr(data-columns); // 3 } article::before { content: attr(data-index-number); // 12314 } article::before { con..

🥘 점심 메뉴를 내 맘대로 정렬하기 안녕하세요 TriplexLab입니다. 오늘은 2가지에 관해서 살펴보도록 하겠습니다. 1) 오늘은 점심 메뉴의 data를 내 맘대로 정렬해서 조회하기 (배열의 요소를 유용하게 활용하는 방법) 2) fetch함수를 사용해서 서버와 비동기 통신 하기 new Promise객체와 fetch함수를 같이 사용되는 경우는 흔하지 않습니다. 그래서 이번에 정리했습니다 :) Promisify 검색하면 관한 정보를 찾을수 있습니다. 자바스크립트 코드를 보시면 아시겠지만, 정렬하는 규칙? 대로 함수 별로 묶어놨습니다.(data정렬 규칙) 서버와 비동기 통신 같은 경우에는 Promise 객체는 항상 결과를 줄 수 있는 공급자(Provider)이고, 그것의 then 메소드는 그 결과를 소비하는..