SlideShare une entreprise Scribd logo
1  sur  47
Télécharger pour lire hors ligne
:
`lint`, `build`, `run`
2020-11-17

( )
• :

1. ?

2. ?

• !
• React, Redux, styled-components 

• (👀)
• `lint`

• `build`

• `run`
`lint`
• eslint

• prettier

• lint-staged + husky
“ !”
`lint`: eslint
`lint`: eslint –
• rule
• 

• plugins
• , 

• extends
• (`.eslintrc`) 

• overrides
• 

• 👀
“
!”
`lint`: tslint
“eslint tslint
!”
`lint`: eslint – typescript-eslint
“
!”
`lint`: prettier
• “ !”

• 

•
`lint`: prettier –
• “Prettier has a few options because of
history. But we don’t want more of them.
(…) By far the biggest reason for adopting
Prettier is to stop all the on-going debates
over styles.”

• 

• 

“eslint prettier
!”
`lint`: eslint + prettier
“ ,
!”
“CI
!”
`lint`: lint-staged + husky
• husky
• “Git hooks made easy”
• lint-staged
• “Run linters against staged git
files and don't let  💩 slip into
your code base!”
`build`
• babel

• webpack

• Sentry
“
ECMAScript
!”
`build`: babel
• ES6 ➡ ES5 (6to5)

• babel 

•
ES5
`build`: babel –
• 

• plugin:


• preset: 

• 

• polyfill: 

/ 

• 👀 : Babel
“ / ,
!”
`build`: babel – preset-env
• “@babel/preset-env is a smart preset that
allows you to use the latest JavaScript
without needing to micromanage
which syntax transforms (and
optionally, browser polyfills) are
needed by your target environment(s).

• (browserslist)
“
!”
“ ,
!”
`build`: webpack
`build`: webpack –
• ( ) = 

• 

• babel-loader:

JS 

JS 

• ts-loader:

TS 

JS
`build`: webpack –
• 

• ts-loader + babel-loader:

TS 

JS 

JS 

• JS / JSON
`build`: webpack –
• test: 

• use: 

• :

• .css 

sass-loader, css-loader, style-
loader
`build`: webpack –
• 

• 

• fork-ts-checker-plugin: 

• terser-webpack-plugin: Minification 

• sentry-webpack-plugin: Sentry CLI 

• antd-dayjs-webpack-plugin: antd moment.js day.js
`build`: webpack –
• entry / output

• , 

• resolve
• require import 

• mode
• ( , )

• 👀 ( )
“
!”
`build`: Sentry
• 

• flex 3 

•
• express (requestHandler / errorHandler)

•
• axios error interceptor ( )

• React ErrorBoundary ( )
“
!”
`build`: Sentry (Release)
• Sentry Release API

• Sentry 

• SDK
• with-sourcemap, sentry-webpack-plugin

• Release API 

• CI/CD ( AWS CodeBuild)

•
`run`
• Next.js

• swr

• openapi-generator
“ React
!”
, , , …
`run`: Next.js
• “The React Framework for Production”

• SSR, , , 

• out-of-box 

• : Next.js 10 next/image
`run`: Next.js – SSR
• SSR , 

• , 

• ,

DOM React (hydration) 

• 

• , 

• /
`run`: Next.js –
• env

• 

• assetPrefix

• CDN 

• webpack

• Next.js 

• 👀
“
!”
, UX, …
`run`: swr
• = + 

• 



• stale-while-revalidate

• 

UX 

• (Redux )
`run`: swr
• key: 

• 

• fetcher: 

• data: fetcher ( await )

• error: 

• 👀 Redux SWR 1 2
“API Swagger
, !”
`run`: openapi-generator
• OpenAPI 

• ,
URL, / 



• 👀 OpenAPI Specification -
API : VS
What’s next?
• Rome Toolchain

• Webpack 5 (module federation)

• GraphQL, Relay
…
What’s next?
• Rome Toolchain

• Webpack 5 (module federation)

• GraphQL, Relay

Contenu connexe

