react-testing-library 와 jest를 사용해서 react-hooks를 test 해보았다. 생각 보다 막히는 곳이 많았다.

제가 면접 보면서 질문 받았던 면접 질문들을 총정리 합니다. 여러 IT 대기업들 그리고 여러 스타트업들의 내용들을 정리하였습니다.DOCTYPE 이란 무엇인가요?여러 meta 태그들에 대한 질문시맨틱 태그란 무엇인가요?position에 대해 설명해주세요.display에

React의 V-DOM은 이전 V-DOM과 현재 V-DOM을 비교해서 바뀐 부분만 변경함으로써 최적화가 이루어진다. 그렇다면 React는 어떠한 방식으로 V-DOM 이 바뀌었는지 아는걸까? React는 Reconciliation 과정을 거친다. 일반적인 트리 비교 알고

javascript는 prototype을 쓰는 언어이다. prototype을 통해서 다른 class언어의 상속을 구현할 수 있다. 그렇다면 그냥 class 언어와 prototype 언어의 차이가 무엇일까? prototype 언어의 장단점은 무엇인가...내가 생각하고 공

key 속성은 보통 list를 map으로 반복문으로 렌더링할 때 각 element를 구분하고 바뀌었는지 구분하기 쉽게 도와주는 역할을 한다. key는 props로 넘어가지 않고 단순히 리액트를 도와주는 역할을 하는 것이다.기본적으로 props가 바뀌면 리렌더링이 되는데

bind는 함수 실행시 this 값을 특정한 값으로 고정시킬 수 있는 메소드이다.bind는 ES5에 추가되었기 때문에 ES5 이전에는 call, apply를 통해서만 this를 변경할 수 있었다. bind처럼 this를 변경 한 함수로 만들기 위해서는 직접 구현을 했어

Document Type의 약자로 HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해준다. <!DOCTYPE> 을 선언하지 않으면 호환모드(quirks mode)로 동작하는데, 호환 모드의 경우 각 브라우저마다 문서

웹팩5를 쓰면서 잘 되던 HMR이 갑자기 동작을 안 한다. 너무 불편하다 하나를 바꿀 때마다 새로고침을 해주어야 한다.왜 그럴까... 찾아보니 target에 es5 를 추가 하면 안 된다고 하는 것 같다...아까 IE를 지원 하기 위해서 target: 'web'인 것을

웹팩으로 IE를 지원 하기 위해서 babel을 사용하고 core-js도 설정을 해주었다. 그 설정은 다음과 같았다.babel.config.jswebpack.config.js다음과 같이 설정을 해뒀는데 build를 해도 계속 화살표 함수가 바뀌지 않는 것이었다. babe

오늘 오후 1시부터 4시까지 Dev-Matching이 있었다. 이번이 3번째 참가이다. 이번에는 저번과는 다르게 화상 감독을 도입하여서 캠을 켜야했다. 밥을 먹고 호다다닥 들어간다고 그냥 컴퓨터 캠으로 켰는데 끝나고 나서 알고보니 휴대폰으로 했어야 한다고 한다. (메일

https://www.acmicpc.net/problem/2252가장 기본적인 위상정렬을 통해 해결 할 수 있다.어떤 사람 뒤에 어떤 사람이 와야하는지를 정렬하는 것이기 때문이다.

https://www.acmicpc.net/problem/2623전체 가수의 순서를 정하는 것이다.위상정렬을 통해서 해결할 수 있다.가장 기본적인 위상정렬을 하고,마지막에 모든 가수가 정상적으로 result에 들어갔는지를 확인 해주면 된다.

https://www.acmicpc.net/problem/14676골드 4 문제이다.위상정렬을 활용하면 된다.건물들을 순서가 있고, 건물을 하나씩만 지을 수 있는것이 아니기에 그것까지 체크해주면 된다.그리고 건물을 정상적으로 건설하거나, 건설한 만큼의 건물만

https://www.acmicpc.net/problem/9470잘 이해가 안 됐었던 문제이다.위상정렬을 응용하면 된다.Strahler 순서를 구하는 문제인데, 처음 시작하는 곳은 순서가 1이다. 그리고 이에 연결된 노드들은 그 노드로 들어오는 순서 중 가장

요즘 웹사이트에서 찾아보면 하나의 페이지만 있고, 상단의 네비게이션 바를 통해 화면을 이동하는 방식을 볼 수 있다. 이러한 페이지는 어떻게 구현하는 것일까? 물론 스크롤을 하나하나 계산해서 이동시킬 수도 있겠지만, element의 메소드인 scrollIntoView를

요즘 개발 환경에서 번들링을 이용해서 모든 코드를 하나의 번들로 묶어서 만들게 된다. 앱이 비교적 간단한 편이라면 크게 문제가 되지 않지만, 프로젝트가 커지면 전달해야 하는 파일도 커지고, 유저의 브라우저가 파싱해야하는 정보도 많아지기 때문에 퍼포먼스 문제들이 생길 수

직역하면 나무 흔들기, 모듈을 번들링할 때 사용하지 않는 코드를 제거하는 최적화 과정을 말한다.이 용어를 처음 최적화 개념에 사용한건 rollup.js이다. Webpack 4 부터 대단히 영리한 최적한 빌드를 보여준다.Webpack의 optimization에서 prov

'웹에서 표준적으로 사용되는 기술이나 규칙'표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript등에 대한 규정이 담겨있다.어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상작동해야 함을 의

호이스팅은 보통 변수를 위로 끌어올리는 것이라는 표현을 많이한다. 그렇다면 개발자들을 헷갈리게 하는 호이스팅을 왜 만들었을까?? 이를 알기 위해서는 JS엔진이 JS를 어떻게 해석하고, 어떻게 Excution Context를 만들고 어떤 작업을 하는지를 알아야한다.JS엔

자바스크립트는 객체 프로퍼티 키로 문자형과 심볼형만을 허용한다. 숫자형, 불린형 모두 불가능하다.Symbol은 ES6에 새로 추가된 원시 타입이다. 심볼은 유일한 식별자를 만들고 싶을 때 사용한다.심볼은 unique 하기 때문에, description이 같아도 충돌하지