JavaScript - 객체 복사 합치기 ➡️ Object.assign, Spread 연산자 공통점과 차이점

자바스크립트에서 객체를 합치는 방법 두가지에 대해서 말씀드리려고 합니다. Object.assign 함수를 이용하는 방법과 자바스크립트 Spread 연산자인 전개 연산자를 사용하는 방법이 있습니다. 두가지 방법 사용법과 공통점과 차이점에 대해서 알아보도록 하겠습니다. 사용법 1. Object.assign 이용하기 const target = { name: 'superman' }; const source = { age: 20 }; const result = Object.assign(target, source); // {name: 'superman', age: 20} 2. Spread 연산자 이용 하기 const target = { name: 'batman' }; const source = { age: 21 }..

• format_list_bulleted Develop/JavaScript
• · 2023. 11. 28.
• textsms

JavaScript - 조건부 객체 속성 추가하기

조건에 따라서 객체의 속성을 추가하고 싶을 때가 있습니다.특정 조건일 경우에만 { name: 'superman' } 을 추가할 때 어떻게 코딩하면 좋은지 한번 알아보도록 하겠습니다. 고전적인 방법if문을 통해서 프로퍼티를 생성하고 값을 넣는 방법이 있습니다.var isCondition = true;var person = { age: 20};if (isCondition) { person.name = 'superman';} 삼항 연산자 이용하기객체에 삼항연산자를 이용해서 프로퍼티를 추가할 수 있습니다.var isCondition = true;var person = { age: 20, ...(isCondition ? { name : 'superman' } : {})}; 논리 연산자 ( && ) ..

• format_list_bulleted Develop/JavaScript
• · 2023. 11. 28.
• textsms

드래그 할때, 클릭 이벤트 방지 하는 방법

아래와 같이 클릭 이벤트를 만들어서 사용하고 있었습니다. 하지만, 드래그할 때도 아래와 같이 클릭 이벤트가 발생하였습니다. 저는 단지 드래그 이후 복사를 하고 싶었는데, 클릭 이벤트를 발생시키고 싶지 않았습니다. const div = document.querySelector('div'); div.addEventListener('click', () => { alert('click'); }); 클릭 이벤트 방지 시키는 방법 아래와 같이 mousedown, mousemove 이벤트를 이용해서 동작이 드래그인지 판단합니다. 그 이후 mouseup 이벤트에서 click 이벤트 로직을 실행시킵니다. const div = document.querySelector('div'); let isDrag; div.addEve..

• format_list_bulleted Develop/JavaScript
• · 2023. 11. 23.
• textsms

a태그 이용해서 파일 다운로드 하는 방법 2가지

a태그를 이용해서 다운로드할 수 있는 방법 두 가지에 대해서 알아보도록 하겠습니다. a 태그 download 속성 이용하기 a태그는 해당 url로 이동하거나, 새 탭을 열 수 있습니다. 하지만 download 속성을 사용하면 해당 url의 파일을 다운로드할 수 있습니다. download 값을 넣게 되면 해당 이름으로 파일 다운로드를 할 수 있습니다. 다운로드 단 주의해야할점이 있습니다. 동일 출처 정책에 의해서 다운로드 파일의 경로가 현재 페이지의 url과 동일해야 다운로드가 가능합니다. clickEvent를 이용해서 다운로드하기 다운로드의 파일 경로가 다르다면 a tag에 click 이벤트를 이용해서 다운로드할 수 있습니다. 아래와 같은 방법으로 파일 다운로드를 할 수 있습니다. 다운로드 const c..

• format_list_bulleted Develop/JavaScript
• · 2023. 11. 21.
• textsms

자바스크립트 - 문자열로 변경하는 방법 4가지

자바스크립트에서 문자열로 변경하는 방법이 여러가지 있습니다. 그 중 4가지를 소개 시켜드리겠습니다. String() String 생성자를 이용해서 문자열 변경할 수 있습니다. const num = 123; const obj = { name: 'superman' }; const arr = ['superman', 'batman'] const str = String(num); // '123' const str2 = String(obj); // [object Object] const str3 = String(arr); // superman,batman .toString() toString 메서드를 이용해서 문자열로 변경할 수 있습니다. const num = 456; const obj = { name: 'supe..

