BigTop_Log BigTop_Log

LocalStorage란? LocalStorage는 웹 브라우저에서 클라이언트 측에서 데이터를 저장할 수 있는 여러 메커니즘 중 하나로, 특정 네트워크 요청을 통해 값을 저장하고 불러오는 것이 아니라 키-값 쌍을 사용하여 온전히 브라우저의 리소스만을 사용해서 데이터를 저장하고 불러올 수 있다는 특징이 있다. 심지어 브라우저를 종료하고 다시 열어도 유지된다. LocalStorage 다루기 로컬스토리지(LocalStorage)를 다루는 방법은 간단하다. localStorage라는 객체를 그냥 사용하면 된다. localStorage의 각 메서드를 활용하면 손쉽게 저장하고 불러오고 삭제하고 초기화 할 수 있다. 저장하기 저장은 setItem 이라는 메서드를 활용한다. 두 개의 파라미터를 가지는데, 키-값 순서대..

includes 메서드란? includes 메서드는 배열이나 문자열에 특정한 값을 포함하는지 여부를 확인하는 메서드다. 특정한 값을 포함하는지에서 유추할 수 있듯이, includes 메서드는 boolean 타입의 값을 리턴한다. 문법 문법은 생각보다 간단한 형태로 사용되는데, 배열이나 문자열 뒤에 includes 메서드를 실행시키고 첫 번째 파라미터에 확인하고 싶은 특정한 값을 아규먼트로 전달해 주면 된다. // 1. 배열에서 includes() 메서드 사용 예시: const array = ['제우스', '카나비', '쵸비', '룰러', '케리아']; console.log('1. 배열에서 includes() 메서드 사용 예시:'); console.log(array.includes('쵸비')); // ? ..

Every 메서드란? every 메서드는 배열의 요소들이 특정 조건을 모두 만족하는지를 확인하는 배열(Array)의 메서드다. 문법 역시 some과 마찬가지로 forEach, map, filter와 거의 비슷하게 첫 번째 파라미터가 콜백 함수를 전달받지만, 앞의 메서드들과는 다르게 boolean 타입의 값을 리턴한다. 문법 const values = [1, 2, 3, 4, 5, 6]; const isPositive = values.every((currentElement, index, currentArray) => { console.log(`요소: ${currentElement}`); console.log(`index: ${index}`); console.log(currentArray); return cu..

some 메서드란? some 메서드는 배열의 요소들중 특정 조건을 만족하는 요소가 하나 이상 있는지를 확인하는 배열(Array)의 메서드다. 문법은 forEach, map, filter와 거의 비슷하게 첫 번째 파라미터가 콜백 함수를 전달받지만, 앞의 메서드들과는 다르게 boolean 타입의 값을 리턴한다. 문법 const values = [1, 2, 3, 4, 5, 6]; const hasOver5 = values.some((currentElement, index, currentArray) => { console.log(`요소: ${currentElement}`); console.log(`index: ${index}`); console.log(currentArray); return currentElem..

지난 글에서는 실제로 업데이트하기보다는 업데이트 준비를 했었는데요.이번엔 정말로 데이터 업데이트 로직을 작성해 봅시다. 지난 글에서 로컬스토리지에 저장할 때 수정했던 데이터 구조 기억하시나요?타이틀만 저장하던 객체에서 id와 isCompleted를 추가하는 작업까지 마쳤었는데요.이 두 데이터 속성을 활용해서 체크박스 완료 상태 업데이트하는 기능을 만들어봅시다. 체크박스(input type="checkbox")의 특징 알고 가기본격적으로 기능을 만들기 전에 사실 지금까지 작성한 투두 리스트 화면을 보면(이미 해보셨을 수도 있겠지만,) 새로 추가한 할 일의 체크박스를 클릭했을 때 딱히 이벤트를 등록하지 않았는데도 UI에서 체크 표시가 생겼다 사라졌다 하는 걸 확인할 수 있습니다.이건 체크박스 타입을 가진 인..

업데이트 기능 준비지난 글에서 로컬스토리지에 할 일들을 생성하고 불러오는 기능까지 완료했었습니다.지금까지 완성한 코드를 실행해 보면 아이템들이 잘 생성되기도 하고 로컬스토리지에 저장도 되고, 페이지를 새로고침 해도 그대로 잘 남아있습니다.그런데 아직 업데이트 기능이 없어서, 아이템 앞에 있는 체크박스를 클릭해도 새로고침 하면 금방 사라져 버리고, edit 버튼을 클릭해도 아무 일도 일어나질 않죠? 그래서 이번에는 지난 시간에 예고했던 대로 CRUD 중에서 U, 아이템을 업데이트하는 기능을 만들어보려고 하는데요. todo list에서 업데이트 기능은 방금 말한 것처럼 크게 두 가지가 있죠? 첫 번째는 완료 상태를 구분하는 체크박스 기능과두 번째는 우리가 그동안 작성해온 아이템의 타이틀을 수정하는 기능입니다..

지난 글 정리지난 글에서 로컬스토리지에 할 일들을 저장하는 기능까지 완료했었습니다.지금까지 완성한 코드를 실행해보면 아이템들이 잘 생성되기도 하고 로컬스토리지에 저장도 되지만, 막상 페이지를 새로고침하면 모두 사라지는 상태인데요. 심지어 그 상태에서 새로고침을 한 이후에 새로운 아이템들을 생성하게 되면 아래 이미지처럼 로컬 스토리지에 저장된 아이템과, 화면에 보이는 아이템들 간의 차이도 발생하게 됩니다.그럼 지금부터는 페이지를 새로고침했을 때 로컬스토리지에 저장된 값을 불러와서 화면에 그려주는 것까지 마무리해볼게요. load 함수 만들기일단 그럼 로컬스토리지에 있는 데이터를 가져와서 아이템을 추가해 주는 함수를 한번 만들어봅시다.// ... addTodoItem ... const loadTodoItem ..

지난 글에서 할 일을 생성하는 기능을 만들었었는데요. 생성하는 기능이 잘 동작하긴 하는데, 페이지를 새로고침 하면 아이템들이 모두 사라져 버립니다. 이번에는 localStorage를 활용해서 아이템을 생성할 때 그 정보를 저장해 두고, 새로고침을 해서 페이지가 갱신될 때 localStorage에 저장된 정보를 가지고 와서 아이템들이 사라지지 않고 페이지가 갱신되기 직전의 모습을 유지할 수 있도록 해보려고 해요. 리팩터링 일단은 지난번에 작성했던 코드를 조금 수정해 보겠습니다. 수정하는 이유는, 앞으로의 코드들이 읽기, 수정, 삭제 기능들이 붙으면서 점점 더 복잡해질 예정이기 때문에 조금 더 의미를 명확하게 구분할 수 있도록 각 역할에 맞는 이름을 붙여주기 위해서예요. 일단은 handleFormSubmit..