개발일지

객체를 변수에 그대로 복사하여 값을 변경할 경우// user 객체 생성let user = { name: "wonjang", gender: "male"};// 이름을 변경하는 함수 , 'changeName'을 정의// 입력값 : 변경대상 user 객체, 변경하고자 하는 이름// 출력값 : 새로운 user 객체// 특징 : 객체의 프로퍼티(속성)에 접근해서 이름을 변경했네요! > 가변let changeName = function (user, newName) { let newName = user; newName.name = newName; return newName;};// 변경한 user정보를 user2 변수에 할당// 가변이기때문에 user1도 영향을 받는다let user2 = changeName..

async / await await비동기 작업이 완료될 때까지 코드의 실행을 일시 중지하며, 해당 작업이 완료되면 그 결과를 반환한다.await는 반드시 async 함수(비동기 함수) 내에서만 사용 가능하며, 비동기 작업을 수행하는 함수 내부에서만 사용 가능하다. (예: Promise를 반환하는 함수)   async 항상 Promise(함수의 성공 또는 실패를 반환하는 객체) 를 반환한다.함수 안에서 return 키워드를 사용하여 값을 반환하면, 해당 값은 Promise.resolve()에 의해 감싸져서 Promise로 처리된다 Promise비동기 작업의 완료 또는 실패를 나타내는 객체비동기 작업이 시작되면 Promise 객체가 만들어지고, 작업이 완료되면 해당 Promise 객체는 함수의 성공 또는 실..

로고를 클릭하면 새로고침됩니다. ↺ 영화 검색 검색하기 /* CSS */* { margin: 0; padding: 0; box-sizing: border-box;}body { width: 100%; background-color: black;}header { height: 140px; margin: 2%; color: white;}header img:hover{ cursor: pointer; transform: scale(1.05);}form { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: c..

데이터 타입기본형변수상수의 경우 변수 영역 메모리를 변경할 수 없다(상수 : 변하지 않는 값)값이 담긴 주소값을 바로 복제한다.불변성을 띤다 데이터 영역의 메모리를 변경할 수 없다변수의 값을 변경할 경우 직접 데이터영역을 수정하는 것이 아니라 비어있는 주소에 데이터가 들어가고 변수의 데이터 주소가 변경된다 (불변성, 데이터영역 메모리 변경 불가 이유)이후 변경 전 값은 Garbage Collector(불필요한 메모리 수거)로 인해 삭제된다.참조형배열 또는 객체 값이 담긴 주소값들로 이루어진 묶음의 주소값을 복제한다.불변성을 띄지 않는다데이터의 주소값을 복제하기 때문에 데이터 값이 변경되어도 key( index )의 데이터 주소만 변경될 뿐 변수의 데이터 주소는 동일하다)객체 (key : value) : ..

sort배열의 요소를 정렬한다 sort의 기본 문법sort 사용 시 주의사항 : 배열을 다른 변수에 복사하여 정렬해도, 원본 배열 자체가 변경되어 버린다 // sort의 기본 문법const arr = [3, 2, 1];console.log(arr.sort());// arr1을 arr2에 복사하여 sort()를 사용했으나 arr1, arr2 모두 정렬되었다const arr1 = [3, 1, 10, 9, 2];const arr2 = arr.sort();console.log(arr1);console.log(arr2);  1. 원본 배열의 변경 없이 정렬하는 방법// 1. ...(전개구문 Spread syntax) 구조의 형태를 변경해준다let originalArray = [3, 1, 4, 1, 5, 9];le..

Map객체와 동일하게 Key / Value 형식으로 되어있다.객체와 차이점으로 Map은 Key가 정렬된 순서로 저장되고, Key에는 어떤 데이터타입(유형)도 다 들어올 수 있다.기능 : 검색, 삭제, 제거 여부 확인 Map의 속성과 반복문(iterator)new Map()  : Map생성map.set(key, value)  :  key와 value  저장map.get(key)  : key에 해당하는 값을 반환한다,  key 가 존재하지 않으면  undefined를 반환.map.has(key)  :  key 가 존재하면  true , 존재하지 않으면  false 를 반환.map.delete(key)  :  key 에 해당하는 값을 삭제.map.clear()  :Map의 모든 요소 제거.map.size  :..

구조분해할당단축속성명전개구문 구조분해할당 배열이나 객체의 속성을 분해하여 할당한다 배열배열 형태로 변수를 선언, 배열을 할당하면 변수에 배열 요소가 하나씩 할당된다할당되는 배열보다 변수 길이가 짧은 경우 undefined으로 출력된다let [value1, value2] = [1, "new"];console.log("1", value1);console.log("2", value2);let arr = [value1, value2, value3];let [a, b, c, d] = arr;console.log(a);console.log(b);console.log(c);console.log(d); 변수에 d에 기본값이 있어도 할당된 값으로 변경된다.(초기값이기 때문에 할당된 값으로 변경됨)let [value1, ..

화살표 함수조건부 실행객체배열콜백함수를 이용한 배열 메서드  화살표 함수익명함수로만 사용이 가능하기 때문에 함수 표현식으로 작성된다.함수 몸체 구문이 한 줄이라면 중괄호 생략이 가능하고 암묵적으로 return이 된다.매개변수도 한 개일 경우 소괄호 생략이 가능하다let arrowFunc01 = (x, y) => { return x + y;}let arrowFunc02 = (x, y) => x + y;let arrowFunc03 = x => x;  조건부 실행 AND(&&) 조건1번과 2번은 같은 로직이다let x = 10;// 1.if (x > 0) { console.log("x는 양수입니다");}// 2.x > 0 && console.log("x는 양수입니다");  OR(||) 조건 z에 y값 또는..

JavaScript문법 1주 차  변수 선언var : ES6 이전 많이 사용하였다, 변수의 재선언이 가능하며 이로 인한 오류가 생길 수 있다let : var의 문제점을 개선하여 변수의 재선언이 불가하다 현재 보편적으로 사용되고 있다.const : 상수, 변하지 않는 값이다 문자열일 경우 가독성을 위해 대문자로 작성한다 문자열 함수concat : 문자열 결합하기let str1 = "Hello ";let str2 = "World ";let result = str1.concat(str2);console.log(result);substring, slice : 문자열 자르기let str3 = "Hello World";console.log(str3.substring(0,5)); // (시작위치, 잘라낼 문자 수)c..

현재 시간 멍집사 입니다!   콘텐츠 박스를 부모 포지션으로 잡고, 현재 시간을 나타내는 div에 자식포지션을 줘서 레이아웃을 잡으려 했지만 화면 배율이 변경될 때마다 위치가 어긋났었다.Flex도 이용해 보고, top과  right값도 여러 번 변경해 봤지만 원하는 위치에 고정이 되질 않았다결국 튜터님의 도움으로 제 자리를 찾아갈 수 있었다  튜터님이 주신 참고 사이트로 Flex를 다시 활용해 보자 Flex 참고 사이트https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 ..