Yong Study

코드번들링

• 특정확장자마다 정해진 작업을 하도록 정해진것
• 파일을 묶어주는것 (기본적으로 하나, 분리도 가능)
• 주로 자바스크립트를 위함이지만, HTML, CSS, 이미지 등도 변환
• 
• Webpack, Parcel, browserify등...
• 파일 관리 도구

Babel

• 자바스크립트 컴파일러 (변환도구)
• 최신버전 자바스크립트 문법은 브라우저가 이해 못함
• Babel이 브라우저가 이해할 수 있는 문법으로 변환

JSX

• JavaScript ( JS ) + XML ( X)
• HTML과 유사 구문
• 자바스크립트 확장
• 자바스크립트 내부에 마크업 코드 작성
• Babal이 JSX로더 이용해서 JSX 동작
• 컴파일 최적화
• 가독성 좋음, 시각적 도움

React

• 유저 인터페이스 만드는데 사용

• 라이브러리, 오직 View만!

• 데이터가 변경되면 변이 하는것이 아니라!

• 기존 뷰 빠이

• 새로운 뷰 생성( 랜더링 )

  • but 브라우저는 DOM기반이어서 계속 생성하면 성능적 문제가 발생, 리소스 많이 먹음...
  • VirtualDOM으로 해결하자!
  • 정말 변화가 필요한곳만!
  • RealDom과 VirtualDOM 변화 부분 비교해서 바뀐 부분 Patch!
    • (약간, git 협업할때랑 비슷하네..?)

• 엄밀히 말하면 뷰를 업데이트하는게 아니라 Reconciliation(조화)과정을 거치는 것

  DOM이란? (Document Object Model)
  문서 객체 모델!
  내가 작성한 코드가 브라우저에 파싱되면 DOM
  HTML , XML문서의 프로그래밍API
  문서 구조표현
  
  참조
  https://shldhee.github.io/2018/04/08/DOM/
  https://css-tricks.com/dom/
  
  Virtual DOM참조 
  https://youtu.be/muc2ZF0QIO4

프론트엔드 라이브러리?

• 웹사이트 만들기 위해서는 필수적인것은 아님
• 정적페이지라면 자바스크립트 없이 HTML, CSS도 가능
• 동적으로는 자바스크립트 사용

but, 요즘은 웹앱!

• 동적으로 표현필요

• 프로젝트 규모 커지고

• 다양한 인터페이스적용한다면?! 없이 프레임워크 없이는 힘들어진다.

프론트엔드 프레임워크/라이브러리 3대장

• Angular
  • 다양한 기능 내장
  • 다국어지원
  • 이미 많이 사용, 사용률 높음
  • 타입스크립트 사용 거의... 강제!

• Vue
  • 입문 쉽고
  • 모듈 번들러 없이, CDN으로 불러옴
  • 공식 라우터, 상태관리 라이브러리 존재
  • 리액트 장점 앵귤러 장점 믹싱?!

번들러 : 지정한 단위 파일들을 하나로 만들어서 요청대 대한 응답으로 전달할 수 있는 환경 만들어주는 것
CDN (Content Delivery Network) : 정적컨텐츠 캐싱이 목적

• React
  • 컴포넌트에 집중
  • 프레임워크가 아닌 라이브러리
  • 공식 라우터, 상태관리 라이브러리 없이 서드파티

잠깐!
프레임워크 : 필수코드, 알고리즘, DB연동 같은 기능이 어느정도 구성되어있는 뼈대
            인터페이스의 집합

라이브러리 : 특정 기능에 대한 API(도구 / 함수) 모은 집합

그럼 이 둘의 차이는?
라이브러리는 애플리케이션의 흐름을 직접 제어
프레임워크는 애플리케이션 코드가 프레임워크에 의해 사용되는 것