선돌이의 코딩하우스

웹 페이지를 이용하다보면 코드/링크 등이 복사되는 버튼을 본 적이 있을 것이다! 리액트로 이를 구현하기엔 정말 간단하다. 바로 Clipboard API를 이용하면 된다. 별도의 라이브러리 추가할 필요 없이 이용 가능하다. navigator.clipboard.writeText('복사할 내용') 다음과 같이 이용하면 된다. 위 메소드는 Promise를 반환하는 비동기 메소드이기 때문에 await, then이랑 같이 사용하면 된다는 점!! 다음 코드의 문제점 useEffect( async ()=>{ await navigator.clipboard.writeText('hi'); alert('Copied!'); },[]); 이 코드를 실행시키면 동기적으로 잘 작동하지만 콘솔창에 에러가 하나 뜰 것이다. DOMexc..

간단하게 생성 & 수정 가능 - 단축 속성명 이미 존재하는 변수를 객체의 속성값으로 사용하고 싶다면 변수 이름만 적어주면 됩니다! 만약 속성값이 변수라면 function 키워드 없이 함수명만 적어도 됩니다. const name = 'mike'; const obj = { age: 21, name,//단축 속성명 사용! getName(){ return this.name; }, }; 이 단축 속성명은 콘솔 로그를 사용해서 디버깅 할 때 매우 유용하게 쓸 수 있습니다 ㅎㅎ 속성값 편하게 가져오기 - 전개 연산자 객체와 배열의 모든 속성을 풀어 놓을 때 사용하는 연산자 입니다. const a = [1,2] const b = [a,3] // b = [[1,2],3] 하나의 배열 원소들을 다른 하나의 배열에 포함시키..

변수 정의하기 : const, let 기존 자바스크립트는 변수를 정의하는 방법이 var로 유일했습니다. 하지만 여러 문제점이 있어서 const와 let이 생겼는데요, 어떤 문제점 때문에 생겼는지 알아본다면 const와 let의 특성을 더 쉽게 이해할 수 있을 거라 생각합니다! var의 문제점 1. function scope var는 유효범위가 함수 단위입니다. 따라서 함수 내에서 선언된 변수는 함수 내에서 사용할 수 있습니다. 프로그램은 하나의 큰 함수로 이루어져 있기 때문에 전역 변수는 프로그램 어디에서도 사용할 수 있습니다. 함수 스코프가 어떤 문제점을 갖느냐하면..! for(var i=0; i