웹 개발자 로드맵 2017 - FrontEnd편

in Devlog on Web, Bit



웹 개발자 로드맵 2017

일단 노란색으로 표시된 부분의 개념만 숙지하려고 한다.


HTML

  • Hyper Text Markup Language 의 약자

  • HTML은 여러 태그들로 구성되어 있으며 각 태그들을 사용하여 원하는 형태의 문서를 만들어 갈 수 있다.

  • 기본 골격

    <html>
<head> <title> 타이틀 </title> </head>
<bocy> 문서의 본문내용 </body>
</html>

HTML은 프로그래밍 언어가 아닙니다!


CSS

  • Cascading Style Sheets 의 약자
  • HTML 같은 문서의 스타일을 꾸밀 때 사용하는 ++스타일 시트 언어++이다.
  • HTML이 정보를 표현한다면 CSS는 시각적으로 예쁘게 꾸며주는 역할을 한다.
  • 인라인 스타일, 내부 스타일, 외부 스타일 방식으로 구현한다.


[CSS] 반응형 웹

  • 예전에는 PC로만 웹을 사용했지만 기술의 발전으로 인해 여러 플랫폼으로 웹에 접속할 수 있게 되었다. 각 플랫폼은 크기도 다르기도 하지만 휴대용 기기들은 화면이 작아 일반 PC웹 화면으로 보기 굉장히 힘들다. 이 때문에 나온 것이 반응형 웹이다.

  • 접속하는 플랫폼의 화면의 크기에 따라 보기 좋게 자동적으로 레이아웃을 조정해준다.


[CSS] Bootstrap - 프레임워크

  • 프론트 엔드 개발을 빠르고 쉽게 할 수 있는 프레임 워크이다. 각종 웹페이지에서 사용하는 레이아웃, 버튼, 입력 창 등의 디자인을 CSS와 JavaScript로 만들어 놓았고, 반응형 웹 디자인도 지원하여 디자인을 할 시간이 크게 줄어들었다.

  • 웹 디자인의 혁명 이라고 불리며 오픈소스이다.


[CSS] Sass - 전처리기

  • 문서의 구조를 깔끔하고 구조적으로 기술하는 데 사용하는 기술인 CSS의 상위에 있는 메타언어로, 자바 스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용 할 수 있도록 도와주는 일종의 CSS 전처리기

  • 웹 디자인의 혁명 이라고 불리며 오픈소스이다.

  • 사용 방법

    • SASS의 문법에 맞게 CSS를 작성하고, SASS 컴파일러를 사용하여 HTML이 이해 할 수 있는 문법으로 변환


JavaScript

  • HTML과 CSS는 정적인 언어이다. 브라우저를 통해 웹페이지를 화면에 그려주면 이 화면을 변경할 방법이 없다는 의미다. 하지만 JS는 웹페이지를 동적으로 변경해 준다.

  • 특징

    • 객체 기반의 스크립트 언어
    • 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어
    • 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 가능

[HTML, CSS, JavaScript 의 차이점 정리]

HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, JS로는 웹의 동작을 구현 할 수 있다.


[JavaScript] ES6

  • 자바스크립트가 개발된 직후, 표준 규격 없이 여러 브라우저에서 호환성 문제가 나타나자 ECMA 국제기구에서 ECMAScript Standard 라는 표준을 만들게 되었다. (해당 표준이 버전업을 하면서 현재는 ES 10까지 나와있다.)

  • 특징

    1. 기본 JavaScript에서는 var를 사용해서 변수를 선언했지만 ES6에서는 let과 const라는 키워드를 추가하였다.
      • let의 특징
        1. 블록단위 scope를 가진다.
        2. For문 등의 루프에서 for(let v…) 구문에서 v는 루프마다 새로 바인딩함
        3. Let은 선언 전부터 참조하면 에러
      • const의 특징
        • let과 동일하나 다른 점은 최초 값 할당 이후 값 변경이 불가능함 (final과 비슷)

    2. 람다식 표현이 추가됨 (=> 사용)

    3. for of 구문 등장
      for (var value of myArray) {
console.log(value);
}
    • for each와 다르게 break, continue, return 등을 통하여 루프 제어 가능
    1. class, subclass, iterator 오브젝트 사용 가능


