HTML개발에서 귀찮음을 덜어주는 개발 도구 소개: Live Server와 CodePen [Web 개발]

개발을 시작한 여러분은 VS Code로 코드를 작성하고 크롬 브라우저에서 새로고침하며 결과를 확인하는 방식에 익숙해졌을 것입니다.

하지만 이 방법은 정말 귀찮을 때가 많죠?

개발자들은 귀찮은 일을 싫어하는 사람들이에요. 그래서 이번 글에서는 여러분의 귀찮음을 덜어줄 몇 가지 유용한 도구를 소개하겠습니다.

1. Live Server

Live Server는 VS Code의 확장 프로그램입니다. 이 도구를 사용하면 HTML 파일을 수정할 때마다 매번 새로고침하지 않고도 변경사항을 즉시 확인할 수 있습니다. 사용법은 정말 간단해요!

설치 방법

1. VS Code를 열고 왼쪽 사이드바에 있는 퍼즐 모양 아이콘(확장 프로그램)을 클릭합니다.
2. 검색창에 "Live Server"를 입력하고 설치 버튼을 클릭하세요.

사용 방법

설치 후, HTML 파일을 열면 화면 오른쪽 아래에 Go Live라는 버튼이 나타납니다. 이 버튼을 클릭하면 기본 웹 브라우저에서 사이트가 열립니다.

 

이제 HTML 파일을 수정하면 변경사항이 실시간으로 반영되니, 더 이상 새로고침할 필요가 없습니다!

 

2. CodePen

CodePen은 코드 작성을 쉽게 하고 결과를 실시간으로 볼 수 있는 온라인 플랫폼입니다. codepen.io에 접속하면 아래와 같은 화면을 보게 됩니다.

사용 방법

1. Start Coding 버튼을 클릭하면 HTML, CSS, 자바스크립트 코드를 작성할 수 있는 에디터가 열립니다.
2. 코드를 입력하면 바로바로 결과가 반영되므로 새로고침이 필요 없습니다.

코드 저장 및 공유

가입하면 작성한 Pen을 저장하고 다른 사람과 공유할 수 있습니다. 또한, 다른 사람들이 만든 코드를 검색하고 학습할 수 있는 기능도 제공하죠. 예를 들어, 메인 화면에서 Search Pen을 클릭해 "Login Page"를 검색하면 다양한 로그인 페이지 예시를 찾아볼 수 있습니다.

 

클릭하면 코드의 구성 요소를 쉽게 확인할 수 있어, 많은 도움을 받을 수 있습니다.

CodePen

 

 

Live Server와 CodePen은 개발자가 효율적으로 작업할 수 있도록 도와주는 훌륭한 도구들입니다.

귀찮은 새로고침을 없애고 실시간으로 결과를 확인할 수 있으니, 꼭 사용해 보세요! 더 많은 개발 도구가 궁금하다면 댓글로 질문해 주세요.

 

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