ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [JavaScript] 자바스크립트 시작
      Language/JavaScript 2024. 11. 17. 23:59
      728x90

      About JavaScript

      JavaScript는 웹 페이지에 생동감을 불어넣을 수 있는 프로그래밍 언어다.
      HTML에 포함되는 형태로 작성되고, 웹 페이지가 브라우저에 의해 열릴 때 자동으로 실행된다.

      잠시, 자바스크립트의 역사에 대해 살펴보자.

      History of JS

      1995년 넷스케이프는 브라우저에 동적인 기능을 추가하기 위해 새로운 스크립팅 언어를 필요로 했다. 이를 위해 브렌던 아이크는 단 10일 만에 자바스크립트를 개발하였다. 초기 이름은 "Mocha"였으며, 이후 "LiveScript"로 변경되었다가 자바(Java)의 인기에 편승하기 위해 "JavaScript"로 명명되었다.

      이 시점에서 자바스크립트는 주로 클라이언트 측에서 간단한 사용자 인터페이스와 웹 페이지 상호작용을 처리하기 위한 도구로 사용되었다.

      1996~1999년에는 표준화 과정을 거쳤다. 마이크로소프트는 1996년 인터넷 익스플로러에 JScript라는 자바스크립트의 변형 언어를 도입하였다. 이로 인해 브라우저 간 호환성 문제가 발생하였다. 이를 해결하기 위해 1997년 ECMA 인터내셔널이 자바스크립트의 표준을 정의하기 시작했으며, 이를 ECMAScript라 불렀다.

      1997년에 ECMAScript 1(ES1)이 발표되었고, 이후 브라우저 간 호환성을 위한 표준화를 지속적으로 진행하였다.

      2000~2005년에는 브라우저 전쟁과 자바스크립트의 재발견이 이뤄졌다. 넷스케이프와 마이크로소프트 간의 브라우저 전쟁이 격화되면서 자바스크립트는 다양한 비표준 기능이 난립하는 문제를 겪었다. 그럼에도 불구하고 2000년대 초반 Ajax 기술의 등장으로 자바스크립트는 웹 애플리케이션 개발에서 중요한 도구로 부상하였다.

      Ajax를 통해 페이지를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있게 되었으며, 이는 구글 맵스와 같은 혁신적인 웹 애플리케이션의 개발을 가능하게 하였다.

      2009년 ECMAScript 5(ES5)가 발표되었다. ES5는 배열 메서드(map, filter 등), 엄격 모드(strict mode) 등 현대적인 기능을 도입하여 자바스크립트 개발을 더욱 편리하게 만들었다. 대부분의 브라우저가 ES5를 지원하면서 브라우저 간 호환성 문제도 크게 개선되었다.

      또한 2009년에는 Node.js가 등장하면서 자바스크립트는 클라이언트뿐만 아니라 서버에서도 사용할 수 있는 언어로 확장되었다.

      2015년 ECMAScript 6(ES6)이 발표되면서 자바스크립트는 새로운 전환점을 맞이하였다. ES6는 let/const, 화살표 함수, 클래스, 모듈 시스템 등 다양한 현대적인 프로그래밍 기능을 도입하였다. 이는 자바스크립트의 가독성과 유지보수성을 대폭 향상시켰다.

      이 시기에는 React(2013년), Angular(2016년), Vue.js(2015년) 등 프레임워크가 대중화되면서 자바스크립트는 웹 애플리케이션 개발의 핵심 언어로 자리 잡았다.

      2016년 ES6 이후의 ECMAScript는 매년 업데이트를 통해 새로운 기능을 추가하고 있다. 최근에는 async/await(ES2017), optional chaining(ES2020)과 같은 기능이 도입되어 비동기 프로그래밍과 코드 간결성을 개선하였다.

      자바스크립트는 이제 웹뿐만 아니라 서버(Node.js), 모바일(React Native), 데스크톱(Electron) 등 다양한 플랫폼에서 활용되고 있으며, TypeScript와 같은 정적 타입 언어를 통해 더욱 강력한 도구로 발전하고 있다.

      • ES란?
        ECMA Script의 준말이다.
        ECMA International에서 정의한 스트립팅 언어 표준이다. 쉽게 말해, 자바스크립트의 표준 문법이라고 볼 수 있다.
        ESLint의 ES와 같다.

      • Node.js?
        앞서 말했듯, JavaScript는 기본적으로 브라우저(HTML)에 종속되었지만, Node.js의 등장으로 브라우저 외부에서 실행하는 것이 가능하게 되었다. 이 Node.js도 구글의 V8엔진 기반이라고 한다.

      • Netscape?
        1994년 12월 15일 넷스케이프 커뮤니케이션즈에서 발매되었던 인터넷 스위트. 월드 와이드 웹의 태동기를 대표하는 웹 브라우저이자 오픈소스 웹 브라우저계에 지대한 공헌을 한 제품. 현재에는 파이어폭스로 승계되었다. 넷스케이프의 전신은 모자이크이었다.

      How to work JS

      JS가 어떻게 동작하게 만들 수 있을까?

      첫째, JS가 HTML안에 있도록 하여 브라우저에서 HTML 파일을 실행시킨다.

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      document.write("Hello, world");
      console.log("Hello, world");
    </script>
  </body>
