얕은 복사(Shallow Copy) vs 깊은 복사(Deep Copy) 얕은 복사(Shallow Copy)객체를 복사할 때 최상위 속성만 복사하고, 그 안에 또 다른 객체나 배열이 있으면 그 주소값만 복사'바로가기 아이콘'을 복사하는 것과 같다고 할 수 있습니다.아이콘을 복사해서 바탕화면에 두 개가 생겼지만, 두 아이콘 모두 결국 똑같은 원본 프로그램을 가리킵니다.하나를 통해 원본을 바꾸면 다른 바로가기에도 영향이 갑니다. 예시 코드 👀const original = { name: "peazh", age: 20, address: { city: "서울" }};// 스프레드 문법을 사용한 얕은 복사const shallowCopy = { ...original };// case 1.// 복사본의 최상위 속성 변경shallowCopy.name = 'pp';// 원본 객체.. Webpack(웹팩) Webpack(웹팩)보통 모듈 별로 개발을 하는데, 분리된 파일들을 브라우저에서 그대로 불러오면 네트워크 요청이 많아져 웹 페이지 로딩 속도가 느려짐.그걸 해결하기 위해서 여러 개로 나뉘어있는 자바스크립트, CSS, 이미지 등의 파일들을하나의 최적화된 파일로 합쳐주는 것을 '번들링(Bundeling)'이라고 하고이러한 번들링 작업을 자동화해주는 도구를 '모듈 번들러(Module Bundler)'라고 함 웹팩이 가장 대표적인 모듈 번들러, 최근에는 Vite, Parcel 등 많이 사용함 여행 갈 때 짐을 수십 개의 작은 가방에 나눠 담아 가지 않는 것처럼, 웹팩은 여러 파일들을 브라우저가 빠르고 쉽게 읽을 수 있도록 하나의 큰 덩어리로 묶어주는 역할 기존의 개발 방식 세 개의 모듈 모두 요청을 함 W.. NPM(Node Package Manager) / NVM(Node Version Manager) NPM(Node Package Manager)자바스크립트의 모듈을 쉽게 설치하고 관리할 수 있는 도구Node.js(자바스크립트 런타임 환경) 설치 시 자동으로 함께 설치됨🔗 npm 라이브러리 공유 NPM 프로젝트 구조 소개❏ package.json필수 파일로, 프로젝트에 대한 정보를 가지고 있음프로젝트에서 의존된 라이브러리 관리직접 생성할 수도 있고 npm init 명령어로 자동 생성할 수 있음 ❏ node_modules사용할 라이브러리들이 실제로 설치된 폴더git 등 형상 관리할 땐 제외 ❏ package-lock.json프로젝트에 설치된 모듈들의 의존성 트리를 기록이 파일을 참고하여 node_modules 디렉토리 안에 모듈을 다운받음 NPM 명령어▪︎ 새로운 프로젝트 생성npm init ▪.. [ERROR] Content type 'application/json;charset=UTF-8' not supported AJAX 요청을 처리하는 도중, 다음과 같은 오류가 나왔다.org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/json;charset=UTF-8' not supported 이 오류는 @ResponseBody 로 Map 객체를 반환하려고 할 때 발생했다.이유는 Spring이 전달된 JSON 형식의 데이터를 올바르게 처리하지 못했기 때문이다.즉, 클라이언트에서 전송한 JSON 데이터가 서버에서 예상한 형식과 일치하지 않아서 발생한 문제로, 이를 해결하기 위해서는 서버가 JSON 데이터를 올바르게 파싱할 수 있도록 설정을 해줘야 한다.🐋 해결방안 01.• contentType을 명시적으로 설정하기 01) .. [JS] 이벤트 전파 / 이벤트 버블링 / 이벤트 캡처링 이벤트 전파 (Event Phase)브라우저에서 html 요소에 이벤트가 발생할 때, 이벤트가 전파되는 흐름에 따라 이벤트 버블링과 이벤트 캡처링이 발생함 body 영역 main 영역 div 영역 p 영역 span 영역 01) 이벤트 버블링 (Event Bubbling)이벤트 버블링은 이벤트 타깃 요소에서부터 최상위 요소인 html 문서까지 이벤트가 전파되는 것으로,addEventListener 이벤트는 기본적으로 버블링으로 동작함위의 script 코드를 추가해서 console 창을 확인하면, span 태그를 클릭했을 때 span에서부터 body 태그까지 이벤트가 전파되는 과정을 확인할 수 있.. [JS] JavaScript에서 다양한 this JavaScript에서 thisJavaScript에서 this는 객체를 가르키는 키워드로, 현재 실행 중인 함수의 문맥(context)을 가르킨다.this가 가르키는 대상은 함수 호출 방식에 따라 달라진다.01) 전역 범위전역 범위에서 this는 기본값으로 전역 객체를 의미브라우저에서 전역 객체는 window 객체로, 브라우저 환경에서 제공되는 다양한 API를 제어할 수 있음console.log(this); // Window {window: Window, self: Window, document: document, name: '', location: Location, …} 02) 함수 호출일반 함수에서 this는 기본적으로 전역 객체를 가리킴호출한 객체가 없으므로 window 객체가 출력됨function.. [JS] JavaScript 로드 문제해결 Script 로드 오류html은 위에서 아래로 순차적으로 파싱을 하는데,아래와 같이 스크립트 코드가 상단에 위치할 경우html이 완전히 파싱되기 전 스크립트가 실행되어 dom 요소를 잘 가져오지 못한다.예를 들어, 버튼이 그려지기 전 상태에서 버튼 이벤트를 발생시키면 오류가 나는데 이러한 현상을 해결하기 위해 세 가지 방법이 있다. 버튼 01) script 위치 변경 02) load 이벤트 리스너 사용window.onload : html 파싱 → dom 생성 → 외부 콘텐츠(images, script, css 등) 로드된 후 발생하는 이벤트 버튼 DOMContentLoaded : html 파싱 → dom 생성 후 발생하는 이벤트 버튼 03) 비동기로 scrip.. [JS] DOM / BOM DOM01) DOM이란?Document Object Model 문서 객체 모델스크립트 언어로 html 요소를 제어할 수 있도록 웹 문서를 객체화한 것브라우저에서 자바 스크립트로 html 요소를 제어할 수 있도록 제공하는 apiDOM은 트리(Tree) 구조를 가지고 있음02) DOM의 트리 구조노드 : 트리 구조 안 각각의 요소document : 웹 문서 영역을 제어할 수 있게 제공하는 객체로, 웹 페이지 자체이자 돔 트리의 최상위 노드document.getRootNode() : 최상위 노드인 '#document'를 반환함03) 그 외 Object ModelCSS Object Model : css를 Javascript로 조작할 수 있도록 한 것 BOM01) BOM이란?Browser Object Model .. [JavaScript] 자바스크립트 배열 내장 함수 01. map()원본 배열의 모든 요소를 순회하면서 어떤 연산을 해서 리턴된 값들만 새로운 배열로 반환const arr = [1, 2, 3, 4];let newArr = arr.map((elm) => { return elm * 2;});console.log(newArr); // (4) [2, 4, 6, 8] 02. includes()주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는지 boolean 식으로 리턴값과 타입 둘 다 포함해서 확인을 함 ('==='과 같은 의미)const arr = [1, 2, 3, 4];let number = 3;console.log(arr.includes(number)); // true 03. indexOf()주어진 배열에서 전달받은 인자와 일치하는 값의 인덱스.. [JS] Ajax와 Json을 활용해서 웹사이트 구현하기 01. 비동기와 동기 01) 비동기식(Asynchronous)요청과 응답이 동시에 일어나지 않고 나중에 응답하는 것웹페이지를 새로고침 하지 않고 데이터를 불러오는 방식으로 웹페이지의 일부분만 바뀔 때 사용하는 것이 좋음처리결과에 의존하지 않고 성능적으로 빠른 처리가 가능함ex. 블로그나 카페에서 댓글을 작성할 때 페이지 전체가 로드되지 않고 댓글 영역 부분만 업데이트 됨02) 비동기 통신의 장점과 단점필요한 부분만 업데이트하기 때문에 웹페이지의 속도와 성능을 향상시킬 수 있음서버와의 통신량이 줄어들고, 자원과 시간을 절약할 수 있음요청과 응답이 동시에 일어나지 않기 때문에 요청을 보낸 후에도 다른 작업을 할 수 있음동기 통신보다 코드가 어렵고 복잡도가 증가할 수 있음요청의 처리 속도에 따라 요청과 응답의.. [JS] jQuery로 유효성 체크 이전 1 다음
