takeU

네트워크 컴퓨터 등의 장치들이 통신 기술을 이용하여 구축하는 연결망 노드(서버, 라우터, 스위치 등 네트워크 장치)와 링크(유선, 무선)가 서로 연결되어 있거나 연결되어 있지 않은 집합체 처리량과 지연 시간 처리량 (throughput) 링크를 통해 전달되는 단위 시간당 데이터 양 단위 - bps(bits per second), 초당 전송/수신되는 비트 수 사용자들이 많이 접속할 때마다 커지는 트래픽, 네트워크 장치 간의 대역폭, 네트워크 중간에 발생하는 에러, 장치의 대역폭 주어진 시간 동안 네트워크 연결을 통해 흐를 수 있는 최대 비트 지연 시간 (latency) 요청이 처리되는 시간 메시지가 두 장치 사이를 왕복하는데 걸린 시간 매체 타입(무선, 유선), 패킷 크기, 처리 시간에 영향을 받음 네트워..

디자인 패턴 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 '규약' 형태로 만들어 놓은 것 1. 싱글톤 패턴 (Singleton pattern) 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴 데이터베이스 연결 모듈에 많이 사용 인스턴스를 공유하며 사용하기 때문에 생성에 드는 비용이 줄어드는 장점 의존성이 높아진다는 단점 / TDD에 부적합 / 의존성 주입 (DI) 를 통해 해결 가능 의존성 주입 시 장점 모듈을 쉽게 교체할 수 있어 테스팅, 마이그레이션이 쉬움 의존성 방향이 일관되고, 애플리케이션을 쉽게 추론할 수 있으며 모듈간의 관계가 명확함 의존성 주입 시 단점 모듈들의 분리로 인한 복잡성 증가, 런타임 패널티 의존성 주입 원칙 상위 모듈은..

이걸붙네

home brew 설치 homebrew는 mac OS용 패키지 관리자이고, 터미널에서 다음 코드로 설치가 가능함 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 설치후에 내 mac에 homebrew가 잘 깔렸나 확인하기 위해 아래 명령어를 입력해 확인 brew doctor homebrew 설치 끝 (참고 사이트 : https://brew.sh/index_ko.html ) vim 8.0 설치 vim --version 버전 확인을 통해 7버전이 깔려있다면 8.2버전으로 업그레이드하기 위해 다음과 같이 실행 brew install mercurial brew install vim --with-over..

Whack A Mole 목표 두더지잡기 게임 만들기 기본 코드 Whack-a-mole! 0 Start! 과정 변수, 상수 생성 게임 진행 시간 설정 두다지가 올라올 구멍을 정하는 함수 생성 두더지가 올라오고 내려가도록 하는 함수 생성 게임을 시작하기 위한 함수 생성 두더지를 잡았을 때의 함수 생성 두더지를 클릭하면 bonk 실행 코드 분석 1. 변수, 상수 생성 const holes = document.querySelectorAll('.hole'); const scoreBoard = document.querySelector('.score'); const moles = document.querySelectorAll('.mole'); let lastHole; let timeUp = false; let sco..

Countdown Timer 목표 카운트다운 타이머를 구현 기본 코드 20 Secs Work 5 Quick 15 Snack 20 Lunch Break 과정 변수, 상수 생성 타이머를 진행하는 함수 생성 남은 시간을 출력하는 함수 생성 남은 시간, 분 생성 타이머 시간 설정 함수를 실행하도록 이벤트리스너 생성 코드 분석 1. 변수, 상수 생성 let countdown; const timerDisplay = document.querySelector('.display__time-left'); const endTime = document.querySelector('.display__end-time'); const buttons = document.querySelectorAll('[data-time]'); 변수 ..

Video Speed Controller 목표 비디오 재생속도 컨트롤러를 삽입 기본 코드 1× 과정 상수 생성 속도를 조절할 수 있게하는 함수 생성 함수 실행 코드 1. 상수 생성 const speed = document.querySelector('.speed'); const bar = speed.querySelector('.speed-bar'); const video = document.querySelector('.flex'); 각 클래스에 해당하는 요소를 speed, bar, video에 담음 2. 속도를 조절할 수 있게하는 함수 생성 const handleMove = e => { const y = e.pageY - e.target.offsetTop; const percent = y / e.targe..

Click and Drag 목표 클릭해서 드래그하면 옆으로 넘어가는 페이지를 구현 기본 코드 01 02 03 04 05 과정 상수, 변수 생성 mousedown시 실행될 함수 생성 mouseleave시 실행될 함수 생성 mouseup시 실행될 함수 생성 mousemove시 실행될 함수 생성 코드 분석 1. 상수, 변수 생성 const slider = document.querySelector('.items'); let isDown = false, startX, scrollLeft; items을 클래스로 가지는 요소들을 slider에 담고 isDown, startX, scrollLeft를 변수로 생성 2. mousedown시 실행될 함수 생성 slider.addEventListener('mousedown',..

Stripe Follow Along Nav 목표 박스 크기에 맞춰 내용을 불러오는 네비게이션 바를 만들어 봄 기본 코드 Cool About Me Wes Bos sure does love web development. He teaches things like JavaScript, CSS and BBQ. Wait. BBQ isn't part of web development. It should be though! Courses CLPU Command Line Power User MMD Mastering Markdown Other Links Twiter Facebook 과정 상수 생성 마우스가 올라갈 때의 함수를 생성 마우스가 떠날 때의 함수를 생성 효과를 적용, 해제하는 함수 실행 코드 분석 1. 상수 생성..

Event Capture, Propagation, Bubbling and Once 목표 이벤트 캡쳐링 - 최상위 태그가 먼저 실행이 되고, 그 후에 점점 하위로 호출 이벤트 버블링 - 최하위 태그가 먼저 실행이 되고, 그 후에 점점 상위로 호출 을 구현해보고 알아봄. 기본 코드 button 과정 상수 선언 현재의 클래스 값을 콘솔에 출력하는 함수 생성 div, button에 대해 이벤트리스너 생성 코드 분석 1. 상수 선언 const divs = document.querySelectorAll('div'); const button = document.querySelector('button'); div와 button 태그를 각각의 변수에 담는다 2. 현재의 클래스 값을 콘솔에 출력하는 함수 생성 const ..