잡지식창고

Vuex는 한 어플레케이션의 모든 컴포넌트에 대한 중앙 저장소 역할을 한다.

스토어는 애플리케이션의 상태를 저장/관리하는 역할을 수행한다.

Vuex는 신뢰할 수 있는 유일 정보원 패턴을 사용하는 것을 전제로 구현되었고, 여기서 사용되는 유일 정보원이 스토어다.

스토어를 구성하는 개념으로 스테이트(state),  게터(getter), 뮤테이션(mutation), 액션(action)이 있다.

스테이트(state)

스테이트는 애플리케이션의 상태를 저장하는 객체다. 

애플리케이션의 상태를 스테이트에 저장해 유일 정보원으로서의 역할을 수행할 수 있게 한다.

하지만 애플리케이션의 모든 정보를 스테이트에서 관리할 필요는 없다. 컴포넌트 안에서만 사용되는 데이터는 컴포넌트에 두는 것이 적합하다.

스테이트에 저장하는것이 적합한 데이터로는 서버에서 데이터를 받아오는 중인지 나타내는 플래그, 사용자 정보, 여러 컴포넌트에서 사용될 가능성이 있는 데이터들이 있다.

게터(getter)

게터는 스테이트로부터 다른 값을 계산해 얻어낼 때 사용한다.

컴포넌트의 computed와 같은 기능을 한다.

게터는 계산한 값을 캐싱해두고, 이 값은 해당 값을 계산하는데에 쓰인 스테이트가 바뀌지 않는 한 유지된다.

이를 통해 자주 사용되는 계산 로직을 게터로 생성해두면 퍼포먼스를 향상시킬 수 있다.

뮤테이션(mutation)

뮤테이션은 스테이트를 업데이트 할 때 사용된다.

뮤테이션만이 스테이트를 수정할 수 있기 때문에 스테이트의 상태 수정이 발생했을 때 추적이 쉽다.

뮤테이션은 동기 처리만을 담당해야한다. 만약 비동기 처리를 사용하면 스테이트 수정이 어떤 뮤테이션 호출에서 일어났는지 알기 어려워진다.

액션(action)

액션은 바로 이전에 설명한 뮤테이션과 달리 비동기 처리를 담당한다.

액션은 비동기 처리 이외에도 외부 API 통신 수행과 뮤테이션을 호출하기 위해 사용된다.

store.dispatch('액션 함수명', 전달인자) 형태로 사용한다.

액션의 함수들은 비동기처리이기 때문에 주로 콜백함수로 작성된다.

쿠키(cookie)

쿠키는 클라이언트가 서버에게 자신이 누구인지 알리는 신분증의 역할을 한다.

서버는 요청을 받을 때 이 요청만으로는 누구에게서 왔는지 알 수 없기 때문에 매 요청마다 클라이언트에 대한 정보가 담긴 쿠키를 함께 보낸다. 쿠키는 4kb의 용량 제한이 있다. 그런데, 요청을 보낼 때 마다 쿠키가 함께 전송되는데, 이 안에는 서버가 당장 필요하지 않은 정보도 함께 보내지기 때문에 그만큼의 낭비가 발생하게 된다. 그런 데이터들을 이제 로컬/세션 스토리지에 저장할 수 있게 되었고, 스토리지에 저장된 데이터는 매번 서버로 전송되지 않는다.

로컬 스토리지(local storage)와 세션 스토리지(session storage)

로컬 스토리지와 세션 스토리지는 HTML5부터 추가된 저장소이다. 용량은 기기/브라우저 별로 상이하지만, 모바일은 2.5mb, 데스크탑은 5~10mb정도의 용량을 가진다. 둘 모두 키와 밸류를 저장할 수 있다. 둘의 차이점은 로컬 스토리지는 사용자가 직접 지우지 않는 이상 브라우저에 계속 남아있게 된다. 하지만 세션 스토리지는 인터넷 브라우저의 탭을 닫는 순간 데이터가 삭제된다. 이 특성 때문에 지속적으로 필요한 정보는 로컬 스토리지에, 지속적으로 저장되어서는 안되고 일시적으로만 사용 될 정보는 세션 스토리지에 저장된다.

