DAY - 01

공부 저장소·2021년 4월 17일
js개발

WILT [ What I Learn Today ]

목록 보기
1/17
post-thumbnail

앞으로의 다짐

이유

학교에서 가르쳐주던 것만 배우던 내가 스스로 배우는 길로 가려고 한다.
혼자서 그냥 하면 계속 재미도 없을 뿐더러 쉽게 포기할 것 같아 이렇게 기록을 남겨 복습도 할 수 있고 그 날의 공부를 되새길 수 있는 방향을 잡고 싶었다.

현재 내 모습

우선 이전에 배웠던 것 중에서 Java / HTML5 / CSS3 정도만 내가 할 수 있던 것 같다.
내가 하고 싶은 분야는 웹 프론드엔드이기 때문에 HTML CSS 후에 가장 중요한 JS를 시작으로 웹 개발 코딩과 코딩테스트에 필요한 JS의 지식을 쌓아보고자 한다.

다짐

앞으로 해당 글을 작성할 때 쓰는 md(Markdown) 또한 공부하며
매일이 아니더라도 공부를 하는 날에 해당 Velog에 나의 공부 기록을 남기며
Markdown을 할 시간이 없더라도 우선 plain text로 남기고 나중에 Markdown으로 마크업하는 것처럼 꾸준함을 더 신경써야겠다.

마지막으로
내가 지은 이 Velog 이름인 거북이 개발자의 기록처럼 느리지만 차근차근 해 나아가고 싶다.

개발 환경 조성

개발 환경은 현재 있는 나의 노트북에 HTML과 CSS 공부를 위해 설치해준 VSCode로 진행을 하기로 하였다.
JS에 관련된 Extension들을 보고 설치를 해두어 JS 개발 환경을 조성하였다.
이 후에 토이 프로젝트 등등에 필요한 Extension들은 차차 설치해 나아가야겠다.

JS란

JS(Java Script/이하 JS)의 궁극적인 목표는 웹 페이지에 생동감을 불어 넣는 것이다.

통상 JS로 작성한 프로그램들을 스크립트(Script)라고 부르며 이 스크립트는 웹페이지의 마크업 언어는 HTML 안에 작성할 수가 있는데
사용자의 요청으로 서버에서 웹페이지를 불러올 때 HTML 안에 스크립트가 자동으로 실행된다.

스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고 실행도 가능하다.

JS는 브라우저뿐만 아니라 서버에서도 실행할 수 있다. 이 외에도 자바스크립트 엔진(JavaScript engine)이라 불리는 특별한 프로그램이 들어 있는 모든 디바이스에서도 동작한다.

브라우저에서 가능한 일

2015년에 나온 ECMASCript 2015와 그 이후의 판을 구현한 JS인 모던 자바스크립트로 얘기를 시작한다.
모던 자바스크립트는 우선 안전한 프로그래밍 언어이다.
메모리나 CPU같은 저수준 영역의 조작을 허용하지 않는다.
애초에 이러한 접근이 필요치 않도록 브라우저를 대상으로 만든 언어이기 때문이다.

또한 JS의 능력은 실행 환경에 상당한 영향을 받는다.
브라우저가 아닌Node.js 환경에선 임의의 파일을 읽거나 쓰고 네트워크 요청을 수행하는 함수를 지원한다.

브라우저 환경에서는 웹페이지 조작, 클라이언트와 서버의 상호작용에 관한 모든 일과 아래의 일들을 할 수 있다.

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

브라우저에서 불가능한 일

브라우저에서는 보안을 위해서 JS의 기능에 제약을 걸어놓았다.
이런 제약은 악성 웹페이지에서 개인 정보에 접근하거나 사용자의 데이터를 손상 시키는 것을 막기 위하여 만들어졌다.

