Wanna be a thinker

개요

'스코프(Scope)'는 변수의 범위를 의미한다.

Scope의 종류

1. 전역(Global)

2. 지역(Local)

  2.1. 함수(function)

  2.2. 블록(block)

Scope의 예제

// 전역
const a = 111;

// 지역(함수)
function sayNumber() {
    const a = 1;
    console.log(a);
}

sayNumber();	// 출력 : 1

console.log(a);	// 출력 : 111

자신의 지역 내에 변수가 없는 경우 ScopeChain을 통해 해당하는 변수를 전역 스코프에서 찾는다.

// 전역
const a = 111;

// 지역(함수)
function sayNumber() {
    console.log(a);
}

sayNumber();	// 출력 : 111

기존 var의 경우, 함수 스코프를 가졌기 때문에 함수 내에서만 지역 변수가 유지되는 문제가 있었다.

하지만, ES2015(ES6)에서 let, const 키워드의 추가로 함수가 아닌 일반 블록에서도 지역변수를 선언할 수 있게 되었다.

// 전역
const a = 111;

// 지역(블록)
{
    const a = 1;
    console.log(a);	// 출력 : 1
}

console.log(a);	// 출력 : 111

출처 : medium.com/@yeon22/javascript-%EC%8A%A4%EC%BD%94%ED%94%84-scope-%EB%9E%80-bc761cba1023

개요

ESLint란 ES(EcmaScript 즉, JavaScript)와 Lint(에러가 있는 코드에 표시를 달아놓는 것)의 합성어이다.

사용자가 정의한대로 코드를 점검, 에러가 있으면 표시해주고 또한 코딩스타일을 정할 수 있는 도구이다.

장점

1. 문법 에러를 잡아준다.

2. 코딩스타일을 정해 팀 단위로 작업해도 한 사람이 코드를 작성한 듯한 결과를 낸다.

3. 다양한 플러그인을 사용할 수 있어 손쉽게 다른 회사나 사람의 설정을 도입할 수 있는 확장성이 있다.

출처 :

velog.io/@jiwon/ESlint

www.zerocho.com/category/JavaScript/post/583231719a87ec001834a0f2

용어

컴파일(Compile) : 인간이 작성한 소스코드를 기계가 이해할 수 있는 머신코드로 변환하는 것이다.

트랜스파일(Transpile) : 다른 실행 환경에서도 동작하도록 같은 언어를 유지한 채 소스 코드의 형태만 바꾸는 것이다.

개요

JavaScript의 트랜스파일러(Transpiler)이다. 아래의 변환 대상으로 작성한 JavaScript 코드를 ES5 이하의 문법으로 변경하여, 최신 문법을 지원하는 환경과 그렇지 않은 환경 양 쪽에서 잘 동작하도록 해준다.

사용하는 이유

JavaScript 언어의 문법은 빠르게 진화하지만 정작 실행 환경은 이를 받쳐주지 못하는 경우가 많다.

실행 환경인 브라우저의 경우 종류가 다양하고 어떤 브라우저가 어떤 문법을 지원하는지 일일이 파악하기가 힘들 정도이고, 노드(NodeJS)의 경우에도 버젼별로 지원하는 언어나 문법이 다르다.

개발자가 JavaScript ES6 이상의 최신 문법으로 작성한 코드는 일부 실행 환경에서 작동하지 않기 때문에 모든 환경에서 돌아가도록 보수적으로 예전의 ES5 이하 방식으로 코드를 작성해야 하는 문제를 겪는다.

변환 대상

ES6 이상의 최신 문법, TypeScript나 JSX로 작성된 코드 등

특징

Babel은 단독으로 사용되기도 하지만 규모가 큰 프로젝트에서는 Webpack이나 Rollup같은 번들러(bundler)와 함께 사용되거나 프레임워크의 일부로 포함되기도 한다.

출처 : www.daleseo.com/js-babel/

용어 정리

- 유기적 : 많은 조직, 요소 등이 모여 하나를 이루고 서로 긴밀히 연관되어 서로 떼어 낼 수 없는 (것).

- 뷰의 반응성 : 뷰가 데이터 변화를 감지했을 때 자동으로 화면을 다시 갱신하는 특성이다.

- 컴포넌트 : 화면의 영역을 일정한 단위로 쪼개어 재활용 가능한 형태로 관리하는 것이다.

개요

상태 관리 패턴이자 라이브러리이다.

상태관리란?

여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 패턴을 의미한다.

상태관리의 필요성

- Vue는 컴포넌트를 조합하여 화면을 구성한다.

- 한 화면에 많은 컴포넌트를 사용함에 따라, 컴포넌트 간 통신이나 데이터 전달을 유기적으로 관리할 필요가 있다.

상태관리 패턴으로 해결할 수 있는 문제란?

- 일반적으로 App의 규모가 커지면 다음과 같은 문제가 발생한다.

1) 뷰의 컴포넌트 통신 방식인 props, event emit 때문에 중간에 거쳐야 할 컴포넌트가 많아지는 것.

2) 위의 문제를 피하기 위해 EventBus를 사용함에 따라 컴포넌트간 데이터의 흐름을 파악하기 어려워 지는 것.

- 위의 문제들을 해결하기 위해 모든 데이터 통신을 한 곳에서 중앙 집중식으로 관리하는 것이 상태 관리이다.

Vuex 구성 요소

1. state : 여러 컴포넌트간 공유할 데이터를 정의한 것이다.

2. getters : state를 컴포넌트에서 취득할 시, 복잡한 로직을 거치지 않도록 getter 메소드를 vuex에 정의한 것이다.

3. mutations : state 값을 변경(state 관리)하는 로직으로 setter 메소드를 vuex에 정의한 것이다.

4. actions : 비동기 처리 로직들을 vuex에 정의한 것이다.

폴더 구조화 & Name Spacing

규모 있는 복잡한 앱 제작 시, getters, mutations, actions의 이름을 유일하게 정하지 않으면 namespace 충돌이 난다.

이에 다음 두 가지 방법이 있다.

(1) 네임스페이스를 구분하기 위해 types.js로 각 속성의 이름들을 빼고 store.js와 각 컴포넌트에 import하여 사용.

(2) 혹은 modules라는 폴더로 만들어 각 단위별로 파일을 쪼개서 관리.

핵심 요약

1. vuex는 컴포넌트간 데이터 전달, 이벤트 통신을 중앙 집중식으로 관리하기 위한 라이브러리이다.

2. vue는 컴포넌트를 조합하여 화면을 만들고, 컴포넌트 간 복잡한 데이터 전달을 관리하기 위해 vuex를 사용한다.

3. vuex의 구성요소 중, state는 데이터의 보관, getters는 데이터의 취득 로직, mutations는 데이터의 갱신 로직,

   actions는 비동기 처리 로직을 담당한다.

출처 : 

joshua1988.github.io/web-development/vuejs/vuex-start/

joshua1988.github.io/web-development/vuejs/vuex-getters-mutations/

joshua1988.github.io/web-development/vuejs/vuex-actions-modules/

개요

자바스크립트 객체로 DOM의 모양을 잡아 놓고, 화면 렌더링 횟수를 최소화하여 브라우저의 부하를 줄이는 기술이다.

기존의 렌더링

화면의 DOM을 추가하거나 삭제하는 등의 변경이 일어날 때 마다 화면을 다시 그린다.

개요

뷰 프로젝트를 생성하기 위한 명령어 도구이다.

전제조건

- Node.js LTS 버전이 설치되어 있어야 한다.

CLI 설치 방법

프로젝트 생성 방법

웹 애플리케이션 실행 방법