Bundler

SCSS, React, TypeScript들을 외부의 패키지의 도움을 받아서 웹이 이해할 수 있는 형태인 HTML, CSS, JS로 변환 해주는 것을 의미합니다.SCSS, React, TypeScript 등의 여러 라이브러리나 프레임워크를 사용하여 코딩을 진행하고 프로

parcel-bundler에 대해 잘 학습할 수 있도록 하기 위해 실제로 프로젝트를 생성해줍니다.1-1.패키지 설치npm을 통해 package.json 파일을 생성하고 parcel-bundler를 설치해줍니다.1-2. package-json 파일 수정package-js

본인이 프로젝트에 연결되었으면 하는 파일을 개발 서버를 열거나 제품화 시킬 때 직접 웹페이지에 연결되는 dist 폴더로 자동으로 넣어줄 수 있는 패키지를 의미한다.1-1.favicon.ico프로젝트 내에 favicon.ico 파일을 준비해줍니다.저는 아래 파일을 이용하

웹페이지 내에서 개발자 도구로 확인할 때 display: webkit-box등과 같이 코딩을 진행한 적이 없는 내용이 포함되어 있는 것을 볼 수 있습니다.이는 웹 표준이 권고안으로 나오기 전에 브라우저를 제작하는 벤더사인 예를 들면 크롬을 제작하는 구글, 인터넷 익스플

Babel은 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스 컴파일러입니다.JavaScript의 표준을 ECM

명령 줄 인터페이스 CLI, 커맨드 라인 인터페이스 또는 명령어 인터페이스는 가상 터미널 또는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다.명령어2-1.Serve개발용 서버를 시작하는 명령어입니다.2-2.Buildassets을 빌드합니다. 제품화

1-1.gitgnore 파일 생성.gitgnore파일에 무시할 파일이나 폴더명을 적어 줍니다.1-2.git 명령어 터미널에 입력(1)1-3.나의 Github에서 새로운 repository 생성나의 Github로 이동 후 Repositiries 영역에서 New 클릭하여

npm을 통해 package.json 파일을 생성하고 webpack 패키지 3가지를 설치해줍니다.webpack: bundler가 동작하기 위한 핵심적인 패키지webpack-cli: CLI, 커맨드 라인 인터페이스를 제공하는 패키지webpack-dev-server: de

webpack.config.js 파일에서 기본적인 구성 옵션을 추가할 수 있습니다.브라우저에서는 import, export와 같이 데이터 가져오기와 내보내기가 사용됩니다.webpack.config.js 파일은 브라우저가 아닌 node.js 환경에서 동작하므로 다른 명령

webpack 번들러를 통해 개발 서버 오픈을 하기 위해 필요한 패키지웹 브라우저의 표준 기능을 확장해 주는 프로그램을 의미합니다.터미널 명령어를 통해 플러그인을 설치해줍니다.webpack.config.js 파일로 이동하여 설치한 플러그인을 가져오도록 합니다.plugi

본인이 프로젝트에 연결되었으면 하는 파일을 개발 서버를 열거나 제품화 시킬 때 직접 웹페이지에 연결되는 dist 폴더로 자동으로 넣어줄 수 있는 패키지를 의미 합니다.프로젝트 내에 static 폴더를 생성해줍니다. 해당 폴더에 파비콘 파일을 넣어줍니다.static 폴더

프로젝트에 css 파일을 통해 스타일을 적용해보도록 하겠습니다.webpack은 두 가지 방법을 제시하고 있습니다.첫 번째는 static 폴더 내부에 css 폴더를 생성하여 연결하는 방법입니다.2-1.index.html2-2.main.css 파일 생성static 폴더 내

webpack 패키지 환경에서 scss 파일을 연결하는 방법에 대해 알아보겠습니다.2-1.루트 경로에 SCSS 폴더 생성 & main.scss 파일 생성루트 경로에 SCSS 폴더를 만들고 SCSS폴더안에 main.scss 파일을 생성 합니다.2-2.main.js imp

공급업체 접두사를 자동으로 진행해주는 패키지 autoprefixer를 webpack을 통해 설치하는 방법에 대해 알아봅니다.main.scss 파일 설정h1태그 속성에 display: flex; 설정을 해줍니다.개발 서버 실행Autoprefixer가 설정되어 있지 않는것

ES5 버전으로 변환시켜주는 컴파일러2-1.패키지 설치 & 확인babel/core를 포함한 3가지 패키지를 개발 의존성 모듈로 설치해줍니다.Package.json2-2..babelrc.js 파일 생성.babelrc.js 마침표로 시작하는 rc(runtime config

현재까지 Webpack을 통해 만든 프로젝트를 GitHub에 저장하여 Netlify로 배포까지 완성해보도록 하겠습니다.2-1..gitignore 파일 생성.gitignore 파일에 제외할 폴더를 명시하고 버전 관리를 시작합니다.2-2.버전 관리webpack-templa

parcel bundler 또는 webpack bundler를 통해 만든 템플릿을 터미널을 통해 손쉽게 다운로드하는 방법 입니다.새로운 VS code를 실행하고 빈 터미널에 명령어를 입력합니다.현재 경로 주변에 어떤 폴더와 파일이 있는지를 알려주는 명령어 입니다.cha