JavaScript9 Spread Operator(전개구문) 사용하기 객체 또는 배열이 가지고 있는 요소를 쫙 펼쳐서 사용하여 객체나 배열을 복사할때 주로 쓰인다! 이렇게 originalUser에 있던 걸 updateUser에 할당해서 이름을 바꿔보았다.원하는 결과가 전혀 아닌 원본 객체 내용도 바뀌는 것을 확인할수 있다. (당황당) 이를 해결하기위해 spread 연산자를 사용할 수 있다.객체에서의 사용...originalUser로 새로운 객체를 생성한것이다. { ... originalUser } : originalUser에 있는 객체 들을 촥 펼친 다음 중괄호를 감싸준거라 생각하면 쉽다. 즉 {name : "르탄이", age : 28} 객체가 다시 만들어 진것이다.const originalUser = { name: "르탄이", age: 28 };const updatedU.. 2025. 1. 18. 구조분해 할당 Destructuring을 익히자! https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 구조 분해 할당 - JavaScript | MDN구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.developer.mozilla.org 객체나 배열의 속성을 보다 쉽게 추출 해주는 문법이다. 어떤느낌인지 예제를 통해 알아보자. 객체에서의 구조분해 할당자바스크립트 객체에서 name과 age를 디스트럭쳐링을 사용하여 추출하고 출력 하였다.기억해야할 점은 객체 디스트럭쳐링에서는 obj안의 'key'를 그대로 사용하여 분해한다는 것이다. 그렇다면 중첩객체는 어.. 2025. 1. 18. localStorage사용해서 북마크 기능 만들기 TMDB API를 가져와서 영화 사이트를 구현하던중 로컬스토리지로 북마크 기능 구현하는데에 큰 어려움이 있었다.. 로컬스토리지란?만료 기간이 존재하지 않고 페이지를 변경하거나 브라우저를 닫아도 반 영구적으로 유지되는 저장소를 의미한다. 개발자도구 > 애플리케이션 > 로컬 스토리지에 들어가면 키와 값으로 구분되어 저장되는것을 확인할 수 있다. 주요메서드메서드명설명localStorage.getItem('키값')key값이 '키값'인 애들의 value값을 가져와라localStorage.removeItem('키값')키값 기반으로 해당 스토리지 삭제localStorage.clear()저장된거 모두 삭제localStorage.setItem('키값' , value)로컬스토리지에 키값을 가지고 value값을 저장해라 순.. 2025. 1. 16. DOM이 뭔데? DOM ?Document Object Model 의 약자Document(HTML)를 JavaScript가 알아먹을수 있는 Object형태로 Modeling 한것. 웹페이지가 뜨는 과정1. 사용자가 브라우저에 'www.naver.com' 주소를 입력한다.사용자 = 브러우저 = 클라이언트클라이언트가 서버에 요청을 한다 (크롬을 통해)2.html문서를 서버로부터 수신한다네이버에서는 사용자에게 응답을 준다.그 응답을 HTML문서 (document)라 한다.3.브라우저가 HTML파일을 해석(파싱)한다.브라우저에게는 기본적으로 렌더링 엔진이 있는데, 서버가 클라이언트(사용자)에게 준 html문서를 렌더링(해석) 한다.서버로 부터 받아온 html문서를 자바스크립트가 해석할수 없기 때문에 렌더링 과정이 필요하다! 4.. 2025. 1. 12. JS문법 - 데이터타입 심화(level2) - 변수복사의 비교 https://rinny01.tistory.com/36 JS문법 - 데이터타입 심화(level1) - 기본형 데이터와 참조형 데이터자바스크립트에서는 값의 저장방식과 불변성 여부에 따라 기본형 / 참조형 데이터로 나뉘게 된다.기본형 : 값이 담긴 주소값을 바로 복제참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키rinny01.tistory.com LEVEL 1 에 이어서 LEVEL2 변수복사 이후의 비교객체의 프로피터 변경 vs 객체 자체를 변경의 차이점을 알아보자. 우선 복사부터 해보자.var a = 10; var obj1 = { c: 10, d: 'ddd' };//>>복사 수행var b = a;var obj2 = obj1; 변수주소값1000100110021003데이터변수명 : a;주소값 : @20.. 2025. 1. 7. JS문법 - 데이터타입 심화(level1) - 기본형 데이터와 참조형 데이터 자바스크립트에서는 값의 저장방식과 불변성 여부에 따라 기본형 / 참조형 데이터로 나뉘게 된다.기본형 : 값이 담긴 주소값을 바로 복제참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 "주소값 자체" 를 복제 (크기가 크기 때문에!!) 메모리와 데이터에 관한 배경지식비트 :binary digit"의 줄임말 : 컴퓨터가 이해할수 있는 가장 작은 단위0,1을 가지고 메모리를 구성하기 위한 작은 조각이다. > 이게 모여서 메모리가 된다.바이트 : 비트8개가 모여 한 묶음이 되는것 (byte) JAVA,C 와 다른 JavaScript 메모리 관리방식자바에서byte a = 8(1byte)short a = 8(2byte)int a = 8(4byte)long a = 8(16byte) 자바,씨언어는 1960년.. 2025. 1. 6. 자바스크립트 배열 메소드 모아보기 push();배열의 끝에 요소를 추가한다.let fruits = ["사과", "바나나"];fruits.push("오렌지");console.log(fruits); // ["사과", "바나나", "오렌지"] pop();배열의 마지막 요소를 삭제한다.let fruits = ["사과", "바나나", "오렌지"];fruits.pop();console.log(fruits); // ["사과", "바나나"] shift();배열의 첫번째 요소를 삭제한다.javascriptCopy codelet fruits = ["사과", "바나나", "오렌지"];fruits.shift();console.log(fruits); // ["바나나", "오렌지"] unshift();배열의 맨 앞에 요소를 추가한다.let fruits.. 2025. 1. 2. 자바스크립트 객체 메소드 모아보기 Object.Keys()const object1 = { a: 'somestring', b: 42, c: false,};console.log(Object.keys(object1));// Expected output: Array ["a", "b", "c"] Object.keys() 메소드는 객체의 key값들을 배열로 반환하여준다 Object.values()속성값을 배열로 반환하여 준다.let person = { name: "홍길동", age: 30, gender: "남자"};let values = Object.values(person);console.log(values); // ["홍길동", 30, "남자"] Object.entries()키와 벨류를 묶어서 배열로 만든다.var obj = {.. 2025. 1. 2. 자바스크립트 변수와 상수 자바스크립트 역사1995년 자바스크립트 탄생! (나랑 동갑이다..🤣)원래는 LiveScript 인데 그당시 JAVA가 인기가 많아서 자바랑 전혀 관계없지만 이름을 JavaScript로 바꾸다고 한다.👌왜생김? : 브라우저에 동작하기 위해서2005년 AJAX등장자바스크립트 기반의 AJAX가 나오면서 급 발전함비동기 웹 어플리케이션 개발기능폭발적인 UX (User Experience : 사용자경험) 향상. 유저들이 얼마나 편리하게 이용할수있는가.2008년 V8 엔진이 구글 크롬에 탑재가 되면서 브라우저 속도가 엄청 빨라진다.2009년 Node.js의 등장! FrontEnd + BackEnd + DB = FullStack이 가능하게 됨.2015년 ECMAScript6 (ES6) 버전 출시!그렇다면 이렇게 .. 2024. 12. 31. 이전 1 다음