</html>

      이렇게 <script> 태그를 넣어서 JS 코드를 작성할 수 있다.

      💡 document.write()와 console.log()의 비교

      특징 document.write() console.log()
      용도 웹 페이지 콘텐츠 출력 디버깅 및 개발 도구에서 데이터 확인
      출력 위치 HTML 문서(브라우저 화면) 브라우저 콘솔(또는 Node.js 터미널)
      동작 시점 HTML 렌더링 중 또는 이후(주의 필요) 코드 실행 중 언제든지 가능
      문서 영향 문서 내용 변경 및 초기화 가능 문서에 영향을 주지 않음
      현대적 사용 여부 거의 사용되지 않음 디버깅 및 로깅에 널리 사용됨

      document.write() 는 단순한 실험이나 초기 학습 단계에서 HTML 출력 방식을 이해하기 위한 목적으로 개발에는 거의 사용하지 않는 것이 좋다.

      둘째, JS코드와 HTML을 분리하여 작성한다.

      확장자가 .js인 파일에 순수 JS코드만 작성하는 것이다.

      다음과 같은 HelloWorld.html에 HelloWorld.js를 참조시킬 수 있도록 한다.

      HelloWorld.html

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./HelloWorld.js"></script>
  </body>
</html>

      HelloWorld.js

      console.group("My Message 1");
console.log("안녕하세요 , JS1");
console.log("안녕하세요 , JS2");
console.log("안녕하세요 , JS3");
console.groupEnd();

console.group("My Message 2");
console.log("안녕하세요, JS4");

console.group("My Message 2-1");
console.log("안녕하세요, JS5");
console.log("안녕하세요, JS6");
console.groupEnd();
console.groupEnd();

      💡 console.group() 그리고 console?

      • console 객체란?
        console은 브라우저와 Node.js 환경에서 제공되는 내장 객체로, 디버깅과 로깅을 위해 사용된다. 이를 통해 실행 중인 프로그램의 상태를 출력하거나, 개발 과정에서 데이터를 확인할 수 있다.

        • console 객체의 주요 역할
          • 로그 메시지 출력 (console.log, console.error, console.warn)
          • 객체나 배열의 구조를 시각화 (console.table)
          • 디버깅을 위한 그룹화 (console.group, console.groupEnd)
          • 코드 성능 분석 (console.time, console.timeEnd)

        console은 브라우저의 개발자 도구에서 주로 사용되며, Node.js에서는 터미널에 결과를 출력한다.

      • console.group
        로그 메시지를 논리적 그룹으로 묶기 위해 사용된다.
        그룹화된 로그는 콘솔에 들여쓰기(indentation) 형태로 표현되어, 관련된 메시지를 시각적으로 쉽게 구분할 수 있다.
        console.groupEnd()로 그룹을 닫는다.

      셋째, HTML을 통해서가 아닌 node를 활용하여 외부에서 실행한다.

      VSCode의 Code Runner 익스텐션을 설치하여 VSCode 터미널에서 실행하는 것과, 맥의 경우 terminal을 직접 켜서 js파일이 있는 디렉토리로 이동하여 node HelloWorld.js와 같이 node를 통해 실행하는 것이다.

      JS 소스코드 작성 시에는 JS는 HTML과 달리 대소문자를 구분한다는 것과 줄바꿈, 띄어쓰기는 코드에 영향을 미치지 않는 다는 점을 새로 알게 되었다.

      더 알아볼만한 것

      1. Node.js에 대하여
      2. JavaScript의 여러 내장 객체에 대하여

      'Language > JavaScript' 카테고리의 다른 글

      [MJDD] 들어가며  (0) 2024.11.26
      [JavaScript] 스코프  (0) 2024.11.24
      [JavaScript] 연산자  (0) 2024.11.23
      [JavaScript] 데이터 타입  (0) 2024.11.21
      [JavaScript] 변수  (2) 2024.11.19

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바