[CNU SW Academy] 18일차(22.12.26)

프로그래머스 - 프론트엔드 미니 데브코스

명령형 프로그래밍

const $button1 = document.createElement('button')
$button1.textContent = 'Button1'

const $button2 = document.createElement('button')
$button2.textContent = 'Button2'

const $button3 = document.createElement('button')
$button3.textContent = 'Button3'

const $main = document.querySelector('#app')

$main.appendChild($button1)
$main.appendChild($button2)
$main.appendChild($button3)

$button1.addEventListener('click', () => {
    if ($button1.style.textDecoration === 'line-through') {
        $button1.style.textDecoration = 'none'
    } else {
        $button1.style.textDecoration = 'line-through'
    }
})

const toggleButton = ($button) => {
    if ($button.style.textDecoration === 'line-through') {
        $button.style.textDecoration = 'none'
    } else {
        $button.style.textDecoration = 'line-through'
    }
}

document.querySelectorAll('button').forEach($button => {
    $button.addEventListener('click', (e) => {
        const {target} = e
        toggleButton(target)
    })
})

기능이 추가될수록 코드가 복잡해진다.

 

선언적 프로그래밍

function TimerButton({$target, text, timer = 3000}) {
    const $button = new ToggleButton({$target, text, onClick: () => {
        setTimeout(() => {
            $button.setState({
                ...$button.state,
                toggled: !$button.state.toggled
            })
        }, timer)
    }})
}

//추상화, 기능 추가, 확장이 쉬워짐
function ToggleButton({
    $target,
    text,
    onClick
}) {
    const $button = document.createElement('button')
    $target.appendChild($button)

    this.state = {
        clickCount: 0,
        toggled: false
    }

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

    this.render = () => {
        $button.textContent = text

        $button.style.textDecoration = this.state.toggled ? 'line-through' : 'none'
        $button.addEventListener('click', () => {
            this.setState({
                clickCount: this.state.clickCount + 1,
                toggled: !this.state.toggled
            })
            
            if(onClick) {
                onClick(this.state.clickCount)
            }
        })
    }
    
    this.render()
}

function ButtonGroup({
    $target,
    buttons,
}) {
    const $group = document.createElement('div')
    let isInit = false

    this.render = () => {
        if(!isInit) {
            buttons.forEach(({type, ...props}) => {
                console.log(type, props)
                if (type === 'toggle') {
                    new ToggleButton({$target: $group, ...props})
                } else if(type === 'timer') {
                    new TimerButton({$target: $group, ...props})
                }
            })
            $target.appendChild($group)
            isInit = true
        }
    }
    this.render()
}

const $app = document.querySelector('#app')

new ButtonGroup({
    $target: $app,
    buttons: [
        {
            type: 'toggle',
            text: '토글 버튼',
        },
        {
            type: 'toggle',
            text: '토글 버튼',
        },
        {
            type: 'timer',
            text: '타이머!',
            timer: 1000
        }
    ]
})

기능 추가와 확장이 쉬워진다.

 

script의 순서도 중요하다. 오류가 발생할 수 있다.

 

컴포넌트 방식으로 TodoList 구현하기

 

ClientSide에서 데이터를 저장하기

1. Cookie

- 브라우저에 저장되는 작은 문자열

- key-value를 묶어서 넣으면 이전 cookie를 덮어쓰지 않고 새로 추가됨

language라는 쿠키가 추가됨

- 쿠키는 ;로 구분되어 있어 불러온 후 split 등으로 쪼개서 써야 함

- 쿠키는 유효기간을 넣지 않으면 브라우저를 닫는 순간 사라짐

GMT : 그리니치 시간 기준

new Date().toGMTString() : 현재 timezone 기준으로 GMT 시간이 얼마인지 구하는 함수 ]

max-age는 생성시점으로 유효기간을 설정, 단위는 1초

 

Cookie 주의사항

쿠키의 경우 HTTP 요청 시 헤더에 쿠키가 같이 나가기 때문에 쿠키 사이즈가 커지면 HTTP 요청크기도 커진다.

사이즈에 제한이 있다.

여러 보안 취약점을 조심해야 한다.   

 

2. LocalStorage

- key, value 기반으로 Local에 데이터를 저장할 수 있다.

- 도메인 기반으로 유효(도메인이 같으면 여러 탭 내에서 같은 Storage가 공유됨)

- 삭제하거나 Storage를 날리지 않는 한 삭제되지 않는다.

//저장
localStorage.setItem('name', 'narlo')

//불러오기
const storedName = localStorage.getItem('name')

//삭제하기
localStorage.removeItem('name')

//전체 삭제하기
localStorage.clear()

3. sessionStorage

- 브라우저를 닫으면 저장된 내용이 초기화된다.

 

ES6 Module 사용하기

import

- export 키워드로 내보내진 변수, 함수 등을 불러올 수 있는 키워드

- import를 사용하면 스크립트 의존성을 훨씬 간편하게 관리할 수 있다.

 

=>

각 JS별로 사용되는 모듈을 명시적으로 import 해 오기 때문에,

사용되거나 사용되지 않는 스크립트를 추적할 수 있다.  

script 태그로 로딩하는 경우 불러오는 순서가 중요하지만,

import로 불러오는 경우 순서가 무관하다.

전역오염이 일어나지 않는다.

 

비동기 다루기(callback)

 

비동기 처리

특정 코드의 연산이 끝날 때가지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성

1. addEventListener

2. setTimeout, setInterval

setTimeout은 시간이 지나고 한번만 실행되고, setInterval은 주어진 시간 주기로 반복 실행된다.

setTimeout의 시간을 0으로 넣거나 지정하지 않아도 바로 실행되지 않는다.

3. XMLHttpRequest(XHR)

데이터를 비동기로 요청하고, 요청 후의 동작을 비동기로 처리

 

sync방식으로 사용하게 되면 요청 후 응답이 오기전까지 브라우저가 굳어버린다.

 

---

컴퓨터 네트워크 - 김기일 교수님

데이터통신 = 데이터 + 통신

데이터

- 임의의 형태로 형식화된 사실이나 개념, 의사, 명령 등을

  사람이나 기계에 의한 처리가 적합하도록 숫자, 문자, 기호 등으로 나타낸것

통신

- 정보 공여자와 정보 수여자 간의 정보 이동현상

 

유/무선 통신

고정/이동 통신

아날로그/디지털 통신

전기/광 통신

공중/전용 통신

음성, 데이터, 화상, 영상, 멀티미디어 통신

 

컴퓨터 통신은 데이터 전송뿐만 아니라 데이터의 처리까지 포함

노드 : 네트워크 상의 다른 노드로 데이터를 전송 / 수신 할 수 있는 모든 장치

링크 : 장치들을 서로 연결하는 통신 채널

 

프로토콜 : 이기종 시스템 간에도 통신이 가능하게 하기 위해 만든 일련의 표준, 협약

주요 요소

1. 구문

2. 의미

3. 타이밍

 

전화통신망

아날로그 신호는 거리가 멀어질수록 감쇄가 일어난다.

전화망은 거리가 길어지면 증폭기가 반드시 필요하다.

 

패킷교환기술

자원의 할당이 필요 없음

순서가 보장이 안되는 문제 발생

 

인터네트워킹 시작(1970년대) -> 네트워크의 확장(1980년대) -> 인터넷의 폭발적 성장(1990년대)

대역폭(bandwidth)

전송 매체를 지나는 신호의 최대 주파수와 최저 주파수의 차이

대역폭이 넓을수록 단위 시간 당 더 많은 데이터 전송 가능