• format_list_bulleted Develop/JavaScript
• · 2023. 11. 12.
• textsms

자바스크립트 - 문자열을 숫자로 변경하는 방법 parseInt, Number 차이점

자바스크립트에서 문자열을 숫자로 변경할 수 있습니다. parseInt 함수를 사용하거나, Number 생성자를 이용하는 방법이 있습니다. parseInt와 Number를 사용하면 간단하게 문자열을 숫자로 변경할 수 있지만, 몇 가지 차이점이 있기 때문에 주의하셔야 합니다. 기본사용법 const str = '100'; parseInt(str); // 100 Number(str); // 100 뒤에 문자가 들어간 숫자 const str2 = '100px'; parseInt(str2); // 100 Number(str2); // NaN 앞에 문자가 들어간 숫자 const str3 = '약300'; parseInt(str3) //NaN Number(str3) // NaN 공백이 들어간 숫자 const str4 ..

• format_list_bulleted Develop/JavaScript
• · 2023. 11. 7.
• textsms

jQuery serialize() 이용해서 Form 데이터 ajax POST 전송하기

html의 폼 태그에 입력한 정보들을 POST 요청으로 전달하고 싶을 때가 있습니다. serialize jQuery serialize 메서드를 이용하면 폼 패너 내에 input, selelct, textarea의 value 값을 간단하게 표준 url 인코딩 형태 문자열로 만들 수가 있습니다. 회원가입 var formData = $('form').serialize() // id=1&password=2&username=superman&userEmail=superman@naver.com POST 전송 form Data를 jQuery ajax 옵션의 data 속성에 적용하면 POST로 데이터 전송이 가능합니다. $(document).ready(function() { $("#submitBtn").click(fun..

• format_list_bulleted Develop/JavaScript
• · 2023. 10. 4.
• textsms

자바스크립트 - fetch 이용해서 Ajax 비동기 통신 하기

fetch fetch API를 이용하면 서버와 브라우저를 비동기적으로 통신할 수 있습니다. fetch API 이전에는 XMLHttpRequest를 이용해서 통신을 하였습니다만, 너무 어렵고 복작해서 주로 jQuery 라이브러리를 많이 사용하였습니다. 현재는 fetch로 브라우저 window 객체에 내장 되어 있어서 다른 라이브러리 없이 비동기 통신을 할 수 있습니다. fetch 사용법 fetch(URL, Options); Get 방식 호출 기본적으로 Options 값이 없으면 GET 방식으로 호출됩니다. response는 json()으로 변경하면 요청한 데이터를 가지고 올 수 있습니다. fetch("https://jsonplaceholder.typicode.com/posts").then(function(..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 21.
• textsms

Request with GET/HEAD method cannot have body 오류 해결 방법

오류 Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. fetch("https://jsonplaceholder.typicode.com/posts", { body: JSON.stringify({id: 1}) }).then(function(response) { return response.json(); }) 자바스크립트에서 fetch 호출 시 위와 같은 에러가 발생하였습니다. 원인 GET 방식의 호출인데, body에 값을 넣어서 발생하였습니다. GET 방식은 읽기 전용이기 때문에 body 값을 가질 수가 없습니다. 해결방법 1. 읽기 전용이 아닌 ..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 21.
• textsms

자바스크립트 - function vs Arrow 함수 무엇을 사용하는 것이 좋을까?

자바스크립트에 함수를 만들 수 있는 방법이 일반적으로 function 함수가 있고 ES6 문법 이후로 Arrow 함수가 생겼습니다. function 함수 함수를 만드는 일반적인 방법입니다. function add(a, b) { return a + b; } 생성자, arguments, prototype 기능이 사용 가능합니다. 함수 선언시에 호이스팅 됩니다. 함수에 이름 있어 직관적으로 사용이 가능하고 디버깅등에 편리합니다. Arrow 함수 const add = (num1, num2) => { return num + 1 } 화살표 키워드를 이용해서 간편하게 함수를 표현할 수 있습니다. 더 간단히 return 키워드와 중괄호까지 생략할 수 있습니다. const add = (num1, num2) => num1..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 20.
• textsms