원추링의 개발 노트 원추링의 개발 노트

e.preventDefault()와 e.stopPropgation 모두 이벤트를 제어할 때 사용되는 메소드다. 이 2가지가 가장 자주 사용되는 이벤트 제어 메소드로 여기서 소개하고 그 외 다른 메소드는 이벤트 메서드MDN을 참고해보자. e.preventDefault() e.preventDefault() 용도 e.preventDefault()는 브라우저에서 구현된 태그의 기본 동작을 막을 때 사용한다. 태그의 브라우저 동작이란 이후 예시에서와 같이 태그, 태그 등에서 브라우저에서 구현된 기본 동작을 말한다. 태그에서는 href속성의 링크로 이동하고 태그에서 key입력을 받는 등의 액션이다. e.preventDefault() 사용 예시 예시 1) 태그의 기본 동작 막기 예시: 다음 예시에서 태그의 브라우저 ..

Optional Chaining이란 Optional Chaining이란? 객체 값을 참조할 때 유효하지 않은 값을 참조하는 경우에 대한 처리를 단순하게 표현하기 위한 문법이다. 문법 일단 문법을 먼저 보면 다음과 같은 구조를 가진다. ?. 부분이 optional chaining 으로 객체가 undefined혹은 null인 경우 에러 대신 undefined를 리턴한다. obj?.prop obj?.[expr] arr?.[index] func?.(args)일반적인 객체 뿐만 아니라 배열이나 함수를 참조할 때도 유효성을 체크할 수 있다. 사용 용도 만약 optional chaining 문법을 사용하지 않는다면 어떻게 처리해야 할까? 여러 방법이 있겠지만 간단하게는 다음과 같을 것이다. obj && obj.pro..

로컬에서 생성한 브랜치를 remote 저장소로 올려줄 때 처음에는 git push만으로 올릴 수 없고 다음과 같은 에러가 나온다. ➜ test git:(test2) git push fatal: The current branch test2 has no upstream branch. To push the current branch and set the remote as upstream, use git push --set-upstream origin test2 위 가이드대로 실행하거나, 다음과 같이 브랜치명을 명시하고 -u 옵션으로 upstream을 설정해 push 하면 이후부터는 브랜치명을 생략하고 git push로도 사용 가능하다. git push -u origin test2 하지만 매 브랜치를 새로 생성..

시작하며 js에서의 deep copy와 shallow copy 차이와 발생하는 경우를 정리하겠다. deep copy와 shallow copy의 차이점 deep copy는 변수 값을 복사해 새로운 메모리에 할당하는 복사이고, shallow copy는 변수의 메모리 주소를 복사해 같은 메모리를 가리키는 변수를 생성하는 복사이다. 그러므로 deep copy는 복사된 변수를 수정해도 원본 변수에는 영향이 없고, shallow copy는 복사된 변수를 수정 시 동일하게 원본 변수도 수정된다. shallow copy는 다른 변수명으로 결국 동일한 데이터를 참고하는 것이다. deep copy shallow copy 복사 대상 값 메모리 주소 복사된 변수 수정 시 원본 변수 영향 x 원본 변수 영향 o 언제 deep ..

시작하며 js sortable 라이브러리를 사용하는 중 deep copy(깊은 복사)를 필요로 하는 상황이 있었다. 그런데 spread 문법을 통해 (완벽한) deep copy가 가능할 거라고 생각했었는데 이 부분에서 오류가 있었다는 것을 알게 되었고, deep copy에 대해 정리해보기로 하였다. 총 4가지 방법으로 (1. json, 2. spread, 3. custom function, 4. lodash) deep copy하는 방법을 소개하고, 어떤 상황에서 각 방법을 사용하면 좋을지 간단히 정리했다. 참고로 deep copy(깊은 복사)와 shallow copy(얕은 복사)의 차이에 대해서는 JS deep copy(깊은 복사) vs shallow copy(얕은 복사) 에서 정리하겠다. 1. json..