WEB FE

vue 프로젝트를 시작하며 알게된 VSCode 의 Syntax Highlight 적용 방법을 기록한다.

.vue 파일에 .html 파일에서 적용되는 기본 Syntax Highlight 을 적용하기 

1. setting.json 파일열기

F1 키 > 커맨드 창에 Preferences:Open Settings(JSON) 검색 > settints.json 파일 열림

2. settings.json 에 files.association 설정추가

{
    "workbench.colorTheme": "Default Dark+",
    "terminal.integrated.defaultProfile.windows": "Command Prompt",
    
    // 라인6 의 코드추가
    "files.associations": {"*.vue":"html"},
    
    // 기타
    // 1. ctrl 키 + 마우스 wheel 이벤트로 폰트 확대/축소
    "editor.mouseWheelZoom": true,
 }

* IDE : visual studio code

* OS : windows 10 pro

1. node 설치 

아래의 경로에서 본인 환경에 맞는 파일을 다운로드

nodejs.org/ko/download/

2. node 와 npm 을 전역설치

(생략) 만약, [VSC] 이 시스템에서 스크립트를 실행할 수 없... 관련 에러가 발생하면 아래 링크를 참고 ↓↓↓↓↓

3. Express 설치

1 > vsc 를 원하는 경로로 설정 후 오픈하고,

     프로젝트를 자동으로 생성해 줄 express-generator 를 전역설치

npm install express-generator -g

2 > 설치할 프로젝트 이름 및 파일확장자 설정

express 프로젝트이름 --view=템플릿엔진

/**** or *****/

express --view=템플릿엔진 프로젝트이름

템플릿 변경없이 바로 프로젝트를 생성하는 경우는  express 프로젝트이름  을 실행하면 된다.

그러나, 템플릿 종류가 많기 때문에 선택하여 사용하는 것을 추천한다.

• Jade (기본템플릿)
• Pug
• EJS : Embedded JavaScript
• Handlebars

3 > 프로젝트에 기본 npm 패키지 설치

cd 프로젝트명 // 프로젝트 위치로 이동
npm install

4 > 프로젝트 실행

// D:\Users\20201207\프로젝트명> 
npm start

폴더 기본구조

=========================

프로젝트명

ㄴbin

    ㄴ  www 

ㄴ node_modules

ㄴ public

ㄴ routes

ㄴ views

app.js

package-lock.json

=========================

추가 >

* 폴더별 역할

bin/www - 코드실행 port 

