IT 스터디17 손쉽게 Table의 데이터를 객체 리스트화 해보자. (자바스크립트) 프론트엔드 개발을 하다보면 DB로부터 데이터를 가져와서그 데이터를 테이블에 출력을 하고 수정한 데이터를 수정 전의 데이터와 비교해서다시 DB에 저장하는 일이 많은 편이다. 그러므로새로운 데이터의 추가 뿐만아니라, 수정이 이루어진 테이블데이터를 어떻게 다시 DB데이터로 저장하기 위한 형태로변화시킬지에 대해서는 고민이 많았다.서버로부터 데이터를 전달 받을 때리스트의 객체형태로 전달 받기 때문에화면단에서도 서버로 데이터를 전달 할때 리스트의 객체형태로 만드는 것이자바스크립트에서 손쉽게 실현이 가능할까가 궁금했다. 그러던 차에, 큰 마음을 먹고기존의 낡은 방식에서 벗어나서 자바스크립트가 제공하는API를 활용해보기로 했다. (기존에 있던 소스코드의 내용들이 너무 원초적인 내용이었으므로)const tbody = .. 2024. 11. 18. 자바스크립트 툴팁 위치를 정하는게 머리 아플때 툴팁 위치를 offsetLeft와 offsetTop만으로 계산하는 방법offsetLeft와 offsetTop을 사용하면 아이콘의 위치를 부모 요소내에서 상대적으로 계산할 수 있다. 부모 요소가 position: relative로 설정되어 있어야 툴팁을 정확히 배치할 수 있다.1. 부모 div는 position을 설정부모 div를 기준으로 툴팁을 표시할 아이콘의 상대적 위치를 offsetLeft, offsetTop으로 계산하는 경우, 부모 div는 position: relative 여야 한다.이유는 아래와 같다.1) offsetLeft, offsetTop의 상대적인 값을 부모를 기준으로 하기 위해서다.2) 툴팁의 position이 absolute임에도 불구하고 부모의 position을 relative로 설.. 2024. 11. 16. 자바의 sort를 정리 정렬 메소드인 sort와 sorted의 사용 방법과 기준을 요약정렬 메소드 요약메소드대상기본 정렬사용자 정의 정렬 특징Arrays.sort배열오름차순Comparator 사용 가능원시 타입에 최적화된 성능Collections.sortList 컬렉션오름차순Comparator 사용 가능리스트에 특화된 정렬 메소드Stream.sorted스트림오름차순Comparator 사용 가능원본 데이터를 변경하지 않고 새로운 스트림 생성 1. Arrays.sort대상: 배열 (int[], String[], Object[] 등)용도: 배열의 요소를 정렬할 때 사용.정렬 방법: 기본적으로 오름차순으로 정렬하지만, Comparator를 사용하여 사용자 정의 기준으로 정렬할 수 있음.특징:원시 타입 배열의 경우 최적화된 정렬 알고리.. 2024. 11. 16. 자바에 난무하는 compare의 정리 Integer.compare, Comparator.comparing 등 여러 비교 관련 메소드와 Arrays.sort, Collections.sort, Stream.sorted 등의 정렬 메소드를 함께 요약사용 기준 요약메소드사용 대상주 용도예시 사용법Integer.compare기본 자료형 int, double 등두 숫자 비교Integer.compare(a, b)Comparator.comparing객체와 객체 필드객체의 특정 필드에 따라 정렬Comparator.comparing(Person::getAge)Comparator.reverseOrder()Comparable 구현 클래스내림차순 정렬Comparator.reverseOrder()Comparator.naturalOrder()Comparable 구현 .. 2024. 11. 16. 이전 1 2 3 4 5 다음