[클라우딩 어플리케이션 엔지니어링 TIL] 240117 - 고양이 사진 검색 실습

Intro

---

여행 다녀오느라 피곤해서 공부를 많이 못했다. 여행 후유증이 심하다..😭

여행 다녀오니 자바스크립트도 다 까먹은 기분이다아... 감을 다시 익히자!!

 

 

 

오늘 학습한 내용

FE 채용 과제로 배우는 자바 스크립트

---

이번주는 고양이 검색 사이트를 구현하는 실습을 학습했다.

구현해야 할 부분들이 많아서 생각보다 꽤 복잡하다. 차근차근 강의를 들으며 따라해보고 혼자서 코드를 짤 수 있도록 연습도 많이 해야겠다.

 

실습 처음부터 오류가 나서.. 조금 헤맸다.

원인이 무엇인지 사실 잘 모르겠다.

해결하다가 힘들어서 쉬었다가 다시 실행하니까 또 잘된다.

 

문제를 해결하기 위해 노드 모듈을 삭제하고 캐시를 지운 후 다시 npm install을 해보았는데 해결되지 않았고

rm -rf node_modules
rm -f package-lock.json
npm cache verify

 

http-server 실행할 때 현재 디렉토리에서 HTTP 서버를 시작하며, 캐시를 비활성화하여 파일 변경이 감지될 때마다 항상 새로운 내용을 제공하는 명령어로 수정해서 실행하였는데도 해결되지 않았다.

http-server -c-1 .

 

근데 노트북을 다시 켜니까 잘 된다..!!

뭐가 문제였을까나 크롬과 관련된 문제인 것 같기두..

 

 

 

코드 구조 분석

• index.html

index.html에서 자바스크립트 소스를 불러올 땐 유틸이나 컴포넌트 클래스 등을 모두 로드한 후, main을 실행해야 한다.

그래서 script 순서에 유의하여야 한다.

 

• App.js

class App {
  $target = null;
  data = []; // react, vue 처럼 컴포넌트가 데이터를 가지고 있다. setState 관련

  constructor($target) {
    this.$target = $target;

    // 인스턴스 생성 (searchInput, searchResult, imageInfo)
    this.searchInput = new SearchInput({
      $target,
      onSearch: keyword => {
        api.fetchCats(keyword).then(({ data }) => this.setState(data));
      }
    });

    this.searchResult = new SearchResult({
      $target,
      initialData: this.data,
      onClick: image => {
        this.imageInfo.setState({
          visible: true,
          image
        });
      }
    });

    this.imageInfo = new ImageInfo({
      $target,
      data: {
        visible: false,
        image: null
      }
    });
  }

  setState(nextData) {
    console.log(this);
    this.data = nextData;
    this.searchResult.setState(nextData);
  }
}

컴포넌트를 생성한 클래스들을 가지고 App.js에 인스턴스를 생성한다. 그리고 main.js 에서

new App(document.querySelector("#App"));

App에 대한 인스턴스를 생성하여

<div id="App"></div>

최종적으로 id가 App인 엘리먼트 아래로 js로 만든 DOM을 생성하게 된다.

 

 

 

 

다크모드 설정

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: white;
  }
}

미디어 쿼리를 사용하여 내 컴퓨터의 상태가 다크모드인지 라이트모드인지에 따라 다크모드를 설정할 수 있다.

맥에선 설정 > 화면 모드에서 라이트/다크 모드를 설정할 수 있다.

다크모드인 경우에 미디어쿼리의 내용이 적용된다.

 

다음은 미디어 쿼리 문자열의 분석 결과를 나타내는 명령어이다.

window.matchMedia('(prefers-color-scheme: dark)').matches

matches 명령어는 Boolean 형식으로 반환되며 해당 미디어 쿼리가 적용되면 true 안되어있으면 false를 반환한다.

 

 

CSS 변수

:root[color-mode="dark"] {
  --background: #000;
  --textColor: white;
}

body {
  background-color: var(--background);
  color: var(--textColor);
}

css에서 변수를 설정하는 방법에 대해 배웠다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN

사용자가 정의한 이름으로 var()를 통해 값을 불러올 수 있다.

:root로 설정하면 HTML 어디서나 사용자 지정 속성에 접근할 수 있다.

 

 

 

 

 

 

마무리

---

평소보다 집중력도 떨어지고 너무 피곤해서 학습을 많이 못했는데 내일은 좀 더 집중해서 공부할 수 있도록 해야겠다.