코딩을 쉽게 해보자

Deep Dive를 각 장마다 나눠서 게시글을 올렸었는데, 나중에 다시 읽으려고 보니 너무 분산돼있는 것 같고 주니어 개발자로서 반복해서 보기에 minor한 내용들이 많았던 것 같아 이제부터는 필요한 내용만 적어두려고 한다. 그래서 이 책은 한 게시글에 몰아서 작성하려고 한다.(200pg밖에 안됨) 정재남의 코어 자바스크립트는 게시글을 작성하기 전에 미리 다 읽었는데, Deep Dive가 백과사전이라면 코어 JS는 허들이 있는 JS의 핵심 개념을 이해하기 쉽게 잘 설명하는 책이다. 목차 데이터 타입 실행 컨텍스트 this 콜백 함수 클로저 프로토타입 클래스 1. 데이터 타입 데이터 타입의 종류 원시형: number, string, boolean, null, undefined, Symbol 참조형: ob..

React는 컴포넌트를 자주 다루지 않아도 되도록 자동으로 DOM을 렌더 출력과 일치하도록 업데이트한다. 하지만 React에 의해 다뤄지고 있는 Dom elements를 접근해야 하는 경우가 있다. 예를 들어, 노드를 focus하거나 스크롤, 이것의 크기나 위치를 측정할 때다. React에서는 이러한 방법을 기본적으로 하는 방법을 제공하지 않으므로, ref를 Dom node에 사용해야할 것이다. 노드에 ref를 가져오기 React에 의해 다뤄지는 DOM node에 접근하기 위해서는 useRef를 import 해야한다. 그 이후, 컴포넌트 안에서 ref를 선언하고, 마지막으로 DOM node에 ref 어트리뷰트를 넘긴다. import { useRef } from 'react'; const myRef = u..

https://beta.reactjs.org/learn/referencing-values-with-refs Referencing Values with Refs A JavaScript library for building user interfaces beta.reactjs.org 컴포넌트가 어떠한 정보를 "기억"하기를 바라고 그 정보가 새로운 렌더링을 일어나지 않길 원한다면, ref를 쓸 수 있다. 컴포넌트에 ref 추가하기 useRef 훅을 React에서 import하면 쓸 수 있다. 컴포넌트 안에서 useRef훅을 가져와 참조하고 싶은 초기값을 전달하면 const ref = useRef(0); // useRef는 이러한 object를 반환한다. { current: 0 // The value you pa..

크롬, 사파리, 파이어폭스, 엣지와 같은 에버그린 브라우저의 ES6 지원율은 약 98%로 거의 대부분의 ES6 사양을 지원한다. 하지만 IE 11의 ES6 지원율은 약 11%다. 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요하다. 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더도 필요하다. ES6 모듈(ESM)은 대부분의 모던 브라우저에서 사용할 수 있다. 하지만 다음과 같은 이유로 아직까지는 ESM보다는 별도의 모듈 로더를 사용하는 것이 일반적이다. IE를 포함한 구형 브라우저는 ESM 지원 X ESM을 사용하더라도 트랜스파일링이나 번들링이 필요한 것은 변함 X ESM이 아직 지원하지 않는 기능(bare import 등)이 있고 점차 해결되고는 있지만 아직 몇가지 이슈가 ..