Ted's Codding study

로컬 스토리지를 활용한 Todo 예제 정답입니다.절대 제가 작성한 코드가 무조건 적인 정답은 아니며, 여러분의 생각과 다르다면 그것이 정답일 것입니다~~HTML 코드 Add Task CSS 코드body { background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;}.container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); width: 500px;}..

해당 페이지는 연습용으로 질문만 있고 정답은 다음 글에서 공개합니다HTML 코드와 CSS 코드를 복붙한 후 main.js를 생성해서 아래 설명대로 한번 작성해보세요!HTML 코드 Add Task CSS 코드body { background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;}.container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); width: ..

1. localStorage.getItem(key)의 기본 사용법localStorage.getItem 메소드는 지정된 키에 해당하는 값을 로컬 스토리지에서 검색하여 반환키에 해당하는 데이터가 없으면 null을 반환해당 메소드는 데이터를 조회할 때 사용되며, 매우 간단하고 직관적인 API를 제공'key'는 데이터에 접근하기 위해 사용되는 식별자해당 식별자를 통해 저장된 값을 검색 가능사용 예제// localStorage.setItem('username', '테드');// localStorage.setItem('key', 'value'); // 앞선 예제에서 넣었던 setItem 목록let value = localStorage.getItem('key');console.log(value);let usernam..

1. 로컬 스토리지의 정의웹 브라우저가 제공하는 저장 공간사용자의 컴퓨터에 영구적으로 데이터를 저장 가능HTML5 웹 스토리지 사양의 일부로 도입, 쿠키의 한계를 극복하고 더 큰 저장 용량과 더 나은 보안을 제공로컬 스토리지를 통해 저장된 데이터는 서버에 자동으로 전송되지 않으며, 웹 페이지가 로컬 데이터를 직접 제어 가능 2. 로컬 스토리지의 용도1) 사용자 경험 개선로컬 스토리지는 사용자의 기본 설정, 테마 선택, 언어 설정 등을 저장하여 , 다음 방문 때 웹사이트가 이 설정들을 기억하도록 지정2) 상태 유지웹 어플리케이션에서 사용자의 세션 정보나 로그인 상태를 관리할 수 있어, 브라우저를 종료 후 재접속했을 때도 이전 상태를 유지 가능3) 오프라인 데이터 저장네트워크 연결이 끊겨도 접근 가능한 정보..

1. JSON 구조JSON 내부에는 JS에서 사용할 수 있는 기본 데이터 타입인 문자열, 숫자, 배열, 불리언, 그 밖의 다른 객체 또한 포함 가능JS의 배열과 객체를 활용하여 어떠한 자료의 형태를 표현하는 형식'key-value' 즉, '키-값'를 쌍으로 데이터를 구조화하는데 사용형태 자체는 js의 객체와 유사하지만, json은 순수한 텍스트 형식이기 때문에 키를 항상 따옴표로 묶어야 함.값에는 함수 등은 사용 불가문자열은 큰따옴표 사용을 권장 2. JSON 사용서로 다른 시스템 간에 구조화된 데이터를 전송하는데 사용json형태로 여러 자료형을 나타내는 방법let data = [ { name: '테드', age: 25, job: 'developer', hobby: { f..