dlgustn555/prototypes

해당 레파지토리에 스터디/프로토타입 용으로 사용합니다.

prototypes's Issues

[RxJS] 캐로셀 UI 구현해 보기 with parcel

0. parcel-bundler 설치

npm install -g parcel-bundler

1. parcel-ex 작업 디렉토리 생성 및 scaffolding
   

2. parcel 내장 개발용 서버 구동

• 웹팩은 webpack-dev-server를 설치 해야함.
• typescript loader를 설정 해야함.

parcel index.html -p 9001

3. mustache.js rxjs 라이브러리추가

npm install mustache rxjs
npm install -D @types/mustache

[예제] HTML5의 template 태그 사용

https://www.html5rocks.com/ko/tutorials/webcomponents/template/

1. prototypes (master)

2. parcel-ex 디렉토리에 작업

[STUDY] 리액트를 다루는 기술

prototype (master)

react-study 디렉토리

PORT : 3000

[Study] 동형 자바스크립트 웹 개발

책 : 동형자바스크립트 웹 개발

• 폴더명 : isomorphic-javascript
• 브랜치 : master
• Server PORT : 9002
• 커밋 방법

1장. 동형 웹앱 시작하기 - 서브 타이틀
https://github.com/dlgustn555/prototypes/issues/5

• 책 예제 깃허브
  https://github.com/PacktPublishing/Isomorphic-JavaScript-Web-Development

[RxJS] 캐러셀UI 구현해보기 with webpack

Chapter 08 캐러셀UI 만들기

작업 브랜치 : fb/wbpack-ex-rxjs

webpack 개발 예제

1. webpack-ex 작업 디렉토리 생성 및 scaffolding

• package.json 생성 : npm init -y
  

2. webpack 설정 파일 생성 및 entry, output 설정
3. webpack, webpack-cli 라이브러리 추가

npm install -D webpack webpack-cli

4. webpack-dev-server 추가 및 셋팅

npm install -D webpack-dev-server

5. mustace.js rxjs 라이브러리 추가

npm install mustache rxjs

6. webpack에 css 로더 추가 및 css 별도 파일로 생성

npm install -D style-loader css-loader
npm install -D extract-text-webpack-plugin@next

7. index.html 파일을 자동 생성 (빌드된 파일을 자동으로 include 해줌)

npm install -D html-webpack-plugin

8. babel 설정

npm install -D @babel/cli @babel/core @babel/preset-env babel-loader

9. babel-polyfill추가

npm install @babel/polyfill

10. sass 로더추가

npm install -D sass-loader node-sass

11. file 로더 추가

npm install -D file-loader