iterable 객체란 feat. 이터레이터, 제너레이터 iterable === 반복 가능한 객체 배열을 일반화한 것이다. 이터러블 개념을 활용하면 어떤 객체에서든 for..of 반복문을 적용할 수 있다. 이터러블 vs 이터레이터 이터러블은 Symbol.iterator 메서드를 가지고 있는 객체를 말한다. 이터러블 객체는 for..of 문으로 순회할 수 있고, spread 문법의 피연산자로 사용할 수 있다. 이터러블 객체의 Symbol.iterator 메서드를 호출하면 iterator 객체를 반환한다. 반환된 iterator 객체는 next 메서드를 소유하고 있다. 이 next메서드를 호출할때, iterator result 객체를 반환한다면 iterator라고 할 수 있다. (obj[Symbol.iter..

엔진의 종류는 무엇이 있나요? V8 크롬, 오페라 Spider Monkey 파이어 폭스 Trident, Chakra IE Chakra Core IE edge SquirrelFish Safari

Babel plugin과 preset babel의 plugin은 실제로 코드를 변환시키는 기능을 담당한다. 예를 들어서 ES6의 화살표 함수 문법을 사용했다면, 이를 변환 시키기 위해서 @babel/plugin-transform-arrow-function 라이브러리가 필요하고, 블럭 스코프를 사용헀다면, @babel/plugin-transform-block-scoping 라이브러리의 설치가 필요하다. 그런데 여기 를 보면 plugin이 굉장히 많다. 이것을 전부 설치해야할까? 그러면 번거롭고 내가 어떤 플러그인을 찾아야 하는지도 힘들 것이다. 그래서 preset이 등장하게 된다. preset은 목적에 따라 plugin들을 모아놓은 라이브러리이다. preset도 여러가지가 있는데, 그 중에서도 @babel..

Function Component인가요? Functional Component인가요? 참고 Function 컴포넌트입니다. Functional 컴포넌트는 함수형 컴포넌트라는 뜻인데, 함수형 프로그래밍으로 작성된 컴포넌트라는 뜻입니다. 함수형 프로그래밍라는 것은 선언형이고 순수함수이며, 부수효과가 없도록 한다. 또 다른 특징으로 참조 투명성을 갖는다. 참조 투명성은 해당 순수함수의 실행 결과값을, 사용하는 코드에서 치환시켰을때 동일한 결과값이 나오는지로 판단할 수 있다. const add = (a,b) => a+b; ​ console.log(add(3,4)) // 7 위 코드는 참조 투명성을 가진다. console.log(7) // 7 함수의 결과값을 사용하는 쪽에서 대체했을때, 같은 결과값을 기대할 수 ..

Context API의 리렌더링을 해결하기 위한 방법으로는 무엇이 있습니까? React.memo나 useMemo와 같은 메모이제이션 최적화를 통해서, 값이 같은 경우 리렌더링이 일어나지 않게 할 수 있습니다. Context의 범위를 최소화 하여, 리렌더링의 범위를 축소하여 사용합니다. 보통 최적화는 최적화를 위한 비용 및 가독성 측면에서 좋지 않기 때문에, 사용할 경우 최대한 Context의 범위를 좁게 유지하여 리렌더링이 미치는 영향을 최소화하는 방식이 많이 사용되는 것 같습니다.

Context API는 무엇인가요? 컨텍스트 API는 리액트에서 내장된 함수로 전역상태 관리를 위해 사용됩니다. 원래는 상태를 관리하기 위해서, 상위 컴포넌트에서 하위 컴포넌트로 prop을 통해서 전달을 해주어야 했는데, depth가 깊어질 수록 하위 컴포넌트에 prop를 넘겨주기 위한 중간 컴포넌트들이 생기게 될 것입니다. 사용하지도 않는 prop를 받는 컴포넌트가 많아진다면, 계층 구조에 의존적인 컴포넌트가 되는 것이고 => 이는 재사용이 어렵고 유지보수가 어려운 스파게티 코드가 될 것입니다. 그래서 전역상태관리를 위해서 Context API가 나오게 되었습니다. Consumer와 Provider로 JSX 태그를 감싸서 사용하는데, Provider로 감싼 영역에서 전역으로 상태가 관리되어지고, Con..

CSS-in-JS와 CSS-in-CSS의 차이점은 무엇인가요? CSS-in-JS CSS-in-JS는 자바스크립트로 CSS 요소들을 관리하는 것으로 styled-component같은 것들이 대표적인 라이브러리 입니다. 자바스크립트로 CSS를 관리하므로, 스타일 요소들을 선언적으로 표현할 수 있게 되고, 컴포넌트 단위로 스타일을 고려할 수 있어서 스타일의 유지보수 및 관리가 쉬워집니다. 또한, webpack의 트리 셰이킹을 통해서 사용하지 않는 스타일 코드들이 제거되어질 수 있어서 성능의 향상을 가져옵니다. 또한, css자체로 테스팅을 할 수 있게 된다는 장점이 있습니다. 하지만, 원래는 브라우저를 렌더링할때, 스타일요소와 스크립트가 병렬적으로 행해졌는데, 이제는 모든 스타일 코드가 스크립트 안에 들어가 있..

왜 Emotion을 쓰셨나요? styled-component를 사용하는 도중에 알게된 라이브러리로, styled-component와 같은 기능을 모두 제공하고 있으며, 용량도 가볍고, 성능이 좋다고 알려져있다. 또한, css prop기능을 제공하고, SSR시 서버작업이 필요없다고 한다. 참고 다양한 장점을 가지고 있어서 styled-component 대신 emotion을 사용했다. 좀 더 성능이 뛰어나고 가벼운 툴을 원하는건 IT 종사자의 본능이니까! 하지만 styled-component를 안썼을때 생기는 이슈가 발견된다면 emotion대신 styled-component를 사용해도 무방하다고 생각한다.