📖 오늘 학습 뽀인트!
- webpack
- 라이브러리 설치
- 접근성
1. webpack
🕵️♀️ 웹팩이란?
모던 JavaScript 애플리케이션을 위한 모듈 번들러이다. 웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이들을 조합해서 하나의 결과물로 만드는 도구이다.
✍ 웹팩 사용
node.js 환경에서npm install -D webpack webpack-cli를 입력하여 webpack을 사용할 수 있다.
✍ entry, output, mode, loader, plugin
entry : 모듈의 시작점을 설정
output : 웹팩으로 생성되는 파일의 위치를 설정
mode : 번들링 모드를 설정. development 모드와 production 모드가 있으며 production 모드의 경우 코드를 최적화하여 용량을 줄여준다.
loader : 모든 자원을 모듈로 불러와 사용.
plugin : 최종적으로 번들된 결과물을 가공하고자 할때 사용.
- BannerPlugin(번들링된 파일의 최상단에 주석을 달아주는 플러그인)
빌드 날짜, 빌드 정보 등을 제공할 때 사용.- DefinePlugin(코드에 직접적으로 작성해서는 안 되는 전역 상수 생성 플러그인)
API 키, 패스워드 등을 제공할 때 사용.- HtmlWebpackPlugin(HTML 파일을 번들링 단계에서 컨트롤 할 수 있도록 도와주는 플러그인)
html을 동적으로 관리하고자 할때 사용.- CleanWebpackPlugin(빌드 이전에 남아있는 결과물을 제거하는 플러그인)
더 이상 사용하지 않을 리소스를 삭제할 때 사용.
2. 라이브러리 설치
라이브러리 설치에는 크게 3가지 방법이 있다.
1. CDN : html script 태그에 넣어 사용하며, 간편하지만 파일을 제공하는 서버에 장애가 있을시 작동하지 않을 수 있다.
- 직접 설치 : 작동시키는 모든 파일이 존재하기 때문에 작동이 보장된다. 다만, 버전관리를 수동으로 해야한다.
- npm으로 설치 : node.js에서 환경에서
npm i react-router-dom과 같이 설치하여 사용한다. 직접 설치와 같이 작동이 보장되고 버전관리 또한 간편하다.(package.json 에서 version 숫자 변경 후 재설치)
3. 접근성
🕵️♀️ 접근성이란?
누구나 편리하게 이용할 수 있는 정도를 접근성이라고 한다. 웹 접근성은 모든 사용자가 웹에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 정도이다.
❓ 왜 우리는 접근성에 대해 관심을 가져야 할까?
웹에 힘은 누구나 접근할 수 있다는 것에 있다. 즉, 웹 접근성에 관심을 가지지 않는다면 웹에 힘을 잃는 것이다.
💬 장애를 가지신 분들의 웹 환경을 체험.
시각, 청각, 지체, 음성, 인지, 언어, 학습, 신경 등등 다양한 장애가 존재하고 사용자가 이용하는 브라우저도 다 다르기 때문에 이 모두를 생각하며 개발된 웹 사이트가 과연 있을까? 라는 생각이 들었다.
위와 같은 이유들로 모든 사용자에게 웹 정보를 제공하는 것은 매우 어려운 부분이지만 꼭 필요한 부분이라고 한 번 더 생각하게 되었다.
널리 사이트
✍ WCAG
웹 접근성 지침이다. 인식, 조작, 이해, 견고에 대한 4가지 지침이 있고 적합성 요구 사항에 따라 A, AA, AAA 3가지 레벨로 규정한다.
