👨‍💻
프론트엔드 기술 블로그
  • 프론트엔드 기술 저장소
  • React
    • React Hook
      • useRef
      • useReducer
      • useCallback
      • useMemo
      • useState
      • useEffect
      • useContext
      • Custom Hook
  • Javascript
    • 자바스크립트 기본
      • 데이터타입
      • 배열메소드
      • 타입 및 객체 체크
      • this
        • bind, call, apply
      • 프로토타입
      • 클로저
      • 스코프
      • 함수
      • 호이스팅
    • ECMAScript 6
      • let, const
      • 화살표 함수
      • 구조분해할당
      • Promise
      • 템플릿 문자열 표현식
      • 이터레이션
      • 클래스 (Class)
      • 심볼 (Symbol)
      • 제너레이터
  • 객체지향설계
    • 객체 지향 설계 원칙
      • 단일 책임 원칙
      • 개방 폐쇄 원칙
      • 리스코프 치환 원칙
      • 인터페이스 분리 원칙
      • 의존 역전 원칙
  • 브라우저와 자바스크립트
    • Document Object Model
      • DOM API
      • 이벤트 (Event)
  • Node.js
    • 번들러
      • webpack 설정
    • node.js 버전 관리
  • HTTP
    • HTTP 기본
      • 1. 웹과 네트워크 기본
        • 1.1 웹은 HTTP로 나타낸다.
        • 1.2 HTTP 탄생과 성장
        • 1.3 네트워크 기본 TCP/IP
        • 1.4 HTTP와 관계가 깊은 프로토콜 IP/TCP/DNS
        • 1.5 이름 해결 담당 DNS
        • 1.6 각각과 HTTP와의 관계
        • 1.7 URI와 URL
      • 2. 프로토콜 HTTP
        • 2.1 HTTP는 클라이언트와 서버간에 통신을 한다.
        • 2.2 리퀘스트와 리스폰스를 교환하여 성립
        • 2.3 상태를 유지하지 않는 프로토콜 HTTP
        • 2.4 리퀘스트 URI로 리소스 식별
        • 2.5 HTTP 메소드
        • 2.6 메소드 사용
        • 2.7 지속연결로 접속량 절약
        • 2.8 쿠키를 사용한 상태관리
      • 3. HTTP 정보는 HTTP 메시지에 있다.
        • 3.1 HTTP 메시지
        • 3.2 리퀘스트 메시지와 리스폰스 메시지 구조
        • 3.3 인코딩으로 전송 효율을 높이다.
        • 3.4 여러 데이터를 보내는 멀티파트
        • 3.5 일부분만 받는 레인지 리퀘스트
        • 3.6 최적의 콘텐츠를 돌려주는 콘텐츠 네고시에이션
      • 4. 결과를 전달하는 HTTP 상태코드
        • 4.1 상태코드는 서버로부터 리퀘스트 결과를 전달한다.
        • 4.2 2xx 성공
        • 4.3. 3xx 리다이렉트
        • 4.4 4xx 클라이언트 에러
        • 4.5 5xx 서버 에러
      • 5. HTTP와 연계하는 웹 서버
        • 5.1 1대로 멀티 도메인을 가능하게 하는 가상 호스트
        • 5.2 통신을 중계하는 프로그램 : 프록시, 게이트웨이, 터널
      • 7. 웹을 안전하게 HTTPS
        • 7.1 HTTP의 약점
        • 7.2 HTTP+암호화+인증+완전성보호 = HTTPS
  • IDE
    • Webstorm
      • 웹스톰 단축키
      • 웹스톰 소스코드 특정폴더 검색 제외
  • GIT
    • Git 기초 명령어
Powered by GitBook
On this page

Was this helpful?

  1. Node.js

번들러

Previous이벤트 (Event)Nextwebpack 설정

Last updated 2 years ago

Was this helpful?

자바스크립트 파일을 기능 단위로 모듈화하고 하나로 묶어 관리할 수 있는 방법이다. 번들러를 사용하면 소스코드를 모듈별로 작성가능하고 모듈, 라이브러리의 의존성을 관리 할 수 있다. 번들러 중 webpack 을 이용하여 번들링 할 수 있다.

자바스크립트 코드는 파일별로 작성하고 사용할 수 있으나 <script> 태그로 각 파일을 가져오면 결국 하나의 파일처럼 작동되어 가져오는 순서 및 의존성관리에 신경을 써야한다. 이런 문제를 해결하기 위해 모듈단위 개발 방식이 등장하였으나 브라우저에서는 스코프를 공유하기 때문에 직접 신경을 써야한다. 그러다 번들러가 등장하면서 이런 문제를 해결하고 있다.

번들러는 의존성있는 모듈코드를 하나 또는 여러개로 만들어주는 도구이다. 크롬에서는 ES6 Module을 지원하나 다른곳에선 바로 실행이 불가능하므로 코드를 분석하고 JS모듈 스펙에따라 새로운 코드로 가공이 필요하다. 번들러가 여러 종류가 있지만 압도적으로 webpack이 가장 많이 쓰인다.

webpack 설정