[JavaScript] TypeScript

  • 컴파일 언어이며 정적타입 언어이다. JS는 인터프리터 언어지만, TypeScript는 컴파일 언어로 코드 수준에서 미리 타입을 체크하여 오류를 체크해낸다.

  • 특징

    1. 타입 스크립트 = 자바 스크립트 + 타입
    2. 컴파일 단계에서 타입 오류를 잡아낼 수 있고, 코드 어시스트 기능도 지원 받을 수 있다. 이것을 통해 암묵적 형변환, 호이스팅, 복잡성 문제를 해결할 수 있다. (JS의 var과 같은 자료형 대신 string, number 같은 자료형을 지정함으로써 안정성을 확보한다)

[막간지식] 컴파일러와 인터프리터의 차이점

  • 컴파일러

    1. 컴파일러는 고급 언어로 작성된 프로그램 전체를 목적 프로그램으로 번역한 후, 링킹 작업을 통해 컴퓨터에서 실행 가능한 프로그램을 생성한다.

    2. 번역과 실행 과정을 거쳐야하기 때문에 번역 과정이 번거롭고 번역 시간이 오래 걸리지만, 한번 번역한 후에는 다시 번역하지 않으므로 실행 속도가 빠르다.

  • 인터프리터

    1. 고급 언어로 작성된 프로그램을 한 줄 단위로 받아들여 번역하고, 번역과 동시에 프로그램을 한 줄 단위로 즉시 실행시키는 프로그램이다.

    2. 프로그램이 직접 실행되므로 목적 프로그램이 생성되지 않는다.

    3. 번역 속도는 빠르지만 프로그램 실행 시마다 매번 번역해야 하므로 실행속도는 느리다.


[JavaScript] npm 스크립트 – 태스크 러너

  • 반복적인 작업을 자동화하기 위해 스크립트를 사용하는데 npm 스크립트는 npm이 실행 될 때마다 새 셸이 만들어지고 스크립트 명령이 실행된다.

  • 프로젝트에서 사용하는 외부 모듈이 많아지게 되면 관리하기가 번거로워지고, 새로운 프로젝트를 진행하는 경우에 필요한 모듈이 많은 경우 패키지 수만큼 npm 명령을 사용해야 하는 번거로움이 생긴다. 이러한 경우 필요한 패키지들의 목록을 파일로 정리해놓고 목록 파일을 이용하여 단 한번의 명령어로 필요한 패키지를 모두 설치 할 수 있는데, 이것이 NPM 스크립트이다.

  • 예를 들어 package.json 등의 파일이 있다.


[JavaScript] gulp - 태스크 러너

  • node.js 기반의 task runner이다. 자동화 시스템이라고 보면 될 듯하다.

  • 요청 후 한번에 결과를 받는 것이 아니라 이벤트로 중간중간 전달받는 방식을 stream이라고 하는데, 이 stream을 기반으로 하고 있기 때문에 가장 node.js의 강점을 잘 살리고 있고 실제로 작업 속도도 비교적 더 빠른 것으로 알려져 있다.

pipe

  • gulp의 task는 pip로 연결되는데, 작업 대상 파일들이 pipe를 따라 흘러가며(stream) 병렬로 동시에 여러 task를 수행하게 된다.

  • gulp라는 이름과 빨대가 꽂힌 컵모양의 심볼이 gulp의 특징을 잘 반영하고 있다고 볼 수 있다.


