FrontEnd/JavaScript

FrontEnd/JavaScript

[JavaScript] sort 함수를 이용한 데이터 정렬

자바스크립트에서 배열을 정렬할 때는 보통 sort() 메서드를 활용한다. sort는 원본 배열을 직접 변경하며 정렬된 원본 배열을 반환한다. Array.prototype.sort(compareFn?: (a: T, b: T) => number): this 즉, 배열.sort([비교함수])의 형태로 사용한다. 비교함수는 보통 요소를 비교해 1, 0, -1을 반환하는 함수이다. 양수를 반환하는 경우 두 요소의 순서를 변경하고, 음수나 0을 반환하면 순서를 유지한다. 두 가지 이상의 기준으로 sort할 때 동일한 값으로 판단되는 0은 유용하다. 0인 경우 다른 값을 기준으로 다시 비교할 수 있기 때문이다. MDN에 나와 있는 sort의 compareFn 정렬 기준에서 확인할 수 있다. 따라서, 오름차순의 경우 ..

FrontEnd/JavaScript

[JavaScript] Vanilla JS 과제 테스트 풀이 방향

과제 테스트를 접하며, 2023 데브 매칭 상반기에 참여해 처음으로 과제 테스트를 풀어보았다. 예상치 못한 구조로 나오기도 했지만 자바스크립트에 대한 복습이 필요하다는 생각이 들어 과제 테스트 풀이 방향을 찾아보고 정리하는 시간을 가지게 되었다. 자바스크립트 과제 풀이계에서 정석과 같은 고양이 사진첩을 바탕으로 정리하였는데, 익숙한 내용도 있었지만 캐싱이나 뒤로 가기 등의 선택적으로 구현해야 하는 기능은 새로 배울 수 있어 유용했다. 커넥투 과정에서 페어 프로그래밍을 통해 구현했던 내용들을 복습하고 바닐라 자바스크립트로 구현하는 힘을 길러야겠다는 생각이 들었다. 이때까지는 구현 시에 주로 axios를 사용했는데 fetch도 사용해보면서 차이점을 알고 사용할 수 있게 되었다. 이전에는 리액트와 유사하게 구..

FrontEnd/JavaScript

[프로그래머스 FE 2023 Dev-Matching] 인사 정보 SPA 리뉴얼(History API, 자바스크립트 import, localStorage 사용)

프로그래머스 2023 Dev-Matching을 준비하면서 과제 테스트를 풀어보게 되었다. 풀이를 하는 과정에서 History API나 localStorage사용 등 배웠거나 헷갈렸던 부분을 정리해보았다. todolist를 만들면서 했던 데이터를 추가, 삭제, 수정을 복습하고, 리액트와 자바스크립트의 차이를 생각해볼 수 있는 시간이었다. History API : 페이지 이동 없이 주소 변경하기 history.pushState(state, title[, url]) // url로 주소 변경하는 함수 changeURL(url) { history.pushState("", "", url); } 리액트에서 페이지 전환 시 사용하는 react-router는 history.push 를 통해 브라우저 주소(url)를 변경..

개발자 김비숑
'FrontEnd/JavaScript' 카테고리의 글 목록