[스나이퍼팩토리] 한컴AI아카데미(26.04.13)

이름 나이 표 만들기(리뷰)

---

review.html

0.00MB

 

 

 

장바구니 만들기(리뷰)

---

 

.reduce(): 여러 개의 값이 담긴 배열을 **"하나의 값으로 응축(reduce)"**할 때 사용(누산기)

• 기본 문법

array.reduce((accumulator, currentValue, currentIndex, array) => {
  return nextAccumulator;
}, initialValue);

 

• accumulator (누산기): 콜백의 반환값을 누적합니다. 마지막에는 최종 결과값이 됩니다.
• currentValue: 현재 처리 중인 배열 요소입니다.
• initialValue (선택 사항): accumulator의 초기값입니다. (안 쓰면 배열의 첫 번째 요소가 초기값이 됩니다.)

- 예시

const cart = [
  { item: "노트북", price: 1200000 },
  { item: "마우스", price: 35000 },
  { item: "키보드", price: 89000 }
];

const total = cart.reduce((acc, cur) => acc + cur.price, 0);
console.log(total); // 1324000

 

 

review1.html

0.00MB

 

 

 

학생 생기부

---

studentScore.html

0.00MB

 

 

 

localStorage

---

 

브라우저에 데이터를 반구구적으로 저장할 수 있는 저장소(f12 application-localStorage에 저장)

 

- 주요 특징

• 유효 기간: 명시적으로 삭제하지 않는 한 데이터가 영원히 유지됩니다.
• 용량: 브라우저마다 다르지만 대략 5MB 정도로, 쿠키(4KB)보다 훨씬 큽니다.
• 도메인 제한: 프로토콜(http/https)과 도메인이 같아야 데이터에 접근할 수 있습니다.
• 동기적 실행: 작업이 끝날 때까지 자바스크립트 실행이 잠시 멈출 수 있으므로, 너무 큰 데이터를 다룰 때는 주의해야 합니다.
• localStorage는 키(Key)-값(Value) 쌍으로 데이터를 저장하며, 모든 데이터는 문자열로 저장
  • 그렇기 때문에 객체나 배열을 그대로 넣으면 "[object Object]"처럼 깨져서 저장됩니다. 이때 JSON이 필요
  • 저장할 때: JSON.stringify()로 직렬화(객체 -> 문자열)
  • 가져올 때: JSON.parse()로 역직렬화(문자열 -> 객체)

- 예시

const user = { name: 'Gemini', level: 10 };

// 객체를 문자열로 바꿔서 저장
localStorage.setItem('userInfo', JSON.stringify(user));

// 문자열을 다시 객체로 바꿔서 읽기
const savedUser = JSON.parse(localStorage.getItem('userInfo'));
console.log(savedUser.name); // "Gemini"

 

-.getItem(), .setItem()

• localStorage.setItem(key, value) : 데이터 저장하기
  • 물건을 상자에 담아 라벨을 붙이는 과정이라고 생각하면 쉽습니다.
  • key (키): 데이터의 이름 (나중에 찾을 때 쓰는 이름표)
  • value (값): 저장할 실제 내용(객체나 배열은 반드시 JSON.stringify()를 거쳐야한다)
• localStorage.getItem(key) : 데이터 불러오기
  • key (키): 찾으려는 데이터의 이름
  • 반환값: 찾으려는 이름표가 있으면 그 값을 돌려주고, 없으면 **null**을 돌려줍니다.(객체로 불러오려면 반드시 JSON.parse()를 거쳐야한다)

localStorage.html

0.00MB

 

 

cookie

---

 

- 브라우저에 저장되는 아주 작은 텍스트 파일입니다. 주로 사용자를 식별하거나 상태를 유지하기 위해 사용

 

- 쿠키의 특징

