오늘은 아주 간단하게 TIL을 작성해 보려한다. 오늘 강의 듣고 과제하다 보니 자바스크립트 문법 공부를 많이하지 못해서...😅 심지어 아직도 과제를 하는 중이라 😂 우선 오늘 강의를 듣고 느꼈던 것들을 정리해본다.
✅ 컴포넌트
모듈, 컴포넌트를 만들어서 사용하면 재사용성이 높아진다. 코드의 유지보수가 쉬워진다. 누구나 한번쯤 들어봤을 얘기이다. 하지만 어떻게 구분하는가? 어떤 기준을 사용해야하며 그 기준은 절대적인가?🤔 이런 생각을 한번 해보면 역시 말은 쉽구나라는 생각을 하게된다.
프론트엔드에서 UI를 구상할 때, HTML에 시맨틱 태그를 사용하면 완벽한 기준은 아니여도 그럴듯한 기준이 될 수 있을거라 생각한다.
그림과 같은 구조로 추상화를 한다면 쉽게 컴포넌트를 구분할 수 있을 것 같다.
✅ 컴포넌트 간 의존성
컴포넌트는 독립적이여야 한다. 컴포넌트 자체로 실행이 가능하고, 예를 들어 A 컴포넌트 수정이 다른 컴포넌트에 영향을 끼쳐서는 안된다. 반대로 다른 컴포넌트의 변경이 A 컴포넌트에 영향을 끼쳐서는 안된다. 객체지향 설계원칙 SOLID원칙 에서 SRP 원칙과 가깝다고 생각한다. 하나의 클래스는 단일 책임을 가진다. 즉, 클래스의 변경 사유는 하나여야 한다. 컴포넌트 또한 SRP원칙을 지켜야 한다.
강의를 들으면서 컴포넌트의 의존성을 끊기 위해 외부에서 함수만을 넘기고 컴포넌트는 그 함수에 매개변수만 담아서 실행하기만 하는 방법으로 코드를 작성했다. 솔직히 이걸 보면서 이렇게까지 복잡하게 해야하나?(내부에서 변경한다면 코드는 더 줄어들테니까...) 생각이 들었지만, 나중을 생각한다면 반드시 필요한 방법임을 느꼈다. 클린 코드에서 클린 코드는 코드의 양이 적은게 아니라 보기 쉽고 수정하기 쉬운 코드니까.
✅ Storage
Web에서 사용할 수 있는 Storage는 Local Storage와 Session Storage가 있다. 사용 방법은 둘 다 비슷하지만 가장 큰 차이점으로 Session Storage는 브라우저를 닫을 때, 초기화 된다. Local Storage는 따로 삭제하지 않으면 초기화 되지 않는다. Storage에 데이터를 저장할 때는 JSON.stringify()를 사용해서 객체를 저장하고, 데이터를 읽어올 때는 JSON.parse()를 사용해서 읽어온다.
정리
짧지만, 어제 작성하던 TIL까지 마무리하고 오늘 배웠던 내용을 간략하게 정리해봤다. 오늘 모던 자바스크립트 Deep Dive, 자바스크립트 완벽 가이드, 함수형 자바스크립트 프로그래밍 책이 왔는데 언제 다 공부하지... 그래도 이론 서적이 생겼으니 자바스크립트 문법 공부에는 큰 도움이 될것 같다😄
