익명의 개발노트

브라우저가 Html파일을 랜더링 할 때, 맨 위에서 아래로 한줄한줄 읽으면서 실행한다. script 태그가 없으면, 브라우저는 parsing HTML만 진행을 할 것이다. 그럼 아래와 같이 head 부분에 script가 있으면?? 위와 같이 HTML을 먼저 파싱하고, 자바스크립트를 fetch, executing 하는동안 HTML 파싱은 잠시 중지하고, 스크립트 실행이 끝나면 남은 HTML을 파싱한다. 아래와 같이 Body에 있는 경우는 어떠할까? 위와 같이 HTML 파싱이 다 끝나면, 스크립트를 fetch, executing한다. body에는 위와 같은 순서대로 진행되기때문에 async, defer가 거의 의미가 없다. 그러면, async와 defer를 쓰면 무슨차이가 있을까? 우선 Async를 먼저 보..

브라우져가 로딩되면, window객체에서는 아래와 같은 이벤트들이 동작을 한다. 1. DOMContentLoaded : only document, 즉 html만 먼저 불러온다. css, image는 불러오지 않는 단계 2. load : css, image 같은 리소스가 로딩이 완료되면 호출된다. 3. beforeunload : 페이지 나가기 전에 호출되며, 사용자가 페이지를 떠날 때 정말로 떠날 것인지 묻는 확인 대화 상자를 표시할때 사용할 수 있다. 4. unload : document, resource가 전부 unload되었을 때 호출된다. 1) 오류가 발생해도 취소되지 않는다. 2) window.open(), window.alert(), window.confirm() 같은 UI 상호작용 함수들의 효..

CRA로 손쉽게 설치 할 수 있지만, 수동으로 설치를 진행해보고자 한다. 1. 수동 설치 이유 1) 프로젝트 규모가 커지면 eject 해야하는 경우가 발생하는 경우가 생김 2) CRA로 설치하는 것보다 작업하면서 필요한 부분을 추가해 나가는 것이 나중에 빌드시 시간 감소에 유리하다. 2. 수동셋팅방법 1) npm 설정하기 npm init 2) npm package 추가 //웹팩설치 npm install --save-dev webpack webpack-dev-server webpack-cli //바벨설치 npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react babel-preset-es2015 //리액트설치 ..