자바스크립트는 독립적 언어가 아닌 ‘스크립트 언어’입니다. 스크립트 언어는 필수적으로 동작가능하게 하는 프로그램이 요구됩니다. 웹 브라우저에서는 HTML/CSS/JS는 자유롭게 사용할 수 있습니다만 ... stylus, BABEL, EJS 등 여러가지 유용한 모듈(도구)를 사용하기에는 제약이 있습니다.
그래서 Node.js가 개발되었습니다. JavaScript가 웹브라우저로부터 독립할 수 있도록 말이죠!
Node.js는 한 가지 언어로 전체 Web page를 만들 수 있게 했습니다.
GitHub에서 JavaScript를 언어순위 1위로 만든 일등공신이라고도 할 수 있겠습니다.
Node.js의 특징
1) 내장 HTTP 서버 라이브러리
2) Non Blocking I/O
3) 싱글 스레드(Single Thread)
4) 이벤트 기반(Event-driven)
Node.js 설치방법
1. 직접 설치
2) 좌측 짝수버젼을 다운로드해서 실행시키면 끝
짝수버젼(LTS) : 안정적이고 신뢰도가 높습니다. (권장)
홀수버젼(최신) : 최신기술을 사용할 수 있지만 안정적이지 못하고 업데이트가 잦을 수 있습니다.
2. nvm을 사용하여 설치
nvm을 설치해 Node.js의 지속적인 버젼관리를 편리하게 할 수 있습니다.
1) Google에 nvm을 검색해 github.com 사이트에 접속합니다.2) 해당 사이트 아래를 내려가다보면 보이는 Installing and Updating 를 클릭합니다.3) 빨간 표시된 부분을 복사해줍니다.4) VScode나 mac terminal에서 붙여넣고 Enter 누릅니다.
5) 해당 버젼이 뜨면 nvm 설치 끝6) nvm install로 최신 버젼을 깔고, nvm ls로 현재 상태를 확인할 수 있습니다.
(nvm 사용 명령어)
$ nvm install 18.12.0
// 18.12.0 버젼 설치
$ nvm ls
// nvm 현재 상태 확인
$ nvm --version
// nvm 현재 버젼 확인
$ nvm use 12.14.0
// 12.14.0 버젼 사용 (협업 등을 위해 버젼 맞추기)
HTML과 CSS, JavaScript는 웹 페이지를 구성하는 요소로 각각의 맡은 바 역할이 있고, 서로 유기적으로 상호작용합니다.
[각자 맡은 역할]
HTML(Hyper Text Markup Language) : 웹 구조를 이룬다.
CSS(Cascading Style Sheets) : 웹 시각적 요소를 적용한다.
JS(JavaScript) : 웹의 동적 처리를 수행한다.
그러면 따로 떨어져있는 각 파일들은 어떻게 연결될 수 있을까요?
1개의 디렉토리 내 3개의 각 파일들
HTML - CSS 연결하기 (CSS 선언 방식)
HTML에 CSS를 적용(선언)하는 방법은 크게 3가지가 있습니다.
내부 스타일시트
외부 스타일시트
인라인 스타일
아래 예시를 보며 살펴보겠습니다.
내/외부 스타일시트 및 인라인스타일
1. 내부 스타일시트 : <style> ~ </style>
내부 스타일시트는 html에 <style> 태그를 직접 넣어서 스타일을 작성하는 방법입니다.
빠르고 간편하게 스타일을 적용할 수 있지만, 해당 html문서만 스타일을 적용할 수 있어 코드가 길어지면 유지관리가 어려워집니다.
2. 외부 스타일시트 : <link />
외부 스타일시트는 <link /> 태그를 넣어 외부에 있는 CSS 파일을 가져오는 방법입니다.
@import를 사용해 직렬적으로 여러 CSS 파일을 적용할 수 있지만 CSS가 적용되는 시간이 늦어져 권장하지 않는 방법입니다.
많은 css 파일을 적용할 경우 병렬형태로 적용하고자 하는 CSS를 <link />로 가져오는 것이 좋습니다. - 권장 방법!
3. 인라인스타일
인라인스타일은 요소의 style 속성에 직접 스타일을 작성하는 방법입니다.
선택자가 없어 편리해보이지만, 인라인스타일의 CSS 우선순위가 높아 유지보수에 어려움을 겪을 수 있습니다.
(향후 CSS 우선순위에 대해 알아보겠습니다.)
권장하는 방법 : <link> tag
HTML - JavaScript 연결하기 (JS 선언 방식)
HTML에 JavaScript를 연결(선언)하는 방법은 다음과 같습니다.
인라인스타일
<head>에 .js 연결
<body> 끝에 .js 연결
<script>에 ansync / defer 속성 사용
1. 인라인스타일 : <script> ~ </script>
CSS 인라인스타일과 같이 HTML 문서 내에서 <script> 태그로 바로 JS를 적용할 수 있습니다.
간단하게 원하고자 하는 부분에 JS를 적용할 수 있지만, CSS와 마찬가지로 JS가 복잡해지면 HTML의 가독성을 떨어뜨릴 수 있습니다.
2. <head>에 .js(외부 자바스크립트) 연결
가장 대중적으로 쓰이는 방법입니다. DOM을 따라 반드시 순서대로 실행되어야 하는 경우 사용합니다. 순서 : .html 렌더 -> JS파일 로드 및 실행 -> 남은 html 렌더 및 실행 단점 : JS가 무거울수록 웹페이지 로드 시간이 오래 걸린다.
3. <body> 끝에 .js 연결
1번 방법에서 단점을 보완한 방법입니다. <head>가 아닌 <body>태그 내에서 외부 JS파일을 가지고 옵니다. 순서 : .html 모두 실행 후 JS파일 로드 및 실행 단점 : JS의 동작이 많을수록 원하는 모양의 페이지를 한번에 불러올 수 없다.
4. <script>에 ansync / defer 속성 사용
ansync와 defer로 script를 불러오는 방식을 비동기방식이라고 합니다.
비동기 방식은 왜 생겨났을까요?
일반적인 스크립트 로드 순서
일반적으로 브라우저는 HTML 파일을 렌더한(읽고난) 후 위에서부터 순차적으로 한줄씩 해석합니다.
그러다 script(JS)를 만나면, 그 즉시 해당 script를 다 해석하기 전까지 나머지 HTML 렌더를 일시적으로 멈춥니다.
그러면 다음과 같은 문제가 발생합니다.
무슨 문제가 있을까? 직접 실행시켜보자.
1) 스크립트가 동작하지 않음 : 표시된 첫번째 스크립트(console.log)는 DOM에 <div> 엘리먼트가 부착되기 전에 접근하려 했기 때문에 동작하지 않습니다. 두번째 console.log 위에 <div> 엘리먼트가 부착되었기 때문에 두번째 스크립트는 정상적으로 작동합니다.
새로운 문제!
2) 홈페이지 멈춤 현상 : 만약 main.js를 읽는 시간이 20초가 필요하다고 가정해보겠습니다. 위와 같이 main.js를 읽는 도중 DOM 파싱이 멈추기 때문에 20초간 웹페이지는 멈춰있는 듯 보여 사용자에게 불편한 경험을 초래합니다. 이를 해결하기 위해 <body>태그 맨 마지막에 넣는 방법이 생겼지만, 이 역시 20초간 js파일을 해석한 뒤 웹페이지가 동작하기 때문에 해결되었다고 볼 수 없습니다.
이렇게 브라우저가 스크립트 파일을 병렬로 불러오는 방식으로 DOM렌더 과정을 막지 않게 선언하는 방법이 고안되었고,
코딩 컨벤션(Coding Conventions) : 코드를 어떻게 표기할 것인지에 대한 규약 (a.k.a. 스타일 가이드)
프로그래머마다 코드를 짜는 스타일은 다양합니다만, 나 혼자만의 프로젝트가 아닌 실무에서는 협업이 필수적입니다.
여러 사람이 수천 줄의 코드를 짜고, 리뷰하고 보수합니다. 그런데 수백, 수천만의 사람이 어떠한 규칙도 없이 코드를 짜게 되면 어떻게 될까요?
사람들은 점차 유지보수와 코드리뷰에 어려움을 겪었습니다. 그래서 '코드를 이렇게 작성하자' 라는 취지로 질서를 만들기 시작했습니다. 현재는 변수 이름을 어떻게 작성해야 할 지부터 하다못해 중괄호의 위치 등 세세한 부분까지 합의된 가이드를 정립했고, 이를 코딩(코드) 컨벤션이라고 부르기로 했습니다. 물론 70억명이 되는 인구를 통합할 수 없기에 기업별로 조금씩 다른 부분은 있습니다. (그래서 좋은 기업의 가이드를 찾는 것이 좋습니다. 그리고 규칙을 무조건적으로 따를 것이 아니라 좋은 제안이라고 생각하는 자세가 필요합니다.)
NAVER는 한국 최고의 IT회사 중 하나이며, 코딩 컨벤션을 github에 공개하고 있습니다. 실제로 Airbnb의 가이드를 거의 따르고 있다고 명시해 놓았는데, Airbnb는 영어로 컨벤션을 제공하다보니 익히는 데 어려움이 있었습니다. 한국에서 자바스크립트를 공부한다면 NAVER 컨벤션을 공부해보는 것도 좋을 것 같다는 생각이 들었습니다.
