다시 수정할것!
매개변수와 전달인자 다시 공부할것
==, === 의차이 느슨한 비교와 엄격한 비교의 차이
엄격한 비교는 주소값까지 비교한다.
암시적 형변환을 알아야 더깊숙이 알 수있을거 같다.
산술 연산자, 느슨한 비교 연산자, 이중 부정을 사용할 때 자동으로 암시적 형변환을 수행한다. 음.. 느슨한 비교 연산자의 암시적 형변환만 알면 될거 같은데 일단 모두 공부해두자.
<section1 01-01-token>
토큰 문자열 특정길이의 숫자를 토큰이라 할 수 있다.
인증번호 토큰을 만들어본다.
그전에 기본적으로 html.css.javascript로 했지만 앞으로 대부분의 내용에선 브라우저 없이 node.js로 수업을 한다.
node.js??,npm?? Yarn?? 이들이 무엇인가??
기존엔 html, css,javascript를 브라우저가 읽고 띄었다.
문제는 다른 언어 개발자 java,python개발자들은 게임,메크로,엑셀등 javascript로는 할 수 없는걸 한다. 하지만 홈페이지를 만들땐 무조건 javascripta를 이용해야했다. 그러다보니 개발자중 javascript를 못하는 사람이 거의없게되었고 이걸가지고 게임 엑셀 메크로 브라우저 없이 만들수 있는걸 해보면 어떨까?라는 생각에서 javascript실행프로그램이 생겼다.그게 node.js이다. 이덕분에 브라우저 없이 javascript를 실행시킬수 있게 되었다.
개발은 하나부터 열가지 다 만들지 않고 무료로 다운받아 내프로젝트에 갖다쓰는 문화가 있다.이 문화 덕분에 시간을 아낄 수 있었다. Java는(MAVEN,GRALE)로 공유하고 함께만들었고,python는(PYPI)로 공유하고 함꼐만들었다. 그런게 javascript도 생겼다. npm(node pakage Manager)이다. javascript에는 npm으로 공유하고 함께 개발을 한다.
기존에 GitHub.com 는 소스코드를 업로드 하는곳 이다, 뿐만 아니라 다른 사람의 소스코드도 다운로드 받을수 있다. 단,git을 설치해야 가능하다.
Git push(업로드),git clone(복사)를 vscode의 터미널에서 실행하면 저 기능을 실행할수 있다.
이런게 npmjs.com에도 있다. 내가 기능을 만들어 올릴수 도있다. 다른사람의 기능도 다운받을수 있다.
vscode에 npm을 설치하고 npm publish 로업로드하고,npm install로 다운로드한다. node.js 설치시 자동으로 npm을 설치한다.
Npm은 느리다고 페이스북에서 대체제인 yarn을 직접만들었다. npm install 기능과 Yarn add 기능은 같은 의미이다. 단, Yarn은 설치해야한다.
Yarn install -g 하면 내컴퓨터 전체에 설치한다라는의미이다. 이때 g는 Global을 의미한다.
<안녕하세요 hello world 실습>
CLI 명령어???
우리가 폴더를 더들클릭해서 폴더를 만들고 삭제한다.이방식을 GUI (graphic user interface)이라한다. 하지만 명령어로 폴더를 만들고 삭제하고 할수 있다.
이를 CLI(command line interfacce)라하고 이는 명령어로 통해서 작업을 할 수 있다. 개발자라면 CLI에 더 친숙해야한다.
(vscode터미널이랑 맥의 터미널은 완벽히 같다.)
어디서 폴더를 만들지 위치를 확인하는 명령어가 있다. pwd(print working directory) 이다. directory는 폴더를 의미한다. 현재 일하고 있는 폴더를 말해줘라라는 의미이다. 여기서 폴더를 만들고 싶다면 mkdir(make directory)로 폴더를 만들다. 목록을보는 명령어 ls 는. LIST의 약자이다.
폴더인지 파일인지확인하고 숨어 있는 파일인지 알고 싶다면 ls -al 을 이용한다.
이때 d가 붙어 있다면 이는 폴더이다. d는 디렉토리의 약자이기 때문이다.
class를 복사하여 class3를 만든다. cp는 copy의 약자이다.
cp class class3
cp: class is a directory (not copied). 이런 오류가 생김 폴더안의 폴더,파일 등 모든것을 순환하며 몽땅 복사해야 복사가된다. Recursive의 약자 -r 는 명령어를 사용한다.
지우고 싶다면 remove의 약자 rm을 사용한다.
지울때는 옵션 rf를 사용한다.
통상적으로 소문자를 사용한다. 대문자를 사용해도 문제는 없지만 소문자를 쓴다.
r만해도 되지만 rf를 하는 이유는 f로 안지워지는 폴더를 강제로 제거하기 위해서 이다.
실행할땐 node라는 명령어로 사용한다. Node — version 이때 현재위치에 실행할 파일이 있어야 가능하다. 그래서 pwd로 현재위치를 파악하고 명령어를 사용한다.
cd(change directory)라고 한다. 폴더 이동시 이명령어를 사용한다.
/는 생략가능하다.
cd ../ 한칸 올라갈때 사용한다.
<핸드폰 인증번호 만들기 실습>
//함수를 실행시키는 방식
function getToken() {
// Math.random()0부터 9까지의 임의의 수를 만든다.
// Math.floor(Math.random() 1000000); 에러가 생길수 잇음
//0.001234562435이런 숫자면 에러가 생김 문제는 001이라는 수는 없다.
// 4글자만 남겨진다.
//이때String(Math.floor(Math.random() 1000000)).padStart(6, "0")
//로 해결한다.
const result = String(Math.floor(Math.random() * 1000000)).padStart(6, "0");
console.log(result);
}
// 실제로는 한줄이다.
getToken();
function getToken(){const result = String(Math.floor(Math.random() * 1000000)).padStart(6, "0");console.log(result);} 이렇게 작성할 수 있다. 우리가 보기에 여러줄로 보일 뿐이다.
<01-02-token1>
api는 함수다.데이터베이스에 인증번호가 저장된다.
벡엔드 개발자로서 해야하는일이 api를 만드는 일이다.
인증번호요청api-함수,인증완료api-함수,가입하기api-함수, 기능만큼 api가 있다고 생각하자. 지금은
아래는 대략적인 작동순서이다.
버튼클릭시 벡엔드 함수 실행->인증번호를 핸드폰에 날려주고,핸드폰 번호를 받아와서 인증번호를 보내준다.
인증완료버튼 클릭시 인증완료 api실행-> 인증번호와 받은 번호를 같은지 다른지 비교 같으면 true 아니면 false반환한다. 그리고 데이터 베이스에 저장한다.
가입하기를 누르면 이메일을 데이터베이스에 저장시켜준다.
벡엔드의 필요성,정말 필요할까? ㅡ없어도 되지않나?,꼭 거쳐야하나?, 브라우저에서 바로 db에 저장하면 안되나?
꼬필요하다.데이터를 검사해야 하기 때문이다.
벡엔드의 주역할이 데이터 검증이다. 조건들을 검증하고 데이터베이스에 저장한다.
브라우저에는 자바스크립트 코드가 노출되어있어 소스코드를 고칠수 가 있다. 이점에서 안전에 취약하다. 다공개가 되고 고칠수 있다면 예상할 수 없는 오류가 넘쳐날 것이다.
벡엔드는 검증,보안,안전이 최우선생각하는 영역이다.
벡엔드 덕분에 소스코드가 노출되지 않는다.
<인증번호 발급 api 만들기 실습>
TIP
index는 시작을 의미한다. 그래서 보통 파일 첫번째이름으로 쓰인다.
if문의 긍정을 쓰는법 부정을 쓰는 법이있다.
긍정대신 부정을 써주어 에러를 먼저 떨어트려준다.
Return 하면 함수가 종료된다. return을 만난면 아래족은 실행되지않는다.
이를 Early-exit 패턴이라 한다.
//안좋은 예
// function createTokenOfPhone(qqq) {
// //qqq는 매개변수(parameter)라한다
// //핸드폰 번호가 넘어가서 함수가 실행되어야함
// //1.휴대폰번호 자리수 맞느닞 확인하기(10자리~11자리)
// if (qqq.length >= 10) {
// if (qqq.length <= 11) {
// //2.아니면 에러를 보내준다 맞다면 인증번호 6자리 핸드폰 토큰 6자리 만들기
// const result = String(Math.floor(Math.random() * 1000000)).padStart(
// 6,
// "0"
// );
// console.log(result);
// //3.핸드폰 번호에 토큰 전송하기 (뒤에서 한다.)
// console.log(qqq + "번호로 인증번호" + result + "룰 전송합니다.");
// } else {
// console.log("에러발생!!! 핸드폰번호를 제대로 입력해주세요");
// }
// } else {
// console.log("에러발생!!! 핸드폰번호를 제대로 입력해주세요");
// }
// }
//좋은 예
function createTokenOfPhone(qqq) {
//qqq는 매개변수(parameter)라한다
//핸드폰 번호가 넘어가서 함수가 실행되어야함
//1.휴대폰번호 자리수 맞는지 확인하기(10자리~11자리)
if (qqq.length < 10 || qqq.length > 11) {
console.log("에러발생!!! 핸드폰번호를 제대로 입력해주세요");
return; //Early-exit 패턴
}
//2.인증번호 6자리 핸드폰 토큰 6자리 만들기
const result = String(Math.floor(Math.random() * 1000000)).padStart(6, "0");
console.log(result);
//3.핸드폰 번호에 토큰 전송하기 (뒤에서 한다.)
console.log(qqq + "번호로 인증번호" + result + "룰 전송합니다.");
}
createTokenOfPhone("01012345678");
//소괄호 안에 들어가는 것을 여기선 "01012345678"이 인자(argument)라 한다.
