TIL - 20.10.18 (JS, todoList 추가하기)

📖 JS

string, array 메소드 정리

📌 String method

1. string.charAt(number)

str.charAt(index)
인수로 전달한 index에 해당하는 위치의 문자를 반환

2. string.concat(string)

str1.concat(str2)
인수로 전달한 1개 이상의 문자열과 연결하여 새로운 문자열을 반환

3. string.indexOf(string, fromindex)

str.indexOf('a', 2)

• 인수로 전달한 문자 또는 문자열을 대상 문자열에서 검색하여 처음 발견된 index를 반환
  발견하지 못한 경우 -1을 반환
• fromindex : 검색 시작할 인덱스 지정, 미지정시 0

4. string.lastIndexOf(string, fromindex)

str.lastIndexOf('a', 2)

• 인수로 전달한 문자 또는 문자열을 대상 문자열에서 검색하여 마지막으로 발견된 index를 반환
  발견하지 못한 경우 -1을 반환
• fromindex : 검색 시작 위치를 fromIndex으로 이동하여 역방향으로 검색 , 미지정시 (문자열 길이 - 1)

5. string.replace(searchValue, replacer)

str = "Hello python"
str.replace("python", "JS")
첫번째 인수의 문자열 or 정규표현식을 대상 문자열에서 검색
두번째 인수의 문자열로 대체
(원본 문자열은 변경되지 않고 결과가 반영된 새로운 문자열을 반환)
(검색된 문자열이 여럿이면 첫번째로 검색된 문자열만 대체)

6. string.split(separator, limit number)

str.split(',')

• 첫번째 인수의 문자열 or 정규표현식을 대상 문자열에서 검색, 문자열 구분한 후, 분리된 각 문자열로 이루어진 배열을 반환
  (원본 문자열은 변경 x)
  (인수가 없으면 대상 문자열 전체를 단일 요소로 하는 배열을 반환)
• limit number : 문자열 구분 대상수 한계 지정 (미지정시 전체)

7. string.substring(start, end)

문자열에서 start index의 문자부터 end index의 하나 앞 문자까지를 반환
인자로 음수 전달 시, 0으로 취급

8. string.slice(start, end)

substring과 동일
문자열에서 start index의 문자부터 end index의 하나 앞 문자까지를 반환
단, 인자로 음수 전달 가능
str.slice(-5) 이면, 뒤에서 5자리 잘라내어 반환

9. 대소문자

str.toLowerCase() : 문자열 전체 소문자로
str.toUpperCase() : 문자열 전체 대문자로

10. 앞뒤 공백 제거

str.trim() : 문자열 앞뒤 공백 제거
str.trimStart() : 문자열 앞 공백 제거
str.trimEnd() : 문자열 뒤 공백 제거

11. string.repeat(number)

해당 문자열을 인자의 number 만큼 반복한 문자열을 반환

12. string.includes(string)

해당 문자열에서 인자의 string이 있는지 없는지를 불리언값으로 반환

📌 배열

많은 프로그래밍 언어에서 배열의 요소들은 같은 데이터 타입이어야 함
JS 배열은 어떤 데이터 타입의 조합이라도 포함 가능

1. 배열 요소 추가, 삭제

• 추가
  arr[1]=3 이런 식으로 해당 인덱스에 할당해주면됨
• 삭제
  delete : 배열이 arr = [1,2,3,4] 일 때, delete arr[1] 하면, arr = [1, empty, 3, 4] 됨
  -> 요소의 값만 삭제
  splice : arr.splice(시작 인덱스, 삭제할 요소 수)
arr.splice(1, 1) 하면, arr = [1,3,4] 됨
  -> 요소를 완전히 삭제
  

2. 배열 순회

배열의 순회에는 forEach 메소드, for 문, for…of 문을 사용 추천
(for...in문은 불필요한 것까지 나올 수 있으니 비추)

📌 배열 method

1. array.isArray(내용)

주어진 인자가 배열이면 true, 배열 아니면 false

2. array.of(내용)

주어진 인자를 요소로 갖는 배열 생성

3. array.indexOf(요소, 시작인덱스)

첫번째 인자를 원본 배열에서 검색하여 인덱스 반환
(중복되면 첫번째 인덱스 반환)
(없으면 -1)
(두번째 인자 생략시 처음부터)

