빌드 도구 - 모듈 번들러, Parcel

Parcel Parcel은 2017년에 나온 모듈 번들러로, dependancy가 있는 JavaScript 파일들을 최적화하고 압축하여 하나 혹은 여러 개의 static 파일로 빌드해준다. Parcel의 장점 캐싱을 사용하여 (두 번째 빌드부터) 속도가 매우 빠르다. 설정이 필요없는 zero-configuration이다(금방 사용할 수 있기에 러닝 커브가 낮다). 코드 분할(Code Splitting)을 지원한다. HOT 모듈 교체(Hot Module Replacement, HMR): 변경된 코드를 감지해서 브라우저에 최신 코드를 반영하여 자동으로 모듈을 교체한다. 모듈 안의 설정 파일(.babelrc, postcssrc 등)을 발견하면 이를 자동으로 변환하여 실행한다. 설치하기 # npm npm ins..

빌드 도구 - 모듈 번들러, Rollup

Rollup.js Rollup은 webpack이나 parcel과 같이, 크고 복잡한 코드의 모듈(파일)을 라이브러리나 애플리케이션으로 만들어주는 ES6 환경 기반의 모듈 번들러다. webpack에 비해 속도가 빠르고 번들링된 결과물이 가볍다. ES6 모듈 형태로 빌드 결과물을 출력할 수 있으므로, 이를 라이브러리나 패키지에 활용할 수 있다. 하지만 webpack이 제공하는 개발 서버가 다른 번들러에 비해 뛰어나고, 성능 또한 안정적이다. 거대한 애플리케이션을 만들 것이라면 webpack을 추천하지만, 남들이 사용할 라이브러리를 구축할 것이라면 Rollup이 좋다고 한다. 사용 방법 Rollup은 JavaScript API 또는 CLI로 이용할 수 있다. JavaScript API로 사용하기 $ npm i..

빌드 도구 - 모듈 번들러, webpack

