프론트엔드 개발을 위한 30가지 인기 도구 [추천]!

CSS 코드 생성기

그라디언트, 텍스트 그림자, Flexbox 또는 그리드에 대한 CSS 속성을 선언하는 방법을 기억해 본 적이 있습니까? 쉽지 않습니다. 특정 CSS 기능과 해당 속성을 반복해서 사용하지 않으면 모든 기능을 기억하기 어려울 수 있습니다. 그러나 CSS에 능숙한 사람이라도 특정 속성에 대해 복습이 필요한 경우가 있습니다. 특히 한동안 사용하지 않은 경우라면 더욱 그렇습니다.

최신 및 최고의 CSS에 대한 빠른 도움이 필요한 경우 여기 CSS 생성기를 사용해 보세요. 값을 입력하고, 결과를 미리 보고, 생성된 코드를 가져와서 실행하세요.

CSS3 Generator

https://css3generator.com/

CSS3 Generator는 Flexbox, 그라디언트, 전환 및 변환과 같은 일부 최신 CSS 기능을 빠르게 코딩할 수 있는 무료 온라인 애플리케이션입니다. , 등.

필요한 CSS 값을 입력하고, 결과를 실시간으로 미리 보고, 생성된 코드를 복사하여 붙여넣으세요. 또한 이 애플리케이션은 CSS 코드와 해당 버전을 지원하는 브라우저 목록을 표시합니다.

Ultimate CSS Generator

https://webcode.tools/css-generator

CSS Generator는 CSS 애니메이션, 배경, 그라디언트, 테두리, 코드를 생성할 수 있는 무료 온라인 애플리케이션입니다. 필터 등

인터페이스가 친숙하고, 관심 있는 CSS 기능의 브라우저 지원 정보가 명확하고 찾기 쉬우며, 생성된 코드가 깔끔하고 정확합니다.

CSS 그리드 레이아웃 생성기

https://css-grid-layout-generator.pw/

CSS 그리드는 훌륭합니다. 코드에서 그리드를 생성하면 최종 결과를 완전히 제어할 수 있습니다. 그러나 코딩할 때 그리드를 시각적으로 표현하는 것이 도움이 됩니다. 일부 주요 브라우저는 그리드를 시각화할 수 있는 훌륭한 도구를 구현했지만 일부 개발자는 도움을 주기 위해 약간의 추가 작업을 수행할 수 있습니다. CSS 그리드 생성기가 유용할 수 있는 곳입니다.

Dmitrii Bykov의 CSS 그리드 레이아웃 생성기는 무료이며 온라인으로 액세스할 수 있으며 매우 유연합니다. 나는 그것을 시도해 보았고 그리드 컨테이너 수준과 그리드 항목 수준 모두에서 많은 제어 기능을 제공하는 동시에 멋진 미리 보기 기능과 깔끔한 ​​코드를 제공한다는 것을 알았습니다.

도움이 필요하면 '사용 방법' 버튼을 클릭하고 앱 작성자가 제공하는 데모 동영상을 시청하세요.

정적 사이트 생성기

정적 사이트 생성기는

…손으로 코딩한 정적 웹 사이트와 전체 CMS 사용 간의 절충안을 의미하며 두 가지 모두의 이점을 유지합니다. 기본적으로 CMS와 유사한 개념(예: 템플릿)을 사용하여 정적이고 순수한 HTML 웹 사이트가 생성됩니다. 콘텐츠는 데이터베이스에서 추출할 수 있지만 더 일반적으로는 Markdown 파일이 사용됩니다.

이것들은 StaticGen 웹사이트에 나열된 상위 2개의 정적 웹사이트 생성기입니다.

Next.js

https://nextjs.org/

Next.js는 정적으로 내보낸 React 애플리케이션을 위한 무료 오픈 소스 프레임워크입니다. 포함된 기능:

• 사전 렌더링(Next는 서버측 렌더링 지원)
• 제로 구성
• 확장성
• CSS-in-JS
• 훌륭한 문서
• 그리고 더.

Gatsby

https://www.gatsbyjs.org/

Gatsby는 개발자가 빠른 웹 사이트와 애플리케이션을 구축하는 데 도움이 되는 무료 오픈 소스 React 기반 프레임워크입니다.

Gatsby는 다음과 같은 수많은 기능을 제공합니다.

• React의 힘, 웹팩, 최신 JavaScript 및 CSS
• 풍부한 데이터 플러그인 생태계
• 프로그레시브 웹 앱 생성
• 매우 쉬운 배포
• 다양한 사용 사례에 맞춰 사전 패키지된 Gatsby 사이트
• 등.

SVG Optimizer

