빠르고 꾸준하게

Language/Javascript

[javascript 자바스크립트] 순환참조 란?

타입 스크립트로(자바스크립트도 마찬가지) 개인 프로젝트를 진행하던 도중 모듈을 import해서 사용하는데 불러와지지 않아서 console.log로 출력을 해보니 undefined가 출력이 되는 문제가 발생했다. 코드상으로도 문제가 없고 모듈로 바꿔오는 과정도 잘했는데 뭐가 문제인가 하고 찾아보다가 순환 참조 때문이라는 것을 알게 되었고, 순환 참조를 정리하고 넘어가려고 한다. 간단하게 얘기하면, A.js를 export 시켜서 B.js에서 import 해서 모듈을 사용하고 있는데, B.js에서도 A.js를 import해서 사용하려고 하면, 무한 반복을 막기 위해서 의도적으로 빈 객체를 뱉어낸다. 아래 코드로 예를 들어보자. A.js 와 B.js가 있다고 가정했을 때, 이 두 모듈을 불러온 main.js에서..

Language/Javascript

[javascript 자바스크립트] 이벤트루프 란?

자바스크립트의 큰 특징 중 하나는 '단일 스레드' 기반의 언어라는 점이다. 스레드가 하나라는 말은 곧, 동시에 하나의 작업만을 처리할 수 있다는 말이다. 하지만 Node.js기반의 웹서버에서는 동시에 여러 개의 HTTP 요청을 처리하듯이 실제로 자바스크립트가 사용되는 환경을 생각해보면 많은 작업이 동시에 처리되고 있는 걸 볼 수 있다. https://nodejs.org/ko/about/ About | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node.js 공식 홈페이지에 가면 'Node.js 는 좀 더 발전된 이벤트 모델을 선택해서 라이브러리가 아닌 런타임 생성자로 이벤트 루프를 제..

Language/Javascript

[javascript 자바스크립트] import 할때, 중괄호{} 가 있고 없고의 차이란?

최근 리액트 공부를 할 때나 타입 스크립트, 자바스크립트를 사용하면서 모듈이나 라이브러리를 불러올 때 아래와 같이 import를 사용 하곤 한다. 근데 아래 예시를 보면 알겠지만 , React는 중괄호{} 로 감싸지 않고, 나머지는 감싸서 쓰는데 둘의 차이는 뭘까? import React, { useEffect,useState } from 'react' 정답은 받아오는 모듈에서 보내주는 export 방식의 차이다. 아래 예시를 보면서 이해해보자. 먼저 app.js 라는 파일을 만들고 아래처럼 선언해준다. // app.js const a = 1; const b = 2; export {a}; export const c = 3; export default b; app.js 코드를 보면 3가지 방식으로 expo..

Language/Javascript

[javascript 자바스크립트] this,window 란?

자바스크립트를 쓰면서 this는 그냥 쓰라니까 쓰고 넘어갔는데 최근 프로젝트를 진행 하면서 this때문에 애를 먹은적이 여러번 있었다. this는 Object라 했는데 값이 안넘어가서 보니 this가 form형태로 넘어오고 있었고 this에 대해 얕게 알고 있던 나에게 한계점이 왔다. 그래서 이번 시간에는 자바스크립트에서의 this에 대해서 정리해보려고 한다. Node.js 에서의 this는 일반 자바스크립트의 this와는 살짝 다른 점이 있는데 그 부분도 아래에서 다뤄보려고 한다. 먼저 F12를 눌러서 브라우저 콘솔을 켜서 this를 쳐보면 window {}라는 객체가 나올 것이다. this는 기본적으로는 window이다. 그럼 window는 뭘까? F12를 눌러서 브라우저 콘솔에 window를 치고...