Javascript 톺아보기

자바스크립트란?

자바스크립트는 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다. 목적에 맞게 원래는 Livescript라고 불렸는데, 홍보목적으로 자바스크립트로 이름을 변경한 것이 지금까지 이어진 것이다. 

 

자바스크립트는 웹브라우저, 서버, 자바스크립트 엔진이 내장된 모든 디바이스에서 사용할 수 있다. 엔진에는 종류가 다양한데, 각 엔진마다 작동하는 환경이 다르다. 

 

브라우저에서 할 수 있는 일

자바스크립트는 실행 환경에 크게 영향을 받는다. 자바스크립트의 실행 환경 중 브라우저에는 자바스크립트 가상 머신이라는 엔진이 내장되어 있기 때문에 자바스크립트가 동작할 수 있다. 브라우저에서는 웹페이지 조작, 클라이언트와 서버의 상호작용에 관한 모든 일을 할 수 있다. 

• 페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기
• 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기
• 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기(AJAX나 COMET과 같은 기술 사용)
• 쿠키를 가져오거나 설정하기. 사용자에게 질문을 건네거나 메시지 보여주기
• 클라이언트 측에 데이터 저장하기(로컬 스토리지)

브라우저에서 할 수 없는 일

악성 웹페이지가 개인 정보에 접근하거나 사용자의 데이터를 손상하는 것을 막기 위해 브라우저에서 자바스크립트에 제약을 걸었다. 

1. 브라우저 작동 중 웹페이지로부터 내 디바이스의 파일을 함부로 읽거나 카메라, 마이크 등을 임의로 작동할 수 없다. 다만 사용자가 이를 명시적으로 허가하면 접근이 가능하다. 
2. 동일 출처 정책(Same Origin Policy) : 브라우저 내 탭이나 창은 서로 상호작용할 수 없다. 상호작용을 위해서는 특수한 자바스크립트 코드를 포함하고 있어야 한다. 
3. 1,2를 합친 개념 : 페이지를 생성한 서버와는 상호작용할 수 있으나 타 사이트나 도메인에서 해당 페이지로 데이터를 가져올 수는 없다.(2의 동일 출처 정책) 다만 모던 브라우저에선 추가권한 허가를 요청하는 플러그인이나 익스텐션 설치를 허용한다.(1의 사용자가 명시적으로 허가하면 접근이 가능함)

자바스크립트의 강점

• HTML/CSS와 완전히 통합할 수 있음
• 간단한 일은 간단하게 처리할 수 있게 해줌
• 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨

간단하게 말해서 사용하기 편하고 범용성이 높아서 널리 사용된다. 

 

또 이렇듯 자바스크립트가 널리 사용됨으로 인해 다른 언어를 사용하더라도 자바스크립트로 트랜스파일할 수 있는 언어가 많다. 마이크로소프트(TypeScript), 페이스북(Flow), 구글(Dart) 등에서 개발한 언어들이 그렇고, 이외에도 많은 프로그래밍 언어가 자바스크립트로 트랜스파일할 수 있다. 

 

Javascript 프레임워크/라이브러리 알아보기

• React
  • React의 특징은 무엇인가요?
    • Meta(이전 페이스북)에서 개발한 오픈소스 자바스크립트 라이브러리.
    • 사용자인터페이스(UI)를 작성하는 데에 특화되어 있다. 
    • 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있게 한다.
    • 컴포넌트 기반이기 때문에 독립적인 컴포넌트를 따로 떼어내고 합쳐서 프로그램을 만들 수 있다. 
  • 장점을 기술해주세요.
    • 자바스크립트 기반의 문법을 제공하기 때문에 자바스크립트를 사용할 수 있으면 react도 사용할 수 있다. 
    • UI수정과 재사용성이 좋으며, 코드 가독성을 높일 수 있다.(컴포넌트 기반)
    • 다른 프레임워크나 라이브러리와 병행해서 사용이 가능하다. 
    • 성능이 뛰어난 가비지 컬랙터, 메모리 관리 기능을 지원한다. 
    • React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있다.(자바스크립트 기반)
  • 단점을 기술해주세요.
    • IE8 이하 버전은 지원하지 않는다.
    • 자바스크립트 배경지식이 필수적이다. 
    • 로딩시간이 길다.
    • 데이터 모델링, 라우팅, Ajax 등 기능 지원이 안된다.
    • 검색 엔진 최적화 측면에서 불리하다. 
• Vue
  • Vue의 특징은 무엇인가요?
    • 프론트엔드 프레임워크
    • 보이는 부분을 짜기 위한 구조와 규칙을 제공한다. 
    • 하나의 페이지에서 동작하는 어플리케이션(SPA)을 만드는 데 적합하다. 
    • 컴포넌트 기반이기 때문에 독립적인 컴포넌트를 따로 떼어내고 합쳐서 프로그램을 만들 수 있다. 
  • 장점을 기술해주세요.
    • 양방향 데이터 바인딩(데이터가 자동적으로 반영된다.)
    • UI수정과 재사용성이 좋으며, 코드 가독성을 높일 수 있다.(컴포넌트 기반)
  • 단점을 기술해주세요.
    • 자바스크립트와 다른 자신만의 문법을 가지고 있어서 추가적인 학습이 필요하다. 
    • 로딩시간이 길다.
•  Next.js
  • Next.js 란 무엇인가요?
    • 풀스택(프론트엔드&백엔드) 웹 어플리케이션을 구축하기 위한 React 프레임워크
    • react로 만든 UI에서 추가기능과 최적화를 수행한다. 
  • 왜 React와 함께 사용하나요?
    • React의 로딩시간이 길다는 단점이 치명적이기 때문에 Next.js로 보완할 필요성이 있기 때문이다.(하이브리드 렌더링)
    • 이외에도 React에서 지원하지 않는 여러 기능들을 사용할 수 있게 해주는 역할을 수행할 수 있기 때문이다. 
  • Next.js 를 사용했을때 어떤 장점이 있나요?
    • 하이브리드 렌더링을 지원하여 로딩시간을 개선할 수 있을뿐만 아니라 검색 기능 최적화가 가능하다. 
    • 기존에 지원하지 않는 여러 기능들을 사용할 수 있게 해주어서 React를 통해 더 많은 기능을 가진 웹페이지를 만들 수 있게 된다.