Local Oriented/HTML CSS JS Show 자바스크립트 테스트용 에디터 웹사이트래빗 크리스 2020. 8. 26. 10:01 https://jsfiddle.net/vtepw9zw/3/ HTML/CSS/Javascript 등에 대하여 간단하게 사용할 만한, 그러나 기능은 상당히 만족스러운 에디터.. 그것도 웹사이트에서 이런 기능을 제공하네요. HTML DOM 에 대한 console.log() 내용도 모두 보여줍니다. 간단하게 테스트 하려고, 에티터 켜고 웹브라우저 켜고, 개발자도구 켜고 이럴 필요 없이.. 상기 웹사이트에 접속해서 체크해 보세요. 'Local Oriented > HTML CSS JS' 카테고리의 다른 글
태그console, CSS, DOM, HTML, 에디터, 자바스크립트 'Local Oriented/HTML CSS JS' Related Articles
Secret 댓글 MDN의 JavaScript 초급자 과정에 오신 걸 환영합니다! 이 글은 JavaScript를 넓게 보면서 "뭔가요?", "뭘 하나요?"와 같은 질문을 답변하고, 여러분이 JavaScript에 친숙해지도록 도와드립니다. 둘러보기JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어입니다. 페이지의 내용이 — 가만히 정적인 정보만 보여주는 것이 아니라 — 주기적으로 갱신되거나, 사용자와 상호작용이 가능하거나, 애니메이션이 적용된 2D/3D 그래픽을 볼 수 있다면 JavaScript가 관여하고 있을 거라고 생각해도 좋습니다. JavaScript는 표준 웹 기술이라는 케이크의 세 번째 층입니다. 다른 두 개(HTML과 CSS)는 학습장의 다른 곳에서 자세히 알아봤습니다.
이렇게 세 층은 서로의 위에 유기적으로 잘 올라가있습니다. 연습 삼아 간단한 텍스트 레이블을 만들어봅시다. HTML로, 아래처럼 텍스트에 구조와 목적을 부여할 수 있습니다.
CSS를 추가하면 보기 좋게 꾸밀 수 있습니다.
마지막으로는 JavaScript를 곁들여 동적인 기능을 추가할 수 있습니다.
바로 위의 텍스트 레이블을 클릭해서 어떤 일이 일어나는지 확인해보세요. (이 데모는 GitHub에서도 볼 수 있습니다. 소스코드를 읽거나 실행된 모습을 확인해보세요) JavaScript는 이것보다 훨씬 많은 일을 할 수 있습니다. 어떤 일이 가능한지 자세히 알아봅시다. 그래서 어떤 일을 할 수 있나요?클라이언트 사이드 JavaScript 언어의 핵심은 다음과 같은 일을 가능하게 해주는 프로그래밍 기능들로 구성됩니다.
하지만 위 목록보다 더 흥미진진한건 클라이언트 사이드 JavaScript 언어 위에 올라가있는 기능들입니다. 애플리케이션 프로그래밍 인터페이스(API)라고 부르는 이 기능들은 여러분의 JavaScript 코드에서 사용할 수 있는 강력한 마법을 추가로 제공합니다. API는 개발자가 직접 구현하기는 어렵거나 불가능한 기능들을 미리 만들어서 제공하는 것입니다. 가구 DIY 키트 같은 거죠. 미리 재단된 판과 나사로 책장을 조립하는 게, 디자인하고 적합한 목재를 찾아서 올바른 크기와 모양으로 자른 후 적합한 크기의 나사를 찾아서 마침내 책장으로 만드는 것보다 훨씬 쉬운 법입니다. API는 일반적으로 두 개의 범주로 분류할 수 있습니다.
브라우저 API는 웹 브라우저에 내장된 API로, 현재 컴퓨터 환경에 관한 데이터를 제공하거나 여러가지 유용하고 복잡한 일을 수행합니다.
참고: 구형 브라우저에서는 위 예제 중 많은 수가 동작하지 않습니다. 웹 기술을 시험할 땐 Firefox, Chrome, Edge, Safari처럼 모던 브라우저를 사용하는 편이 좋습니다. 이후에 프로덕션 코드 (고객이 사용하게 될 코드) 배포에 다가가게 되면 크로스 브라우저 테스트 (en-US)를 고려하세요. 서드파티 API는 브라우저에 탑재되지 않은 API로, 웹의 어딘가에서 직접 코드와 정보를 찾아야 합니다.
여기 나열된 항목 말고도 훨씬 다양한 API들이 존재합니다! 하지만 아직 너무 앞서나가진 마세요. JavaScript를 하루 배운 것으로 차세대 Facebook, Google 지도, Instagram을 만들 수는 없는 법입니다. 아직 배워야 할 기본이 많이 남았고, 기본을 배우는 것이 이 과정을 보는 이유이니, 시작해 봅시다! 웹 페이지에서 JavaScript는 어떤 일을 하나요?이제부턴 코드를 살펴보면서, 페이지에서 JavaScript를 돌리면 어떤 일이 일어나는지도 알아보겠습니다. 브라우저가 웹 페이지를 불러오면 어떤 일이 발생하는지 간단하게 복습해봅시다(CSS 동작 방식에서 먼저 알아봤습니다). 웹 페이지를 브라우저로 불러오면, 브라우저는 여러분의 코드(HTML, CSS, JavaScript)를 실행 환경(브라우저 탭)에서 실행합니다. 원자재(코드)를 가져와서 상품(웹 페이지)을 생산하는 공장처럼 생각할 수 있습니다.
JavaScript는 DOM (Document Object Model) API를 통해 HTML과 CSS를 동적으로 수정, 사용자 인터페이스를 업데이트하는 일에 가장 많이 쓰입니다. 참고로 웹 문서(페이지)의 코드는 보통 문서 상에 나타나는 순서 그대로 불러와 실행합니다. 수정하려는 HTML과 CSS 코드보다 JavaScript를 먼저 불러와 실행해버리면 오류가 발생할 수 있습니다. 아래의 스크립트 로딩 전략에서 이 문제의 해결법을 알아보겠습니다. 브라우저 보안각각의 브라우저 탭은 코드를 실행하기 위한 독립적인 그릇(기술 용어로 "실행 환경"이라고 부릅니다)입니다. 독립적이라는 것은 대부분의 탭이 서로에게서 완전히 분리되어 한 탭의 코드가 다른 탭의 코드, 또는 다른 사이트에 직접적인 영향을 줄 수 없다는 뜻입니다. 이건 중요한 보안 절차입니다. 만약 이런 제약이 없으면 해커들이 다른 웹 사이트에서 정보를 훔치는 것을 포함해 여러가지 나쁜 일을 하는 코드를 작성할 것입니다. 참고: 두 개의 다른 웹 사이트/탭 사이에서 코드와 정보를 안전하게 주고받을 수 있는 방법이 있지만, 지금 과정과는 거리가 멀기 때문에 여기서는 다루지 않겠습니다. JavaScript 실행 순서브라우저가 JavaScript 블록을 마주치면, 일반적으로는 순서대로 위에서 아래로 실행합니다. 따라서 코드 배치 순서에도 주의를 기울여야 합니다. 예를 들기 위해 맨 위의 첫 예제 코드로 돌아가봅시다.
위 코드는 텍스트 문단을 선택(1번 줄)해서 이벤트 수신기를 부착(3번 줄)하여, 사용자가 문단을 클릭하면 만약 1번 줄의 코드와 3번 줄의 코드 순서를 서로 바꿔서 실행했으면 원하는 동작 대신 브라우저 개발자 콘솔 (en-US)에 오류, 참고: 이 오류는 아주 흔하게 볼 수 있는 오류 중 하나입니다. 여러분의 코드 안에서 참조하는 객체가 존재하는지 주의하세요. 인터프리터와 컴파일러프로그래밍에서의 인터프리터와 컴파일러라는 단어를 들어본 적이 있는지 생각해보세요. 인터프리터를 사용하는 언어에서는 코드를 위에서 아래로 실행하고, 코드 구동 결과는 즉시 반환됩니다. 브라우저에서 JavaScript 코드를 실행하기 전에 다른 형태로 변환할 필요가 없다는 점을 기억하세요. 코드는 프로그래머가 읽을 수 있는 형태로 입력되고, 별도의 처리 없이 그대로 실행됩니다. 반면, 컴파일러를 사용하는 컴파일 언어에서는 컴퓨터가 코드를 실행하기 전에 다른 형태로 변환(컴파일)해야 합니다. 예를 들어, C/C++에서는 코드를 컴파일러로 기계언어로 변환하여, 그 결과를 컴퓨터가 실행합니다. 프로그램은 프로그램의 원본 소스 코드에서 생성한 이진 형식(바이너리)으로부터 실행됩니다. JavaScript는 가볍고, 인터프리터를 사용하는 프로그래밍 언어입니다. 웹 브라우저는 JavaScript 코드를 원문 텍스트 형식으로 입력받아 실행합니다. 기술적인 측면으로 따지자면, 대부분의 모던 JavaScript 인터프리터들은 사실 JIT 컴파일(just-in-time 컴파일)이라는 기술을 사용해 성능을 향상하기는 합니다. 스크립트의 실행과 동시에 소스 코드를 더 빠르게 실행할 수 있는 이진 형태로 변환하여 최대한 높은 실행 속도를 얻는 방법입니다. 하지만 JavaScript는 여전히 인터프리터 언어로 분류됩니다. 컴파일을 먼저 해놔야 하는 것이 아니라 런타임에 일어나기 때문입니다. 두 방법 모두 각자의 장점을 가지고 있으나, 여기서 그 부분까지 논하지는 않겠습니다. 서버 사이드와 클라이언트 사이드 코드웹 개발에 관련한 또 다른 용어로 서버 사이드 코드와 클라이언트 사이드 코드를 들어봤나요? 클라이언트 사이드 코드는 사용자의 컴퓨터에서 동작하는 코드입니다. 웹 페이지를 방문하면 브라우저가 페이지 내의 클라이언트 사이드 코드를 다운로드하고 실행해서 화면에 띄웁니다. 바로 이 과정에서 다루는 것은, 정확히는 클라이언트 사이드 JavaScript입니다. 반대로 서버 사이드 코드는 서버에서 동작하는 코드로, 그 실행 결과를 브라우저가 다운로드해서 화면에 띄우게 됩니다. 유명한 서버 사이드 웹 언어로는 PHP, Python, Ruby, ASP.NET, 그리고... JavaScript가 있습니다! JavaScript는 브라우저 뿐만 아니라, 많은 사람들이 사용하는 Node.js 환경처럼 서버 사이드 언어로도 사용할 수 있습니다. 서버 사이드 JavaScript에 관해서는 동적 웹 사이트 – 서버 사이드 프로그래밍 과정에서 더 알아보세요. 동적 코드와 정적 코드클라이언트 사이드 JavaScript와 서버 사이드 언어들 모두 동적이라는 단어로 설명할 수 있습니다. 동적인 이유는 웹 페이지/웹 앱의 서로 다른 상황에 서로 다른 화면을 보여줄 수 있고, 필요하면 새로운 콘텐츠를 생성할 수 있기 때문입니다. 서버 사이드 코드는 서버에서 새로운 콘텐츠를 생성 — 데이터베이스에서 데이터를 가져오는 등 — 합니다. 클라이언트 사이드 JavaScript는 클라이언트의 브라우저 내에서 새로운 콘텐츠를 생성 — 새로운 HTML 표를 생성하고, 서버에서 받아온 데이터로 채운 후, 사용자가 보고 있는 웹 페이지에 표시 — 합니다. 두 맥락 내에서 '동적'이라는 단어의 정확한 뜻은 약간 다르지만, 그럼에도 서로 연관되어 있으며, 두 방법(서버와 클라이언트 사이드)을 보통 함께 사용합니다. 동적으로 바뀌는 내용을 포함하지 않는 웹 페이지를 정적인 페이지라고 합니다. 정적인 페이지는 항상 같은 콘텐츠만 보여줍니다. 웹 페이지에 JavaScript를 어떻게 넣나요?CSS와 비슷한 방법으로 JavaScript를 HTML 코드에 적용할 수 있습니다. CSS가
내부 JavaScript
참고: 예제가 잘 동작하지 않으면 각 단계를 다시 차근차근 시도하면서 모두 정확히 따라했는지 확인해보세요. 시작 코드를 저장할 때 외부 JavaScript내부 JavaScript는 잘 동작했지만, JavaScript를 외부 파일로 분리하고 싶으면 어떡할까요? 지금 알아보겠습니다.
인라인 JavaScript 처리기가끔은 HTML에 JavaScript 코드가 포함된 모습을 볼 수도 있습니다. 아래 코드처럼요.
예제로 확인해보세요. 위
예제는 이전의 두 예제와 완전히 같은 기능을 가지고 있지만, 하지만, 이 방법을 사용하지 말아주세요. JavaScript로 HTML 코드를 물들이는 것은 나쁜 방법일 뿐더러 비효율적입니다. JavaScript를 적용하려는 모든 버튼마다 일일히 대신 addEventListener 사용하기HTML에 JavaScript를 직접 넣는 대신, 순수한 JavaScript 방법을 사용하세요.
참고: 여러분 컴퓨터의 스크립트 로딩 전략스크립트를 적절한 시점에 불러오는 일에는 몇 가지 문제가 있습니다. 뭐든지 보이는 것만큼 간단하지는 않은 법이죠. 흔히 마주치게 되는 문제는, 페이지의 모든 HTML은 순서 그대로 불러온다는 점입니다. JavaScript를 사용해서 페이지 내의 요소 — 더 정확하게는 Document Object Model (en-US) — 를 조작하려고 할 때, 해당 요소를 포함한 HTML 코드보다 JavaScript를 먼저 불러와버리면 코드가 올바르게 동작하지 못할 것입니다. 앞선 내부와 외부 JavaScript 예제에서는 HTML 본문을 읽기 전에 문서의 헤드에서 JavaScript를 불러와 실행합니다. 여기서 문제가 생길 여지가 있으므로, 예방할 수 있는 방법을 사용했었습니다. 내부 예제에서는 코드 주위에 이런 구조를 볼 수 있습니다.
이건 이벤트, 그중에서도 HTML 본문 전체를 불러와 읽었다는 것을 나타내는 브라우저 외부 예제에서는 더 최신 기법을 사용해 문제 발생을 억제합니다.
이렇게 하면 스크립트와 HTML을 동시에 불러오므로 오류가 발생하지 않습니다. 참고: 고전적인 방법은 스크립트 요소를 본문의 맨 마지막( async와 defer스크립트 중단
문제를 해결할 수 있는 기능에는 사실 두 가지가 있습니다.
다음은 세 개의 스크립트 로딩 전략을 적용했을 때 페이지에 어떤 영향을 주는지 시각적으로 표현한 이미지입니다.
HTML 명세에서 가져와 CC BY 4.0 라이선스 하에서 축소한 이미지입니다. 예를 들어, 아래와 같이 세 개의 스크립트 요소를 가지고 있다고 가정해 보겠습니다.
위 코드로는 스크립트가 HTML의 순서대로 불러와질 것이라고 확실하게 예측할
수 없습니다.
위 코드에서는 요약하자면,
주석HTML 및 CSS와 동일하게, JavaScript에서도 브라우저는 무시하는 주석을 작성해서 다른 개발자들(아니면 무슨 일을 했었는지 기억하지 못하는 미래의 여러분)에게 안내를 제공할 수 있습니다. 주석은 엄청 유용합니다. 자주 사용하세요. 특히 대규모 애플리케이션에서는요. 주석에는 두 종류가 있습니다.
그래서, 마지막으로 봤던 JavaScript 예제 코드에 주석을 추가한다면 이런 모습이 되겠죠.
참고: 보통은 많은 주석이 적은 주석보다 낫지만, 너무 많은 주석으로 이 변수가 어떤 변수인지 설명(변수 이름을 더 직관적으로 나타낼 수 있을 수도)하고 있거나 매우 간단한 작업의 설명(코드가 과하게 복잡할지도)에 투자하고 있지는 않은지 주의하세요. 정리이로써 JavaScript의 세계로 한 걸음 내딛었습니다. 왜 JavaScript를 써야 하는지, 그리고 어떤 일을 할 수 있는지 먼저 알아보기 위해 이론으로 시작했고, 약간의 코드 예제를 봤고, 여러분의 웹 사이트 어디에 JavaScript가 들어갈 수 있는지 등등을 알아봤습니다. 지금 당장은 JavaScript가 약간 버겁게 느껴질지도 모르겠지만, 너무 걱정하지 마세요. 이 과정에 걸친 간단한 단계들을 밟다 보면 전체적인 모습이 보일겁니다. 다음 글에서는 바로 실전으로 들어가서 스스로 JavaScript 예제를 만들어보도록 합시다.
이 과정은 |