데이터 탐색

데이터 탐색은 수집한 데이터의 특성과 구조를 이해하고, 분석 방향을 잡기 위한 중요한 과정이다. 탐색적 데이터 분석(EDA)을 통해 데이터의 분포, 이상치, 결측치, 변수 간 관계 등을 파악하며, 시각화와 통계적 지표를 적극 활용한다.

1. 데이터 탐색의 목적과 절차

• 데이터의 기본 구조와 변수의 유형을 확인한다.
• 기술통계량(평균, 중앙값, 분산 등)으로 데이터의 중심과 분포를 파악한다.
• 시각화(히스토그램, 박스플롯, 산점도 등)로 데이터의 이상치, 분포, 변수 간 관계를 직관적으로 이해한다.
• 상관분석 등으로 변수 간의 연관성을 분석한다.

2. 대표적인 탐색 방법과 지표

3. 데이터 탐색의 실제 절차

1. 데이터 구조와 변수 유형 확인
2. 기본 통계량 계산
3. 시각화로 분포/이상치/관계 파악
4. 상관분석 등 변수 간 관계 분석
5. 결측치/이상치 처리 방향 결정

4. 용어 정리

• EDA(Exploratory Data Analysis): 탐색적 데이터 분석
• 박스플롯: 사분위수, 이상치 시각화
• 결측치: 누락된 데이터 값
• 상관계수: 두 변수 간 선형관계의 척도

정리

React에서 로컬스토리지 연결하기

React에서 영화 찜(하트) 기능을 만들면서 로컬스토리지(localStorage)에 배열을 안전하게 저장하고 꺼내는 방법, 그리고 || "[]"를 쓰는 이유와 함께 정리했습니다.

1. || "[]"를 추가한 이유

• 로컬스토리지에서 값을 꺼낼 때
  localStorage.getItem("WatchList")는 저장된 값이 없으면 null을 반환합니다.
• null을 바로 JSON.parse에 추가했을 경우
  JSON.parse(null)은 null을 반환해서 에러는 안 나지만,
  undefined나 "undefined" 같은 잘못된 값이 들어가면 에러가 납니다.
• 빈 배열로 안전하게 시작하기
  localStorage.getItem("WatchList") || "[]"처럼 써주면,
  값이 없을 때 항상 빈 배열 문자열로 대체되어 JSON.parse("[]")가 []를 반환합니다.

2. 안전하게 로컬스토리지 배열을 꺼내는 코드

const savedList = localStorage.getItem("WatchList") || "[]";
let watchList = [];
try {
  watchList = JSON.parse(savedList);
  if (!Array.isArray(watchList)) watchList = [];
} catch (e) {
  watchList = [];
}

• 값이 없거나, 잘못 저장된 경우에도 무조건 배열로 만들어줍니다.
• 이렇게 하면 .some(), .filter() 등 배열 메서드를 안전하게 사용 가능합니다.

3. 구현 코드

import React, { useEffect, useState } from "react";
import pinkHeart from "../../imgs/pinkheart.png";
import greyHeart from "../../imgs/greyheart.png";

const Ranking = ({ movie }) => {
  const [isClicked, setIsClicked] = useState(false);

  // 컴포넌트가 처음 나타날 때, 이 영화가 찜 목록에 있는지 확인
  useEffect(() => {
    const savedList = localStorage.getItem("WatchList") || "[]";
    let watchList = [];
    try {
      watchList = JSON.parse(savedList);
      if (!Array.isArray(watchList)) watchList = [];
    } catch (e) {
      watchList = [];
    }
    const found = watchList.some((item) => item.id === movie.id);
    setIsClicked(found);
  }, [movie.id]);

  // 하트 버튼 클릭 시
  const handleClick = () => {
    const savedList = localStorage.getItem("WatchList") || "[]";
    let watchList = [];
    try {
      watchList = JSON.parse(savedList);
      if (!Array.isArray(watchList)) watchList = [];
    } catch (e) {
      watchList = [];
    }

    if (isClicked) {
      // 이미 찜한 상태: 제거
      const myList = watchList.filter((item) => item.id !== movie.id);
      localStorage.setItem("WatchList", JSON.stringify(myList));
      setIsClicked(false);
    } else {
      // 찜하지 않은 상태: 추가
      const newList = [...watchList, movie];
      localStorage.setItem("WatchList", JSON.stringify(newList));
      setIsClicked(true);
    }
  };

  const heartImg = isClicked ? pinkHeart : greyHeart;

  return (
    <div>
      <p>{movie.title}</p>
      <img src={heartImg} onClick={handleClick} alt="찜하기" />
    </div>
  );
};

