왕돼지티라노의 기록

얕은 복사: 주소값까지만 복사함 깊은 복사: 실제 데이터까지 복사함 ※ Spread 연산자(...) → 하나로 뭉쳐져 있는 값들의 집합을 전개해주는 연산자이다. // ex1) let arr = [1, 2, 3, 4, 5]; console.log(arr); // [1, 2, 3, 4, 5] console.log(...arr); // 1, 2, 3, 4, 5 // ex2) let str = "Hello"; console.log(str); // Hello console.log(...str) // H e l l o 참조 타입의 복사 let origin = { name: "otter", age: 25 }; let copy = origin; console.log(origin.name); // "otter" //복사..

배열의 구조분해할당 const arr = [1, 2, 3, 4, 5]; let [one, two] = arr; console.log(one); // 1 console.log(two); //2 let 키워드를 통해 각각의 변수에 할당되고, 순서에 의해서 할당된다. 객체의 구조분해할당 const obj = {name: "otter", gender: "male"}; let {name, gender} = obj; console.log(name); // otter console.log(gender); // male let {name: newName, gender: newGender} = obj; // newName, newGender라는 새로운 변수로 할당 console.log(newName, newGender)..

input 태그에 textContent를 입력하고 엔터키를 누르면 태그 하위에 를 append 하는 기능을 만든다. 할 일 createElement: document에서 엘리먼트를 생성하는 메소드 appendChild: 해당 태그 하위에 엘리먼트를 삽입해주는 메소드 cf) 지금은 스트립트를 내부에서 사용하고 있지만 외부 스크립트를 사용할 때는 defer 속성을 사용한다. defer 속성은 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시한다. 참조된 외부 스크립트 파일을 다음과 같이 여러 가지 방법으로 실행시킬 수 있다. - async 속성이 명시된 경우 : 브라우저가 페이지를 파싱되는 동안에도 스크립트가 실행됨. - async 속성은 명시되어 있지 않고 defer 속성만 명시된 경우 : 브..

ul(unordered list): 순서가 없는 리스트 ol(ordered list): 순서가 있는 리스트 li(list): 리스트

웹 스토리지: 브라우저에 데이터를 저장할 수 있는 기술 Session Storage 1. key-value 값으로 저장된다. 2. 로컬 환경 데이터에 저장된다. 3. 세션 단위로 구분되어 활용된다. *세션: 사용자가 브라우저를 통해 웹 페이지에 접속한 시점부터 종료하는 시점까지를 의미 Local Storage 1. key-value 값으로 저장된다. 2. 로컬 환경 데이터에 저장된다. 3. 도메인 단위로 구분되어 활용된다. ex) localhost -->뒤에 어떠한 url이 오든 공유됨(엔트포인트가 달라도) 4. 브라우저 자체를 종료해도 존재한다. 5. 컴퓨터를 껐다켜도 존재한다. // 로컬 스토리지에 저장함 localStorage.setItem('saved-date', targetDateInput); ..

JS코드에서 Fetch함수를 이용하여 게시글 리스트를 조회하는 api를 불러오는 과정에서, 아무리 검토를 해봐도 화면에 리스트가 보여지지 않았다. DB에 정보가 있는것도 확인하였고 콘솔에도 아무런 오류가 찍히지 않아 소스를 여러번 보았으나, 한시간동안 답을 찾지 못했다... ​ 아래는 문제의 코드이다... 어떤 부분이 잘못되었는지 알아보겠나..? 문제는 생각보다 간단했다.. 마지막에 html 변수를 list라는 id를 가진요소에 할당할 때 오타가 있었던것이다... 위와 같이 innerHtml -> innerHTML로 수정해주면 데이터가 올바르게 출력된다.. 앞으로는 이런걸로 삽질하지 않도록 해야겠다...^^