TILJavascript

javascript-study-01

TIL, Web, coding, javascript

JavaScriptBanner

JavaScript Study 01

  • 용어
  • OT
    • 프론트 엔드 개발자가 하는 일
    • 웹페이지 vs 웹어플리케이션
    • 프론트엔드 개발에 필요한 기술
    • 초심자가 경험하는 3가지 개발의 어려움
  • 프로그래밍이란
  • 아스키코드 , 유니코드
  • 컴파일러
  • interpreter
  • Syntax , Semantics
  • 자바스크립트


용어 - ( 러버덕 )

  • 플랫폼 : 어플리케이션이 동작하는 환경.
  • 아스키 코드
  • 유니 코드
  • 컴파일러
  • 인터프리터
  • JavaScript VS ECMAScript

OT


마음가짐

프론트 엔드 개발자가 하는 일

  • 애플리케이션을 사용하는 사람( 유저 )이 애플리케이션과 소통하기 위한 창구( User-Interface )를 사용하기 좋게 구현한다.
  • UI는 상태는 정보를 서버로 전송하기도 하고 서버의 데이터를 가져와서 UI에 표시한다.
  • 웹 어플리케이션은 웹 브라우저에서 작동됨.
  • 브라우저가 직접 실행하는 언어는 JavaScript가 유일하다.
  • 디자이너, 백엔드 개발자와의 협업. ( Tool의 학습이 중요하다. )

웹페이지 vs 웹어플리케이션

  • 웹페이지 : 정적 , 단순 정보제공.
  • 웹어플리케이션 : 동적 , 정보제공 과 더불어 데이터흐름이 이루어진다.

프론트엔드 개발에 필요한 기술

  • HTML : tags & attributes, Sementic web
  • CSS : Layout(float , flex , grid), transition/animation, 반응형 웹 , Preprocessor(Sass, Less, Stylus, PostCSS), CSS방법론, CSS 프레임워크
  • 크로스브라우징
  • JavaScript : ES5 , ES6 , ES Next , 클라이언트 사이드 웹 API( DOM/Event , Ajax ), 동작원리(브라우저, 자바스크립트 엔진), node.js
  • HTTP
  • Tools : Git / Webpack / Babel / ESLint / npm …
  • Library / Framework : SPA(Angular, React, Vue.js), TypeScript, jQuery, Lodash, Axios…
  • TDD(Test Driven Development) : karma / jasmins, mocha, chai
  • 알고리즘 / 자료구조

초심자가 경험하는 3가지 개발의 어려움.

  1. 개발자가 하는 말을 이해하기가 힘들다. -> 배경지식 : 기본적인 Computer Sience 지식 / 용어에 대한 이해 / 기본상식
  2. 어떻게 만들어야 할 지 감조차 오지 않는다. -> 문제해결 능력 : 문제가 무엇인지 알아채야함. 알고리즘 자료경험.
  3. 어떻게 만들어야 할 지는 알겠는데 막상 코딩이 안된다. -> 공부부족.

프로그래밍이란?

프로그래머가 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션


아스키 코드 , 유니코드

아스키코드 : 0과 1의 조합으로 사람이 이해할 수 있는 문자와 숫자의 조합. 1Byte / 경우의수 256개

유니코드 : 2Byte / 국제표준


컴파일러

사람의 언어를 컴퓨터가 이해할 수 있도록 변형 시켜주는 일종의 번역기.

전체적인 코드를 한번에 번역해준다.

컴파일이라는 과정을 필요로 한다.


interpreter

사람의 언어를 컴퓨터가 이해할 수 있도록 변형 시켜주는 일종의 번역기.

사람이 적어놓은 코드 내용을 한줄, 한줄씩 컴퓨터가 이해하도록 동시 통역한다.

자바스크립트는 interpreter이다.

즉, 우리가 짠 코드를 브라우저한테 주면 브라우저가 한줄 한줄씩 통역해줄 것이다.

컴파일러보다는 느리다. 단 컴파일 과정이 별도로 필요하지 않다.


Syntax & Semantics

  • Syntax : 프로그래밍 문법.
  • Semantics : 말 그대로 문장의 의미.

