FE 채용과제로 배우는 바닐라 자바스크립트

프로그래머스에서 주관하는 "FE 채용 과제로 배우는 바닐라 자바스크립트" 3기 수강생으로 참여했다. 과제는 프레임워크 없이 미션을 구현하는 것으로 2주 동안 진행한다. 정답이 있는 강의 영상이 있지만, 직접 구현을 해보는 것을 목표로 했다. 싱글톤 디자인 패턴으로 여러 기능들을 만들었는데, 가장 기억이 남았던 작업은 로컬 스토리지 저장하는 작업이어서 글을 다루어 보았다.

로컬 스토리지 다루기

키워드 검색 시 새로운 키워드가 로컬 스토리지로 get, 기존에 저장된 키워드는 새로운 키워드를 추가하여 set 해주는 코드다.


/**
 * 초기 렌더링 시 초기화 작업
 * @method constructor: 객체의 프로퍼티를 초기화하거나 메소드를 정의하는 작업 수행
 * @method init: 객체 생성 후, 외부에서 객체를 초기화하는 작업 수행
 *
 * @readonly 차이점은 호출 시점이다.
 * 객체 생성될 때, 객체 생성 이후 외부의 추가 작업이 필요할 때
 *
 * @readonly 초기화 해주는 이유는 객체가 안정적으로 동작하도록 보장하기 위해서다.
 * 일부 값들은 객체 생성 후에도 변경될 수 있는 값이 존재하기 때문
 */
 init() {
     const getSearchData = localStorage.getItem(LOCALSTORAGE_KEY.검색내역)
     let condition = getSearchData === null ? [] : getSearchData.split(',')
     condition = uniqueArray(condition)

     this.setState(condition)
 }

 // 검색 시 이전 검색키워드 포함하여 저장
 onSearchAddKeyword(newValue) {
     const getSearchData = localStorage.getItem(LOCALSTORAGE_KEY.검색내역)

     let condition = getSearchData === null ? [] : getSearchData.split(',')
     condition = uniqueArray(condition)
     const currentHistories = [newValue, ...condition].slice(0, 5).join(',')
     localStorage.setItem(LOCALSTORAGE_KEY.검색내역, currentHistories)

     this.init()
 }

SearchResult.js

SearchResult은 검색된 키워드를 보여주는 컴포넌트다. 마운트 시 검색내역 key로 로컬 스토리지에 담겨있는 데이터들을 가져와 중복된 키워드를 제거하여 state 한다. 언마운트 후 새로운 검색 키워드가 newValue로 들어왔을 때 이전 로컬 스토리지 값 앞에 newValue 키워드가 저장된다. 즉. 새로운 키워드는 배열 제일 앞에 저장된다. slice를 이용하여 5개까지 키워드를 유지했다.


init() {
    // 검색된 키워드 데이터 역직렬화
    const getSearchedData = localStorage.getItem(LOCALSTORAGE_KEY.검색결과)
    const deSerialization = JSON.parse(getSearchedData)
    this.setState({
      items: deSerialization
    })

    // 로컬스토리지에 저장된 최근키워드 접근
    const getSavedSearchData = localStorage.getItem(LOCALSTORAGE_KEY.검색내역)
    this.keepInputResult(getSavedSearchData === null ? null : getSavedSearchData.split(',')[0])
  }

  // 로컬스토리지에 검색키워드 직렬화 저장
  saveKeywordResult(value) {
    localStorage.setItem(LOCALSTORAGE_KEY.검색결과, JSON.stringify(value ?? []))
  }

  // 최근 검색키워드 유지
  keepInputResult(value) {
    document.querySelector('.search-input').value = value
  }

App.js

컴포넌트를 조립한 곳인 App에서 SearchResult을 불러오고, 완성된 검색 결괏값을 가져와야 하기 때문에 마운트 시에 검색 결과 key로 스토리지에 저장된 검색 결과 데이터를 불러와 state 했다. 스토리지에 저장할 때 JSON으로 저장하여 서버에 전송하기 때문에 브라우저에서는 [Object Object]로 잘못 해석하기 때문에 역직렬화를 했다. 그리고 페이지를 새로고침해도 마지막 검색 결과 키워드가 유지되도록 처리했다.

이 글을 쓰다가 직렬화/역직렬화에 대해 더 알기 위해 검색해 봤다.

"역직렬화를 통해 검색결과 데이터를 원래의 형식으로 되돌리는 것은 데이터의 영속성, 공유 및 전송을 위해 필요한 작업이다."

국비지원 교육 후기

신입 수강생 맞춤형 뿐만 아니라 고퀄리티 강의가 2주에 수강 비용 단 돈 "10,000원"이 오히려 부족하다고 느꼈을 정도로 만족하는 강의였다. 프로그래머스에서 주관하기 때문에 신뢰는 보장이다. 프레임워크들이 가져다주는 편리함에 감사함을 느끼며, 역시 "기본"이 가장 중요한 것이 아닐까 싶다.

FE 채용과제로 배우는 바닐라 자바스크립트

로컬 스토리지 다루기

국비지원 교육 후기

댓글