[프로그래머스 FE 2023 Dev-Matching] 인사 정보 SPA 리뉴얼(History API, 자바스크립트 import, localStorage 사용)

프로그래머스 2023 Dev-Matching을 준비하면서 과제 테스트를 풀어보게 되었다. 풀이를 하는 과정에서 History API나 localStorage사용 등 배웠거나 헷갈렸던 부분을 정리해보았다. todolist를 만들면서 했던 데이터를 추가, 삭제, 수정을 복습하고, 리액트와 자바스크립트의 차이를 생각해볼 수 있는 시간이었다. 

History API : 페이지 이동 없이 주소 변경하기

history.pushState(state, title[, url])

// url로 주소 변경하는 함수 
changeURL(url) {
    history.pushState("", "", url);
  }

• 리액트에서 페이지 전환 시 사용하는 react-router는 history.push 를 통해 브라우저 주소(url)를 변경하고, root 엘리먼트의 하위 내용도 변경한다. 이를 순수 자바스크립트로 구현하려면 history.pushState를 사용하면 된다.
• history.pushState는 페이지 이동 없이 주소만 바꿔준다. 그리고 브라우저 뒤로 가기 버튼이 활성화된다.
• 브라우저에서 페이지 이동을 하게 되면 window.onpopstate라는 이벤트가 발생하는데, pushState를 하면 해당 이벤트가 발생하지 않고, 앞/뒤로가기를 클릭했을 때 해당 이벤트가 발생한다. 즉 pushState와 popstate 둘을 이용하여 SPA의 페이지 전환을 구현할 수 있다.
• 주소 내역은 하나의 목록이고, 앞/뒤로가기는 목록 안에서 이동하는 것이다. 따라서 목록에 새로운 주소를 추가하면 페이지를 이동한 셈이 된다. 이 목록에 주소를 추가하기 위한 메서드가 history.pushState와 history.replaceState이다.

📍 history.pushState(state, title[, url])

• 아래 정보를 바탕으로 브라우저의 세션 기록 스택에 새로운 세션 기록을 추가한다. 주소 목록에 새로운 주소를 추가하고 뒤로가기 버튼이 활성화된다. 이전 주소는 남겨두기 때문에 뒤로가기로 이전 주소로 돌아갈 수 있다.
• state :주소 이동과 함께 저장할 상태 데이터
• title: 바꿀 제목. 빈 문자열 주면 된다.
• url: 바꿀 url 주소

📍 hisotory.replaceState()

• pushState와 다르게 이전 주소를 없애고 바꿀 주소를 넣는다. 따라서 이전 주소에 더 접근할 수 없다.

 

REF

https://www.zerocho.com/category/HTML&DOM/post/599d2fb635814200189fe1a7

 

자바스크립트에서 import

자바스크립트에서는 리액트와 다르게 App.js와 같이 import 시 확장자명까지 적어줘야 한다. 그렇지 않으면 파일을 찾지 못하고 404 에러가 발생

 

 

카드 두 개 겹쳐 사용하기

• 카드 컨테이너에 position: relative를 주고, 겹쳐둘 카드에는 position: absolute를 줘서 겹쳐서 사용할 수 있다. position: abolute는 position: relative인 가장 가까운 부모를 기준으로 위치한다. 

.card {
  position: relative;
}

.card_plane {
  position: absolute;
}

 

localStorage에 객체 저장하고 읽기

• 저장할 때는 JSON.stringify(data)로 자바스크립트 객체를 JSON 문자열(배열 형태의 string으로 저장한다. 그렇지 않으면 [Object: object] 형태로 저장된다.
• 저장한 값을 읽을 때는 JSON.parse(data)로 JSON 문자열을 자바스크립트 객체 형태로 변환하여 사용한다.

// localStorage에 저장 
if (!localStorage.getItem("personalinfo"))
      localStorage.setItem("personalinfo", JSON.stringify(data));

// localStorage에서 값 읽기 
const personalInfo = JSON.parse(localStorage.getItem("personalinfo"));
console.log(personalInfo);

• 로컬 스토리지에 저장된 값을 확인하거나 사용하려고 할 때 새로고침해도 값이 계속 남아있다는 점에 유의하자. 테스트 용으로 아무 값이나 넣어놨다가 고생을 했다.. 꼭 잘못된 값을 넣은 경우에는 삭제하고 다시 새로고침해 사용하자.

 

배열 데이터 변경하기

const data = [
  {
    "name": "나희도",
    "email": "heedo@grepp.co",
    "nickname": "heedo",
    "role": "프론트엔드",
    "mbti": "ESTJ"
  },
  {
    "name": "백이진",
    "email": "kevin@grepp.co",
    "nickname": "kevin",
    "role": "백엔드",
    "mbti": "INFJ"
  }
]

• 데이터는 보통 위처럼 [{…}, {…}]처럼 배열 안의 객체 형태로 저장되어 있다.
• 추가할 때는 다른 데이터 객체와 같은 형태로 새로운 객체를 생성하고 스프레드 연산자를 통해 기존 데이터를 풀어주고 필요한 객체를 추가해준다. 

예) const newData = [...data, { { "name": "새로운 사람", "email": "abcde@grepp.co", "nickname": "newPerson", "role": "백엔드", "mbti": "ENTP" } }]

• 수정, 삭제를 할 때는 보통 인덱스 또는 id를 기준으로 한다. 이때는 map을 사용해 해당하는 요소를 찾고, 삼항 연산자를 통해 해당 요소만 변경하고, 아닌 경우 원래 요소를 그대로 사용한다.

const idxToMoidfy = 0

const modifiedData = data.map((person, idx) => 
	idx === idxToModify ? {...person, nickname: 'newPerson' } : person
)

• (중요!!!!)데브매칭 예제에서는 아래와 같이 카드 가운데 flipped 된 요소만 데이터를 변경하는 데 사용한다. 이때 주의할 점은 DOM에서 가져온 정보는 문자열로 들어오기 때문에 비교 시 +를 붙여 숫자형으로 변경해주어야 한다는 것이다. 여기에서 실수가 많이 나올 수 있을 것 같다. 사원 정보 테이블 구축 문제에서도 페이지네이션을 만들 때 비슷한 문제를 경험했다.

const cardIdx = card.getAttribute("idx");

const isFront = card.classList.toggle("is-flipped");
const cardStatus = JSON.parse(localStorage.getItem("cardStatus"));
// 배열 데이터 변경할 때는 map !
const newCardStatus = cardStatus.map((card) =>
	card.idx === +cardIdx
		? { ...card, value: `card${isFront ? " is-flipped" : ""}` } : card
 );