구조 분해 할당 Destructuring Assignment구조 분해 할당은 객체나 배열의 내부 구조를 분해하여 그 내부의 값을 쉽게 변수로 할당할 수 있는 기능이다.// 배열 구조 분해 할당const numbers = [1, 2, 3];const [one, two, three] = numbers;console.log(one); // 1console.log(two); // 2console.log(three); // 3// 객체 구조 분해 할당const person = { name: "Alice", age: 25};const { name, age } = person;console.log(name); // "Alice"console.log(age); // 25 비구조화 할당 Unstru..
onSubmitevent attribute로써 submit 이벤트로부터 호출 된다.form 태그 내에서 submit 이벤트가 일어나면 새로고침이 되기 때문에 event.preventDefault()로 동작을 중단시켜야한다.const LoginForm = () => { const [values, setValues] = useState({ email: "", password: "", }) const handleChange = (e) => { setValues({ ...values, [e.target.name]: e.target.value, }) } const handleSubmit = (e) => { e.preventDefault() /* POST ..
preventDefault() HTML 요소의 기본 동작을 중지하고 사용자 정의 동작을 수행하고자 할 때 사용한다. 1. 폼 제출 방지 사용자가 form에서 제출을 하기위해 submit 버튼을 누르면 기본적으로 페이지가 새로고침 된다. 이 때 폼 데이터를 서버로 전송하지 않고 JS를 사용하여 데이터를 처리하고자 할 때 preventDefault()로 폼 제출 이벤트를 중지하고 데이터를 처리할 수 있다. document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); // 폼 제출 이벤트의 기본 동작 중지 // 데이터를 수집하고 처리하는 작업 수행 }); * 서버로 전송하는 경우 이처럼 for..
JSON JavaScript Object Notation 일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식 /* example */ { "name": "John Doe", "languages": ["JavaScript", "Python"], "address": { "street": "123 Main St", "city": "Anytown", }, "email": null } fetch() 비동기 함수로 네트워크를 통해 리소스를 가져오는데 사용된다. 일반적으로 서버에서 데이터를 가져오거나 API로부터 데이터를 요청할 때 사용된다. // 기본 구조 fetch(url[, options]) .then(response => { // 서버로부터 받은 응답 처리 }) .catch(error => { /..
