Tech notes

고정 헤더 영역

글 제목

메뉴 레이어

Tech notes

메뉴 리스트

  • 홈
  • 방명록
  • 분류 전체보기 (155)
    • 블로그 운영 기록 (11)
    • IT (82)
      • R (3)
      • C (6)
      • Linux>Shell (14)
      • Database (7)
      • Javascript (28)
      • HTML+CSS (5)
      • 스터디 (19)
    • 기타 (38)
      • Tips (11)
      • Review (6)
      • Math (1)
      • Money (20)
    • 日本語 (24)
      • JLPTN1(上) (13)
      • JLPTN1(下) (8)
      • 비지니스일본어 (3)

검색 레이어

Tech notes

검색 영역

컨텐츠 검색
자바스크립트 로컬저장소에서 데이터 불러오다가 생긴 문제 해결

새로고침하고 기존에 저장된 데이터들을 가져오는 것 까진 문제가 없었으나, 거기서 새로운 input을 넣으면 기존의 값들은 다 날아가는 문제가 있었다. 이런 문제가 발생한 원인은, 인풋을 todo배열에 저장하고, 그때마다 새로운 todo배열로 저장소 내역을 덮어씌우는 식으로 로직을 짰기 때문이었다. todo에 객체들을 저장하고 local storage에 저장하는 것 까지는 문제가 없었으나, todo배열 자체는 새로고침 후엔 텅 빈 상태가 된다. 어찌보면 당연한 거지만 뭐가 문제인지 뒤늦게 눈치챔; 여기서 새 input을 넣으면 기존의 값들은 todo배열에 저장되지 않은 채 새로운 값만 저장되고, 로컬 저장소에 덮어쓰게된다. 그러니 당연히 한번 더 새로고침하면 기존값들은 날아가고 없고 새로 입력한 값만 보이..

IT/Javascript 2021. 1. 29. 10:17

자바스크립트 문법 ... 을 이용한 전개 구문(spread syntax)

🔥 Javascript Spread Syntax (..) 다른 분의 코드를 보다가 배열안에 ... 을 사용한 걸 보고 뭔가 싶어서 찾아보니 전개 구문(Spread syntax)라 불리는 자바스크립트 문법이 있었다. Spread syntax (...) - JavaScript | MDN Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded i..

IT/Javascript 2021. 1. 28. 16:39

자바스크립트 classList 로 DOM요소의 클래스 이름 가져오기

🔥 className VS classList 투두리스트를 만드는 프로젝트를 하는 중에, DOM요소의 클래스 이름을 가져올 때 className보다 classList의 메서드를 쓰는 게 더 좋다는 피드백을 받았다. className은 전체 class들을 하나의 string으로 반환하기 때문에 나중에 새로운 css가 추가되면 원치 않는 에러가 발생할 수 있다는 이유때문이었다. Element.classList - Web API | MDN Element.classList는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다. classList 사용은 공백으로 구분된 문자열인 element.className을 통해 엘리먼트의 클래스 목 developer.mozilla...

IT/Javascript 2021. 1. 28. 11:28

DOM appendChild로 리스트에 요소 추가하기

📣HTML을 수정하지 않고 자바스크립트를 이용해서 요소를 추가하는 방법 새로운 요소를 추가하는 방법은 다음과 같다 1. createElement() - 새로운 노드를 만든다 2. createTextNode() - 새로운 텍스트 노드를 만든다 3. appendChild() - 노드1에 노드2를 append한다 잠깐 의문점) 이렇게 텍스트 노드를 append하는 것과 innerHTML을 사용하는 것의 차이가 뭐지? 어쨌든, 위 1~3을 통해서 삽입할 새 노드를 만들었고, 이제 문서에서 원하는 위치를 찾아서 다시 append해주면 된다. 하나의 노드를 리턴하는 메소드에는 getElementId('id')와 querySelector('css selector')가 있는데 후자를 사용해서 리스트 노드에 접근했다. ..

IT/Javascript 2021. 1. 21. 11:37

추가 정보

인기글

최신글

페이징

이전
1 2 3 4 ··· 7
다음
TISTORY
Tech notes © Magazine Lab
페이스북 트위터 인스타그램 유투브 메일

티스토리툴바