분류 전체보기 233

객체 배열 분류 동일 객체 참조 / 객체 복사(Object.assign)

- Object.assign() Object.assign([], data) Object.assign()은 JavaScript에서 객체를 복사하는 메서드입니다. 첫 번째 매개변수는 대상 객체이고, 나머지 매개변수는 복사하고자 하는 소스 객체입니다. Object.assign([], data)는 빈 배열([])에 data 객체의 속성을 복사하여 새로운 배열을 생성하는 코드입니다. []는 빈 배열을 생성하는 것이며, data 객체의 속성들을 복사하여 새로운 배열로 만듭니다. - 예시 전체리스트를 객체의 특정 속성 값에 따라 분류할 때 this.AList.push(data) 데이터를 push하는데 이때 AllList의 객체를 참조하게 됩니다. 그래서 아래에서 children메뉴를 필터링 할 때 BList의 값이 ..

Frontend/javaScript 2023.06.22

vue3 img src 동적 바인딩 (require)

- 문제 컨텍스트 메뉴를 구현하던 중 이미지가 뜨지 않는 문제가 있었습니다. 콘솔 로그를 확인해 보니 정상적으로 불러와진 이미지는 파일명과 확장자 사이에 파일의 내용에 기반한 해시 값이 들어가있었습니다. 이 url을 눌리면 직접 img를 띄울 수 있습니다. *이는 파일의 캐시된 버전을 나타내는 URL입니다. 브라우저는 이 URL을 통해 해당 파일의 최신 버전을 요청하고, 필요한 경우 캐시된 버전을 업데이트합니다. 반면 콘솔로그에 파일을 찾지 못했다는 에러에는 해시값이 빠져 있었습니다. 해시값은 vue에서 자동으로 처리되고 사용자가 제어할 필요 없는데 이게 이루어 지지 않은 것을 보고 src를 주소로 인식하지 못한 것을 확인했습니다. 처음 작성한 코드입니다. {{ subMenu.key }} 번들러는 일반적..

Frontend/vue3 2023.06.16

[javaScript]뽑기 당첨 확률 (누적 확률, 랜덤 뽑기)

// 각 등수별 남은 개수와 총 개수 const prizes = [ { rank: 1, remaining: 2, total: 5 }, { rank: 2, remaining: 1629, total: 4000 }, { rank: 3, remaining: 1965, total: 5000 }, { rank: 4, remaining: 4030, total: 10000 }, { rank: 5, remaining: 4033, total: 10000 } ]; // 등수별 확률 및 누적 확률 계산 const probabilities = prizes.map(prize => prize.remaining / prize.total); const cumulativeProbabilities = probabilities.reduce..

선택자로 요소 가져오기(querySelector, querySelectorAll)

querySelector(): 선택자를 사용하여 첫 번째 일치하는 요소를 가져옵니다. querySelectorAll(): 선택자를 사용하여 모든 일치하는 요소를 가져옵니다. querySelector() querySelector() 메서드는 문서 내에서 특정 CSS 선택자에 해당하는 첫 번째 요소를 반환하는 메서드입니다. 이 메서드는 Document 객체뿐만 아니라 Element 객체에서도 사용할 수 있습니다. 다음은 querySelector() 메서드의 구문입니다: element.querySelector(selector); element: 요소의 하위 요소 중에서 선택할 요소입니다. Document 객체 또는 다른 Element 객체가 될 수 있습니다. selector: 선택할 요소의 CSS 선택자입니다..

Frontend/javaScript 2023.06.14

Java 객체 형변환 (mapper.convertValue)