• 작은 용량: 한 개당 약 4KB까지만 저장할 수 있습니다.
• 자동 전송: 브라우저가 서버에 요청을 보낼 때마다 HTTP 헤더에 포함되어 자동으로 전송됩니다. (서버가 나를 기억하게 하는 핵심!)
• 만료 날짜: 유효 기간을 설정할 수 있어, 브라우저를 닫아도 데이터가 유지되게 할 수 있습니다.

*쿠키 vs 로컬 스토리지

구분	쿠키 (Cookie)	로컬 스토리지 (localStorage)
용량	매우 작음(4KB)	비교적 큼(5MB 이상)
서버 전송	자동으로 서버에 전달됨	브라우저에만 있고 서버로 안감
유효기간	설정 가능(만료일 존재)	수동으로 지우기 전까지 영구적
주 사용처	로그인 세션 유지, 팝업 '오늘만 보기'	연락처 저장, 장바구니, 설정값

로그인예제(cookie사용).html

0.00MB

 

 

 

연락처관리시스템

---

 

- HTML(로그인 폼 구상)

<div class="container">
  <h2>연락처 관리</h2>
  
  <!-- 입력 영역 -->
  <div class="input-group">
    <input type="hidden" id="edit-index"> <!-- 수정 시 인덱스 저장용 -->
    <input type="text" id="name" placeholder="이름">
    <input type="text" id="phone" placeholder="전화번호">
    <button id="save-btn" onclick="saveData()">추가</button>
  </div>

  <!-- 출력 테이블 -->
  <table>
    <thead>
      <tr>
        <th>이름</th>
        <th>전화번호</th>
        <th>관리</th>
      </tr>
    </thead>
    <tbody id="list-body"></tbody>
  </table>
</div>

 

