Excution Context(실행 컨텍스트) 란? > 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체다 자바스크립트 코드를 실행하면 전역 컨텍스트가 Call Stack에 담기게되고 실행중 우리가 작성한 함수나 객체 등 을 만나면(선언 될때가 아닌

useContext? usecontext는 state, props 등을 전역적으로 관리할 수 있게 해주는 리액트에서 제공하는 hook이다. Why usecontext 우리는 리액트 프로젝트에서 state, props 등을 하위 컴포넌트로 내려주면서 사용할 수 있다 그

useEffect 함수는 컴포넌트가 렌더링 될때마다 특정작업을 실행할 수 있도록 하는 Rect Hook이다즉 컴포넌트가 mount / unmount / update 됐을때 특정 작업을 처리할 수 있다(class형 컴포넌트의 생명주기 메서드)기본문법컴포넌트가 처음 렌더링

useCallback은 useMemo와 마찬가지로 렌더링 최적화를 위해 사용하는 React Hook 중에 하나이다함수를 메모이제이션 하는 Hook이고 첫번째 인자로 넘어온 함수를, 두번째 인자로 의존성 배열을 사용한다ex)기본적으로 react 컴포넌트 내에 선언된 함수

오늘은 React의 많은 Hook 중에 렌더링 최적화를 위해 주로 사용하는 useMemo에 대해 알아보자리액트는 기본적으로 부모 컴포넌트의 state / props 가 변경될때 마다 Rerendering 이 된다하지만 컴포넌트의 state / props가 하나밖에 없는

Cookie ?

Web Storage HTML5 부터 도입된 데이터를 브라우저에 저장할수 있는 저장소 키 / 값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회 상대적으로 덜 중요한 데이터를 보관 문자열(String) 타입만 지원(다른 타입을 넣어도 자동으로 문자열로 변환) 같은

React에서 state에 이어 중요한개념인 props에 대해 알아보자Components의 속성(property)을 의미, 외부로 부터 전달받은 값(변하지 않아야 함) 으로 해당 컴포넌트가 가진 속성에 해당부모 컴포넌트로 부터(상위 컴포넌트) 전달받은 값(React는

리액트에서 많이쓰이고 중요한 개념인 State(상태)에 대해 알아보자 State(상태) 란? 리액트에서 상태란 컴포넌트 내부에서 변할수 있는 값 이다 예를들어 어떤 홈페이지에서 로그인이 되어있어야 접근할 수 있는 페이지가 있다고 해보자 그렇다면 로그인이 되어 있는

JSX는 JavaScript XML의 줄임말이다 React에서 UI를 구성할때 사용하는 문법으로 JavaScript를 확장한 문법이다 이 문법으로 React 엘리먼트를 만들 수 있다 하지만 공식적인 JavaScript 문법이 아니여서 'Babel' 같은 컴파일러로 Ja

처음 자바스크립트를 배우면서 클로저를 배울때는 '아 이런게 있구나, 음...그렇군... 대충 알겠다' 정도로 넘어갔었다 하지만 이번에는 좀더 공부하고 알아본 내용을 토대로 블로그를 작성하면서 정리 해 보려 한다 먼저 클로저의 정의에 대해서 알아보자. 클로저의 정의 사

최근 자바스크립트와 CS 공부를 더 해야겠다는 마음이 들어서 자바스크립트의 중요한 내용인 Event Loop에 대해 정리 해보려한다. 이벤트루프를 이해하려면 먼저 자바스크립트가 싱글스레드 언어이고 이것이 무엇을 의미하는지 이해해야 한다고 생각한다. 그렇다면 스레드가

store middleware등의 환경을 건들지 안고 바로 적용할 수 있는 방식redux-actions에서 제공하고 있던 createAction()과 같은 방식으로 작동한다.기존의 Action creator를 세부적으로 만들 필요 없이 actionCreator를 통해서

하나의 함수, 변수, 클래스, 컴포넌트에게 한번에 너무 많은 일(concerns)을 부여하게 되면 그 코드를 읽는 사람은 혼란스러울 수 있다.가장 간단한 해결책은 한번에 한 가지 걱정만 하도록 단위를 잘게 나누는 것이다. 즉, 코드는 단위 별로 하나의 관심사만 갖도록

자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다.대부분의 프로그래밍 언어에는 컴파일하는 과정에서 수행되는 Linter가 기본적으로 내장되어 있다.그러나, 인터프리터 언어인 자바스크립트는 Linter가 내장되어 있지 않다.이 때문에 런타임

우선 로컬에 웹팩을 설치한다. 터미널에서 명령어로 실행하기 위해 webpack-cli도 함께 설치하자. 웹팩은 테스트 도구인 cypress와 마찬가지로, 배포할 때 필요한 패키지가 아니라 개발할 때 필요한 패키지이니까 -D 또는 --save-dev 옵션을 준다. 그러면

웹팩은 여러 파일을 하나로 합쳐주는 자바스크립트 번들러이다.하나의 entry point에서 시작하여 의존하는 모듈을 찾아내고, 결과적으로 하나의 결과물을 만들어 낸다. 웹팩은 모듈 시스템을 구성하는 기능 이외에도 컴파일 속도를 빠르게 해준다거나, 로더를 사용할 수 있다

출처 https://delivan.dev/react/stop-asking-if-react-hooks-replace-redux-kr/Redux 와 context 관련 글들을 찾아보던중 흥미로운 글이 있어서 가져와 봤습니다많은 동료들이 내게 같은 질문을 다양한 방

Virtual DOM 을 알기위해선 먼저 DOM이 뭐하는 친구인지 알아보자.DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다즉, 웹 페이지

memory allocationhttps://medium.com/@ethannam/javascripts-memory-model-7c972cd2c239먼저 자바스크립트에서 변수가 무엇인지 알아보자. 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모