둘 모두 같은 메소드를 사용하며, 앞에서 설명했듯이 데이터의 유지 여부에 차이가 있다.

사용 예)

fs는 파일 시스템을 조작하는 다양한 메서드를 제공한다. 파일을 생성, 삭제하거나 폴더를 생성, 삭제할 수 있다.

util

util 모듈은 문자열 가공, 객체 형식 확인, 등 각종 편의 기능을 모아둔 모듈이다.

util.deprecate(function, message): 함수가 deprecated 되었음을 알린다. 첫 번째 인자는 해당 함수를, 두 번째 인자에는 경곡 메세지 내용이 들어간다. 함수가 사라지거나 변경될 때 알리는 기능이다.

util.promisify(callback): 콜백 패턴을 프로미스 패턴으로 바꾼다. 바꿀 함수를 인자로 제공하면 된다. 반대로 프로미스를 콜백으로 바꾸는 util.callbackify가 있다.

os모듈

자바스크립트는 운영체제의 정보를 가져올 수 없지만, 노드는 os 모듈을 통해 정보를 가져오는것이 가능하다.

os.arch() : 아키텍쳐 정보를 보여준다
os.platform() :  운영체제 플랫폼 정보를 보여준다.
os.type() :운영체제 종류를 보여준다.
os.uptime() : 운영체제 부팅 이후 흐른 시간을 보여준다.
os.hostname() : 컴퓨터의 이름을 보여준다.
os.release() : 운영체제의 버전을 보여준다.
os.homedir() : 홈 디렉터리 경로를 보여준다.
os.tmpdir() : 임시 파일 저장 경로를 보여준다.
os.cpus() : 컴퓨터의 코어 정보를 보여준다.
os.freemem() : 사용 가능한 메모리를 보여준다.
os.totalmem() : 전체 메모리 용량을 보여준다.

path 모듈

폴더와 파일의 경로를 쉽게 조작하도록 도와주는 모듈이다.

path.sep : 경로의 구분자를 보여준다. windows 타입은 \, POSTIX 타입은 /을 경로 구분자로 사용한다.
path.delimiter : 환경 변수의 구분자이다. process.env.PATH를 입력하면 여러 개의 경로가 이 구분자로 구분되어있다. Windows는 세미콜론(;), POSTIX는 콜론(:)이다.
path.dirname(__dirname) : 파일의 폴더 경로를 보여준다.
path.extname(__dirname) : 파일의 확장자를 보여준다.
path.basename(__dirname, extension) : 파일의 이름(확장자 포함)을 보여준다. 파일의 이름만 표시하고싶다면 basename의 두 번쨰 인자로 파일의 확장자를 넣으면 된다.
path.parse(__dirname) : 파일 경로를 root, dir, base, ext, name으로 분리한다.
path.format(__dirname) : path.parse()한 객체를 파일 경로로 합친다. 
path.normalize(__dirname) : /나 \를 잘못 사용(중복 사용 혹은 혼용)했을 때 정상적인 경로로 변환한다.
path.isAbsolute(__dirname) : 파일의 경로가 절대경로인지 상대경로인지 알려준다.(true / false)
path.relative(dirA, dirB) : 경로를 두개 넣으면 첫번째 경로에서 두번쨰 경로로 가는 방법을 알려준다.
path.join(__dirname, ...) : 여러 인자를 넣으면 하나의 경로로 합쳐준다. 상대경로인 부모 디렉터리와 현 위치도 자동으로 처리해준다.
path.resolve(__dirname, ...) : path.join()과 유사하지만, /를 만나면 절대경로로 인식해 앞의 경로를 무시한다. 

url 모듈

url처리에는 두 가지 방식이 있다.

노드 버전 7에서 추가된 WHATWG방식과 기존 노드에서 사용하던 방식이 있다.

두 방식의 url 구분 방법은 다음 그림과 같다.

기존 노드 방식에서는 다음 두 메서드를 주로 사용한다.

url.parse(adress): 주소를 분해한다.
url.format(object): parse로 분해되었던 url 객체를 다시 원래 상태로 조립한다.

