자바스크립트

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. MDND에서 가져온 구조 분해 할당에 대한 설명이다. 말 그대로 배열이나 객체를 분해해서 값을 가져올 수 있는 걸 말한다. const animals = [ { name: "cat", sound: "야옹" }, { name: "dog", sound: "왈왈" } ]; animals이라는 배열이 있다. 동물의 이름과 소리에 대한 정보를 가진 객체가 2개 있다. animals 배열을 분해해보자! import animals from "./data"; const [cat, dog] = animals; console.log(cat); console.log(dog); 우선 animals ..

import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( 0 + , document.getElementById("root") ); 오른쪽과 같은 UI가 있다. + 버튼을 누를 때마다 숫자가 하나씩 올라가게 만들어 보자! 왼쪽과 같은 html 코드로는 이 기능을 만들 수 없다. 증가되야하는 숫자를 변수로 만들고 +버튼이 눌릴 때마다 숫자를 올려주는 메서드를 만들면 될 거 같다! import React from "react"; import ReactDOM from "react-dom"; var count = 0; function increase() { count++; console.log("클릭!"); } ReactDOM.re..

이전 글(2022.03.30 - [Programming/React] - 컴포넌트로 반복 작업 줄이기!!)에서 반복적인 html을 리액트의 컴포넌트를 통해서 간편화 하는 방법을 알아보았다. 하지만 3개의 연락처를 보여주기 위해서 Contact 컴포넌트를 3번 만드는 작업도 역시나 반복적이다. 그러면 어쩐단 말이야! 이번에는 map()을 이용해서 반복되는 코드를 확 줄여보자! ReactDOM.render( 연락처 , document.getElementById("root") ); 위 코드는 지난번에 작성했던 3개의 연락처를 뿌려주는 코드이다. 같은 결과물을 만드는 거지만 컴포넌트와 map()를 이용하면 아래와 같이 상당히 간단하게 결과물을 만들 수 있다.!!!! import React from "react";..

Find() find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다. 이전 글(ES6 Map, Filter, Reduce 기능을 알아보자)에서 사용한 filter()는 조건에 부합하는 모든 요소들을 가져왔다. 그러면 fin()는 어떻게 다를까? MDN설명에서 주목해야할 부분은 첫 번째 요소의 값을 반환한다는 것이다. 글로 설명보다는 코드를 한번 봐보자잉 먼저 이전 글처럼 numbers 배열을 만들어 주었다. var numbers = [3, 56, 2, 48, 5]; 그리고 numbers에서 10보다 큰 요소를 find 메서드를 통해서 찾아보았다. const newNumbers = numbers.find(function(num)..

var numbers = [3, 56, 2, 48, 5]; 위와 같은 숫자를 가지고 있는 배열이 있다. 배열의 각 요소를 두배(X2) 해주려면 어떻게 해야 할까? 기존의 자바스크립트로는 forEach를 사용해서 문제를 해결할 수 있다. //forEach var newNumbers = []; function double(x) { newNumbers.push(x * 2); } numbers.forEach(double); newNumbers라는 비어있는 배열을 만들어주었다. 이곳에 x2 되는 숫자들이 들어간다. 그리고 double이라는 함수를 만들어서 두배 만들기 기능을 수행하게 했다. 마지막으로 forEach에 double함수를 넣어 numbers의 모든 요소를 x2 해주었다. 그리고 아래와 같은 결과 나왔..

웹문서를 만드는 경우, 문서가 로드되었을때를 기점으로 문서를 초기화하고,각종 설정을 부여하는 것은 빈번한 일입니다. 이 시점에 접근하기 위해 사용되는 이벤트들에 대하여 알아봅니다. 정은경 질병관리청 중앙방역대책본부장은 8일 코로나19 정례브리핑에서 "영국과 스코틀랜드에서 실제 접종 후의 효과에 대한 평가 데이터들이 발표가 되면서 65세 이상의 접종의 유효성에 대한 근거가 좀 더 추가됐다"며 "이번주 정도에 예방접종전문위원회를 열어 해당 내용을 심의할 예정"이라고 밝혔다. 웹문서를 만드는 경우, 문서가 로드되었을때를 기점으로 문서를 초기화하고,각종 설정을 부여하는 것은 빈번한 일입니다. 이 시점에 접근하기 위해 사용되는 이벤트들에 대하여 알아봅니다. 이름 연락처 사용동의여부 동의 동의안함 자주가는 사이트 ..

html css javascript jquery bootstrap ajax jsp(java server page) spring framwork 위치 선택자

인접선택자 1 인접선택자 2 인접선택자 3 인접선택자 4 인접선택자 5 인접선택자 6 인접선택자 7