Node.js / npm / yarn 이해
Node.js란?
우리는 기존에 웹 애플리케이션을 만들기 위해 브라우저 상에서 HTML, CSS, JavaScript 언어를 사용했다.
JavaScript 언어를 실행하기 위해서 우리는 매번 브라우저를 이용해야만 했다.
하지만 이러한 불편한 점을 개선해 내 로컬 환경에서도 JavaScript 언어를 실행하기 위해 Node.js가 만들어졌다.
공식문서에는 Node.js를 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임(환경) 이라고 설명하고 있다.
간단하게, Node.js란 JavaScript를 실행할 수 있는 프로그램이라고 볼 수 있다.
Node.js가 만들어지기 전 브라우저만이 JavaScript 실행기였다면, Node.js가 만들어 진 후에는 JavaScript 실행기가 하나 더 만들어진 것이다.
npm이란?
Node Package Manager로 Node.js 기반에서 실행될 수 있는 모듈(프로그램보다 작은 단위의 기능들)을 관리하는 관리자를 뜻한다.
많은 개발자들이 자신이 만든 모듈, 라이브러리 등을 공유하기 위해 npm 사이트(공개 저장소)에 등록해 놓았고, 우리는 필요할 때 마다 이 모듈들을 가져와 사용함으로써 개발에 쓰이는 시간을 단축할 수 있게 되었다.
npm 사이트를 들어가보면 다른 사람들이 만들어놓은 소스코드들을 무료로 다운받아 개발할 때, 사용할 수 있다.
yarn이란?
페이스북이 자체 개발한 것으로 npm과 같은 역할을 하는 JavaScript 패키지 매니저.
성능(속도)과 보안 이슈를 보완한 JavaScript 패키지 매니저라고 볼 수 있다.
Node.js로 JavaScript 파일 실행하기
class 폴더에서 시작
codecamp-backend-class → class 폴더 안에 section01 폴더를 생성 후 그 안에 01-01-token 폴더를 새로 만들어 줍니다.
그 안에 qqq.js 파일을 만들고, 첫번째 코드를 작성해보자.
이미지와 같이 console.log()를 작성했다.
여태까지 우리는 브라우저에서만 콘솔을 확인할 수 있었다.
그런데 지금은 브라우저가 따로 없다. 이 때, Node.js 를 이용하는 것이다.
VSCode에서 터미널을 열어보면
현재 우리는 codecamp-backend-class 폴더 위치에 있는 것을 확인할 수 있다.
명령어를 이용해서 01-01-token 폴더로 이동해보자.
먼저 터미널에서 ls 라고 입력해보면, 현재 위치에서의 파일 목록을 볼 수 있다.
여기에서 class 폴더로 이동하려면 cd class 라고 입력해 주면된다.
다시 ls 를 입력 해보면 section01 폴더가 있다는 것을 알 수 있다.
이번에는 cd section01를 이용해 이동해 주자.
다시 ls 를 입력 해보면 01-01-token 폴더가 있다는 것을 알 수 있으며,
폴더 안으로 이동하려면 마찬가지로 cd 01-01-token 명령어를 입력해 이동할 수 있다.
드디어, 원하는 폴더 안으로 들어왔다.
앞서 설명했듯이, 이곳은 브라우저가 아니기 때문에 Node를 이용해서 자바스크립트 파일을 실행해야한다.
실행방법은 자바스크립트 파일이 있는 폴더의 위치에서 node [파일명]를 입력하면 해당 파일을 실행할 수 있다.
이를통해 브라우저가 아닌 환경에서 자바스크립트 파일을 실행할 수 있다.
Node.js로 토큰 생성 API 만들어보기
지금부터 핸드폰 번호와 토큰의 자리수를 입력받아,
- 휴대폰 번호의 자릿수가 맞는지 확인하고
- 인증 토큰을 원하는 자릿수 만큼 만들고
- 핸드폰 번호에 토큰을 전송하는
함수 createTokenOfPhone를 만들어 최종적으로 토큰 생성 API를 만들어서 nods.js 로 실행해보자
먼저, section01 내부에 01-02-token-api 폴더를 새로 만들고, 그 안에 index.js 파일을 만든다.
index.js 파일 안에 API와 실행코드를 일단 껍데기만 만들어준다.
// index.js
// API 만들기
function createTokenOfPhone(qqq){
}
// API 실행하기
createTokenOfPhone("01012345678") - API를 실행할 때, 휴대폰 번호를 인자(argument)로 받아서 매개변수(parameter)인 qqq로 들어가게 된다.
함수가 실행되었을 때, 동작하는 로직을 지금부터 작성해 보자
만들려고 하는 기능 3가지 중에 1번을 먼저 작성해 보자.
- 휴대폰 번호의 자릿수가 맞는지 확인하고 <-- 현재
- 인증 토큰을 원하는 자릿수 만큼 만들고
- 핸드폰 번호에 토큰을 전송하는 API
넘겨 받은 휴대폰 번호가 10자리 보다 작거나, 11자리 보다 크면 에러가 발생했음을 알려주고 함수를 종료하려고 한다. (early exit pattern)
조건에 따라 달라지니까 if문을 사용하여 만들어보자
// 1. 휴대폰번호 자릿수 맞는지 확인하기
// 핸드폰 번호의 길이가 10 보다 작거나 11보다 크다면
if (qqq.length < 10 || qqq.length > 11) {
// 에러 메세지를 콘솔에 출력
console.log('에러 발생!!! 핸드폰 번호를 제대로 입력해 주세요!!!');
return; // 함수 종료
}이렇게 작성된 코드를 createTokenOfPhone 함수 안에 적어보자.
// index.js
// API 만들기
function createTokenOfPhone(qqq) {
// 1. 휴대폰번호 자릿수 맞는지 확인하기
if (qqq.length < 10 || qqq.length > 11) {
console.log("에러 발생!!! 핸드폰 번호를 제대로 입력해 주세요!!!");
return;
}
// 2. 핸드폰 토큰 6자리 만들기
// 3. 핸드폰번호에 토큰 전송하기
}
// API 실행하기
createTokenOfPhone("01012345678");- 이로써 1번째 단계를 끝마쳤다.
2번째 기능은 이미 옛날에 getToken 함수로 구현한 적이있다.
- 휴대폰 번호의 자릿수가 맞는지 확인하고
- 인증 토큰을 원하는 자릿수 만큼 만들고
- 핸드폰 번호에 토큰을 전송하는 API
이전에 만들어 놓은 토큰 생성 함수(getToken 함수)의 코드를 그대로 가져와 createTokenOfPhone 함수에 복사 붙여넣어 재사용하자.
// index.js
// API 만들기
function createTokenOfPhone(qqq) {
// 1. 휴대폰번호 자릿수 맞는지 확인하기
if (qqq.length < 10 || qqq.length > 11) {
console.log("에러 발생!!! 핸드폰 번호를 제대로 입력해 주세요!!!");
return;
}
// 2. 핸드폰 토큰 6자리 만들기
const result = String(Math.floor(Math.random() * 1000000)).padStart(6, "0");
console.log(result);
// 3. 핸드폰번호에 토큰 전송하기
}
// API 실행하기
createTokenOfPhone("01012345678");- 이로써 2번째 기능을 완성했다.
마지막으로 핸드폰 번호에 토큰 전송하기 부분은 실제로 핸드폰으로 토큰을 전송하지 않고, 결과값이 콘솔에만 출력되도록 코드를 작성해서 확인해보자.
// index.js
// API 만들기
function createTokenOfPhone(qqq) {
// 1. 휴대폰번호 자릿수 맞는지 확인하기
if (qqq.length < 10 || qqq.length > 11) {
console.log("에러 발생!!! 핸드폰 번호를 제대로 입력해 주세요!!!");
return;
}
// 2. 핸드폰 토큰 6자리 만들기
const result = String(Math.floor(Math.random() * 1000000)).padStart(6, "0");
console.log(result);
// 3. 핸드폰번호에 토큰 전송하기
console.log(qqq + "번호로 인증번호" + result + "를 전송합니다!!!");
}
// API 실행하기
createTokenOfPhone("01012345678");- 이로써 3번째 기능까지 모두 완성했다.
Node.js로 토큰 생성 API 실행 실습
터미널에서 01-02-token-api 폴더로 이동하여 node index.js 명령어로 파일을 실행해보면
위와 결과값처럼 매번 다른 token값이 출력하게 만들어 createTokenOfPhone API 를 완성시켰다.
