개발일지

Timestamp 타임스탬프현재 시간 또는 특정 시간을 가져온다일반적으로 1970년 1월 1일 00:00:00 (UTC)로부터 경과한 밀리초(milliseconds) 또는 초 단위로 시간을 나타낸다 팀과제 중 로컬스토리지를 이용한 댓글 구현 항목 중 삭제 기능을 구현하려면 로컬스토리지에 삭제 '기준'을 만들어서 삭제해줘야 했는데 작성자, 비밀번호는 중복이 허용되기 때문에 적합하지 않았다.대신 타임스탬프를 이용하여 id대신 고유의 값으로 사용하기로 했다 댓글 생성 시 new Date를 id변수에 담아 생성된 댓글마다 타임스탬프를 넣어준다. // 댓글 객체 생성(작성자, 댓글 내용, 비밀번호) const id = Date.now(); // 댓글 삭제를 위한 id값 const makeComment = {..

Github에 리포지토리 생성 로컬에 생성된 리포지토리 가져오기리포지토리를 넣을 폴더 생성  폴더 내에서 마우스 오른쪽 버튼 클릭  >  Open Git Bash here 클릭   git clone 리포지토리 url (shift + insert 주소 붙여 넣기 하는 방법)   code 리포지토리 이름 (ex Fi  입력 후 Tab 누르면 자동완성) 입력하면 VS코드가 실행된다  파일 수정 후 커밋하기변경 사항이 생길 경우 소스제어 버튼 클릭 변경 사항에 마우스 올리면 + 버튼이 보인다, + 버튼 누르고 커밋할 파일 선택 후 변경 내용 동기화 클릭우측 상단 ... 을 보면 브랜치 변경 또는 생성 풀, 푸시도 가능하다※ Git 명령어도 알아야 하니까 명령어에 익숙해지기 전까진 되도록 사용하지 말자

객체를 변수에 그대로 복사하여 값을 변경할 경우// 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 객체는 함수의 성공 또는 실..

이벤트 핸들러Element.addEventListner('click', function (event) {console.log(event);})이벤트 핸들러란 이벤트가 발생했을 때 실행되는 함수매개변수로 event 객체를 받을 수 있음event.target: 이벤트가 발생한 element 이벤트 위임event.target : 이벤트 발생한 요소event.currentTarget: 이벤트 핸들러가 등록되어 있는 요소 제목 내용 Rating: 평점  부모 요소인 ul 태그 이벤트핸들러가 등록되어 있으면 자식 요소인 li, img, h3, p 태그 중 어떤 것을 클릭해도 부모 요소의 이벤트 핸들러가 실행된다.이벤트 위임을 잘 다루려면 event.target, event.curre..

로고를 클릭하면 새로고침됩니다. ↺ 영화 검색 검색하기 /* 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..