Bleeding edge

파일 경로를 다음과같이 만들었을 때 (index.html을 제외한 파일은 모두 src에 있다) index.html에 app.js를 src시켰다. 이 때 특이한 점을 발견했는데, import 할때와, fetch의 폴더가 같은데 경로를 적용하는게 다르다는 것을 느꼈다. import data from "./data.js" fetch("./src/data.json") .then(function(res){ return res.json(); }) .then(function(data){ console.log(data) }) data() import는, app.js를 기준으로 경로가 정해지고. fetch는 index.html( 와 같이 app.js를 붙인 곳 )을 기준으로 경로가 정해진다.

HTML의 Document는, 1. DOMContenLoaded 2. load 3. beforeunload 4. unload 이렇게 네가지의 이벤트로 리소스 로딩 언로딩의 시점에 이벤트를 컨트롤 할 수있습니다. DOMContentLoaded 1. DOMContentLoaded는 document 객체를 기준으로 발생하기 때문에, addEventListener을 사용해야합니다. 2. script안에 있는 스크립트가 모두 처리된 후에 발생합니다. 2 - 1 2에대한 예외로, async 속성이 있는 스크립트는 DOMContentLoaded의 '모두 처리'의 대상에 포함이 안되기 때문에, async가 실행이 안되더라도 DOMContentLoaded는 발생할 수 있습니다. load window 객체의 load가 끝..

프로젝트를 하다보면 settimeout을 쓰더라도 이벤트가 두번 발생하는 경우가 있었는데 이를 사용하면 해결될꺼같다. 보통 이 둘을 배울 때, 같이 배우는데 둘의 용도와 사용방법이 다르다. 우선 둘의 뜻을 알아보자 debounce : de-는 not을 뜻하며 bounce는 튀어오르다. 즉 못튀어오르게 막는걸 이야기한다. 자바스크립트에서의 디바운스는, 이벤트 발생이 많을 때 가장 마지막 이벤트만을 실행시킨다. 뜻 자체는 목을 조르다이다. 벨브를 조여서, 유체의 흐름을 제한하는 걸이야기한다. 자바스크립트에서의 쓰로틀은 이벤트 발생이 많을 때 특정 밀리세컨드 동안 이벤트를 차단하고 단 한번만 실행시킨다​​. 둘이 같은거 같지만 debounce는 시행횟수, throttle은 시간에 관련된 제어방법이라 보면좋다...

FE 면접 질문을 검색하다보면, 종종 이벤트 버블링, 이벤트 캡쳐링에 대한 질문이 나온다. 마침 공부하던 영상에서 나왔고, 실제로 혼자 토이프로젝트를 만들다보면 만나던 이슈가 바로 이거였다니..!!하고 봐서 너무 신기하고 반가웠던 개념이었다. 버블링과 캡쳐링에 앞서서, 지금 버블링과, 캡쳐링에 이야기하는 셀렉터는 꼭 이 셀렉터가 아니라, depth위치를 기준으로 하위 셀렉터인지 상위 셀렉터인지를 구분하기위해 이야기를 하는 것이다. 예시 li를 누르면 ul에! 라고 할 때는, li가 하위 ul를 상위와 같은 관계에 있다면 div 안의 div에서도 같게 적용된다. Event bubbling : li를 눌렀는데 ul, header , body 즉, 상위 요의 셀렉터에 이벤트(클릭이나 마우스 다운과같은)가 전달..

Promise란? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 자바스크립트는 일반적으로 동기 처리를 하는 싱글 스레드 언어인데, 위에서 아래로 글을 읽듯이 하나 둘 처리하는 방식이다. 비동기 처리는 동시에 멀티로 처리하는 방식을 말한다. Promise는 왜 필요할까요? 서버와의 데이터를 요청하는데, 이 때, 데이터를 받아오기 전에 데이터를 처리하면 빈화면이 나오는데, 이를 보안하기 위한 방법중 하나가 프로미스입니다 Promise의 상태 3가지 Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 Pending 상태는 ..

자바스크립트에서의 this는 무엇을 의미하는 걸까? 1. 전역 this node.js에서의 this, 브라우저에서의 this는 할 수 있는 것이 다르다. 예를들면 node.js에서의 this는 alert가 안되고, 브라우저에서의 this는 alert가 가능하다. 이렇게 가장 밖에서 쓰는 this를 전역 this라고 한다. (this.process.env는 node에는 있지만, 브라우저에서는 없다) 2. 함수 this function(){ console.log(this) } 함수에서의 this는 window, 전역을 이야기한다 3. 메소드 this const obj = { name : 'obj', method : function(){ return this.name } } 같은 depth의 this값을 불러..

1. 하이브리드 앱, 크로스플랫폼 앱을 만들 수 있다. 하이브리드 앱을 만들고 싶다면 IONIC 하이브리드 예시 - 아마존, 위챗 크로스플랫폼을 만들고 싶다면 리액트 네이티브 리액트 네이티브 예시 - Discord, Tencent, Pinterest, 페이스북, 인스타그램 2. 맥, 윈도우 리눅스를 이용한 데스크톱 소프트웨어를 만들 수 있다 JS와 electron을 이용해서 만들 수 있다 예시 VSC, slack skype github, atom 3. 비디오게임을 만들 수 있다 Phaser Js Impact JS, 또한 Node JS, socket.io를 이용하여 인터렉티브, 멀티플레이어 2D게임도 만들 수 있다 4. 3D VR AR을 만들 수 있다 3JS를 이용하여 만들 수 있다. 카메라 마우스를 활용..

Object.keys() 오브젝트의 키들 Object.values() 오브젝트 벨류들 Object.entries() 오브젝트 키와 벨류를 둘다 호출 할 때 사용한다. 키와 벨류는 알고있었는데, 엔트리같은 경우 유용할꺼같아서 메모해뒀다 !!

Value : String, Number, Object, Boolean 과 같이 한 개의 Value를 가지고 있음.(Object도 그 위치만의 한개의 값이다) Expression : 1개이상의 Value가 모여 Value를 만든다.(4칙 연산도 이중하나) Statement : If, For, While, Switch와 같이, Expression이나 Value를 통해서 행동을 제어한다. Identifier : 자바스크립트에서 이름을 붙일 때 사용하는 단어(일명 식별자) 식별자는 변수명 함수명 속성명 메소드명 식별자 규칙 키워드를 사용하면 안 된다. 숫자로 시작하면 안 된다. 특수 문자는 _와 $만 허용된다. 공백 문자를 포함할 수 없다. 식별자 관례 1. 생성자 함수의 이름은 항상 대문자로 시작한다. 예시..