TIL 2022/06/07

1일1로그 100일완성 IT지식

004 / 005 / 006

컴퓨터를 구성하는 전자회로에 대한 설명을 하고 있다. 컴퓨터를 구성하는 가장 기본소자는 논리게이트가 있으며 핵심소자로는 트랜지스터가 있다. 또한, 이러한 소자로 하나의 칩에 배치하여 만든 직접회로도 설명한다.

• 논리게이트 : 1개 또는 2개의 입력값으로 단일 출력을 계산. 논리게이트가 필요한 만큼 적절한 방식으로 연결되면 어떤 종류의 계산도 수행할 수 있다.

• 트랜지스터 : 전압의 제어를 받아 전류를 켜거나 끄는 장치로 스위치의 역활을 한다.

• 직접회로 : 모든 소자와 배선이 단일 평면(실리콘 판) 위에 들어가 있는 것으로, 개별 부품과 재래식 전선이 없는 회로를 만들기 위해 일련의 복잡한 광확적, 화학적 공정을 거쳐 제조.

다음으로는 무어의 법칙에 대한 설명이 나온다. 무어의 법칙이란, 기술이 향상됨에 따라 일정한 크기의 집접회로에 들어갈 수 있는 트랜지스터의 수가 매년 대략 2배 증가할 것이라고 예측한 법칙으로 이 후 2년 또는 18개월 등 그 기간에 대한 변화는 있지만 대략 50년간 꾸준히 지속되어 온 법칙이다.

VUE

vue 리렌더링

vue는 데이터가 변경되면 바로 갱신되는 반응형 시스템을 가지고 있다. 하지만 배열과 객체에서 수정이 발생해도 다시 렌더링이 일어나지 않는 경우가 있어 이에 대해 알아보았다.

배열

vue는 배열의 변경 감지를 위해 아래와 같은 매소드를 제공한다.

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

이 메소드를 사용하지 않고 배열에 있는 항목을 직접 설정하는 경우에는 감지할 수 없다.

<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in testArr" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
  <button @click="test1">1번 테스트</button>
  <button @click="test2">2번 테스트</button>
</template>

<script>
export default {
  data() {
    return {
      testArr: ["테", "스", "트"]
    };
  },
  methods: {
    test1() {
      this.testArr.splice(0, 1, "끝")
	  // 1번 테스트 버튼 클릭 시 화면 출력은 끝 / 스 / 트 로 변경된다.
    },
    test2() {
      this.testArr[0] = "끝"
      // 2번 테스트 버튼 클릭 시 testArr 요소는 변경되지만 화면 출력은 변하지 않는다.
    }
  }
}
</script>

객체

javascript의 한계로 인해 vue는 객체의 추가나 제거를 감지할 수 없다. 이를 해결하기 위해 아래와 같은 방법들을 사용해야 한다.

• Vue.set()
• 새로운 객체 재할당

<template>
  <div id="app">
    <ul>
      <li v-for="(item, key) in testObj" :key="key">
        {{ key }} : {{ item }}
      </li>
    </ul>
  </div>
  <button @click="test1">1번 테스트</button>
  <button @click="test2">2번 테스트</button>
  <button @click="test3">3번 테스트</button>
</template>

<script>
export default {
  data() {
    return {
      testObj: {
        id: 'testID',
        pw: 'testPW',
        name: 'test'
      }
    };
  },
  methods: {
    test1() {
      this.testObj.mobile = '010-1234-5678'
      // 1번 테스트 버튼 클릭 시 testObjec에 mobile속성은 추가되지만 화면은 변하지 않는다.
    },
    test2() {
      this.$set(this.testObj, 'mobile', '010-1234-5678')
      // 2번 테스트 버튼 클릭 시 화면 출력에 mobile : 010-1234-5678 이 추가된다.
    },
    test3() {
      this.testObj = {
        ...this.testObj,
        mobile: '010-1234-5678',
      }
      // 2번 테스트 버튼 클릭 시 화면 출력에 mobile : 010-1234-5678 이 추가된다.
    }
  }
}
</script>

오늘의 한줄

무어의 법칙이라는 흥미로운 법칙을 알게 되었고 과연 앞으로 몇년 더 이 법칙이 유지될 수 있을까 하는 생각이 들었다. 
또한, vue에서 배열이나 객체를 수정할 때 주의할 사항과 같이 기본적인 내용을 조금 더 자세히 보야야 겠다.