웹에서의 성능은 매우 중요합니다. 방문자는 콘텐츠가 로드되기를 기다리는 동안 조급해하며 검색 엔진은 느린 사이트에 불이익을 주는 경향이 있습니다.

그래픽 최적화는 빠른 웹사이트와 앱을 구축하는 데 필수적인 단계이며 SVG 그래픽도 예외는 아닙니다. SVG 코드를 깔끔하고 깔끔하게 유지하려면 SVG 최적화 도구를 사용하는 것이 프런트엔드 개발자의 작업 흐름에서 필수적인 단계가 되었습니다.

다음은 전문 개발자가 널리 사용하는 두 가지 훌륭한 SVG 최적화 프로그램입니다.

SVGOMG

https://jakearchibald.github.io/svgomg/

SVGOMG는 SVG 코드에 다양한 최적화 옵션을 적용하고 최종 결과를 미리 볼 수 있는 무료 온라인 애플리케이션입니다. 사용하기 쉽고 오프라인에서도 사용할 수 있습니다. WeChat의 공개 계정을 검색하여 트렌드에 맞춰 글쓰기를 시작하고 프로그래밍 리소스를 팔로우하고 답변하며 다양한 클래식 학습 자료를 받아보세요.

SVG 최적화

https://petercollingridge.appspot.com/svg-optimiser

이것은 SVG 코드 트리밍을 위한 또 다른 훌륭한 무료 온라인 SVG 최적화 도구로, 직관적이고 사용하기 쉽습니다.

애니메이션 라이브러리

애니메이션은 인터넷 어디에서나 볼 수 있는 미묘한 미시효과든, 화면에 점차 펼쳐지는 대형 콘텐츠의 이야기 같은 움직임이든, 그것이 바로 애니메이션의 존재입니다.

최신 CSS와 JavaScript에는 멋진 웹 애니메이션을 만드는 데 필요한 기능이 포함되어 있지만 아래 나열된 라이브러리를 사용하면 작업을 더 빠르게 완료하고 놀라운 효과를 얻을 수 있습니다.

Animate.css

https://animate.style/

Animate.css는 웹 프로젝트에 사용할 수 있는 즉시 사용 가능한 크로스 브라우저 애니메이션 라이브러리입니다. 하이라이트, 홈페이지, 슬라이더 및 관심을 끄는 신호에 적합합니다.

이름에서 알 수 있듯이 이 라이브러리는 순수 CSS입니다. 사전 패키지된 효과 중에는 바운스 및 깜박임 효과, 후면 진입 및 퇴장, 페이드 인 및 아웃, 기타 수많은 효과와 같은 눈길을 끄는 효과가 있습니다.

기능은 다음과 같습니다:

• npm, Yarn 또는 CDN을 사용한 빠른 설치
• 쉽고 간단한 사용
• CSS 사용자 정의 속성(CSS 변수) 옵션을 사용하여 애니메이션 지속 시간, 지연 및 상호 작용 사용자 정의
• 지연, 속도 변경 및 반복을 위한 유틸리티 클래스입니다.

GreenSock (GSAP)

https://greensock.com/

GSAP(GreenSock Animation Platform)은 "현대 네트워크를 위한 초고성능, 전문가급 애니메이션"을 제공합니다.

매우 직관적인 JavaScript 기반 구문을 사용하면 멋진 애니메이션을 즉시 만들 수 있습니다. DOM 요소와 JavaScript 개체부터 SVG, Canvas 및 WebGL 몰입형 경험에 이르기까지 GSAP를 사용하여 애니메이션으로 만들 수 있는 항목에는 제한이 없습니다. 또한 GSAP는 브라우저 간 및 이전 버전과 호환되며 뛰어난 문서와 지원 커뮤니티를 제공합니다.

Anime.js

https://animejs.com/

Anime.js는 간단하고 강력한 API를 갖춘 경량 JavaScript 애니메이션 라이브러리입니다. CSS 속성, SVG, DOM 속성 및 JavaScript 개체와 함께 작동합니다.

직관적인 구문과 뛰어난 문서를 갖춘 완전한 오픈 소스를 통해 Anime.js를 즉시 실행하고 실행할 수 있습니다.

크로스 브라우저 테스트

개발자는 웹 사이트나 앱에 액세스할 수 있는 장치를 제어할 수 없습니다. 2019년에는 전체 웹 트래픽의 절반 이상이 모바일 기기에서 발생했습니다. 전반적으로 화면 크기는 데스크톱, 태블릿, 스마트폰, 웨어러블 기술에 이르기까지 다양합니다.

