로고를 클릭하면 새로고침됩니다. ↺ 영화 검색 검색하기 /* 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) : ..
원본 배열을 수정하는 메서드push()pop()shift()unshift()splice() 새 배열을 반환하는 메서드map()filter()slice()concat() 결괏값을 반환하는 메서드reduce()find()some()every()includes()indexOf()lastIndexOf()forEach() 반복문 원본 배열을 수정하는 메서드 push()배열의 끝에 하나 이상의 요소를 추가하고, 새로운 길이를 반환push()const fruits = ['apple', 'banana'];fruits.push('orange'); // fruits : ['apple', 'banana', 'orange']pop()배열의 마지막 요소를 제거하고 그 요소를 반환pop()const fruits = ['apple..
콜백함수 다른 함수의 매개변수로 전달되어, 특정 이벤트나 상황이 발생했을 때 호출되는 함수 (고차함수의 한 종류)고차함수 : 함수를 인자로 받거나 return 하는 함수 변수에 할당된 함수, 값처럼 취급되어 나중에 필요한 경우 사용할 수 있다let sayHello = function () { console.log("Hello");}; 함수를 인자로 다른 함수에 전달function callFunction(func) { func(); // 다른 함수를 매개변수로 받아 내부에서 호출 할 수 있다.};callFunction(sayHello); 함수의 반환createAdder 함수의 return값으로 익명함수 넣고 x + createAdder의 매개변수가 return 된다addFive 변수에 익명함수를..
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, ..
조건부 실행객체배열콜백함수를 이용한 배열 메서드 조건부 실행 AND(&&) 조건1번과 2번은 같은 로직이다let x = 10;// 1.if (x > 0) { console.log("x는 양수입니다");}// 2.x > 0 && console.log("x는 양수입니다"); OR(||) 조건 z에 y값 또는 20을 할당한다y는 할당된 값이 없으므로(undefined) 20이 출력된다.let y;let z = y || 20;console.log(z); 객체key , value로 이루어진 데이터 묶음하나의 변수에 여러 값을 넣을 수 있다 생성자 함수를 이용한 객체 생성 방법 function Person(name,age,gender){ this.name=name; this.age=age; this.g..
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 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 ..