frontend

React

[Frontend] React를 이용해 API 배열 형태로 데이터 던져주기

데이터를 배열 형태로 API에 보내줘야 하는 요구사항을 프론트엔드에서 처리하는 방법입니다. API URL, 매개변수, 변수 명은 모두 블로그 예시용으로 수정한 것입니다. 실무에서는 더 직관적이고 명확하게 작성하고 있습니다. 백단의 요구사항 API URL : api/event/something 뿌려줘야 할, 던져줘야 할 또는 파싱해야 할 등등의 정보를 백단에서 알려주겠죠. 지금의 경우는 아래와 같은 포맷으로 데이터를 던져줘야 합니다. 해당 형식으로 데이터를 던지고 리턴값이 true면 정상 작동, false면 장애 처리 [ { "id": 12, "createDate": 20210305 }, { "eventId": 23, "createDate": 20210404 }, { "eventId": 25, "creat..

Javascript

자바스크립트 배열 내장함수 forEach, map, reduce

for 배열 내장함수는 아니지만 반복문을 이용하여 배열에 접근하는 가장 쉬운 방법입니다. 제곱근을 구하는 함수를 for, forEach, map 배열 함수를 이용하여 작성하여 각자 코드를 비교해 보겠습니다. const arr = [1, 2, 3, 4, 5, 6, 7, 8]; const squared = []; for (let i = 0; i < arr.length; i++) { squared.push(arr[i] * arr[i]); } forEach for와 코드 라인 수는 같지만 for는 반복문을 돌리기 위해 임시 변수 i를 할당했습니다. 지금처럼 테스트하는 경우엔 문제가 되지 않지만, 코드의 양이 많아지는 큰 프로젝트에는 가독성을 떨어 뜨립니다. 또한 forEach는 콜백 함수의 첫번째 인자로 각 값..

개굴이 dev
'frontend' 태그의 글 목록