GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → jeonghwan-kim → Lecture Frontend Dev Env

jeonghwan-kim / Lecture Frontend Dev Env

"[인프런] 프론트엔드 개발환경의 이해와 실습" 강의 실습 자료입니다.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

webpackbabeleslintprettier

Projects that are alternatives of or similar to Lecture Frontend Dev Env

Serverless Typescript Starter
🗄🙅‍♀️ Deploy your next serverless JavaScript function in seconds
Stars: ✭ 653 (+504.63%)
Mutual labels:  webpack, eslint, prettier, babel
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-70.37%)
Mutual labels:  webpack, eslint, prettier, babel
React Ssr Setup
React Starter Project with Webpack 4, Babel 7, TypeScript, CSS Modules, Server Side Rendering, i18n and some more niceties
Stars: ✭ 678 (+527.78%)
Mutual labels:  webpack, eslint, prettier, babel
Starter React Flux
Generate your React PWA project with TypeScript or JavaScript
Stars: ✭ 65 (-39.81%)
Mutual labels:  webpack, eslint, prettier, babel
Vue Web Extension
🛠️ A Vue CLI 3+ preset (previously a Vue CLI 2 boilerplate) for quickly starting a web extension with Vue, Babel, ESLint and more!
Stars: ✭ 1,147 (+962.04%)
Mutual labels:  webpack, eslint, prettier, babel
Mostly
They mostly come at night; mostly.
Stars: ✭ 78 (-27.78%)
Mutual labels:  webpack, eslint, prettier, babel
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (+112.04%)
Mutual labels:  webpack, eslint, prettier, babel
Budgeting
Budgeting - React + Redux + Webpack (tree shaking) Sample App
Stars: ✭ 971 (+799.07%)
Mutual labels:  webpack, eslint, prettier, babel
React Boilerplate
This project is deprecated. Please use CRA instead.
Stars: ✭ 88 (-18.52%)
Mutual labels:  webpack, prettier, babel
Front End Stack
Starter kit for building single-page app using React, Redux, RxJS, Reselect, Material UI, Immer, Prettier and Webpack.
Stars: ✭ 11 (-89.81%)
Mutual labels:  webpack, eslint, prettier
React Redux Saucepan
A minimal and universal react redux starter project. With hot reloading, linting and server-side rendering
Stars: ✭ 86 (-20.37%)
Mutual labels:  eslint, prettier, babel
React Isomorphic Boilerplate
🌟 An universal React isomorphic boilerplate for building server-side render web app.
Stars: ✭ 653 (+504.63%)
Mutual labels:  webpack, eslint, babel
That React App You Want
That react app you always wanted: [email protected], [email protected], postCSS, purifycss, dll's and code splitting examples, bregh. Highly opinionated but you better like it.
Stars: ✭ 27 (-75%)
Mutual labels:  webpack, prettier, babel
Skyvow.github.io
🐶 My resume - 个人简历
Stars: ✭ 27 (-75%)
Mutual labels:  webpack, eslint, babel
Simple React Calendar
A simple react based calendar component to be used for selecting dates and date ranges
Stars: ✭ 97 (-10.19%)
Mutual labels:  webpack, eslint, prettier
React Ssr Starter
All have been introduced React environment
Stars: ✭ 20 (-81.48%)
Mutual labels:  webpack, eslint, prettier
React Typescript Web Extension Starter
🖥 A Web Extension starter kit built with React, TypeScript, SCSS, Storybook, Jest, EsLint, Prettier, Webpack and Bootstrap. Supports Google Chrome + Mozilla Firefox + Brave Browser 🔥
Stars: ✭ 510 (+372.22%)
Mutual labels:  webpack, eslint, prettier
Astexplorer.app
https://astexplorer.net with ES Modules support and Hot Reloading
Stars: ✭ 65 (-39.81%)
Mutual labels:  webpack, eslint, babel
Apollo Upload Examples
A full stack demo of file uploads via GraphQL mutations using Apollo Server and apollo-upload-client.
Stars: ✭ 358 (+231.48%)
Mutual labels:  eslint, prettier, babel
Sku
Front-end development toolkit
Stars: ✭ 403 (+273.15%)
Mutual labels:  webpack, eslint, babel
View All Similar Projects ➔

프론트엔드 개발 환경의 이해

"프론트엔드 개발 환경의 이해와 실습" 강의 자료입니다.

내용

프론트엔드 개발 환경을 구성하는데 필요한 기술을 이해하고 실습을 통해 익힙니다. 프로젝트 전반에 사용되는 노드js, 모듈로 분리하여 코딩할 수 있게 도와주는 웹팩, 최신 자바스크립트 문법을 사용할 때 필요한 바벨이 개발 환경을 구성하는데 필요한 도구들 입니다. 뿐만 아니라 코딩 컨벤션을 유지할 수 있는 린트 도구는 개발자 간의 협업을 도와주는 요긴한 툴입니다.

수업에서 다루는 도구의 버전은 다음과 같습니다. 웬만하면 이 버전과 같은 환경으로 만들어 주세요.

  • Node.js 13과 NPM 6 (이 이슈로 인해 Node.js v13.2 이상을 설치해야 합니다.)
  • 웹팩 4
  • 바벨 7

어플리케이션 개발에 사용되는 라이브러리나 프레임웍, 언어 문법은 다루지 않습니다.

폴더 구성

강의 실습을 위한 폴더는 다음과 같이 구성되어 있습니다.

  • src: 검색 어플리케이션 프론트엔드 소스
  • server: 검색 어플리케이션 API 서버 코드
  • resource: 강의 진행에 필요한 자료. 이미지나 이론 실습용 코드가 있습니다.
  • react-sample: 마지막에 순서인 리액트 개발환경 구성을 위한 실습 코드입니다.

브랜치

강의 중 실습은 아래 브랜치 중 하나로 이동하여 진행합니다. 브랜치를 이용하면 각 실습에서 풀어야하는 문제가 TODO 주석으로 기록되어 있습니다.

  • 1-webpack/1-entry: 웹팩 엔트리/아웃풋 실습
  • 1-webpack/2-loader: 웹팩 로더 실습
  • 1-webpack/3-plugin: 웹팩 플러그인 실습
  • 2-babel/1-babel: 바벨 실습
  • 2-babel/2-sass: 사스 실습
  • 3-lint/1-eslint: 린트 실습
  • 3-lint/2-prettier: 프리티어 실습
  • 4-webpack/1-dev-server: 웹팩 개발 서버 실습
  • 4-webpack/2-hot: 웹팩 핫로딩 실습
  • 4-webpack/3-optimazation: 웹팩 최적화 실습
  • 5-sample/1-react: 리액트 샘플 실습
  • master: 최종 결과물
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].