Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned 배열 고차 함수 고차함수는 함수를 인수로 전달받거나 함수를 반환하는 함수 배열 고차 함수란? 고차함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다. JavaScript에서 고차 함수는 하나 이상의 함수를 인수로 받거나 함수를 결과로 반환하는 함수이다. 이러한 함수를 배열과 함께 사용하면 배열 고차 함수라고 한다. Array.prototype.sort mutates - 원본 배열을 직접 변경하며 정렬된 배열을 반환 const numbers = [3,1,2]; numbers.sort(); console.log(numbers); // [1,2,3] sort 메서드의 기본 정렬 순서는 유니코드 포인트의 순서를..

🎯목적 : Youtube API 활용 (비동기)서버통신 : React-Query 적용 response 로 UI구성 🤢 트러블 슈팅 : filter 메서드 문제 해결 1. react query Youtube API 활용에 있어 서버통신의 생산성을 위해 react-query 적용을 기획했다. api.js에서 데이터를 가져오는 함수를 관리하는 파일을 따로 분리했고 중복되는 url 과 api key는 따로 변수선언을 해주었다. 필요한 component에서 react-query를 연결해 위 함수를 사용하도록 import 했다. 별칭을 붙여 데이터의 목적을 정확하게 명시했다. 2. UI 생성 위에서 react-query로 가져온 AllPlayList 라는 배열형 데이터는 map 메서드로 하나씩 돌며, 이미지태그의 ..

❤️‍🔥TIL : Today I Learned 🎯목적 : CRUD : Read API 추가, onSnapshot API 활용하기 1. Firestore 의 DB 가져오기 저번 포스팅에서 Creat API를 만들어 Firestore에 "todos" 라는 db를 넣을 수 있었다 이번에는 가져와서 보여줘야한다! firebase API 활용하자! 선택지는 2가지다 getDocs API onSnapshot API getDocs로도 가져올 수 있겠지만 우리는 실시간으로 변동이 생기면 다시 데이터를 가져와야 하므로 state 처럼 사용해야 한다. 그래서 onSnapshot API 를 활용했다! import { onSnapshot } 으로 api를 가져온다 useEffect를 사용하여 컴포넌트가 마운트시 곧장 Read..

❤️‍🔥TIL : Today I Learned https://youtu.be/0-aYlQErLa8 작업 컴포넌트 구조 App.jsx/ pages/ Header.jsx Input.jsx TodoList.jsx App.jsx 메인이 되어 하위 컴포넌트를 모두 가지고있는 컴포넌트, 기본 state를 (데이터 테이블)갖고 있게 하여 하위 컴포넌트에 state를 props 전달하였다 (컴포넌트 폴더) pages/ Header.jsx children 활용하여 하위 컴포넌트에 text 를 내려주는 컴포넌트 Input.jsx input 박스의 변화(타이핑)를 감지하여 onChange 함수를 실행하게 하고, 감지한 값을 setState로 넣는다. 여기서 어려웠던 부분은 buttonClickSubmit 이였다. 새로고침 ..

❤️‍🔥TIL : Today I Learned 배열 메서드 forEach() map() filter() reduce() forEach() 오직 Array 배열에서만 사용 가능한 메서드 (ES6부터는 Map, Set 등에서도 지원) forEach 구문의 인자로 callback 함수를 등록할 수 있으며, 배열의 각 요소들이 반복될 때 callback 함수가 호출 callback 함수에서 배열 요소의 인덱스와 값에 접근가능 (아래 코드에서는 item 에 해당) array의 길이(length)가 5라면 1, 2, 3, 4, 5 까지 순서대로, 하나씩 접근하여 반환 const items = ['사과', '바나나', '복숭아']; items.forEach(function(item) { console.log(item..