• 하트는 isClicked 값에 따라 분홍/회색이 바뀝니다.
• 찜 추가/제거 시 로컬스토리지와 상태를 모두 바꿔야 화면이 즉시 반영됩니다.

정리

• 로컬스토리지에서 배열을 꺼낼 때는 항상 || "[]"를 붙입니다.
• 이렇게 하면 값이 없거나 잘못된 값이 들어가도 에러 없이 빈 배열로 시작할 수 있습니다.
• 배열 메서드를 쓸 때도 안전하다.
• 키 이름(예: "WatchList")은 항상 일관되게 사용해야 합니다.

로컬 스토리지란?

로컬스토리지는 브라우저에 정보를 저장하는 기능입니다.
예를 들어, 내가 입력한 데이터를 새로고침해도 남아있게 하고 싶을 때 사용할 수 있습니다.
내 컴퓨터 브라우저에 데이터를 저장하는 상자라고 생각할 수 있습니다.

• 브라우저를 껐다 켜도 데이터가 존재합니다.
• 문자(문자열)만 저장할 수 있습니다.
• 로그인 정보, 테마 설정, 임시 데이터 저장 등에 사용합니다.
• 로컬스토리지는 문자(문자열)만 저장할 수 있습니다.

그러나, 우리가 사용하는 객체나 배열은 문자열이 아니기 때문에 바로 저장할 수 없으므로

저장할 때는 JSON.stringify()로 문자열로 바꿔서 저장하고

불러올 때는 JSON.parse()로 다시 원래 객체/배열로 변환해야 합니다.

로컬스토리지 사용법

1. 데이터 저장하기

// 'username'이라는 이름으로 '김강현' 저장
localStorage.setItem('username', '김강현');

2. 데이터 불러오기

// 'username'이라는 이름의 데이터 꺼내오기
const name = localStorage.getItem('username');
console.log(name); // '김강현'

3. 데이터 삭제하기

// 'username' 데이터 삭제
localStorage.removeItem('username');

4. 객체 저장 & 불러오기

// 객체를 문자열로 변환해서 저장
const user = { name: '김강현', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// 저장된 데이터는 실제로 이렇게 보입니다:
// '{"name":"김강현","age":30}'

// 불러올 때는 다시 객체로 변환
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // '김강현'
console.log(savedUser.age);  // 30

5. 배열 저장 & 불러오기

// 배열을 문자열로 변환해서 저장
const fruits = ['사과', '바나나', '포도'];
localStorage.setItem('fruits', JSON.stringify(fruits));

// 불러올 때는 다시 배열로 변환
const savedFruits = JSON.parse(localStorage.getItem('fruits'));
console.log(savedFruits[0]); // '사과'

정리

• 로컬스토리지는 브라우저에 간단한 정보를 저장할 때 사용합니다.
• 문자열만 저장 가능하므로 객체/배열은 JSON.stringify와 JSON.parse를 꼭 사용해야 합니다.
• 새로고침이나 브라우저를 껐다 켜도 데이터가 남아있어서 편리합니다.
• 브라우저에 데이터가 존재하므로 중요한 개인정보(비밀번호, 토큰 등)등의 저장에 주의해야 합니다.