WHATWG 방식은 search 부분을 searchParams라는 객체로 반환한다.
search부분은 주소를 통해 데이터를 전달할 때 사용되는데, ?로 시작하여 키=값 형식으로 데이터를 전달한다.
여러 키를 전달할 때는 &로 구분한다.

searchParams객체는 다음 메서드를 지원한다.

getAll(key): 키에 해당하는 모든 값들을 가져온다.
get(key): 키에 해당하는 첫 번째 값만 가져온다.
has(key): 해당 키가 존재하는지 검사한다.
keys(): searchParams의 모든 키를 반복기 객체로 가져온다.
values(): searchParams의 모든 값을 반복기 객체로 가져온다.
append(key, value): 해당 키를 추가한다. 같은 키의 값이 있다면 유지하고 하나 더 추가한다.
set(key, value): append와 비슷하다. 하지만 같은 키의 값들을 모두 지우고 새로 추가한다.
delete(key): 해당 키를 제거한다.
toString(): 조작한 searchParams 객체를 다시 문자열로 만든다. 이 문자열을 search에 대입하면 주소 객체에 반영된다.

querystring 모듈

기존 노드의 url의 search 부분을 사용하기 쉽게 객체로 만드는 모듈이다.

querystring.parse(query): url의 query 부분을 자바스크립트 객체로 분해한다.
querystring.stringfy(object): 분해된 query 객체를 다시 문자열로 합한다.

global

자바스크립트의 windows 객체처럼 global도 전역 객체이다. 따라서 호출시 생략이 가능하다. 
ex) global.require - > require

전역객체라는 점을 이용해 간단한 데이터를 파일끼리 공유할때도 사용 가능하나, 남용시 프로그램의 규모가 커짐에 따라 유지보수에 어려움이 가중된다.

console

대표적으로 로그를 출력하는 console.log 메서드가 있다. 

이 외에도 다음 메서드들이 있다.
console.time(label)/console.timeEnd(label): 같은 레이블을 가진 time&timeEnd 메소드 사이의 시간을 측정
console.error(errorMessage) : 에러를 콘솔에 표시
console.dir(obj, option): 객체를 콘솔에 표시한다. 옵션으로 색상표시, 객체의 몇 단계까지 보여줄지 등을 설정할 수 있다.
console.trace(label): 에러가 어디서 났는지 추적한다.

time

setTimeout(callbackFunc, time): 주어진 시간(밀리초 단위) 이후 콜백함수를 실행
setInterval(callbackFunc,time): 주어진 시간(밀리초 단위)마다 콜백함수를 반복하여 실행
setImmediate(callbackFunc): 콜백함수 즉시 실행

위의 세 메소드는 모두 아이디를 반환한다.

clearTimeout(ID): setTImeout을 취소
clearInterval(ID): setInterval을 취소
clearImmediate(ID): setImmediate를 취소

__filename / __dirname

__filename: 경로와 파일명까지 반환
__dirname: 경로만 반환(파일명x)

module / exports

exports객체는 module.exports와 같은 객체를 참조하기 때문에 module.exports === exports는 true다.

ex) exports.A = '가나다'

process

process객체는 현재 실행되고 있는 노드 프로세스에 대한 정보를 가진다.

process.version : 설치된 노드의 버전
process.arch : 프로세서 아키텍처 정보
process.platform : 운영체제 플랫폼 정보
process.pid : 현재 프로세스의 아이디
process.uptime : 프로세스가 실행된 후 경과한 시간(초 단위)
process.exepath : 노드의 경로
process.cwd : 현재 프로세스가 실행되는 위치
process.cpuUsage : 현재 cpu 사용량
process.env : 시스템의 환경변수 출력. 서비스의 중요한 키를 저장하는 공간으로도 이용됨.(비밀번호나 API 키)
process.nextTick(callbackFunc) : 이벤트 루프가 다른 콜백 함수들보다 nextTick의 콜백함수를 우선 처리하도록 한다.
process.exit(code) : 실행중인 노드 프로세스를 종료한다. 0이면 정상 종료, 1이면 비정상 종료