모듈 번들러 모듈 번들러란, 웹 애플리케이션을 동작시키기 위한 서로 연관 관계가 있는 웹 구성 자원(HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이들의 의존성을 묶고 조합해서 합쳐진 하나의 결과물(static한 자원)을 만드는 도구다. 대표적인 번들러로는 webpack, RequireJS, Browserify, Rollup, Parcel 등이 있다. 자바스크립트는 오랫동안 모듈 시스템이 없다가 2009년 Node.js가 CommonJS라는 모듈 시스템을 사용하면서 모듈화 된 코딩이 보편화되었다. 그리고 ECMAScript 2015에서 자바스크립트 언어 사양에 신규 모듈 시스템인 ES Module이 포함되어, 이제는 모듈화가 일반적이게 되었다. // ES Modul..

빌드 도구 - 태스크 러너, npm scripts

Task Runner 프로그램 개발에 수반되는 반복 작업들을 스크립트로 작성하여 한 번에 실행되도록 하여 빌드 과정의 여러 부분을 자동화 해주는 도구다. npm scripts 등이 있다. npm scripts 태스크 러너로 npm scripts를 사용했을 때의 장점은 npm 툴을 다룰 수 있고, 다른 태스크 러너의 환경 설정이나 규칙에 상관 없이 package.json을 통해 중앙화 된 패키지 관리와 번들링 수행이 가능하다는 점이다. 반복적인 특정 작업을 자동화하여, 그 작업이 필요할 때 미리 정의해둔 키워드로 작업을 실행하는 것이다. 사용 방법 package.json에서 scripts 안에 자동화 할 내용을 작성하면 된다. {... "scripts": { "start": "node ./dist/inde..

CSS 후처리기 - PostCSS

PostCSS PostCSS는 CSS 전처리기 중 하나로 알려져 있는데, 정확히는 동작 순서에 따라 CSS 후처리기(CSS Post-processor)가 맞다. 따라서, 한 프로젝트에 SCSS 같은 전처리기와 함께 사용할 수 있다. Sass, LESS, Stylus 등의 CSS 전처리기는 CSS가 생성되기 전에 각자 고유의 파일 확장자를 가진다(*.scss, *.less, *.styl). 그 후, 생성된 파일이 컴파일을 통해 CSS로 변환된 후에 PostCSS에 의해 최종 변환된다. PostCSS의 장점 모듈식 사용: 필요한 플러그인만 찾아서 사용하면 되기 때문에 속도가 빠르다. (https://www.postcss.parts/) JavaScript 기반: 필요한 플러그인을 직접 개발할 수 있다. CSS..

CSS 전처리기 - Sass (SCSS)

CSS 전처리기란? 웹 페이지가 점점 커지면 정의하는 스타일도 많아지게 되고, 선택자를 불필요하게 과다 사용하게 되는 등 코드가 지저분해질 수 있다. 유지보수 측면에서도 까다로워진다. 이 때문에 나타난 것이 CSS 전처리기다. CSS 전처리기는 전처리기 자신만의 특별한 syntax를 갖고 CSS를 생성하도록 하는 프로그램이다. 주요 CSS 전처리기로 다음의 프레임워크들이 있다. Sass LESS Stylus PostCSS 이 프레임워크들은 각각 비슷하면서도 다른 구문과 기능들을 포함하고 있따. 연산, 중첩, 상속과 같은 기능 들을 사용할 수 있어 CSS 구조의 가독성을 높이고, 유지보수가 편리해지도록 한다. Sass (Syntatically Awesome Style Sheets) Sass는 2006년에 ..

CSS 구조 - BEM 방법론

CSS 주요 방법론 3가지 주요 CSS 방법론에는 아래와 같은 3가지가 있다. 방법론은 절대적인 규칙이 아니기 때문에 작성자 또는 프로젝트에 따라 컨벤션을 정해서 사용하면 된다. 프론트엔드 로드맵에서는 BEM을 제외한 나머지 방법론은 추천하지 않는다고 했으니, 나는 우선 BEM 방법론을 따르려고 한다. BEM (Block Element Modifier) OOCSS (Object Oriented CSS) SMACSS (Scalable and Modular Architecture for CSS) BEM이란? BEM은 Block, Element, Modifier를 모아 앞글자만 따서 만든 이름의 CSS 방법론 중 하나로, 일종의 네이밍 컨벤션이라고 볼 수 있다. HTML 요소들을 각각 Block, Elemen..

패키지 매니저 - npm vs. yarn

패키지 매니저(Package Manager, 패키지 관리자) 패키지 관리자(package manager, 패키지 매니저), 패키지 관리 시스템(package management system)은 컴퓨터의 운영 체제를 위해 일정한 방식으로 컴퓨터 프로그램의 설치, 업그레이드, 구성, 제거 과정을 자동화하는 소프트웨어 도구들의 모임이다. 패키지 관리자는 아카이브 파일로 된 소프트웨어 배포판과 데이터인 패키지(package)를 다룬다. 패키지에는 소프트웨어의 이름, 목적에 관한 설명, 버전 번호, 벤더, 체크섬, 소프트웨어의 정상 수행에 필요한 의존성 목록과 같은 메타데이터가 포함된다. 설치 시에 메타데이터는 로컬 패키지 데이터베이스에 저장된다. 패키지 관리자들은 일반적으로 소프트웨어 불일치, 존재하지 않은 필..

웹 보안 지식 - OWASP 보안 취약점 Top 10 (2021년 버전)

OWASP (The Open Web Application Security Project) OWASP는 오픈 소스 웹 어플리케이션 보안 프로젝트로 소프트웨어 보안을 개선하기 위해 만들어진 미국의 비영리 재단이다. 2001년에 시작된 이 비영리 자선 단체는 수많은 보안 취약점 중에서 빈도가 많고 리스크가 가장 큰 10가지를 2004년부터 주기적으로 발표하고 있다. 가장 최근에 발표된 2021년 버전으로 10가지를 정리해보았다. OWASP이 선정한 보안 취약점 10 A01. Broken Access Control (접근 권한 취약점) 엑세스 제어는 사용자가 권한을 벗어나 행동할 수 없도록 정책을 시행한다. 엑세스 제어가 취약하면 사용자는 주어진 권한을 벗어나 모든 데이터를 무단으로 열람, 수정 또는 삭제할 수..

웹 보안 지식 - CORS (Cross Origin Resource Sharing)

CORS (Cross Origin Resource Sharing, 교차 출처 리소스 공유) CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제를 말한다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다. 예시 https://domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우. 보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다. 예를 들어, XMLHttpRequest와 F..