웹사이트 개발시 유용한 사이트

1. JavaScript 정규식 시각화 도우미

https://jex.im/regulex/#!flags=&re=(((%3F%3D.*%5Cd)((%3F%3D.*%5Ba-z%5D)%7C(%3F%3D.*%5BA-Z%5D)))%7C(%3F%3D.*%5Ba-z%5D)(%3F%3D.*%5BA-Z%5D))%5E%5Ba-zA-Z%5Cd%5D%7B6%2C12%7D%24

Regulex：JavaScript Regular Expression Visualizer

Regulex JavaScript Regular Expression Visualizer. / / Visualize Export Image Embed On My Site! IgnoreCase Multiline GlobalMatch Created by Jex .

jex.im

​

2. DevDoc

개발 언어마다 리소스와 객체가 문서화되어있다

https://devdocs.io/javascript/

JavaScript documentation — DevDocs

You're browsing the JavaScript documentation. To browse all docs, go to devdocs.io (or press esc ). DevDocs Preferences Offline Data Changelog Guide About Report a bug JavaScript 48 Array 12 ArrayBuffer 3 AsyncGenerator 1 AsyncIterator 14 Atomics 6 BigInt 1 BigInt64Array 1 BigUint64Array 4 Boolean 7...

devdocs.io

 

3. CDNJS

cdn 리소스 찾는 사이트, 영문으로 찾아야해서 그냥 구글링이 빠를수 있다.

https://cdnjs.com/

cdnjs - The #1 free and open source CDN built to make life easier for developers

Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library files on your websites.

cdnjs.com

 

4. WebP, PNG 및 JPEG 압축

이미지 압축할 때 사용해볼만 하다.

https://tinypng.com/

TinyPNG – Compress WebP, PNG and JPEG images intelligently

Smart WebP, PNG and JPEG Compression for Faster Websites Optimize now Go Web Pro Drop your images here! Up to 20 images, max 5 MB each. Convert my images automatically OUR PRODUCTS Optimization for each project Tailored solutions for website owners, developers, and designers, ensuring optimal websit...

tinypng.com

​

5. 이미지 배경 제거

https://www.remove.bg/ko

이미지 배경 제거, 투명 배경 만들기 – remove.bg

사진이나 이미지 배경을 한 번 클릭으로 5초만에 무료로 제거할 수 있습니다. 이미지 배경 투명하게 만드는 법. 누끼 따기 프로그램.

www.remove.bg

​

6. 색상 팔레트

디자인할 때 적합한 색상 매치할 때 유용하다

https://colorhunt.co/palettes/pastel

Pastel Color Palettes - Color Hunt

Discover beautiful pastel color palettes on Color Hunt. A curated collection of great color palettes for designers and artists.

colorhunt.co

​

7. 코드펜

임시로 html, css, js 코드로 웹 구동이 잘 되는지 확인하기 편하다. 추가로 다른 개발자의 코드도 확인해볼 수 있으니 참고하기 좋다

https://codepen.io/

 

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

codepen.io

8. 오픈 소스 아이콘

아이콘 필요할때 무료 아이콘 가져오면 좋다.

https://ionic.io/

Ionic: Enterprise App Platform

Build, secure, and deliver amazing cross-platform mobile, web, and desktop apps all with one shared code base and open-web standards. The only enterprise-grade app platform fully powered by open source.

ionic.io

​

9. README

README 파일을 생성 할 때 참고해보면 좋을 듯

https://readme.so/editor

 

readme.so

Use readme.so's markdown editor and templates to easily create a ReadMe for your projects

readme.so

​

10. 웹사이트 로딩 속도

본인이 작업한 웹사이트 로딩 속도를 확인해볼 수 있다.

https://gtmetrix.com/

GTmetrix | Website Performance Testing and Monitoring

How fast does your website load? Find out with GTmetrix See how your site performs, reveal why it's slow and discover optimization opportunities. Test your site Options: Vancouver, Canada using Chrome . Change Options Latest News View Changes Unknown Tag: 'html' Unknown Tag: 'html' Unknown Tag: 'htm...

gtmetrix.com

​

​

가져온 글

https://javascript.plainenglish.io/15-killer-websites-for-web-developers-97113695e775

15 Killer Websites for Web Developers

99.9% of developers don’t know all of them.

javascript.plainenglish.io