[TIL /2023.02.17] UI/UX

오늘의 과제는 피그마 클론이었다.

우리는 네이버클론을 진행했고... 너무 어렵고 힘들었다. 🥲

페어분이 너무 잘해주셔서 감사하고...죄송했다.

열심히 만든 네이버 클론 링크

👉 https://www.figma.com/proto/1osZ63eBCxvua8HnzygWqO/Untitled?node-id=2%3A134&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=2%3A321&show-proto-sidebar=1 

Figma

---

리액트 복습

props

컴포넌트의 속성을 의미한다. 외부에서 전달 받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.

부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다.

함수의 전달인자처럼 전달받아 리액트 엘리먼트를 반환한다. 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다.

객체형태이다.

함부로 변경할 수 없는 읽기 전용 객체이다.

<Child text={"I'm the eldest child"} />

이렇게 넣어주고,

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};

요렇게 받아온다. 저 props.text라고 되어있는데, 위에서 Child에 text 속성을 주었기 때문이다.

 

---

코딩테스트 

[프로그래머스 LV2.] 세문제

카카오블라인드채용 기출문제가 있었는데, 캐시에 관련된 문제였다. 캐시가 뭔지도 몰라서 애를 먹었다...! 여기 좀 정리하고자함.

 

캐시

캐시는 자주 사용하는 데이터를 담아두고, 해당 데이터가 필요할때 캐시에 접근하도록 하여 처리속도를 높이는 것이다. 프로세서가 매번 메인 메모리에 접근해 받아오면 시간이 오래 걸리기 때문이다.

 

LRU알고리즘

참조된 시간을 기준으로 교체될 페이지를 선정하는 방법이다. 현재 캐시에 있는 데이터 중, 가장 오래동안 참조되지 않은 데이터를 제거하고 새로운 데이터를 추가한다.

 

캐시히트

참조하고자 하는 메모리가 존재하고 있을 경우 캐시히트라고 한다.

 

캐시미스

참조하고자 하는 메모리가 존재하지 않을때 캐시미스라고 한다.

 

---