Similaire à 플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`

OSDC 2013 | Introduction into Chef by Andy Hawkins
OSDC 2013 | Introduction into Chef by Andy HawkinsOSDC 2013 | Introduction into Chef by Andy Hawkins
OSDC 2013 | Introduction into Chef by Andy HawkinsNETWAYS
 
Ci system part i
Ci system part iCi system part i
Ci system part i振維 李
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSNaga Harish M
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & FeaturesDave Ross
 
BDD for Rails Legacy Code
BDD for Rails Legacy CodeBDD for Rails Legacy Code
BDD for Rails Legacy CodeWei Jen Lu
 
Cross platform Mobile development on Titanium
Cross platform Mobile development on TitaniumCross platform Mobile development on Titanium
Cross platform Mobile development on TitaniumYiguang Hu
 
Websockets: Pushing the web forward
Websockets: Pushing the web forwardWebsockets: Pushing the web forward
Websockets: Pushing the web forwardMark Roden
 
CodeStarではじめるRailsアプリのCodeDeploy化
CodeStarではじめるRailsアプリのCodeDeploy化CodeStarではじめるRailsアプリのCodeDeploy化
CodeStarではじめるRailsアプリのCodeDeploy化Keishi Hosoba
 
Padrino - the Godfather of Sinatra
Padrino - the Godfather of SinatraPadrino - the Godfather of Sinatra
Padrino - the Godfather of SinatraStoyan Zhekov
 
網頁程式設計
網頁程式設計網頁程式設計
網頁程式設計傳錡 蕭
 
Play Framework and Activator
Play Framework and ActivatorPlay Framework and Activator
Play Framework and ActivatorKevin Webber
 
Inside Of Mbga Open Platform
Inside Of Mbga Open PlatformInside Of Mbga Open Platform
Inside Of Mbga Open PlatformHideo Kimura
 
Web Development using Ruby on Rails
Web Development using Ruby on RailsWeb Development using Ruby on Rails
Web Development using Ruby on RailsAvi Kedar
 
Krzysztof kotowicz. something wicked this way comes
Krzysztof kotowicz. something wicked this way comesKrzysztof kotowicz. something wicked this way comes
Krzysztof kotowicz. something wicked this way comesYury Chemerkin
 
SCALE12X Build a Cloud Day: Chef: The Swiss Army Knife of Cloud Infrastructure
SCALE12X Build a Cloud Day: Chef: The Swiss Army Knife of Cloud InfrastructureSCALE12X Build a Cloud Day: Chef: The Swiss Army Knife of Cloud Infrastructure
SCALE12X Build a Cloud Day: Chef: The Swiss Army Knife of Cloud InfrastructureMatt Ray
 
Something wicked this way comes - CONFidence
Something wicked this way comes - CONFidenceSomething wicked this way comes - CONFidence
Something wicked this way comes - CONFidenceKrzysztof Kotowicz
 
Titanium Community Toolkit Showcase
Titanium Community Toolkit ShowcaseTitanium Community Toolkit Showcase
Titanium Community Toolkit ShowcaseFokke Zandbergen
 
Html5: Something wicked this way comes (Hack in Paris)
Html5: Something wicked this way comes (Hack in Paris)Html5: Something wicked this way comes (Hack in Paris)
Html5: Something wicked this way comes (Hack in Paris)Krzysztof Kotowicz
 
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스Rhio Kim
 

Similaire à 플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run` (20)

OSDC 2013 | Introduction into Chef by Andy Hawkins
OSDC 2013 | Introduction into Chef by Andy HawkinsOSDC 2013 | Introduction into Chef by Andy Hawkins
OSDC 2013 | Introduction into Chef by Andy Hawkins
 
Ci system part i
Ci system part iCi system part i
Ci system part i
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
BDD for Rails Legacy Code
BDD for Rails Legacy CodeBDD for Rails Legacy Code
BDD for Rails Legacy Code
 
Cross platform Mobile development on Titanium
Cross platform Mobile development on TitaniumCross platform Mobile development on Titanium
Cross platform Mobile development on Titanium
 
Websockets: Pushing the web forward
Websockets: Pushing the web forwardWebsockets: Pushing the web forward
Websockets: Pushing the web forward
 
