JSON 3

JavaScript: 외부 서버와 통신하기! Fetch API 기초 (날씨 데이터 가져오기) 🌤️

안녕하세요, 독자 여러분! 개발자의 삶입니다. 😊31일차 포스팅에서는 Geolocation API를 사용하여 내 컴퓨터나 스마트폰이 위치한 곳의 위도와 경도 숫자를 얻어내는 방법을 배웠습니다. 하지만 숫자만으로는 지금 밖이 더운지, 비가 오는지 알 수 없습니다.우리가 알아낸 좌표를 날씨 정보를 가지고 있는 거대한 컴퓨터(서버)에게 보내서, "이 좌표의 현재 날씨를 알려줘!"라고 요청해야 합니다. 오늘은 자바스크립트가 외부 세계와 대화할 수 있게 해주는 통신 마법사, Fetch API에 대해 알아보겠습니다.1. 도입지금까지 우리가 작성한 코드는 모두 브라우저 안에서만 외롭게 동작했습니다. 하지만 현대의 웹사이트는 수많은 외부 서버와 데이터를 주고받습니다. 유튜브는 구글 서버에서 영상을 가져오고, 인스타그..

IT/Javascript 2026.03.19

JavaScript: 투두 리스트 완성! LocalStorage와 JSON으로 데이터 영구 저장하기 💾

안녕하세요, 독자 여러분! 개발자의 삶입니다. 😊23일차에 투두 리스트의 겉모습과 기능을 만들었고, 24일차와 25일차에는 데이터를 브라우저에 저장하는 LocalStorage와 JSON 사용법을 배웠습니다. 드디어 오늘, 이 모든 지식을 하나로 합체시킬 시간입니다!새로고침을 해도 사라지지 않는, 진짜 사용 가능한 나만의 투두 리스트를 완성해 봅시다. 오늘 포스팅은 조금 길 수 있지만, 이것만 해내면 여러분은 자바스크립트 초보 딱지를 뗄 자격이 충분합니다.1. 도입지금까지 만든 투두 리스트는 화면에만 그림을 그리는 수준이었습니다. 그래서 새로고침하면 도화지가 새것으로 바뀌어버렸죠. 이제 우리는 화면에 그리는 동시에, 브라우저 내부의 금고(LocalStorage)에도 똑같은 내용을 기록해 둘 것입니다. 그..

IT/Javascript 2026.01.14

JavaScript: 객체와 배열 저장하기! JSON.stringify와 JSON.parse 완벽 정리 📦

안녕하세요, 독자 여러분! 개발자의 삶입니다. 😊24일차 포스팅에서는 브라우저의 저장소인 LocalStorage에 데이터를 저장하는 법을 배웠습니다. 새로고침을 해도 이름이 사라지지 않게 만드는 데 성공했었죠.하지만 LocalStorage에는 치명적인 약점이 하나 있습니다. 바로 "문자열(String)만 저장할 수 있다"는 점입니다. 우리가 만든 투두 리스트나 복잡한 사용자 정보는 대부분 배열(Array)이나 객체(Object) 형태인데, 이걸 억지로 저장하면 데이터가 깨져버립니다.오늘은 이 문제를 해결해 줄 마법의 열쇠, JSON 변환에 대해 알아보겠습니다. 이 기술을 익히면 어떤 복잡한 데이터라도 LocalStorage에 안전하게 보관할 수 있습니다.1. 도입만약 이사 갈 때 커다란 침대를 그대로 ..

IT/Javascript 2026.01.07