자바스크립트의 이벤트루프, 태스크, 그리고 마이크로 태스크
## 자바스크립트는 단일 스레드 기반의 언어 자바스크립트는 '단일 스레드' 기반의 언어다. 즉, 스레드가 하나이기 때문에 동시에 하나의 작업만 처리할 수 있다. 그러나 자바스크립트가 사용되는 웹을 곰곰히 생각해보면 동시에 여러개의 작업을 처리하는 모습을 볼 수 있다. 스레드가 하나인 자바스크립트는 동시성을 어떻게 처리할까? 먼저 브라우저 구동환경을 살펴보...
20 POSTS
Page 17
2020년 목표
Don't do anything boring ## Tensorflow JS 중요도: ★★★★★ 난이도: ★★★★★ AI가 하고 싶어요 선생님... tensorflowjs 를 튜토리얼부터 따라하면서 배워보자. ## 알고리즘 강의 [백준강의](https://code.plus/bundle/8) 이제 알고리즘 정복할 때가 되었다. 자바스크립트와 파이썬으...
Github을 아름답게 관리하기
## Commit Message [좋은 git commit 메시지를 위한 영어사전](https://blog.ull.im/engineering/2019/03/10/logs-on-git.html) [좋은 git 커밋 메시지를 작성하기 위한 7가지 약속](https://meetup.toast.com/posts/106) ### 요약 Single Line ...
리액트 텍스트 하이라이트 만들기
리액트에서 텍스트 강조하는 방법
typescript debounce
> Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a cancel m...
브라우저 히스토리 조작
브라우저 히스토리 조작하기
타입스크립트 제네릭
## 제네릭이란 제네릭은 클래스 내부에서 사용하는 데이터의 타입을 외부에서 지정하는 것을 의미한다. 어떤 타입의 데이터를 쓸지를, 클래스 선언부가 아니라 외부에서 결정하는 것이다. 일단 자바 코드로 한번 살펴보자. ```java class Person<T>{ public T name; } Person<String> p1 = new Person<...
리액트 면접 질문 모음 (2)
[목차](/2019/08/13/reactjs-interview-questions/) # table of contents ```toc tight: true, from-heading: 2 to-heading: 3 ``` ## React Router ### What is React Router? React Router는 리액트 최상단에 있는 강력한 라우...
리액트 면접 질문 모음 (1)
[목차](/2019/08/13/reactjs-interview-questions/) ```toc tight: true, from-heading: 2 to-heading: 3 ``` ## Core React ### What is React 리액트는 오픈소스 프론트엔드 자바스크립트 라이브러리로, 특히 싱글 페이지 애플리케이션의 사용자 인터페이스 구축을...
타입스크립트 타입 단언
타입스크립트의 타입 단언
리액트 면접 질문 모음
[원문-reactjs-interview-questions](https://github.com/sudheerj/reactjs-interview-questions) [1. Core React](/2019/08/13/reactjs-interview-questions-1/) [2. React - Router, Internationalization, Redux,...
브라우저는 어떻게 동작하는가? - 모던 웹브라우저가 동작하는 방법
### 🚧작성중 🚧 [원문-How Browsers Work: Behind the scenes of modern web browsers](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) > 이 글을 요약/번역한 더 좋은 글이 [네이버 d2](https://d2.naver.com/...
koa-nextjs-react-typescript-boilerplate
[github repository](https://github.com/yceffort/koa-nextjs-react-typescript-boilerplate) nextjs와 react 만 깔끔하게 쓰고 싶지만, 그러기엔 현실적인 문제가 몇가지 있다 ...
React Hooks Api (2)
### useReducer ```javascript const [state, dispatch] = useReducer(reducer, initialArg, init); ``` `useState`의 대체 함수다. 다수의 하윗 값을 만드는 복잡한 로직, 혹은 다음 state가 이전 state의 의존적인 경우에 쓴다. 뭐가 뭔지 모르겠으니까 예제를 보자. ...
React Hooks Api (1)
# Hooks API Hook은 react 16.8에서 추가된 개념으로, Hook을 시용하면 class를 갖성하지 않아도 state관리와 같은 react의 기능을 사용할 수 있다. ## 기본 Hook ### useState ```javascript const [state, setState] = useState(initialState); setStat...
HAProxy
## 로드밸런서 > 로드 밸런싱이란, 부하 분산을 위해서 가상 IP를 통해 여러 서버에 접속하도록 분배하는 기능을 말한다. 로드 밸런싱에서 사용하는 주요 기술은 - NAT(Network Address Translation): 사설 IP 주소를 공인 IP 주소로 바꾸는 데 사용하는 통신망의 주소 변조기이다. - DSR(Dynamic Source Rout...
Docker와 ECR, ECS 경험
제법 규모가 있었던 전 회사에서는 특별하게 인프라에 대해 고민을 별로 할 필요가 없었다. 많은 부분이 자동화되어 있었고, 또 적당한 툴로 잘 만들어져 있었기 때문에 개발에 온전히 집중할 수 있었다. 하지만 새롭게 온 스타트업은 (당연하게도) 그런게 없으므로, 회사에서 사용하고 있는 AWS 인프라와 배포 시스템에 대해서 직접 공부할 필요가 있었다. 그 중에서...
Javascript Reduce
멍청이라 그런지 `reduce` 함수가 잘 이해 되지 않았다. ## Reduce ```javascript const list = [1, 2, 3, 4, 5]; const initValue = 10; const totalSum = list.reduce( (accumulator, currentValue, currentIndex, array) => { ...
Javascript Set 그리고 Map
## 근데 사실.. 컬렉션 필요없지 않을까 자바스크립트에서 일반적인 Object는 key-value쌍을 끊임 없이 추가할 수 있는 형태로 구성되어 있다. 그래서 사실 컬렉션이 필요하지 않은 것 처럼 보일 수도 있다. 그러나 이따금씩 object로 부족할 때가 있다. - key 충돌 위험이 존재하는 경우 - 문자열/심볼 이외의 키 값이 필요한 경우 - 객...
Javascript Symbol
## Javascript Primitive 기존에 자바스크립트는 6가지의 primitive가 있었다. - Object - string - number - boolean - null - undefined 그러나 es6가 들어서면서 `symbol`이라는 7번째 primitive가 추가되었다. ## Symbol ```javascript const hel...