메로그

yarn npm 과 같은 자바스크립트 패키지 매니저 입니다. 페이스북에서 npm 이 쓰기 좀 무겁고, 버그도 좀 있는 거 같고 해서 나온게 yarn 입니다. yarn 설치 아래 링크로 들어가서 설치하시면 됩니다. 링크: [https://classic.yarnpkg.com/en/docs/install/#windows-stable] 확인 cmd 창에서 직접 yarn -v 를 치시면 yarn 버전이 나올 것 입니다. yarn -v 1.22.11

Node Nodejs 란 구글의 V8엔진으로 빌드된 자바스크립트 런타임(환경)이다. V8엔진이란 Chrome 에 Javascript 엔진으로 웹브라우저를 만드는 기반을 제공한다. Tip: Node 를 설치하면, npm 도 자동으로 설치됩니다. 설치 아래 링크로 들어가서 LTS 버전을 다운로드하여 주시면 됩니다. LTS 버전은 현재 안정화된 버전으로 기능이 사라지거나 하는 일이 없습니다. 최신 버전은 아직 개발 버전임으로, 추천하지 않습니다.. 링크: [https://nodejs.org/ko/download/] 확인 cmd 창을 열고 node -v 를 쳐서 버전이 나오면 설치가 잘 완료된 것입니다. node -v v14.17.6

리액트를 공부하면서.. 리액트에 대한 개념이 부족하다 생각하여 글을 작성합니다.. (공부의 목적..) React 자바스크립트 라이브러리로, 컴포넌트 기반으로 동적으로 데이터를 내려주면 설계한 대로 UI를 만들어준다. (SPA 또는 모바일 개발시 토대로 사용하고.. 페이스북에서 제공하고...) 특징 컴포넌트 기반 구조 리액트는 UI를 여러 컴포넌트 단위로 쪼개 사용할 수 있습니다. 컴포넌트 단위로 쪼개져 있어, 코드의 가독성이 올라가고, 중복된 코드가 사라져 재사용성이 올라갑니다. (예를 들어, 어떤 다이얼로그를 만드는 컴포넌트가 있다면, 여기에 각 필요한 요소만 집어넣어 사용할 수 있겠...) Data Flow 리액트는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다. 대충 부모에서 ..

이벤트 HTML 요소의 대한 어떠한 사건의 발생을 의미합니다. 이벤트 리스너 요소에서 이벤트가 발생할 경우, 해당 이벤트를 처리하는 함수 이며 이를 이벤트 핸들러 라고 합니다. 대충 우리가 알고 있는 addEventListener 가 대표적 입니다. 아래 링크를 통해 addEventListener의 대한 자세한 설명을 알 수 있습니다. 링크: [https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener] function eventHandler() { console.log('event'); } // 이벤트 등록 window.addEventListener('mousedown', eventHandler); // 이벤트 제거 window..

이벤트 루프 어떤 작업이 발생하여 이벤트 발생 시 내부에서 호출되는 함수들을 태스크 큐(Task Queue)에 전달하고, 콜 스택(Call Stack)에 쌓여있는 함수가 없을 때, 태스크 큐(Task Queue)에 담겨있는 함수들을 콜 스택(Call Stack)으로 넘겨줍니다. 이러한 이벤트 루프를 제공함으로써, 자바스크립트는 싱글 스레드지만, 비동기 방식으로 동시성을 지원합니다. 자바스크립트 언어에는 이벤트 루프가 없고 자바스크립트 런타임 환경을 제공하는 브라우저, Node가 담당한다. 이벤트 루프 동작 setTimeout을 하는 순간 백그라운드를 걸쳐 태스크 큐로 갑니다. 아래 순서를 봐보자. const start = () => console.log('2'); console.log('1'); setT..

클로저(closure) 내부 함수 내에서 외부 함수의 변수에 접근하는 것을 말한다. (그 반대는 안됨!) 외부 함수에서 변수를 선언하고 그 변수를 내부 함수가 사용하고 있다면, 내부 함수가 끝날 때까지 소멸하지 않는다. 예제 function outFunc() { var out = 'outFunc'; function inFunc() { var inf = 'inFunc'; return console.log(out + ', ' + inf); } inFunc(); } outFunc(); // outFunc, inFunc 해당 함수를 실행하면, 내부함수 안에 out이라는 변수가 존재하여 값이 outFunc, inFunc 가 나오는 것을 볼 수 있다. 그렇다면, 내부함수에서 out을 빼보고 inFunc 안에 브레이..