🚧작성중 🚧 원문-How Browsers Work: Behind the scenes of modern web browsers 이 글을 요약/번역한 더 좋은 글이 네이버 d2에 있습니다. 개인적인 공부 차원에서 이 원문을 fully 한글로 번역하고 있습니다. 소개 웹 브라우저는 가장 널리 쓰이는 소프트웨어다. 이 글에서는, 브라우저가 어떻게 동작하는지 소개할 것이다. 이 글을 읽고 나면, google.com을 타이핑 한 시점 부터 구글페이지가 브라우저에 보이기 까지, 어떤 일련의 과정이 있는지 알게 될 것이다. 목차 1. Continue reading
useReducer 1 const [state, dispatch] = useReducer(reducer, initialArg, init); useState의 대체 함수다. 다수의 하윗 값을 만드는 복잡한 로직, 혹은 다음 state가 이전 state의 의존적인 경우에 쓴다. 뭐가 뭔지 모르겠으니까 예제를 보자. useState를 쓰기전 1 2 3 4 5 6 7 8 9 10 11 function Counter({ initialCount }) { const [count, setCount] = useState(initi Continue reading
Hooks API Hook은 react 16.8에서 추가된 개념으로, Hook을 시용하면 class를 갖성하지 않아도 state관리와 같은 react의 기능을 사용할 수 있다. 기본 Hook useState 1 2 const [state, setState] = useState(initialState); setState(newState); 상태 유지값, 그리고 그 값을 수정하는 함수를 반환한다. 이전의 state값을 받아다가 수정할 수도 있다. 1 2 3 4 5 6 7 8 9 10 11 function Counter({ Continue reading

HAProxy

로드밸런서 로드 밸런싱이란, 부하 분산을 위해서 가상 IP를 통해 여러 서버에 접속하도록 분배하는 기능을 말한다. 로드 밸런싱에서 사용하는 주요 기술은 * NAT(Network Address Translation): 사설 IP 주소를 공인 IP 주소로 바꾸는 데 사용하는 통신망의 주소 변조기이다. * DSR(Dynamic Source Routing protocol): 로드 밸런서 사용 시 서버에서 클라이언트로 되돌아가는 경우 목적지 주소를 스위치의 IP 주소가 아닌 클라이언트의 IP 주소로 전달해서 네트워크 스위치를 거치지 Continue reading
제법 규모가 있었던 전 회사에서는 특별하게 인프라에 대해 고민을 별로 할 필요가 없었다. 많은 부분이 자동화되어 있었고, 또 적당한 툴로 잘 만들어져 있었기 때문에 개발에 온전히 집중할 수 있었다. 하지만 새롭게 온 스타트업은 (당연하게도) 그런게 없으므로, 회사에서 사용하고 있는 AWS 인프라와 배포 시스템에 대해서 직접 공부할 필요가 있었다. 그 중에서도 처음 접하는 것이 docker 였다. Docker 예전 부터 이름은 많이 들어봤지만 이런저런 이유로 (귀찮아서) 한번도 써본적이 없었다. docker는 컨테이너 기반의 오픈소 Continue reading

Javascript Reduce

멍청이라 그런지 reduce 함수가 잘 이해 되지 않았다. Reduce 1 2 3 4 5 6 7 8 const list = [1, 2, 3, 4, 5]; const initValue = 10; const totalSum = list.reduce( (accumulator, currentValue, currentIndex, array) => { return accumulator + currentValue; }, initValue ); 1 25 * currentValue: 처리할 현재 요소 * cur Continue reading
근데 사실.. 컬렉션 필요없지 않을까 자바스크립트에서 일반적인 Object는 key-value쌍을 끊임 없이 추가할 수 있는 형태로 구성되어 있다. 그래서 사실 컬렉션이 필요하지 않은 것 처럼 보일 수도 있다. 그러나 이따금씩 object로 부족할 때가 있다. * key 충돌 위험이 존재하는 경우 * 문자열/심볼 이외의 키 값이 필요한 경우 * 객체에 얼마나 많은 속성이 있는지 알아낼 수 있는 효과적인 방법이 필요한 경우 * 객체가 iterable하지 않음. 따라서 for..of 나 ...를 사용할 수 없음 es6에 추가 Continue reading

Javascript Symbol

Javascript Primitive 기존에 자바스크립트는 6가지의 primitive가 있었다. * Object * string * number * boolean * null * undefined 그러나 es6가 들어서면서 symbol이라는 7번째 primitive가 추가되었다. Symbol 1 2 const helloSymbol = Symbol(); const hiSymbol = Symbol(); 새로운 심볼 값을 생성했다. 이 심볼로 생성한 값은 변경할 수 없으므로 const에 할당에도 상관없다. 그리고 Continue reading
Javascript Event Capturing See the Pen Event Capturing by yceffort (@yceffort) on CodePen. Event Capturing은 특정 요소에서 이벤트가 발생했을 때, 최상위 요소에서 부터 이벤트를 탐색하여 특정요소까지 찾아오는 이벤트 전파 방식을 의미한다. 위 예시에서 가장 내부의 element를 클릭했을 때, 최상위 요소 부터 해당 click이벤트를 전파시켜 이벤트가 실행되는 것을 볼 수 있다. Javascript Event Bubbling See the Pe Continue reading

javascript class

Class 클래스는 기본적으로 이렇게 생겼다. 1 2 3 4 5 6 7 8 class Member { getName() { return "이름"; } } let obj = new Member(); console.log(obj.getName()); 특징 1. strict 모드에서 실행 딱히 'use strict';를 선언하지 않아도, 클래스의 코드는 기본적으로 strict모드에서 실행된다. 그렇게 되면, 당연히 strict모드의 여러가지 특징을 자동으로 따르게 된다. 2. 클래스 내 메서드 작성 1 2 3 Continue reading
Author's picture

yceffort

yceffort


programmer


Korea