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..

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

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

지난 글에서 HTML 구조를 잡았었는데요. 결과물은 아래 이미지처럼 예쁘진 않지만 일단 필요한 모양들은 다 갖춰진 모습을 하고 있습니다. 너무 보기 힘든 수준이면 예쁘게 다듬는 작업부터 하려고 했었는데, 기능적은 부분을 만드는데 크게 불편함은 없는 수준이라 투두리스트의 기능부터 만들어보려고 해요. 가장 먼저 해야 할 일은 생성 기능이라 생각해서, 생성 기능부터 한번 만들어 보겠습니다. input#todo-input에 텍스트를 입력하고 button#submit-btn을 클릭하면 ul#todo-list에 li.todo-item이 추가되도록 해볼거예요. HTML 수정 일단은 HTML 수정을 먼저 해보겠습니다. li.todo-item이 계속 반복될 거라서 li 부분을 template 태그로 빼볼 건데요. 달라지..

두 번째 프로젝트가 2020년에 완성됐는데, 2024년에 세 번째 프로젝트를 시작하네요. ㅎㅎㅎ 세 번째는 투두리스트를 만들어보려 합니다. 두 번째 프로젝트와 연계해서 날짜별로 투두리스트를 관리하는 큰 그림을 그려볼까 하는데, 일단은 투두리스트에만 집중해서 프로젝트를 완성시켜 볼게요. 기획 이번에도 손그림으로 간단하게 프로젝트를 그려봤습니다. 투두리스트 하면 제 머릿속에 떠오르는 세로로 긴 사각 박스를 그렸고, 손으로는 이렇게 그렸지만 가로 세로 1:1.61804 황금비로 만들어 보겠습니다. 상단에는 가운데 정렬로 Todo-list라는 타이틀이 들어가고, 그 아래는 input 태그랑 add 버튼으로 아이템을 생성(Create)하는 기능을 갖추고 그 아래는 생성된 아이템들을 나열(Read)하고, 각 아이템..