제약사항은 아래와 같다.

  • 웹페이지 내에 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때에 제약을 받을 수 있다. 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막았기 때문이다.

    모던 브라우저를 사용하면 파일을 다룰 순 있지만 기본적으로 접근은 제한되어 있다. 파일을 다룰 수 있는 법은 사용자가 브라우저 창에 파일을 드랍하거나 HTML의 input 태그를 통해 파일을 선택할 때와 같이 특정 상황에서만 파일 접근을 허용한다.

    카메라나 마이크 같은 디바이스와 상호작용 하려면 사용자의 명시적인 허가가 있어야 한다. 자바스크립트가 활성화된 페이지라도 사용자 몰래 웹 카메라를 작동 시켜 수집한 정보를 국가안보국과 같은 곳에 몰래 전송할 수 없다.

  • 브라우저 내에 탭과 창은 대개 서로의 정보를 알 수 없다. 그런데 JS를 사용하면 한 창에서 다른 창을 열때는 예외가 적용된다. 하지만 이런 경우에도 도메인이나 프로토콜, 포트가 다르다면 페이지에 접근할 수 없다.

    이런 제약사항을 '동일 출처 정책 (Same Origin Policy)'이라 부른다. 이 청책을 피하려면 두 페이지는 데이터 교환에 동의해야 하고 동의와 관련된 특수한 JS 코드를 포함하고 있어야 한다.

  • JS를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고받을 수 있다. 하지만 타 사이트나 도메인에서 데이터를 받아오는 것은 불가하다. 가능하다 할지라도 원격 서버에서 명확히 승인을 해줘야 한다.(HTTP 헤더 등을 이용) 이 역시 보안을 위해 만들어진 제약사항이다.

브라우저 환경 밖, 예를 들어서 서버라면 이러한 제약은 존재하지 않을 것이지만 모던 브라우제선 추가 권한 허가를 요청하는 플러그인이나 익스텐션 설치가 허용된다.

자바스크립트만의 강점

자바스크립트엔 다양한 장점이 있지만 여기선 세가지만 언급해 보도록 하겠다.

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

이 세 가지 모두를 지원하는 브라우저 연관 기술을 JS뿐이다.
이런 특징 때문에 JS는 브라우저 인터페이스를 만들 때 가장 널리 사용되고 있다.
이 외에도 JS를 이용하여 서버나 모바일 앱 등을 만드는 것도 가능하다

자바스크립트 '너머의' 언어들

자바스크립트 문법은 모든 사람의 요구를 충족시키진 못한다. 사람마다 각기 다른 기능을 원하기 때문이다.

프로젝트마다 요구사항이 천차만별이기 때문에 이는 당연한 현상이다.

이로 인해 근래엔 브라우저에서 실행 되기 전에 자바스크립트로 트랜스파일(transpile, 변환) 할 수 있는 새로운 언어들이 많이 등장했다.

최신 툴을 사용하면 트랜스파일을 빠르고 명확하게 수행할 수 있다. 최신도구는 JS 이외의 언어로 작성한 코드를 ‘보이지 않는 곳에서’ 자바스크립트로 자동 변환해준다.

자바스크립트로 트랜스파일이 가능한 언어 몇 가지를 소개하자면 아래와 같다.

  • CoffeeScript는 자바스크립트를 위한 'syntactic sugar’입니다. 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성할 수 있습니다. Ruby 개발자들이 좋아합니다.
  • TypeScript는 개발을 단순화 하고 복잡한 시스템을 지원하려는 목적으로 '자료형의 명시화(strict data typing)'에 집중해 만든 언어입니다. Microsoft가 개발하였습니다.
    TS로 웹 개발을 하는 것이 현 나의 최종 목표이다.



요약

  • JS는 브라우저에서만 쓸 목적으로 고안돼 시작했지만 현재는 브라우저 외에 다양한 환경에서도 사용되고 있다.
  • 오늘 날에 JS는 브라우저 환경에서 가장 널리 사용되는 언어로 자리매김하였다. HTML / CSS와 완전히 통합이 가능하다.
  • JS로 트랜스파일을 할 수 있는 언어가 굉장히 많다. 각 언어마다 고유한 기능을 제공하는데 JS를 숙달한 뒤에 이 언어들을 도전해야겠다.




출처

내용 : https://ko.javascript.info/intro
썸네일 제작 : https://www.canva.com/

profile
공부 저장소
https://github.com/WonseoYang
다음 포스트

DAY - 02

0개의 댓글