[배운 내용 정리] 프론트엔드 날개달기: Vue.js, React 배우기 전에 꼭 알아야하는 지식 - 짐코딩 GYM CODING 선생님
# Thanks for ㅡ
강의 링크 : 인프런
커뮤니티 Q&A
강의 교안 1
강의 교안 2
블로그 정리를 흔쾌히 허락해주신 짐코딩 GYM CODING 선생님께 감사드립니다 : )
◎ 기본 개념
DOM이란 ?
Document Object Model (문서 객체 모델)
Document 객체 : 웹 문서 영역을 제어할 수 있게 제공하는 객체
- 웹 페이지 자체를 의미한다
- 원하는 html 요소에 접근 가능하게 한다
- Tree 구조를 가지고 있다
- 하나의 부모 태그와 N개의 자식 태그
여기서 DOM 트리도 트리이므로, 각각의 요소를 노드(Node)라고 한다 !
제어를 할 때의 순서는 접근 후 제어
getRootNode() // 최상위(루트) 노드 반환 함수
document.getRootNode() 실행 시 document 객체 반환
브라우저에는 렌더링 엔진이 있다
브라우저로 파일을 열게 되면 html 문서를 1줄씩 해석하고
해석이 끝나면 객체화하여 Javascript로 처리 할 수 있게 된다
Javascript :
- 웹문서를 변경하기 위한 언어
- html을 조작하기 위해 만들어진 언어
CSS Object Model : DOM처럼 CSS를 javascript로 조작할 수 있게 한 것
html 요소에 접근할 때 계속해서 힘들게 접근할 수는 없으니
querySelector에다가 CSS 선택자로 쉽게 접근 → CSSOM이 있어서 가능한 것
추가 참고 :
BOM이란 ?
Browser Object Model (브라우저 객체 모델)
- 브라우저 자체를 제어할 수 있도록 모델링한 것
- 웹브라우저를 script 언어로 제어하기 위해서 객체화한 것
- BOM을 브라우저를 제어하기 위한 Interface라고도 말한다
- 종류 : window / document / history / location / screen / navigator
javascript에서는 함수도 객체
window.alert()에서 window를 생략하고 alert()만 사용 가능
document 객체도 객체이기 때문에 window 객체에 소속되어 있다
그래서 편의를 위해 생략한 형태로 사용 가능하다
location
window.location
document.location 다 사용이 가능하다 :)
console.log( ) : 로그 출력에 용이
console.dir( ) : 객체 출력에 용이
BOM 객체 활용 예시
- screen 객체를 활용하여 사용자 display에 대한 정보를 가져올 수 있다
console.dir(screen) - navigator로 위치 정보를 가져올 수 있다
script 태그 defer, async
자바스크립트 load : defer, async 자바스크립트에서 html 파일을 가져올 때 효율적으로 가져오는 방법?
button을 파싱하기 전에 script 파일을 먼저 읽어서 error 발생
없는 button을 불러오기 때문 !
해결 방법
- script를 body 태그 최하단으로
- load 이벤트 리스너 등록 window.onload - HTML 파싱 DOM 생성 그리고 외부 컨텐츠가 로드된 후 발생하는 이벤트 (외부 컨텐츠 : images, script, css, etc)
2번의 경우 비효율적일 수 있다 이미지가 1만 개면 1만개를 다 로드한 이후에 실행됨
- DOMContentLoaded HTML 파싱과 DOM 생성만 된 이후 파싱 → 2번보다 훨씬 빠르다
script 실행할 때가 문제 HTML parsing할 때 script를 다운할 수 있다면? 이를 위한 게 HTML5에서 나온 defer, async
defer
- HTML 파싱과 함께, ‘비동기’로 Javascript 파일을 불러온다
- 실행하는 건 html 파싱이 끝난 후에
async
- HTML 파싱과 함께, ‘비동기’로 Javascript 파일을 불러온다
- HTML 파싱이 완료되지 않아도 바로 실행 (defer와 결정적인 차이)
결론 : 일반적인 경우 defer 속성을 사용하면 된다 !
this 란 무엇인가?
this는 호출’한’ 객체!
예외 ↓
- 전역스코프에서 this는 window 객체
- 화살표 함수(Arrow Function) 에서 this가 조금 달라진다
- Strict Mode 에서는 this가 조금 달라진다
ES5 bind method - this 설정 가능
bind로 this 설정하는 건 1번만 사용 가능하다
중복해서 사용해도 처음 bind 설정이 적용됨
Arrow Function - ES6 에서 나왔다
=> 를 사용하면 상위 scope의 this를 물려받는다
◎ 용어 이해
API란 무엇인가?
Application Programming Interface
Interface : 상호간에 소통을 위해 만들어진 접점 (소통 : 읽거나 쓰는 것)
응용프로그램 : 운영체제에서 실행되는 모든 소프트웨어
일반적인 API : HTTP API
(사내에서 쓰는) 접근이 제한 된 API : Private API
누구나 쓸 수 있는 API : Open API
미세먼지 농도에 맞춰서 창문 개방하는 IOT의 경우,
HTTP 통신이 아닌 저사양 저전력 환경에 적합한 프로토콜 사용
API는 통신 프로토콜 레벨이 아닌 class나 함수와 같은 소스코드 레벨도 될 수 있다
동기와 비동기란?
정의를 내릴 때 이해하기 쉽게, 모순은 없게 하면 좋다
동기 synchronous : 기다리는 것 (blocking)
비동기 asynchronous : 기다리지 않는 것 (non-blocking)
어떤 게 더 좋고 그런 게 아니고 서로 다른 것
비동기식으로 일 하면 바로 바로 확인이 안 된다
프론트엔드 & 백엔드란?
예전에는 JSP와 php와 같은 템플릿 엔진으로 개발을 많이 했는데
이 때는 프론트 백엔드를 나누지 않고 그냥 웹 개발자로 진행을 했다
하지만 지금은 Angular, React, Vue 와 같은 강력한 웹 프레임워크가 등장하여
웹 개발을 좀 더 파워풀 하게 해야하는 미션이 등장하였다
지금은 프론트엔드와 백엔드의 완전한 분리를 지향해서
그 용어도 쓰이게 되었다
◎ 프론트엔드 날개달기
이벤트 전파
이벤트 전파(Event Phase)
이벤트의 흐름은 최상위 요소부터 타겟 요소까지 전달된 다음 (캡쳐링)
다시 최상위 요소까지 전달(버블링)
addEventListener는 기본적으로 버블링으로 동작한다
이벤트가 캡쳐링할 때 동작하도록 만드려면?
addEventListner의 3번째 인자로 true를 주면 된다 (default : false)
( visual studio code 내 함수 인자 확인 cmd : ctrl + shift + space )
event에는 event.eventPhase라는 게 있다
caturing에는 1 / target은 2 / bubbling은 3
event.stopPropagation(); 을 이용하면 이벤트 전파를 막을 수 있다
event.preventDefault(); 기본 동작을 못 하도록 만든다
submit event를 막거나 anchor 태그의 기능을 막을 때 등에 쓰인다
자바스크립트 유용한 Array APIs
● map() : 배열 내의 모든 요소에 대하여 주어진 함수를 호출한 결과를 모아서 배열을 반환한다
function(number) 대신 (number) => 로 사용 가능 명령문이 하나 일 때는 단축해서 사용 가능
● some() : 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트
● every() : 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트
● filter() : 주어진 함수의 테스트를 통과하는 모든 요소를 모아서 새로운 배열로 반환
● reduce() : 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고 하나의 결과값을 반환
- 누적 값(acc)
- 현재 값(cur)
- 현재 인덱스 (idx)
- 원본 배열(src)
뒤에는 초기값 지정 가능
1부터 7까지 더하는 함수를 만든다고 하면 이런 식
return acc + cur
reduce() 를 이용해서 중복값 제거
fruits.reduce((arr, cur) =>{
if (arr.includes(cur) === False){
arr.push(cur)
}
return arr;
}, [])
reduce() 현업에서 정말 유용하게 쓸 수 있는 함수
JavaScript 모듈 시스템
분리된 하나의 파일 : 모듈
그리고 이를 불러올 수 있는 시스템 : 모듈 시스템
모듈은 특정한 목적을 가진 클래스 하나 or 여러 개의 함수를 가진 라이브러리
기존 방식
<script src="a.js">
<script src="b.js">
<script src="c.js">
의 문제 : 전역 scope를 공유한다
이름이 같은 변수가 있다면 덮어씌워지는 등 원하지 않던 결과가 생긴다
즉 이 방식은 프로젝트 규모가 커질수록 문제가 생길 가능성이 커진다
<script type="module"></script>
해당 소스파일은 모듈로 간주 각각의 모듈별로만 scope를 공유
● ES Module
- ES6에 도입된 모듈 시스템
- 모듈 시스템은 현업에서 가장 많이 사용
export 가 정의된 변수나 함수 또는 클래스는 외부에서 사용 가능
import {obj1, obj2, obj3} from "./math.js";
import * as math from "./math.js";
export default -> import 한 곳에서 이름 변경 가능
export 방법은 여러 가지이기 때문에
팀의 컨벤션이나 효율에 맞게 사용하면 된다 !
● CommonJS는 아래와 같은 방식을 사용
experts.~
module.exports = {
}
Front-End : ES Module 방식 / Back-End : CommonJS 방식 많이 사용
NodeJS에서 ES Module 시스템을 사용하려면? 여러 방법이 있다
node는 실행될 때 package.json을 참조해서 실행된다
여기에 이하의 코드를 삽입하면 가능
{
"type" : "module"
}
NPM 기초
Node Package Manager
javascript로 어떠한 application을 만들 때 다양한 모듈 필요
NPM은 이러한 모듈을 쉽게 다운로드 할 수 있게 해주는 도구
날짜의 경우 format의 경우가 늘어나면 더더욱 코드는 길어진다
그래서 자주 사용하는 기능은 모듈화한 후
모듈 저장소라는 공간에 공유한다
그리고 이러한 곳에 있는 모듈을 그 때 그 때 다운 받아서 사용한다
이 때 사용하는 게 npm install (모듈명)
Node.js : Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임
운영 환경에서는 안정화 버전인 LTS 버전 권장
npm install {모듈} 시 dependencies 속성에 모듈이 자동으로 추가 된다
라이브러리를 검색해서 다운 받을 수 있는 사이트 : npmjs.com
require를 이용하면 default로 node_modules 디렉토리를 참고한다
package.json : 프로젝트에 대한 정보를 갖고 있는 파일이다
package.json 내 scripts : 자주 사용
echo 터미널에 문자를 출력하는 명령어
프로젝트를 실행할 때나 빌드할 때 자주 사용
start 명령어는 특수해서 npm run start / npm start 둘 다 사용 가능 :)
dependencies : 프로젝트가 사용하는 모듈을 기술 devDependencies : 개발할 때만 의존하는 모듈을 관리
ex. ABCDE 모듈이 있다고 할 때 E 모듈은 개발할 때만 쓰고 운용할 때는 필요가 없다면? ABCD만 배포하면 된다 그런 경우 E는 devDependencies 에 기술하고 ABCD를 dependencies에 기술합니다
npm install --save-dev <모듈명>
package-lock.json 프로젝트에 설치된 모듈들의 의존성 트리를 기록하고 있다
npm 명령어들 npm init npm init -y
npm i 패키지명@버전
nodemon 라이브러리 node 명령어랑 같다
javascript 을 node 환경에서 실행시켜주는 라이브러리
차이점은 nodemon은 javascript에 변경사항이 생기면
자동으로 감지해서 재실행한다 (React / Live Server 처럼 !)
명령어 : ./node_modules/.bin/nodemon index.js
javascript가 바뀌면 자동으로 감지해서 실행한다
자주 사용하는 CLI는 전역환경에 설치하고는 하기 때문에
(cmd 관리자 권한) npm install -g nodemon
nodemon -v : 버전 확인 명령어, 설치가 잘 되었나 확인
로컬 환경에서 쉽게 접근하는 법
package.json의 scripts 속성에서
“start” : “nodemon index.js” 이후
npm run start 혹은 npm start로 가능
git에 올릴 때 node_modules는 올릴 필요가 없다
node_modules가 없을 때 npm install만 하면 알아서 다 다운로드가 된다
버전이 꼬일 경우 package.json만 남기고 npm install 해도 된다
devDependencies에 있는 모듈을 제외한 dependencies에 있는 모듈만 설치하려면 ?
npm install --production
버전 업데이트 npm update <모듈명>
version update 보다는 uninstall 이후 install 하는 것을 권장
npm ls 모듈들 확인 가능
npm ls –depth=2
npm init // 초기화
npm install // 설치
npm uninstall // 삭제
npm run <script-name> // script 실행
이 정도만 알고
나머지는 필요할 때 구글링 하면서 자연스럽게 익히는 게 좋다
세 자리수 버전 표기 : 시맨틱 버저닝 (Semantic Versioning)
[MAJOR, MINOR, PATCH]
Webpack 기초
Webpack을 알려면 모듈을 알아야 한다
웹을 만들면 웹 서버에 배포
브라우저에서 계속해서 서버에 요청하면?
네트워크 비용 증가(과부하), 페이지 로딩이 길어짐
사용자 편의성 측면에서도 좋지 않다
모듈로 개발을 하고 페이지 로딩도 줄이는 방법?
브라우저에서 서버로 요청하는 http 개수를 줄이는 것
모듈을 하나의 파일로 묶어서 배포 -> 번들링 (모듈 번들러가 수행)
사용자 경험 향상과도 연결된다
현재 frontend에서 가장 인기 있는 모듈러 : webpack
html javascript 심지어 이미지도 번들링이 가능하다
npm install --save-dev webpack webpack-cli
npx webpack --entry .src/index.js --output-path ./dist
entry : webpack의 진입점, 어떤 파일을 기준으로 번들링할지
default : 코드 압축
npx webpack --entry .src/index.js --output-path ./dist --mode development
코드 압축 없이 번들링
<script type="module" src="./dist/main.js"</script>
번들 결과 : request 파일 8개 → 3개
300ms → 184ms
웹팩 docs
웹팩은 실행할 때 자동으로 webpack.config.js 파일을 참조
entry : 진입점 설정
output : 번들링 파일이 위치할 파일 path와 파일 명
mode:’production’ #’development’
배포할 때는 dist 디렉토리에 번들링을 한 다음에 dist 폴더만 배포한다
그러므로 index.html도 dist 폴더로 이동
Leave a comment