자바에서 직접 형변환을 할 수 없는 경우가 있습니다. 아래는 예제입니다. @RequestMapping(value = "/convertValueTest", method = RequestMethod.POST) @ResponseBody public HashMap convertValueTest(@RequestBody Map param, HttpServletRequest request) { HashMap result = new HashMap(); try { ObjectMapper mapper = new ObjectMapper(); TestModel testModel = mapper.convertValue(param.get("testModel"), new TypeReference() {}); service.conv..

Backend/JAVA 2023.06.14

JSON.parse() 와 JSON.stringify() 파라미터

기본적으로 JSON.parse() 메서드는 JSON 문자열을 JavaScript 객체로 변환하는데 사용하고 JSON.stringify() 메서드는 JavaScript 객체를 문자열로 변환하는데 사용합니다. 보통 파라미터로 각각 변환 대상인 객체나 문자열만 넣어서 사용했는데 JSON.stringify()를 사용할 때 undefined 값은 JSON에서 지원하지 않는 값이기 때문에 변환 과정에서 제외된다는 것을 알았습니다. 그래서 undefined를 ""(공백)으로 변환 시키기 위해서 JSON.stringify()의 매개변수 중 하나인 replacer을 사용했습니다. JSON.stringify() value: 변환할 JavaScript 객체나 값입니다. 일반적으로 객체를 전달하지만, 배열, 숫자, 문자열, ..

Frontend/javaScript 2023.06.13

동등비교(==), 동일비교(===)

JavaScript에서 동등 비교(==)와 동일 비교(===)는 값의 비교를 수행하는 두 가지 비교 연산자입니다. 이 두 연산자는 값을 비교하는 방식에서 차이가 있습니다. 동등 비교 (==): 동등 비교(==)는 두 개의 피연산자가 같은 값을 가지는지를 비교합니다. 동등 비교는 값이 같은지 여부를 확인하기 전에, 필요에 따라 타입 간의 암시적인 타입 변환을 수행합니다. 이러한 타입 변환으로 인해 서로 다른 데이터 유형을 비교할 수 있습니다. 예를 들어, 숫자와 문자열을 비교하면 JavaScript는 문자열을 숫자로 변환하여 비교합니다. 10 == "10" // true true == 1 // true null == undefined // true false == "" // true 동일 비교 (===):..

Frontend/javaScript 2023.06.07

[python] 10816 숫자 카드 2 (Hash)

문제 숫자 카드는 정수 하나가 적혀져 있는 카드이다. 상근이는 숫자 카드 N개를 가지고 있다. 정수 M개가 주어졌을 때, 이 수가 적혀있는 숫자 카드를 상근이가 몇 개 가지고 있는지 구하는 프로그램을 작성하시오. 입력 첫째 줄에 상근이가 가지고 있는 숫자 카드의 개수 N(1 ≤ N ≤ 500,000)이 주어진다. 둘째 줄에는 숫자 카드에 적혀있는 정수가 주어진다. 숫자 카드에 적혀있는 수는 -10,000,000보다 크거나 같고, 10,000,000보다 작거나 같다. 셋째 줄에는 M(1 ≤ M ≤ 500,000)이 주어진다. 넷째 줄에는 상근이가 몇 개 가지고 있는 숫자 카드인지 구해야 할 M개의 정수가 주어지며, 이 수는 공백으로 구분되어져 있다. 이 수도 -10,000,000보다 크거나 같고, 10,0..

[spring] @RequestParam @RequestBody 차이점

@RequestParam과 @RequestBody는 Spring Framework에서 요청 파라미터를 받는 데 사용되는 어노테이션입니다. @RequestParam 사용법: @RequestParam("paramName") 역할: URL 매개변수를 받아올 때 사용합니다. 예를 들어, ?paramName=value 형태의 URL 매개변수에서 paramName에 해당하는 값을 받아올 수 있습니다. 기본적으로는 요청의 쿼리스트링(또는 폼 데이터)에서 해당 매개변수를 찾아 값을 바인딩합니다. required 옵션을 사용하여 필수 매개변수 여부를 지정할 수 있습니다. 기본적으로는 단일 값을 받지만, List나 배열을 사용하여 여러 값을 받을 수도 있습니다. @RequestBody 사용법: @RequestBody 역할..

Backend/spring 2023.05.25