일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- REST_API
- 생활코딩
- 운영체제
- vercel
- 자료구조
- 스택
- 백준
- 자바스크립트
- superstarjypnation
- mysemester
- Next.js
- 카카오
- 코드스테이츠
- useState
- javascript
- redux
- UX
- 30daysdowoonchallenge
- React
- 프로토타입
- level1
- 해시테이블
- Til
- web
- html
- 프로그래머스
- 큐
- CSS
- 회고
- UI
- Today
- Total
목록Webpack (2)
데굴데굴
⚙️ 오늘 배운 주제 webpack으로 리액트 개발 환경 구축하고 빌드하기 🐹 오늘의 기분 어제는 html, css, javascript로만 구성된 프로젝트를 webpack으로 빌드해보는 연습을 했다. 오늘은 이 webpack을 리액트에 사용해보는 연습을 했다. 이번에도 전에 만났던 페어분과 매칭이 되어서 편하게 할 수 있었다. 여러 오류를 만난 끝에 빌드와 깃헙페이지 배포까지 했다. 시간이 약간 남아서 오랜만에 머리도 좀 식힐 겸(?) 섹션 3에서 만들어뒀던 투두리스트 프로젝트를 손대보았다. 버튼 클릭 말고 input 필드에서 엔터를 눌렀을 때에도 태스크가 추가되도록 하고 싶었는데, 이상하게 한글 입력 후 바로 엔터만 누르면 🗝 키워드 bable, react-dom, react 🗣 스스로에게 설명 TI..
번들링이란? 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하는 작업 빌드는 개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업, 모듈 간의 의존성 관계를 파악해 그룹화하는 작업이다. 의존성 관계란 파일이 서로 엮여있는지를 말하는 것이다. 보통 다른 파일에서도 그 파일을 쓰기 위해 module.exports를 쓰고 파일을 불러올 때에는 require을 쓴다. (commonJS) => ES6 문법에서는 import, export를 쓴다. 웹팩 webpack 프론트엔드 애플리케이션 배포를 위해 사용하는 번들러 최근 5년간 사용량 추세를 보면 압도적으로 높은 점유율을 차지하고 있다. webpack webpack is a module bundler. ..