내가 보려고 만든 개발 공부 일지

먼저 Template literals 이란 백틱 ` 을 이용해서 스트링을 표현하는 ES6 문법이다. 기본적으로 스트링은 큰/작은 따옴표를 사용해서 표현하는데, 이는 중간에 변수값이 들어가거나 텍스트가 길어져서 개행을 하고플땐 항상 + 로 연결해줘야하고 이는 일일이 + 로 나눠주어야 하는 매우 불편한 작업을 동반하게된다. 그러나 template literal 은 ` ` 안에 ${} 문을 사용해 스크립트 변수를 바인딩할 수 있고 개행도 그냥 엔터로 (실제개행) 인식하기 때문에 편리하다. 이 백틱 문법을 한층 더 고급스럽게 사용법하는 방법이 Tagged templates 이다. Ex ) var person = 'ks'; var age = 19; function myTag(strings, personExp, a..

객체를 복사하고플때 그냥 var obj = obj2 이렇게 하면 obj 는 단순히 obj2 의 주소값만 참조게되어 obj2를 수정하면 obj 도 값이 바뀌게 되므로 이는 잘못된 방법이다. 1. 얕은 복사 var obj = {a : "aa", b : "bb"} 같은 단순한 객체는 for( var .. in .. ) 나 Object.assign( { }, obj ) 를 사용하여 새로운 객체를 만들수 있지만 만약 var person = { age: 19, name: { first: 'kwang', last: 'sunny' } } 이런 객체가 있을땐 위같은 방법을 써도 결국 person.name.last 값을 수정하면 복사된 객체의 last 값도 같이바뀌게된다 --> 1레벨만 복사되어 person.name 의 ..

1. event 제어 마우스 이벤트가 발생했을때 event 객체에서 화면의 좌표를 가져올수 있는데, clientX, offsetX, pageX, screenX 이렇게 4가지가 있다. 1. clientX, clientY : 현재 보이는 브라우저 화면이 기준이된다. 스크를을 무시하고 지금 보이는 화면의 상단을 0 으로 잡는다. 2. offsetX, offsetY : 이벤트가 발생한 DOM 객체가 기준이된다. 만약 화면 중간에 어떤 div 가 클릭된다면 그 div 의 왼쪽 상단 모서리가 0 이 된다. 3. pageX, pageY : document 전체를 기준으로 삼는다. 스크롤을 포함해서 좌표를 반환한다. 4. screenX, screenY : 사용자의 모니터 화면을 기준으로 좌표를 잡는다. 브라우저 화면이..

1. useState의 반환값 useState 는 길이 2짜리 배열을 리턴하는데 각각 상태변수, 상태변수 settet함수 이다. 그래서 보통 사용할땐 배열의 비구조할당을 이용해 변수에 할당한다. var [num, setNum] = useState(1); 위 코드에서 num 은 1 로 초기화되고 setNum함수로 num 값을 갱신해줄 수 있다. 값 갱신 : setNum(num + 1) --> num 값이 달라졌으므로 리렌더링이 발생한다. 2. 상태변수가 객체, 배열같은 참조값일때 만약 const [obj, setObj] = useState({ name : "kks", birth : "93" }); 처럼 상태변수의 초기값이 객체인 경우,(참조값을 가지는 변수 = 배열, 객체) obj.name = "kks" ..