public/* - image, javascript, stylesheet 등의 웹 소스

routes/* - 라우팅 ( 애플리케이션 url 정의, 클라이언트 요청 및 응답 ) 관련 소스

views/* - 클라이언트단 ( 템플릿 ) 관련 소스 

app.js - 미들웨어 함수 관련 소스

* localhost:3000 이외의 port 로 접속하려는 경우

bin/www 파일을 열고, 아래의 line:15 중 '3000' 을 원하는 port 로 변경한다.

vue 개발을 시작하기 위해 vsc 설치부터 vue 프로젝트 생성 중에 마주한 난관을 아래 링크의 은인이 구제해주셨다.

출처링크① : singa-korean.tistory.com/21

난관은 vsc 설치 -> npm 설치 -> vue -g 설치 및 프로젝트를 꾸릴 폴더를 지정한 후

vue 프로젝트를 생성하기 위해 vsc 터미널에 vue -v 스크립트를 실행했을 때 발생했다.

처음에는 powershell 설정이 잘못되었나 싶어

vsc 터미널 우측 상단의 1.powershell 지정 터미널을 Select Default Shell 선택 ->

Windows Powershell 로 지정 -> 스크립트를 실행했으나 터미널 설정은 문제가 아니었다.

결론은 아래의 설명처럼 Windows Powershell 에서의 실행권한 ExecutionPolicy 문제였다.

Execution Policy 는 Powershell 보안정책의 일부로 스크립트 실행의 조건? 을 설정할 수 있다.

내 컴퓨터는 이 Powershell 의 설정이 기본값으로 되어있었고,

기본값 설정은 스크립트를 수행할 수 없는 상태이다.

여튼 그 설정을 Set-ExecutionPolicy RemoteSigned 명령으로 평화롭게 해결했다.

Windows Powershell 의 자세한 내용은 MS 설명서에 있는 아래의 링크를 참고하면 된다.

출처링크② : docs.microsoft.com/ko-kr/previous-versions/windows/powershell-scripting/hh847748(v=wps.640)?redirectedfrom=MSDN

( 참고용 이미지. 출처는 출처링크①  )

오버헤드 Overhead

[사전적 정의]

- 시스템의 제어 프로그램이 시스템 자원을 위해 대기하는 시간.

- 특정한 목표달성을 위한 간접적 추가적인 시간, 메모리, 대역폭 혹은 다른 컴퓨터 자원 말함.

- 시스템에서의 목적효과를 얻기위해 본질적인 것은 아니지만 요구되는 작동, 또는 그로인해 필요한 자원.

[개발자 정의]

- 개발자에게 오버헤드란 프로그램 개발 시의 알고리즘, 인코딩, 데이터형, 데이터구조 등을 선택할 때 각각의 선택 시의 본질적이진 않지만 추가로 고려해야 하는 작동과 자원이다.

- 본질적인 것은 아니기때문에 오버헤드는 시스템, 기계 마다 달라질 수 있고 Big O 표기 (알고리즘 복잡도 표기 중 하나) 는 오버헤드 값은 생략한다.

[예시]

- HTML 문서에 포함된 리소스(Imag, Css), Js 파일들의 양에 비례하여 대기시간이 길어지는데, 이 다수의 파일에 대한 대기시간도 오버헤드이다.

- WebPack 과 같은 모듈번들러는 변경이 적은 파일들, 일정 크기 이상의 파일들에 대한 Code Splitting 을 통해 요청/응답 시간에 대한 오버헤드를 줄인다.

Global 객체의 특성

> 글로벌 객체 (Global Object) 는 DOM 구조 내에서 아래와 같은 특징을 갖는다.

• 단 하나만 유일하게 존재하며 어떠한 컨텍스트가 실행 이전에 먼저 생성된다.
  • 컨텍스트 실행 이전에 글로벌객체가 먼저 생성된다는 이유로
    무분별한 글로벌 객체 선언이 로드 퍼포먼스에 영향을 주지 않을까 하여 찾아본 결과,
    퍼포먼스 영향에 대한 부분은 함수 내에서의 로컬변수 선언에 대한 글이 더 많았다.
     
       1) 속도에 미약하게 영향은 줄 수 있으니 글로벌 변수를 되도록 로컬 변수로 선언하기
       2) 스크립트 영역의 오염 (독립적이지 않는 변수의 충돌 등) 을 막기 위해 되도록 사용하지 않기

• 글로벌 객체는 내부적으로 생성자가 없으며 new 생성자로 이용할 수 없다. 
  • 해당 이유는 추가적으로 확인해 봐야겠다.

• 글로벌 객체는 내부적으로 함수가 없으며, 글로벌 객체를 함수로 호출할 수 없다.
  • new 생성자로 이용할 수 없는 이유와 연관이 있는 것 같으나 추가적인 확인이 필요하다.

• 글로벌 객체의 prototype 은 구현 방법에 따라 달라질 수 있다.

• 글로벌 객체는 DOM 환경에서 window 속성을 가지고 있으며, 이것이 글로벌 객체 자체를 나타낸다.
  • 이 이유로 글로벌 객체로 선언한 값을 window 객체 내에서 찾아볼 수 있다.

Global 객체 재정의 방법

> 글로벌 객체 선언 후, window 객체 내의 hasOwnProperty() 메소드로 객체를 재정의할 수 있다.

<script>
	var testObject = true;
    window.hasOwnProperty("testObject") = false;
</script>

Global 객체 포함, 효율적인 변수 선언법

> 변수는 함수 시작 전에 하나의 자료형으로 묶어서 표현해야 한다.

• 초기화 시의 실수 최소화
• 변수를 선언한 스코프에서 사용하고 있는 변수에 대한 관리용이
• minify 최적화
  
  

BEFORE 

<script>
	function testFn(flag) {
    	if(flag) {
        	...
            var testObj1, testObj2, testObj3 = null;
			...
        }else {
        	...
        	var testObj4 = null;
            ...
        }
    }
</script>

AFTER

<script>
	function testFn(flag) {
    	//함수 시작 시 모든 변수를 자료형에 묶어서 정의
    	var testObj1, testObj2, testObj3, testObj4 = null;
    	if(flag) {
        	...
            testObj1 = ...
			...
        }else {
        	...
        	testObj4 = ...
            ...
        }
    }
</script>

>

간단한 코드 입력 시에는 비효율적인 방식일 수 있다.

그러나 코드의 양이 방대하고 복잡한 경우

느슨한 타입 (loosely type), 동적언어의 특성을 가진 자바스크립트의 변수를 한데 묶어 정의하면
  1) 초기화의 실수를 막을 수 있고,

변수가 선언된 스코프 진행 시 변수를 한번에 초기화 하는 이점으로 
  2) 변수의 관리가 용이 하며,

방대한 js 파일을 min 파일 변환 시에 묶어서 선언한 변수가 한데 나열되어 있으므로
  3) minify 에 최적화할 수 있다.

도움을 주신 글입니다. 감사합니다.

> 참고URL : https://pjh3749.tistory.com/132

* 기초적이고 중요하지만 자주 까먹는 데이터 단위를 암기하자

데이터 용량 단위 Digital Storage Units 란?

> 컴퓨터의 데이터를 표현하는 방법이다. 보통 데이터 용량 단위는 bits(b), bytes(B), kilobytes(KB) 그리고 megabytes(MB) 로 표현되며, 이 단위들이 저장 시스템을 구성하고 저장 단위를 나타내게 된다.

> 컴퓨터는 이진법(binary) 의 숫자 0과 1로 하드 드라이브와 같은 저장 공간에 통신하여 정보를 저장한다. 단위에서의 비트(bit) 는 binary digit 의 줄임말로 이진법에서의 각 수를 뜻하게 된다. 즉, 컴퓨터 조작을 포함한 Digital Storage 의 운용은 바이트의 집합으로 이루어지며, Digital Storage 에 저장 시 파일의 용량을 용이하게 표현하기 위해 다양한 데이터 용량 단위가 필요하게된 것이다.

> 참고URL : https://www.canto.com/blog/digital-storage-units/

데이터 용량 단위 Digital Storage Units 정리

> 참고URL : https://bit.ly/2x7FQOO

데이터 단위변환 계산기 Digital 

> https://bit.ly/2vwGll4

> https://bit.ly/390fHyS

JSX ?

> Javascript + (extension) XML / HTML 

위의 사진에서 JSX 코드에 해당하는 부분은 아래와 같다.

const element1= <h1>Hello, {formatName1(name1)}!</h1>;