개발일지

// 댓글 입력 폼 const commentForm = document.querySelector('.commentForm');// 댓글 목록 ulconst commentBox = document.querySelector('.commentBox');// 폼 submit 이벤트commentForm.addEventListener("submit", (e) => { // 폼은 기본적으로 새로고침을한다. 이벤트의 기본 동작을 취소시킴(새로고침 막기) e.preventDefault(); // 인풋 가져오기 const userName = document.querySelector('.userName') const comment = document.querySelector('.comment') const pw ..

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 객체는 함수의 성공 또는 실..

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