프런트 엔드 개발자로서 웹 페이지가 모든 화면 크기에서 작동하는지 확인하는 것이 우리 업무의 핵심 부분입니다. 다양한 브라우저와 플랫폼에서 웹사이트와 앱을 직접 테스트하는 것만큼 좋은 것은 없지만 이러한 방식으로 모든 기반을 다루는 것은 우리 대부분에게 선택 사항이 아닙니다. 아래 나열된 서비스와 앱이 도움이 될 수 있습니다.

Caniuse

https://caniuse.com/

당신은 어떤지 모르겠지만 HTML, CSS, SVG 및 JavaScript 기능에 대한 브라우저 지원에 대해 알아야 할 때 기능이 아무리 새롭거나 모호하더라도 최신 정보에 관한 정보는 caniuse가 제가 즐겨찾는 사이트입니다.

글로벌 및 국가별 수준의 최신 통계 결과는 물론 특정 문제, 리소스 등에 대한 정보를 얻을 수 있습니다.

Am I Responsive?

http://ami.반응디자인.is/

이것은 웹사이트가 다양한 화면 크기에서 어떻게 보이는지 빠르게 확인할 수 있는 무료 온라인 애플리케이션입니다.

기능 목록은 다음과 같습니다.

• 텍스트 상자에 테스트하려는 사이트의 URL을 입력하거나 컴퓨터의 "Am I RWD" 북마크를 사용하여 어디서나 앱에 액세스할 수 있습니다. 브라우저 이 애플리케이션은 웹사이트에서 사용됩니다.
• http://localhost/가 작동합니다.
• 클릭하고 스크롤하여 웹사이트가 표시되는 모든 기기에서 테스트해 보세요.

Responsive Web Design Checker

https://반응디자인checker.com/

반응형 웹 디자인 검사기인 반응형 웹 디자인 검사기는 웹 사이트가 어떻게 보이는지 테스트할 수 있는 또 다른 무료 온라인 앱입니다. 다양한 화면 크기뿐만 아니라 다양한 장치에서도 사용할 수 있습니다. 여기에는 다양한 데스크톱 및 노트북 컴퓨터, Apple iPad Retina 및 Amazon Kindle Fire와 같은 태블릿, Apple iPhone 6/7 Plus, Samsung Galaxy 등과 같은 스마트폰이 포함됩니다.

BrowserStack

https://www.browserstack.com/

BrowserStack은 2000개가 넘는 실제 장치와 브라우저에서 웹사이트나 앱을 테스트할 수 있는 인기 있는 유료 서비스입니다. 상자에서 꺼내자마자 완전히 안전합니다.

코드 공동 작업 및 놀이터

다음은 코드, 프로토타입 및 테스트 프로젝트 아이디어를 빠르게 공유할 수 있는 몇 가지 훌륭한 도구입니다.

GitHub

이것은 말할 필요도 없습니다

CodePen

https://codepen.io/

CodePen은 수년 동안 존재해왔고 전면적으로 사랑받고 널리 사랑받고 있습니다. 최종 개발자 커뮤니티 사용하면 개념 시험, 프로토타이핑, 코드 학습 및 코드 공유에 좋습니다. 팀에서는 다음과 같이 정의합니다.

CodePen은 소셜 개발 환경입니다. 기본적으로 브라우저에서 코드를 작성하고 빌드되는 결과를 확인할 수 있습니다. 이는 모든 기술의 개발자에게 유용한 무료 온라인 코드 편집기이며, 특히 코드를 배우는 사람들에게 힘을 실어줍니다. HTML, CSS, JavaScript 등의 프론트엔드 언어와 이들로 변환될 수 있는 전처리 구문을 주로 다루고 있습니다.

JSFiddle

https://jsfiddle.net/

JSFiddle은 사용자가 만들고 공동 작업한 HTML, CSS 및 JavaScript 코드 조각을 테스트하고 표시하기 위한 온라인 IDE 서비스 및 온라인 커뮤니티입니다. "바이올린". AJAX 호출을 시뮬레이션할 수 있습니다. 2019년 JSFiddle은 프로그래밍 언어(PYPL) 인기 지수 검색 수를 기준으로 전 세계 및 미국에서 Cloud9 IDE 바로 다음으로 2위를 차지하여 가장 인기 있는 온라인 IDE가 되었습니다.

SoloLearn

https://www.sololearn.com/

SoloLearn은 HTML, CSS 및 JavaScript 코드를 테스트할 수 있는 훌륭한 온라인 놀이터입니다. 또한 기본 코딩 강좌를 무료로 제공하고 개발자와 학습자를 위한 포럼도 제공합니다.

jsrun.net

https://jsrun.net/

코드펜 국내버전입니다, 적극 추천드립니다! Codepen이나 JSFiddle은 좋은데 서버가 해외에 있어서 많이 느립니다. 그리고 jsrun.net은 매우 빠릅니다.