[원티드 FE 프리온보딩] 4-3 의존성

2023. 1. 10.·🎨 프론트엔드 공부/기타

원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금)

📍의존성

특정 모듈이 동작하기 위해 다른 모듈을 필요로 하는 것

 

📍의존성 역전 원칙

- 유연성이 극대화된 시스템을 만들기 위한 원칙- 즉, 소스코드의 의존성이 추상에 의존하며, 구체에 의존하지 않는 것을 의미

 

📍추상과 구체

추상- 구체적인 구현 방법이 포함되어 있지 않은 형태- 구현해야 할 일, 이루어져야 하는 결과를 정의하는 것

 

구체- 해당 동작을 실질적으로 수행하기 위해 해야 하는 일련의 동작과 흐름

 

어플리케이션이 구체에 의존하게 되면, 구체가 변할 때마다 어플리케이션이 변화해야 하는 상황이 되어버림- 구체는 변화가 잦으므로, 가급적 구체에 의존하는 것을 최소화해야함

 

📍구체에 의존하는 예시

fetch("todos", {
  headers: {
    Authorization:localStorage.getItem("ACCESS_TOKEN");
  }
}

 

문제 2가지

1. localStorage라는 구체에 의존

- localStorage 대신 다른 저장소로 변경하려면 추가 작업이 필요

 

2. localStorage는 브라우저에서 제공하는 API이므로 개발자가 통제할 수 없는 영역

- 외부의 요소들은 언제든 변화가 발생할 수 있음

 

localStorage를 사용하여 구현할 기능을 추상적으로 정의해보면

- token을 관리하기 위해서

 

tokent을 관리한다는 것은

- 읽기 (get)

- 쓰기 (save)

- 삭제 (delete)

 

이상의 3가지가 가능해야 함

 

'🎨 프론트엔드 공부/기타' 카테고리의 다른 글
  • Action, Reducer, Store, Dispatch
  • Redux를 사용하는 이유 3가지 (vs Context API)
  • [원티드 FE 프리온보딩] 4-2. 횡단 관심사
  • [원티드 FE 프리온보딩] 4-1. 클린 코드, 관심사의 분리, React Custom Hook
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (516)
      • 🎨 프론트엔드 공부 (253)
        • JS & TS (92)
        • HTML & CSS (22)
        • React & Next (49)
        • Vue & Nuxt (22)
        • 기타 (68)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (6)
        • Work (0)
        • Toy (6)
      • ⚙️ 개발 팁 & 노하우 (21)
        • 프론트엔드 (6)
        • 기타 (15)
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
지식물원
[원티드 FE 프리온보딩] 4-3 의존성
상단으로

티스토리툴바