[ TIL ] 프로그래머스 DAY 11 : 컴포넌트 방식으로 생각하기 (feat : UI 구현)

3692 단어 프론트엔드TIL데브코스프로그래머스TIL

🙋🏻‍♂️

지금 정리하는 내용은 일부 오타나 잘못된 내용이 기입되어 있을 수 있습니다. 가급적 오류를 줄이겠지만 일부분 발생할 수 있다는 점 양해부탁드립니다. 잘못된 내용 수정이나 추가 설명이 필요할 때 댓글로 알려주시면 감사하겠습니다.

🍪 배운 목록

  • 컴포넌트를 생각하며 UI 구현하기
  • 클라이언트에서 데이터 저장하기 (쿠키, 로컬스토리지, 세션스토리지)

🍽 배운 내용 요약 및 중요한 것

컴포넌트로 생각하기

UI를 구현할 때 명령적으로 프로그래밍하면 코드가 길어지고 유지보수성이 떨어집니다.

따라서 선언형으로 구현하는것이 좋은데 이에 최적화된 코드가 컴포넌트 방식의 코딩스타일입니다.

대강의 예시

//html
~~~~
<body>
<div class="app"></div>
<script src="./~~~~~"></script>
</body>

// main.js
const $app = document.querySelector(".app");

new App({ state });


// App.js
function App({ state }) {
  new Component({ state });
}

// Component.js
function TodoList({ state }) {

  this.state = state;

  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };

  this.render = () => {
  	...
  };

  this.render();
}

위처럼 큰 App이란 컴포넌트 안에 하위 컴포넌트들이 의존성을 걸쳐 펴져있는 구조가 main.js에 의해 html에서 어디에 위치할지 정해져 실제로는 하위 컴포넌트간에는 의존성이 없게 상위에서 하위로 TOP-DOWN 방식의 구조를 짜는 것이 컴포넌트로 생각하여 UI를 구현하는 것입니다.

쿠키

쿠키는 클라이언트에서 데이터를 저장하기위해 예전부터 사용했던 방법으로
뒤에 expire, max-age 등으로 만료기간을 설정하여 시간제한을 두고 사용할 수 있습니다.

다만 쿠키는 http 요청시에 자동으로 딸려가기 때문에 쿠키에 저장하는 값이 커질수록 요청이 무거워지고 쿠키 탈취등의 보안 취약점이 있다는 단점이 있습니다.

// 쿠키 설정
document.cookie = "key=value"
// 쿠키 저장은 key,value 한쌍으로 저장

// 쿠키 읽기
const cookie = document.cookie
//위 값은 긴 문자열로 split(";")하여 사용해야 함

로컬스토리지

로컬스토리지는 같은 도메인, ip에서 공유되는 저장소로 브라우저를 종료하거나 이동해도 별다른 삭제로직이 없다면 유지됩니다.

로컬스토리지는 기본적으로 문자열로 저장되기에 배열이나 객체는 JSON.stringify() 또는 JSON.parse()를 사용해야 합니다.

//로컬스토리지 저장
localStorage.setItem("key", "value");

//로컬스토리지 값 추출
localStorage.getItem("key");

/로컬스토리지 특정 값 삭제
localStorage.removeItem("key");

/로컬스토리지 비우기
localStorage.clear();

🧘🏻‍♂️ 어려웠던 점 및 후기

컴포넌트적으로 생각한다는 점은 라이브러리, 프레임워크를 사용하면서 크게 신경쓰지 않았던 부분이라 이를 고려하면서 바닐라 자바스크립트로 구현하려고 하다보니 전체적인 로직을 생각하며 구현하기가 힘들었습니다.

이러한 컴포넌트형 또는 class형 UI를 자주 생각하며 평소 UI를 구성하다보면 라이브러리나 프레임워크를 사용하더라도 코드를 더 선언적으로 작성하고 추상화와 유지보수성을 높이는 코드를 작성하게 될 것이라 생각합니다.

🔗 참조

프로그래머스

Android 색상에 투명도 주는 방법
2.4장. JSX문법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage