728x90 Language30 [TIL] JavaScript - 얕은 복사, 깊은 복사 원시 타입(Primitive type) VS 객체 타입(Object/Reference type) 얕은 복사와 깊은 복사에 대해서 이해하기 위해서 우선 자바스크립트 데이터 타입인 원시 타입과 객체 타입에 대해 이해해야 합니다. 우선 원시 타입은 Number, BigInt, String, Boolean, Null, Undefined, Symbol 7개의 타입이 있고, 그 외 모든 데이터는 객체 타입입니다. 얕은 복사(Shallow Copy)란? 객체를 복사할 때 위의 예제처럼 원래 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말한다. 객체 안에 객체가 있을 경우 한 개의 객체라도 원본 객체를 참조하고 있다면 이를 얕은 복사라고 합니다. 객체를 복사할 때, 해당 객체만 복사하여 새 객체를 생성합니다. 복.. 2022. 11. 29. [TIL] JavaScript - 정규 표현식 정규 표현식이란? 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있습니다. String의 match(), matchAll() (en-US), replace(), replaceAll() (en-US), search(), split() 메서드와도 함께 사용할 수 있습니다. 출처: mdn 정규표현식 사용법 정리 1. 정규표현식 형식 /패턴/플래그 - 슬래시(/) "사이"에는 매칭 시킬 "패턴"을 써준다. - 슬래시(/) "다음"에는 옵션을 설정하는 "플래그"를 써준다. (플래그는 하나만 찾을지, 모두 다 찾을지 등을 설정하는 옵션이라고 보면 됩니다.) 2. 정규표현식.. 2022. 11. 27. [TIL] JavaScript - 로딩되는 시점 이벤트 제어 (DOMContentLoaded, load, beforeunload/unload) HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여한다고 합니다. DOMContentLoaded 란? DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다. DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때 활용할 수 있습니다. load 란? HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다. 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후이기 때문에 스타일이 적용된 상태이므로 화면에 뿌려지는 요소의 실제 크기를 확인할 수 있습니다. be.. 2022. 11. 25. [TIL] JavaScript - debugger 서론 이건 또 웨않되??? 버튼 클릭 시 onclick event를 줬는데 안 먹힌다... 두 번 더 클릭을 해야 먹히는 이 상황은 뭐징... 어디서 문제가 걸리는지 알고 싶은데 어떻게 해야 할지 모르던 상황에서 튜터님께서 도움을 주셨습니다!!! debugger debugger문을 활용하시면 JavaScript 코드의 실행 흐름을 따라가며 효과적으로 검증이 가능합니다. 사용법은 검증하고 싶은 코드 중간에 debugger문을 끼워 넣어주면 됩니다. 위 사진처럼 debugger를 넣은 위치부터 코드가 실행되는 흐름을 사용자가 원하는 대로 볼 수 있습니다. 이 방법으로 오류 메시지는 없지만 실행이 안 되는 부분, 어디서 꼬였는지 알 수 있습니다. 마치며... 오늘도 참 많은 오류들을 만났고... 같은 오류면 .. 2022. 11. 23. [TIL] JavaScript - innerHTML된 파일에서 함수 구현하기...? 이 타이핑 효과를 구현하기 위해서 많은 시행착오가 있었습니다... 혼자 고민 끝에 결론이 도출되지 않아 매니저님과 튜터님들께 자문을 구했습니다...😥 그냥 HTML에서 JS로 타이핑 효과를 구현하는 것은 성공했었습니다. 하지만 문제는 이번 프로젝트를 SPA방식으로 구현하여야 했고, 그 과정에서 main page를 innerHTML로 뿌려주면서 발생하게 되었습니다. 문제점 Hype Express index.html에서 모든 페이지들을 받아옵니다. 밑에 router.js에서 innerHTML을 이용하여 에 main.html을 뿌려줍니다. //router.js export const route = (event) => { event.preventDefault(); window.location.hash = eve.. 2022. 11. 21. [TIL] JavaScript - push( ), pop( ), unshift( ), shift( ) JavaScript를 사용해 알고리즘 문제를 풀다 보면 push함수를 많이 사용하는데, unshift( )와 pop( ) 함수에 대해서는 처음 접해봐서 찾아보게 되었습니다. push( ) 우선 push( ) 함수는 다들 알다시피 배열의 끝에 아이템을 추가합니다. let fruits = ['Apple','Banana','Orange'] fruits.push('Grape'); console.log('fruits'); >>> ['Apple','Banana','Orange','Grape'] pop( ) pop( ) 함수는 배열의 마지막 아이템을 제거합니다. let fruits = ['Apple','Banana','Orange'] fruits.pop(); console.log(fruits); >>> ['Apple.. 2022. 11. 15. 이전 1 2 3 4 5 다음 728x90