4. array.concat(추가할 내용)

전달된 인자를 원본 배열 마지막에 추가한 새로운 배열 반환

5. array.join(구분자)

원본 배열 문자열로 변환, 주어진 인자를 구분자로 연결한 문자열 반환
구분자 생략 시, 기본 구분자는 ','

6. array.push(추가할 내용)

전달된 인자를 원본 배열 마지막에 추가하고 결과 배열의 length 반환
원본 배열 자체가 변함
(concat은 새로운 배열 반환, push는 원본 배열에 추가)
(전달 인자가 배열인 경우, 배열 자체를 추가함)

7. array.pop()

전달 인자 없음
원본 배열 마지막 요소 제거하고, 제거한 요소 반환
원본 배열 자체가 변함
(push, pop으로 stack 구현 가능)
(stack : LIFO)

8. array.reverse()

전달 인자 없음
원본 배열 요소 순서 반대로 한 배열 반환
원본 배열 자체가 변함

9. array.shift()

전달 인자 없음
원본 배열 첫 요소 제거하고, 제거한 요소 반환
원본 배열 자체가 변함
(push, shift으로 queue 구현 가능)
(queue : FIFO)

10. array.unshift(추가할 내용)

전달된 인자를 원본 배열 마지막에 추가
원본 배열 자체가 변함

11. array.slice(start, end)

start index 부터 end index 하나 앞 요소까지 복사하여 반환
원본 배열 변하지 않음
start에 음수 입력 시, 끝에서부터 자름
end 미지정시, 기본값은 배열의 length
start, end 둘다 미지정시, 배열 전체를 복사하여 반환

12. array.splice(start, 제거 요소 수, 추가할 요소)

첫번째 인자부터 두번째 인자 수만큼 원본 배열에서 요소 제거하고, 세번째 인자의 요소 추가
start : start만 지정하면 start부터 전부 제거
제거 요소 수 : 0으로 설정하면 삭제 안함
추가할 요소 : 미지정시, 삭제만

원본 배열 자체가 변함

📖 자기소개 페이지에 todo 추가

노마드코더 강의 들으면서 만들었던 todo list를 복습 겸 자기소개페이지에 추가해보자!

todoList 페이지를 추가하고, form, input으로 입력받음
JS파일 연결해서 동작 구현

0. 연결하기

html 파일 body 맨 마지막에
<script src="todo.js"></script> 추가하여 JS파일 연결
JS파일에서 document.querySelector("선택자") 로 태그 선택

1. todo 불러오기

개발자도구 -> Application -> Local storage
key가 toDos 인 항목이 있으면 값을 불러오기

• localstorage : 브라우저의 저장소, 브라우저가 닫혀도 유지
• localstorage.getItem(key) : key에 해당하는 값 가져오기
• JSON.parse(내용) : JSON 형식의 문자열을 자바스크립트 객체로 변환

JS 객체로 변환하고, text로 변환하여 보여주기

2. todo list만들어서 보여주기

• document.createElement("생성할 요소") : html에 요소 생성
• innerText : 요소 안에 들어갈 text 설정
• addEventListener(이벤트, 함수) : 지정한 이벤트가 발생할 때마다 호출할 함수 지정
• 부모.appendChild(자식) : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 추가

li, button, span 생성
li 의 자식으로 span, button 추가
li 의 id는 todo list에 추가된 순서대로 1,2,3...
html의 ul 의 자식으로 li 추가
todo 객체 생성해서 배열에 추가 후 저장

3. 기록한 todo list 저장하기

localstorage.setItem(설정할 key, JSON 형식 문자열);

4. delete 버튼으로 todo list 삭제하기

button 눌리면 그 버튼의 parentNode인 li를 todo list 에서 삭제

• filter() : 인자로 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

5. Input에 제출됐을 때, 이벤트 관리

• event.preventDefault() : "submit" 이벤트 발생할 때마다 reload되는데, 그거 막음
• 현재 input 창에 있는 값을 todoList 추가 (보여주기, 저장)

6. list 목록 아이템 앞에 아이콘 추가

ul li:before{
    content: "💎";
    display: inline-block;
    vertical-align: middle;
    padding: 0px 5px 5px 0px;
  }