[JavaScript] npm - 패키지 매니저

  • Node Packaged Manager의 약자이다.

  • 패키지란? 관리를 위해 모듈에 몇 가지 정보를 추가한 것으로 결국 모듈이지만 조금 더 큰 단위라고 볼 수 있다. 이러한 패키지들은 공유를 위해 인터넷에 올리기도 하는데 이 또한 npm을 사용해 내려받아 설치가 가능하다.

  • 패키지 매니저란? 자바 스크립트 세계에서 개 발자는 코드의 패키지를 공유하고 이를 조립하여 프로젝트를 빌드하는 도구로 패키지 매니저를 사용한다.

  • Node.js로 만들어진 패키지를 웹에서 받아서 설치하고 관리해주는 프로그램이다. (Python의 PIP, ‘Java’의 ‘Maven’과 비슷한 역할을 한다.)

  • 패키지 정의 파일을 package.json 파일이라고 한다. 해당 파일 내의 "scripts"와 "dependencies" 부분을 알아보자.

    1. "script"는 우리가 run 명령어를 통해서 실행할 것들을 적어두는 것
    2. "dependencies"의 경우는 설치할 모듈들을 의미

    이렇게 package.json 파일이 정리되면 배포를 해야할 때 파일만 같이 배포를 하면 해당 프로그램 개발에 사용되었던 모듈을 그대로 인스톨 할 수 있게된다. 인스톨은 다음 명령어로 간단하게 할 수 있다.

      npm install


[JavaScript] Yarn - 패키지 매니저

  • Yet Another Resource Negotiator의 약자 → "리소스 협상가"

  • facebook에서 만든 새로운 자바스크립트 패키지 매니저이다. 기존의 존재하는 npm과 동일한 기능을 수행한다.

  • npm이 있는데 왜 Yarn을 사용할까?

    1. npm의 한계 npm 저장소의 취약한 보안 이슈를 시작으로 패키지가 많아짐에 따라 빌드 성능이 좋지 않다는 점이 가장 큰 문제 (패키지가 중복으로 설치될 수 있다.)
    2. npm에 비해 빠른 속도
    3. 모든 패키지를 유저 디렉토리에 저장해 캐싱

    종합하자면 속도, 안전성, 신뢰성이 보장이 된다.


[JavaScript] Webpack - 모듈 로더 / 번들러

  • 규모가 큰 시스템에서는 많은 JavaScript가 존재하게 된다. 이 많은 파일을 하나의 파일로 관리하기엔 어려움이 있어 코드의 유지보수가 쉽도록 코드를 모듈로 나누어 관리할 수 있도록 하는 시스템이다. 다른 모듈 번들러도 많이 존재하지만 Webpack이 성능이 좋다.

  • WebPack이 실행되면 Dependencies Graph를 통해 필요한 형태의 하나 or 여러개의 번들이 생성된다.

  • Bundle이란?
    • 소프트웨어 및 일부 하드웨어와 함께 작동하는 데 필요한 모든 것을 포함하는 패키지
    • 각각의 모듈들에 대해 의존성 관계를 파악하여 하나 또는 여러개의 그룹으로 볼 수 있다.
  • Browsify, Grunt, Gulp 등의 도구들과의 차이점
    • 크고 복잡한 리소스들이 들어있는 프로젝트에는 Webpack을 사용하는것이 좋다.
    • Grunt, Gulp 는 오로지 리소스들에 대한 툴로 사용되며 dependency graph에 대한 개념이 없다.
    • Browsify는 비슷한 도구이지만 속도면에서 webpack이 더 좋다.
  • Webpack의 특징
    1. code splitting 거대한 클라이언트 사이드 자바스크립트를 여러 파일로 나눠 쓸 수 있게 해준다.
    2. javascript / css preprocessing -SASS나 LESS등의 CSS 전처리기는 물론, CoffeeScript, LiveScript등의 compile-to-javascript들도 설정말 잘 해 놓으면 webpack build 커맨드 하나로 빌드가 가능
    3. long term caching Webpack은 파일 내용에 종속적인 해시값을 파일 이름 뒤에 덧붙임으로서 장기 캐싱을 도울 수 있다.
    4. hot reloading 서버가 돌아가는 중에 코드에 변경 사항이 생길 때마다 그 변경사항을 즉각 반영 가능
    5. JavaScript 빌드도구인 gulp와 Grunt와 연동도 가능하다. (grunt-webpack, gulp-webpack)

© 2019. by mintheon

Powered by mintheon