프로그래밍 문법을 잘 안다고하여 코딩을 잘 하는 것이 아니다.

반드시 문법(Syntax) 와 의미(Semantics) 을 맞게 구성하여야 한다.

예를 들어보자.

1
2
3
const number = 'string';

console.log(number * number); // NaN

위는 문법(Syntax)에는 전혀 문제가 없다.

하지만 의미상으로는 매우 이상하다. number라는 의미의 변수에는 누가보아도 숫자가 들어갈 것이라고 예상했지만, 이상하게 문자열이 들어가있으며 심지어 그 문자열을 서로 곱하는 연산을 취하고 있다. 정말로 이상한 의미를 지니고 있다.

위와 같은 예제로 보아 문법과 더불어 의미를 지켜가며 코딩을 해야만 한다.


자바스크립트

브랜던 아이크가 개발한 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량의 프로그래밍 언어.

컴파일이 실행되는 언어가 아닌 브라우저에서 즉시 통역하는 인터프리터 언어이다. 브라우저들만의 특징을 이용하여 인터프리터의 단점인 느린속도를 조금이나마 보안하였고, 명령형, 함수형, 프로토기반 객체지향 프로그램을 내포하는 멀티 패러다임 프로그래밍 언어(프로토타입 기반의 객체 지향 언어)


자바스크립트 와 ECMAScript

자바스크립트는 ECMAScript보다 더 큰 개념이다.

ECMAScript에서 설계되어있는 모든 문법 규정들을 포함한 언어를 JavaScript 라고 한다.

ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공한다.

자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대(core)를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API,


Ajax

자바스크립트를 이용해서 서버와 브라우저가 비동기적으로 데이터를 교환할 수 있는 통신기능.

이전의 웹 페이지는 서버로부터 HTML을 전달받아서 웹페이지를 전체적으로 렌더링 하는 방식이었다. 따라서 화면 내부에 있는 사소한 움직임까지도 전부 서버로부터 HTML에게 전달받아서 웹페이지를 다시 렌더링해야되는 정말로 불편한 구조였다. Ajax의 등장은 이러한 부분을 크게 해소하였다. 페이지 전체를 렌더링하지 않고 필요한 부분만 다시 그리는 방식이 가능해진것이다. 또한 데스크탑 애플리케이션과 유사한 빠른 퍼포먼스와 부드러운 화면 전환까지 가능하게되면서 기존의 패러다임을 크게 부셔주는 역할을 하였고 이는 자바스크립트에 대한 인식을 바꿔주는 큰 계기가 되었다.


jQuery

DOM 을 보다 쉽게 제어가 가능하고 , 크로스 브라우징을 해결해주는 라이브러리.

등장 당시에는 크로스브라우징 이슈 , 자바스크립트의 러닝 난이도 해소등의 이유로 인해 정말로 많이 사용되었던 기술이지만, 현재는 점점 사용률이 줄어들고 있는 추세이다. 이유는 예전에는 HTML이 바뀌게 되면 javascript가 영향을 받게되었는데 현재에는 HTML이 바뀌게 되면 javascript가 영향을 받지 않게되었다. ( Component Based Development 방법론 ) 하지만, CBD방법론은 보통 대규모 프로젝트나 큰 프레임워크( React.js , Vue.js , Angular.js )를 이용할때 사용하게된다. 따라서 소규모 프로젝트나 경험으로 해보기에는 매우 좋은 라이브러리.


V8 자바스크립트 엔진

자바스크립트로 웹 애플리케이션을 구축하려는 시도가 늘어가면서 보다 빠르게 동작하는 자바스크립트 엔진이 요구됨.

따라서 구축된 것이 구글에서 개발한 V8 자바스크립트 엔진.


Node.js

자바스크립트는 원래 웹 브라우저에서 작동을 한다.

Node.js는 자바스크립트가 웹브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용되게 하는 범용 프로그래밍 언어.


SPA 프레임워크

Single Page Application 의 줄임말, 진짜 말그대로 .html 페이지가 단 1개만 존재하며 필요한 구성부분을 모두 Component로 제작하여 사용한다. 이는 재사용성에 큰 기여를 한다.


Share