- CSS(폼 스타일)

    body { font-family: sans-serif; padding: 20px; line-height: 1.6; }
    .container { max-width: 500px; margin: 0 auto; }
    .input-group { display: flex; gap: 5px; margin-bottom: 20px; }
    input { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
    button { padding: 8px 12px; cursor: pointer; border: none; border-radius: 4px; background: #007bff; color: white; }
    button.edit-btn { background: #ffc107; color: black; margin-right: 5px; }
    button.del-btn { background: #dc3545; }
    table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
    th { background-color: #f8f9fa; }

 

-자바스크립트

   1. 초기 데이터 로드

  let contacts = JSON.parse(localStorage.getItem('contacts')) || [];

 

동작: contacts라는 변수를 선언하고 "contacts"라는 이름을 가진 데이터(문자열)를 객체로 변환한 뒤 contacts라는 변수에 넣어줘. 만약 없다면 null 값을 넣지 말고 빈 배열 []을 넣어줘

 

   2. 화면 렌더링 함수

  function render() {
    const listBody = document.getElementById('list-body');
    listBody.innerHTML = '';

    contacts.forEach((item, index) => {
      listBody.innerHTML += `
        <tr>
          <td>${item.name}</td>
          <td>${item.phone}</td>
          <td>
            <button class="edit-btn" onclick="editData(${index})">수정</button>
            <button class="del-btn" onclick="deleteData(${index})">삭제</button>
          </td>
        </tr>
      `;
    });
    localStorage.setItem('contacts', JSON.stringify(contacts));
};

 

동작: listBody라는 변수는 list-body라는 아이디를 가진 곳의 값이라고 저장한 뒤 list-body라는 아이디를 가진 곳 안에 있는 내용을 싹 비워줘(listBody,innerHTML='';). 그리고 나서 contacts 배열에 들어있는 연락처 개수만큼 반복문을 돌려줘. 

마지막으로 contacts라는 이름으로 contacts변수에 들어있는 내용을 문자열로 바꿔서 localStorage에 넣어줘.

 

   3. 저장/수정 함수

  function saveData() {
    const nameInput = document.getElementById('name');
    const phoneInput = document.getElementById('phone');
    const editIndex = document.getElementById('edit-index').value;

    if (!nameInput.value || !phoneInput.value) return alert("내용을 입력하세요!");

    const newData = { "name": nameInput.value, "phone": phoneInput.value };

    if (editIndex === "") {
      // 신규 추가
      contacts.push(newData);
    } else {
      // 기존 수정
      contacts[editIndex] = newData;
      document.getElementById('edit-index').value = "";
      document.getElementById('save-btn').innerText = "추가";
    }

    nameInput.value = '';
    phoneInput.value = '';
    render();
  }

 

동작: 추가버튼 클릭 시 saveData() 함수를 실행하는데 이름과 전화번호 input에 값이 없으면 내용 입력하라는 팝업창 뜨게하고 newData라는 변수에 name과 phone이라는 키와 값을 저장한다. if(editIndex ==="")은 평소에 비어있는데 이 값이 비어있다는 건, 사용자가 '수정'버튼을 누르지 않고 그냥 새 정보를 입력하고 있다는 뜻으로 contacts라는 변수에 newData를 추가하라는 뜻이다. else는 [수정]버튼을 클릭하면, editData(index)함수가 실행되면서 edit-index칸에 해당 키값이 채워진다. 이때 contacts[editIndex] = newData;로 인해 editindex번호를 가진 항목이 새 내용으로 갈아끼워진다. 그리고 다시 edit-index 값을 다시 비우고 버튼 글자를 '수정완료'에서 '추가'로 바꾼다.

 

   4. 수정모드 진입 함수

  function editData(index) {
    document.getElementById('name').value = contacts[index].name;
    document.getElementById('phone').value = contacts[index].phone;
    document.getElementById('edit-index').value = index;
    document.getElementById('save-btn').innerText = "수정 완료";
  }

 

동작: 수정버튼을 누르면 현재 클릭한 줄의 인덱스를 이용해 배열에서 이름과 전화번호를 찾아서 그 값을 화면 상단 입력창에 넣어준다.

그리고 HTML에 숨겨진 edit-index 박스에 index값을 적어준다. 그리고 추가버튼을 수정완료 버튼으로 변경

 

   5. 삭제 함수

  function deleteData(index) {
    if (confirm("정말 삭제할까요?")) {
      contacts.splice(index, 1);
      render();
    }
  }

동작: 브라우저의 기본 알림창(confirm)을 띄워서 삭제버튼을 부르면 알림창이 떠 확인을 누르면 true가 반환되어 베얄 중 시작 위치에서 1개만 지우라는 코드가 실행하고 새로고침, 취소를 누르면 false가 반환되어 아무 일도 일어나지 않고 함수가 종료

 

   6. render()

동작: 맨 마지막 render()는 새로고침을 해도 데이터가 즉시 화면에 보이도록 하는 마침표

연락처관리시스템.html

0.00MB

 

 

 

 

느낀점

---

 

오늘은 배열 내용들을 데이터로 저장해 저장소에 저장하는 것을 배웠다. localStorage와 쿠키를 배웠는데 그 중 쿠키는 자바스크립트 자체에 내장된 쿠키 전용 객체가 없어 cookie 함수를 따로 만들어서 쓰거나 외부 라이브러리를 활용해서 사용한다는 것을 알았다. 그리고 연락처 관리 시스템을 만들면서 수업 듣는 중 제일 크게 넋이 나간 거 같다. 초반에 설계를 어떻게 해야할 지 모르겠어서 감도 못 잡고 있다가, 이 코드를 받아와서 코드를 이해하는데도 한참이 걸렸다....해당 코드를 보면 동작하는데 다른 함수와 다른 함수가 연결되어 왔다갔다(?) 하는데 머리가 터지는 줄 알았다. 그리고 type="hidden"을 이해하는데도 오래걸렸다. 따로 저장소를 만들어서 사용한다는데..... 이 코드는 이번주 내에 계속 한번 씩 혼자 코드를 짜보면서 하지 않은 이상 다시 보고 바로 이해하지 못할 것 같다.

 

 

 

 

 

 

 

 

——————————————————————————

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.