자바스크립트 시리즈 [1] 로그와 알림

권영민·2022년 1월 22일
0

Javascript

목록 보기
1/1

자바스크립트를 시작하며

자바스크립트는 이미 웹 클라이언트 환경을 넘어서서 개발 환경의 전반에 지대한 영향을 미치고 있는 언어입니다. 저는 자바스크립트 생태계에 그다지 익숙한 개발자가 아니지만, 이 친구의 가능성을 생각하면 애써 외면하기도 좀 그렇더군요. 알아두면 어디에든 요긴하게 써먹을 녀석이니 이제부터 아주 차근차근 자바스크립트의 A부터 Z까지 파고들어보려고 합니다.

자바스크립트?

자바스크립트는 복잡한 무언가(주기적으로 내용이 갱신되는 기능이나 능동적인 지도, 변화하는 2D/3D 그래픽, 동영상 등)를 웹페이지에 적용할 수 있게 하는 스크립트 혹은 프로그래밍 언어입입니다. 자바스크립트는 표준 웹 기술이라는 레이어 케이크에서 세번째 층이라고 볼 수 있습니다. JavaScript는 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 그리고 꽤나 많은 다른 일(물론, 전부는 아니지만 몇 줄만의 자바스크립트 코드로 얻는 결과는 놀라울겁니다.)들을 할 수 있는 스크립트 언어입니다.

<출처 : MDN Web Docs>

웹 개발자와는 그다지 인연이 없었던지라 자바스크립트와 친분을 키울 기회가 없었다. 그래서 MDN 웹 도큐먼트를 열어봤다. 역시 무언가 입문에 들어가면 전문 서적이나 영상 강의보다 먼저 공식 문서를 찾아보는게 직빵이다. 공식 문서가 잘 되어있는 기술은 기본적인 가이드라인을 따라가기만 해도 번듯한 결과물을 하나 확인해볼 수 있기 때문에 초반에 이것저것 삽질하는 시간을 절약해준다. 웹 생태계는 이런 면에선 확실히 좋아보인다.
나는 프로그래밍이 처음은 아니기 때문에 자바스크립트의 Getting Started를 돌려보는건 그다지 어려운 일은 아니었다. 다만 시리즈의 취지와 맞지 않기 때문에 자바스크립트 First Step 페이지는 링크로만 대체하고 오늘은 간단히 console.log()와 alert()을 사용해보겠다.
Javascript First Step

시작

자, 일단 자바스크립트는 기본적으로는 웹 프론트에서 주로 사용하는 언어인만큼, 간단한 웹페이지를 하나 띄워야한다. 앞으로의 코드 편집은 나의 경우 Visual Studio Code(이하 VS Code)로 진행할 예정인데- 기본적인 웹페이지의 코딩은 Sublime Text, Atom, Notepad++, Vim, 하다못해 메모장으로 해도 아무런 상관이 없다. 본인이 프로그래밍이 처음이라면, 이것저것 써보면서 본인에게 맞는 에디터를 사용하면 되겠고 기존에도 프로그래밍을 했다면 가장 익숙한 에디터를 사용하면 되겠다.

VS Code는 상당히 가벼운 편집기다. 보통 컴퓨터공학과 학부생들이 가장 먼저 접하는 IDE인 Visual Studio가 이 기능 저 기능 다 들어간 녀석이라면, VS Code는 컴팩트하게 딱 '에디터'의 역할만 수행한다. 물론 유용하게 사용하려면 익스텐션들을 잘 사용해야 하는데, 나같은 경우 일단

  • Html Snippets
  • JavaScript (ES6) code snippets
  • Code Runner
  • open in browser

이 4가지로 시작하려고 한다. 아마 여러가지가 더 필요할텐데, 제 세팅은 필요할 때 통째로 알려드리도록 하겠다. 일단 화면상의 snippet은 Html Snippets에서 제공하는 기능이다. 귀찮은 태그들 애써 입력하지 말고 가볍게 자동완성으로 세팅해준 후, Title 태그와 Body 태그에 내용을 입력해주자.

입력해준 후 'index.html'로 html 파일을 저장한 뒤, 다운받은 open in browser 를 사용하면 html 페이지가 열린다. (혹은 웹페이지 하나를 열어 주소창에 파일을 드래그하여도 된다.)

우리는 비로소 웹페이지를 하나 만든 것이다. 별거 없지 않은가? 물론 정말 빙산의 일각에 불과한거긴 하지만, 이런 작은 성취감들이 모여서 큰 결과가 되는 것이다. 개발이란게 그렇다.

자, 그럼 원래 목표였던 2가지 기능을 써보자. 우린 알다시피 '자바스크립트'를 하러 온거다. html은 흥미로운 기술이지만 이번 시리즈의 메인은 아니다. 단지 자바스크립트와 아주 밀접한 친구이기 때문에 앞으로도 자주 만나긴 할거다. 이번 시리즈에선 조연이지만 언젠가 또 기회가 있다면 주연으로 소개해줄 날도 있을지 모른다.

같은 폴더에 'HelloJS.js'라는 이름으로 자바스크립트 소스파일을 하나 생성한 후 아래와 같이 작성하였다.

별거 없다. 이게 정말 전부다. 결과물이 어떻게 보이는지 확인하려면 html 파일을 수정해줄 필요가 있다.

script 태그의 src에 자바스크립트 파일의 경로를 입력해줬다. 이렇게 하면 우리가 방금 작성한 자바스크립트 코드와 html 파일이 연결된다. 작성했다면 실행해보자.

Alert

알림 팝업이 뜬다. 이게 바로 alert 함수의 역할이다. alert 함수는 확인 버튼을 가진 알림 팝업으로, 메시지를 지정할 수 있다. 방금 그 alert 함수의 매개변수에 다른 문자열을 넣는다면, 그 문자열이 저 팝업에 뜨는 것이다. 한번 테스트해보길 바란다.

Console.log

자, 그렇다면 alert은 됐는데 console.log는 .. ? 어디 있단 말인가? 그거라면 당연히 콘솔에 있다. 아마 웹개발을 한다면 꽤나 지겹도록 볼 '개발자 도구'를 브라우저에서 열어보면 콘솔에 로그 하나가 찍혀있는걸 확인해볼 수 있을 것이다. 확인해보자.

우린 이로써 개발자 도구의 콘솔에 로그를 남길 수 있게 되었고, 브라우저에 알림 팝업이 뜨게도 할 수 있게 됐다. 로그는 개발의 기본인만큼 가장 처음부터 익숙해지는게 좋다. 2가지 메서드에 대한 공식 문서 링크를 아래와 같이 남긴다. 한번 찬찬히 읽어보고 이 2개의 메서드를 이모저모 써보며 익숙해져보길 바란다. 나도 당연히 미친듯이 써봐야겠다. 프로그래밍에 입문하시는 분들이라면 지겨운 전공책의 이론들에 파묻혀 앞다투어 진도 빼듯 우르르 암기를 하기보단, 이렇게 아주 간단한 것들 몇 개라 할지라도 실제로 사용해보고 응용해보는 것이 좋다. 눈과 머리보단 손으로 익숙해지는 것이 더 빠르다. 손은 눈보다 빠르니까 ... (?)

consloe.log 메서드
alert 메서드

profile
안녕하세요. 열정, 낭만, 그리고 실력으로 승부하려는 개발자 권영민입니다.

0개의 댓글