CodeStarではじめるRailsアプリのCodeDeploy化
CodeStarではじめるRailsアプリのCodeDeploy化CodeStarではじめるRailsアプリのCodeDeploy化
CodeStarではじめるRailsアプリのCodeDeploy化
 
Padrino - the Godfather of Sinatra
Padrino - the Godfather of SinatraPadrino - the Godfather of Sinatra
Padrino - the Godfather of Sinatra
 
網頁程式設計
網頁程式設計網頁程式設計
網頁程式設計
 
Play Framework and Activator
Play Framework and ActivatorPlay Framework and Activator
Play Framework and Activator
 
Inside Of Mbga Open Platform
Inside Of Mbga Open PlatformInside Of Mbga Open Platform
Inside Of Mbga Open Platform
 
Web Development using Ruby on Rails
Web Development using Ruby on RailsWeb Development using Ruby on Rails
Web Development using Ruby on Rails
 
Krzysztof kotowicz. something wicked this way comes
Krzysztof kotowicz. something wicked this way comesKrzysztof kotowicz. something wicked this way comes
Krzysztof kotowicz. something wicked this way comes
 
Infra@LINE_Chris
Infra@LINE_ChrisInfra@LINE_Chris
Infra@LINE_Chris
 
SCALE12X Build a Cloud Day: Chef: The Swiss Army Knife of Cloud Infrastructure
SCALE12X Build a Cloud Day: Chef: The Swiss Army Knife of Cloud InfrastructureSCALE12X Build a Cloud Day: Chef: The Swiss Army Knife of Cloud Infrastructure
SCALE12X Build a Cloud Day: Chef: The Swiss Army Knife of Cloud Infrastructure
 
Something wicked this way comes - CONFidence
Something wicked this way comes - CONFidenceSomething wicked this way comes - CONFidence
Something wicked this way comes - CONFidence
 
Titanium Community Toolkit Showcase
Titanium Community Toolkit ShowcaseTitanium Community Toolkit Showcase
Titanium Community Toolkit Showcase
 
Html5: Something wicked this way comes (Hack in Paris)
Html5: Something wicked this way comes (Hack in Paris)Html5: Something wicked this way comes (Hack in Paris)
Html5: Something wicked this way comes (Hack in Paris)
 
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
 

Plus de Heejong Ahn

프로그래머의 배움
프로그래머의 배움프로그래머의 배움
프로그래머의 배움Heejong Ahn
 
Being a Multiplier
Being a MultiplierBeing a Multiplier
Being a MultiplierHeejong Ahn
 
Hello, React Hooks!
Hello, React Hooks!Hello, React Hooks!
Hello, React Hooks!Heejong Ahn
 
더 나은 팀을 위하여
더 나은 팀을 위하여더 나은 팀을 위하여
더 나은 팀을 위하여Heejong Ahn
 
Just Enough Category Theory for Haskell, part 1
Just Enough Category Theory for Haskell, part 1Just Enough Category Theory for Haskell, part 1
Just Enough Category Theory for Haskell, part 1Heejong Ahn
 

Plus de Heejong Ahn (6)

프로그래머의 배움
프로그래머의 배움프로그래머의 배움
프로그래머의 배움
 
Being a Multiplier
Being a MultiplierBeing a Multiplier
Being a Multiplier
 
Hello, React Hooks!
Hello, React Hooks!Hello, React Hooks!
Hello, React Hooks!
 
Pure UI
Pure UIPure UI
Pure UI
 
더 나은 팀을 위하여
더 나은 팀을 위하여더 나은 팀을 위하여
더 나은 팀을 위하여
 
Just Enough Category Theory for Haskell, part 1
Just Enough Category Theory for Haskell, part 1Just Enough Category Theory for Haskell, part 1
Just Enough Category Theory for Haskell, part 1
 

Dernier

eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Neo4j
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9Jürgen Gutsch
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?AmeliaSmith90
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntelliSource Technologies
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsJaydeep Chhasatia
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Projectwajrcs
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 
Kubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxKubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxPrakarsh -
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 

Dernier (20)

eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptx
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 
Kubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxKubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptx
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 

플렉스팀 프론트엔드 기술 스택의 이해: `lint`, `build`, `run`