프론트엔드 데브코스 TIL #DAY14

에구마·2023년 10월 6일

국비지원교육 코딩부트캠프 프로그래머스 데브코스 프론트엔드 데브코스

프론트엔드 데브코스 기록

목록 보기

11/47

23.10.06

📚 오늘 공부한 것

컴포넌트 방식으로 구현하기

cookie와 Session

localStorage

😲 새롭게 알게된 것

e.preventDefault();

input에 입력값을 받고 submit을 할 때 생기는 새로고침을 막기 위해 습관처럼 e.preventDefault()를 자주 사용한다. ‘새로고침을 막는다’라고만 생각했었는데, 메소드 이름 글자 그대로 기본동작을 막는 메소드다..

form 의 기본 동작은, 입력값을 form이 있는 url로 보내버리고 새로고침 또한 발생한다. (과거에 서버와 통신할때 쓰이는 방식인데 이젠 그렇게 쓰지 않는다! ) 이 기본 동작들을 제한하기 위하여 사용하는 것이었다!

preventDefault()는 form에서만 사용하는 것이 아니라 < a > 에서도 가능하다. < a >태그에 preventDefault()를 주면, < a >의 속성인 href에 주어진 링크로 이동하는 < a >태그의 기본동작을 막는다.

즉! 태그의 기본 동작을 끄고 싶다면 이벤트 객체에 preventDefault()를 실행하면 된다.

localStorage 사용방법

localStorage에 데이터를 저장, 접근, 삭제할 수 있는데, 그 중 저장하는 방법은 다음과 같다.

window.localStorage.name = 'roto'
window.localStorage[name]= 'roto'
window.localStorage.setItem('name', 'roto') //권장!!!!!
// 키, 벨류가 둘다 strig이어야 함!

이 중 첫번째 두번째 코드처럼 프로퍼티를 수정하는 식으로 하면 length, toString 같은 내장함수들을 덮어 씌울 수 있기 때문에 권장하지 않는다!!

localStorage 잘 쓰는 방법

어느파일에서나 localStorage에 접근하고 수정할 수 있지만, 그렇게 하지 않는 것이 권장된다. 잘못된 형식으로 바꿀 경우 파싱에 문제가 생길 수도 있고 오탈자 등 다양한 에러 요인이 생길 수 있다.
그러면?
localStorage의 데이터를 관리하는 파일을 따로 만들고, 여기에서만 localStorage에 접근하도록 하자!
예시)

// 전역 오염을 최소화하기 위해 즉시실행함수(IIFE)를 이용하자
const storage = (function (storage) {
  const setItem = (key, value) => {
    try {
      storage.setItem(key, value);
    } catch (e) {
      console.log(e);
    }
  };
  const getItem = (key, defaultValue) => {
    try {
      const storedValue = storage.getItem(key);
      if (storedValue) {
        return JSON.parse(storedValue);
      }
      return defaultValue;
    } catch (e) {
      console.log(e);
      return defaultValue;
    }
  };

  return {
    setItem,
    getItem,
  };
})(window.localStorage);

또한, try-catch를 이용한 에러 처리와 getItem에서의 default 처리에도 유의하자!

🤨 느낀 점

자바스크립트, 리액트를 배우는 초기에 한번쯤 만들어보았던 투두리스틀 최선의 코드로 배울 수 있었다. 컴포넌트 방식, 선언형 프로그래밍의 코드는 어떤 것인지 직접 구현을 해볼 수 있어서 이해가 많이 되었다. 뿐만 아니라 왜 컴포넌트 방식이 좋은지, 어떻게 쓰이는게 재사용성이 좋은지에 대해 많이 배웠다.

🤔 오늘 회고

Keep

강사님의 설명 전에 제목을 확인하고 먼저 구현을 해보았다. 감이 안잡히기도 했고 선언형을 배우면서도 명령형에 익숙해서 수정을 반복하느라 오래걸렸다. 강사님 코드를 확인하고 개탄스럽기도 했지만,, 내 로직을 세워서 도전해보는건 좋은 것... 다 양분이 될거야..그럼그럼...