반응형 배열4 배열 객체 메서드 sort(), filter(), map() 기초 정리 배열 객체 메서드 sort(), filter(), map() 기초 정리 지난 포스팅에서 배열객체 내장 함수인 sort() 메서드를 다루고 정리를 했습니다. sort() 메서드를 이용해서 문자열을 정렬하거나 숫자를 정렬하는 방법을 살펴보았습니다. sort() 메서드로 상품 정렬 기능 만들기 sort() 메서드로 상품 정렬 기능 만들기 sort() 메서드로 상품 정렬 기능 만들기 지난 포스팅에서는 서버에서 Data를 받아 온 후, 브라우저 화면에 반복문을 돌며 뿌려주는 것에 대해서 공부하고 정리해보았습니다. 프론트단 구성에서 굉 kincoding.com 자바스크립트에서는 배열(Array)을 다루는데 있어서 sort() 이외에도 여러 유용한 메서드들이 존재합니다. 그 중에서도 가장 자주 사용되는 메서드로는 s.. 2023. 2. 26. 서버에서 받은 데이터를 forEach() 이용해서 UI 반복 생성하기 서버에서 받은 데이터를 forEach() 이용해서 UI 반복 생성하기 이전까지 2~3개의 포스팅을 통해서, Javascript를 이용해서 동적으로 UI를 생성하는 과정을 정리해왔습니다. 기초적인 DOM 조작 및 Data 핸들링에 코딩 근육이 붙었으니, 이번에는 서버에서 받아 온 Data를 이용해서 좀 더 코딩스럽게 구현해보는 과정을 정리해보려고 합니다. 서버에서 Data를 내려 받은 후 해당 데이터를 이용해서 아래아 같은 UI를 동적으로 만들어보려고 합니다. NETFLIX 비슷한 OTT 채널이라고 가정해봅시다. 좀비 영화만 주구장창 틀어주는 채널, ZomFLIX. 아주, 흥미진진하죠? 우선, 서버에서는 이런 정보를 전달 받았다고 가정해봅시다. const zombies = [ { id: 0, thumb: .. 2023. 2. 23. Array 객체 메서드 splice() vs. slice()의 차이점 Array 객체 메서드 splice() vs. slice()의 차이점 이전 포스팅에서 배열(Array)과 객체(Object)에 대해서 정리해보았습니다. pop()이나 push() 등 단순동작을 하는 간단한 메서들은 쉽게 이해가 되는 반면, splice()라는 녀석은 왠지 결이 좀 다르게 느껴졌을 것입니다. 영어 단어 splice는 밧줄이나 필름 따위를 서로 꼬거나 이어 붙이는 경우에 사용하는 단어입니다. 영화 시네마 천국 같은 곳에서 가위로 컷된 필름 조각들을 이어 붙이는 장면이 나올텐데요, 그런 행위를 splice라고 합니다. 자바스크립트 배열의 splice() 메서드는 기존의 배열을 변경하며, 요소를 추가, 삭제, 교체하는 작업을 수행합니다. 이를 통해 배열을 유연하게 조작할 수 있다는 큰 장점을 가.. 2023. 2. 18. JavaScript의 배열(Array) 및 객체(Object) 기초 정리 JavaScript의 배열(Array) 및 객체(Object) 기초 정리 이전 포스팅에서도 예제를 다룰 때 종종 등장했지만, JavaScript 작업 시, 종종 데이터들을 하나씩이 아니라 한군데로 집합시켜서 모은 형태로 핸들링하고 처리해야 하는 경우가 필연적으로 발생합니다. 이와 같은 경우의 데이터 모음을 이라고 부르는데요, 데이터 컬렉션을 저장하고 조작하는 가장 일반적인 JS의 두 가지 방법은 과 입니다. 특히나 반복문(Loop)과 만나면 정말 막강해지게 되는 것이죠. 배열이나 객체를 핸들링할 때 반복문은 찰떡궁합입니다. 이번 포스팅에서는 배열 및 객체를 생성하는 방법, 항목을 추가 및 제거하는 방법, 해당 값에 액세스하는 방법을 포함하여 JavaScript에서 배열 및 객체를 다루는 기초적인 내용을 .. 2023. 2. 17. 이전 1 다음 반응형
