[웹 프로그래밍(풀스택)]DB 연결 웹 앱(자바스크립트 이해)

이번 장에는 백엔드 학습이 주로 이룰 것으로 보인다. 가장 중요한 것은 데이터베이스라고 한다. 먼저 시작하기 전 자바스크립트에 대한 이해를 하고 가자. 나 또한 자바스크립트를 처음 배우는 것이라 많은 걱정이 되지만 하나씩 해나가면 될 것이라 믿는다. 부스트코스 학습을 이어나가기 전에 자바스크립트에 대한 이해도가 전무하니 먼저 유튜브에 강의를 쳐봤다. 제일 먼저 나오는 강의 하나를 듣고 시작해보자. 다음은 내가 들었던 강좌이다.

https://www.youtube.com/watch?v=KF6t61yuPCY 

1. 자바스크립트 변수

자바스크립트에서 변수는 var, let, const로 선언할 수 있다. 어떤 것을 사용하냐에 따라 scope라는 변수의 유효 범위가 달라진다. 이 표현은 어려우니, 먼저 var로 변수를 선언하자.  var는 기본적으로 변수를 선언하는 것이다. 기본적으로 JavaScript에서는 만약 한 변수를 두 번 선언하면 맨 뒤에 선언한 값이 할당이 된다. 앞에서 선언한 값은 사라지기 때문에 이를 방지하기 위하여 let으로 변수를 선언하는 것이다. let을 사용하여 선언하고 다시 let을 사용하여 선언해주면 콘솔 창에 이미 선언된 변수라고 에러가 발생하게 된다. 만약 앞에서 let을 선언하고 뒤에 let이 아닌 var로 선언하면 덮어쓰기가 가능하다. const는 변하지 않는 값이다. 만약 const로 선언한 변수를 덮어쓰려고 하면 에러가 발생하게 된다.

다음은 몇가지 변수를 선언하는 몇 가지 규칙이다.

1. 변수는 문자와 숫자, $와 _만 사용

2. 첫 글자는 숫자가 될 수 없다.

3. 예약어는 사용할 수 없다.(예약어란 앞에서 이용한 let, const class 등 프로그램 내에서 이미 사용하고 있는 문자들이다)

4. 가급적 상수는 대문자로 표현해야 한다(ex const MAX_SIZE = 99;)

5. 변수명은 읽기 쉽고 이해할 수 있게

2. 자바스크립트 자료형

문자열

문자열은 "", '', `` 이 세가지로 감싸줘서 사용할 수 있다. 만약 문자열 안에 쌍따옴표 혹은 따옴표를 사용하고 싶다면 만약 따옴표를 사용할거면 쌍따옴표로 감싸주면 된다. 만약 따옴표로 감싸줄거면 문자로 인식해야 할 따옴표 앞에 \(역 슬레시)를 써주면 된다. 백틱(`)은 문자열에 변수를 삽입하고 싶을 때 사용하면 된다.

var name = "Mike";
var message = `My name is ${name}`;

이런식으로 사용하면 메세지를 띄울 때 My name is Mike가 나온다.

숫자형

숫자는 var age = 30; 이런식으로 소수점 또한 사용 할 수 있다. 연산 또한 가능하고, 우선순위를 표현하기 위해서는 ()을 사용하면 된다. 수학 연산자는 +-*/을 사용하면 된다. 0으로 나누게 되면 Infinity가 출력된다. 만약 문자열을 숫자로 나누면 NaN(Not a Number)가 콘솔창에 뜨게 된다.

Boolean

논리 구조를 나타내고, true는 참, false는 거짓이다.

OR 연산자(||)는 다음과 같이 사용된다.

null과 undefined

null은 존재하지 않는 값, undefined는 값이 할당되지 않았다는 것을 의미한다.

typeof 변수를 사용하여 변수의 자료형을 알아낼 수 있다. 

3. 대화상자

alert-알려주는 역활

prompt-입력 받음

confirm-확인을 바음

alert 같은 경우에는 위에 뜨는 알림이다. 사용자가 확인을 누를 때까지 뜨게 된다. prompt는 값을 입력 받을 때 사용하게 된다. 만약 취소를 누르게 되면 변수에는 null값이 들어가게 된다.

const name = prompt("이름을 입력하세요 ");
alert("환영합니다, "+ name + "님");

다음과 같이 작성하면 알림창으로 이름을 입력하라는 칸이 주어지고 이름을 입력하면 이름 변수(name)에 따라 알림 상자가 나오게 된다. 또한 prompt에서는 두 번째 인수를 통하여 default값을 줄 수 있다. 

const name = prompt("이름을 입력하세요 ", "2022-01-:);
alert("환영합니다, "+ name + "님");

위와 같이 작성하게 되면 입력 창에 이미 "2022-01"이 입력되어 있다. 

confirm은 단어 그대로 사용자로부터 확인을 받는 것이다. alert와 비슷한 창이 나오지만 confirm은 확인과 취소가  있다. 만약 확인을 누르면 true값이 변수로 들어가게 되고, 취소를 누르면 false 값이 들어가게 된다.

const isAdult = confirm("당신은 성인입니까?");

이러한 화면의 단점은 스크립트가 일시 정지되고 스타일링을 할 수 없다는 것이다.

형 변환

String()->문자형으로 변환

Number()->숫자형으로 변환

Boolean()->불린형으로 변환

문자형과 숫자형을 더하면 문자형으로 바뀌게 된다. 이럴 때 숫자형으로 바꿔야 하기 때문에 사용된다. prompt입력으로 들어오는 값은 문자형이다. 입력을 받으면 형변환을 해주는 것이 좋다. true는 숫자형으로 바꾸면 1이고, false는 0이 된다. Boolean 안에 값으로 0, ""(빈 문자열), null, undefined, NaN이 들어가면 false로 바뀌게 되고, 그 외에는 전부 true값을 가진다. 

Number(null) //0이 된다
Number(undefined) //NaN이 된다

여기서 주의해야할 점은 다음과 같다

Number(0) //false
Number('0') //True
Number('') //false
Number(' ') //true

4. 비교 연산자, 조건문(if, else)

비교 연산자 같은 경우에는 파이썬과 같다. 평소에 사용하는 비교 연산자와 다른 점은 =은 ==으로 대체되고, ~가 아니다는 !=이다. if문 같은 경우에는 자바와 문법이 같다.

if(age >19){ //if 괄호 안에 들어가는 값은 무조건 boolean의 값을 가진다. 안에 값이 참이면 이  조건문이 실행된다.
	console.log('환영합니다.');
}
else{
	console.log('안녕히 가세요.');
}

5. 논리 연산자

OR(||) -하나라도 true면 true, 둘 다 false면 false

const name = "crong";
const myname = name || "defaultname"

이 뜻은 name이 있으면 myname에 name을 할당하고 없으면 "defaultname"을 사용하라는 뜻이다. OR 연산자는 왼쪽에 있는 조건이 성립이 되면 오른쪽을 아예 확인하지 않는다. 

AND(&&) - 둘 다 true여야 true. 하나라도 false면 false

AND는 첫 번째 false를 발견하는 순간 멈추게 된다. 이러한 원리 때문에 논리 연산자에서 조건의 순서가 중요하다. 가장 많이 검색하는 범위를 줄일 수 있는 조건을 맨 앞에 높는 것이 속도 면에서 우월하다. 예로 들어 운전면허가 있고 시력이 좋은 여군을 찾으려고 할 때, 운전면허는 전체의 80%, 시력이 좋은 군인은 전체의60%, 여군은 전체의 7%라고  해보자. 이러면 여군인데 시력이 좋고 운전면허가 있는 사람 순으로 검색하는 것이 속도면에서 제일 우월하다. 이미 93%의 사람이 맨 처음 조건문에서 걸러지기 때문이다. 

NOT(!) -true와 false를 반대로 바꿔준다.

비교 연산자는 괄호()를 이용하여 우선순위를 통해 조건을 설정할 수 있다. 

6. 반복문

for문

for(let i = 0; i < 10; i++){
//반복할 코드
}

기본적인 문법은 자바와 유사하다. 

while문

let i = 0;
while(i < 10){
	i++
}

while문 또한 자바와 유사하다

do...while

let i = 0:
do{
//코드
	i++
}while(i < 10)

do..while문과 while문은 다 똑같지만 do..while문은 do괄호 안에 있는 코드가 최소한 한번은 돌아간다는 차이가 있다. 다른 언어와 같이 반복문을 멈출 수 있는 방법은 break과 continue가 있다.

7. Switch

switch(평가){
	case A:
    	//A일때 코드
    	case B:
    	//B일 때 코드
    ...
 }

Switch문과 if else문은 사실상 똑같다. 허나 여러 가지 경우의 수가 있을 때 모두 if else if else문으로 나타내기 번거롭기 때문에 사용된다.  이 또한 다른 프로그래밍 언어에 있기 때문에 넘어가겠다.

8. 함수

이미 가지고 있는 내장 함수로 console, alert, prompt 등이 이미 있다. 어떠한 기능을 수행하는 함수를 선언하려면 다음과 같이 작성하면 된다

function sayHello(name){
	console.log(`Hello, ${name}`);
}

function(함수 선언) sayHello(함수명) (name)(매개변수)의 서순으로 작성하면 된다. 전역 변수와 지역 변수에 대한 개념은 다른 언어를 공부했다면 알 수 있는 내용이다. 자바스크립트에서도 함수 내에서는 웬만하면 지역 변수를 사용하는 것이 좋다고 한다. 함수 내에서 선언된 지역 변수는 전역 변수의 영향을 받지 않는다. 위에서 사용한 OR 비교연산자를 응용하여 보자

function sayHello(name){
	let newName = name || 'friend':
    let msg = 'Hello, ${newName}';
    console.log(msg);
}
sayHello(); //"Hello, friend"
sayHello('Jane'); //"Hello, Jane"

 

 

함수에서의 반환은 return을 사용한다.

function add(num1, num2){
	return num1+num2;
}
const result = add(2, 3);

위 결과로는 result에 2와 3을 더한 값인 5가 들어가고,  만약 아무것도 반환하지 않으면 undefined가 변수에 할당되게 된다. 함수를 종료하려는 방법으로 return;을 사용하기도 한다.

함수에 중요한 몇가지를 알아보자

1. 한번에 한 작업에 집중하자. 여러 가지 기능을 위해 여러가지 함수를 만드는 것이 좋다.

2. 함수 또한 마찬가지로 이름을 짓는것이 굉장히 중요하다. 기능에 맞게 간단하게 이름을 지어주자

9. 함수 표현식, 화살표 함수(arrow function)

위 방법으로 함수를 선언하는 것을 함수 선언문이라고 한다. 이 방법은 어디서든 호출이 가능하다. 자바스크립트는 위에서 아래로 하나씩 읽으면서 실행하는 프로그램인데(인터프리터), 선언 순서가 중요하지 않다는 것이다. 함수 선언문은 다음이 가능하다.

sayHello():
Function sayHello(){
	console.log('Hello'):
}

sayHello함수가 선언되기도 전에 호출했는데 에러가 발생하지 않는다. 자바스크립트는 코드를 실행하기 전 선언된 함수를 전부 모아놓은 다음 생성해놓은다. 이를 hoisting이라고 한다. 반대로 함수 표현식은 다음과 같다

let sayHello = function(){
	console.log('Hello'):
}

다른 점이라고는 문법 밖에 없다. 그러나 이 함수 표현식은 코드에 도달하면 함수가 생성되기 때문에 함수가 선언되기 전에 호출되면 에러를 일으킨다. 대부분의 상황에서는 둘 다 사용해도 되지만, 더 자유롭게 코딩하고 싶다면 함수 선언문을사용하는것이 좋다.

화살표 함수(arrow function)

//원래 함수
let add = function(num1, num2){
	return num1 + num2;
}
//화삺표 함수
let add = 	(num1, num2) => {
	return num1 + num2;
}
//return문을 일반 괄호로 바꿈 여기서는 코드가 한줄이어서 가능
let add = 	(num1, num2) =>(
	num1 + num2;
)
//return문이 한줄이면 괄호 생략 가능
let add =(num1, num2) => num1 + num2;
//인수가 하나면 괄호 생략 가능
let add = num => num1
//인수가 없으면 괄호 생략 불가
let showError = () =>{
	alert('error!');
}
//return문 외로 여러 줄의 코드가 있을 경우 괄호 생략 불가

 

10. 객체(Object)

파이썬에서 class라는 객체를 생성하는것처럼 객체를 생성하여 attribute을 줄 수 있다.

const superman = {
	name : 'clark',
    age : 33,
}

키:value의 형태로 값을 줄 수 있다. 

파이썬과 같이 접근, 추가 삭제할 수 있다.

//접근
superman.name //'clark'
superman['age'] //33

//추가
superman.gender = 'male';
superman['hairColor'] = 'black';

//삭제
delete superman.hairColor;

단축 프로퍼티

const name = 'clark';
const age = 33;
const superman = {
	name // name:name
    age, //age:age
    gender: 'male',
}

프로퍼티 존재 여부 확인

const superman = {
	name:'clark';
    age:33;
}
superman.birthDay //undefined가 반환된다
'birthday' in superman; //false
'age' in superman; //true

for...in 반복문

for(let key in superman){
	console.log(key)
    console.log(superman[key])
}

superman 객체 안에 있는 키 값을 출력하고 키 값에 상응하는 value값도 콘솔 창에 뜨게 된다. 

다음은 makeObject 함수를 통해 객체를 생성해보자

function makeObject(name, age){
	return{
    	name, //name : name;
        age, //age : age;
        hobby: "football"
    };
}
const Mike = makeObject("Mike", 33);

11. method, this

객체 안에서 함수를 선언해줄 수 있다. 이를 method라고 한다. 만약 메소드 안에 객체의 프로퍼티를 넣고 싶다면 어떻게 해야할까? 이해를 돕기 위해 코드를 첨부하겠다.

const user = {
	name: "Mike",
    sayHello : function(){
    	console.log(`Hello, I'm ${user.name}`);
    }
}

위 방법으로 프로퍼티를 이용할 수 있을 것 같지만 이렇게 하면 오류가 난다고 한다. 이럴 때 사용하는 것이 this다. user.name 대신 this.name을 이용하면 된다. this는 이 함수가 호출되는 객체를 가르키는 개념이다.

예로 들어 이름이 Mike인 boy 객체와 Jane인 girl 객체가 있을 때, boy.sayHello()는 this가 boy를 가르키기 때문에 I'm Mike를 출력하게 된다. 화살표 함수에서 this는 전역변수를 가르킨다고 하는데, this는 어려운 개념이므로 다른 영상에서 설명하겠다고 한다. 일단은 기본적인 이해만 하고 넘어갈 것이기 때문에 다음에 알아봐야겠다. 

12. 배열(Array)

배열은 대괄호로 선언할 수 있다. 이 부분은 파이썬이랑 같다. 인덱스는 0부터 시작이다. 배열의 몇가지 함수를 알아보자

array.length() //배열의 길이
array.push() //배열 끝에 추가 파이썬은 append
array.pop() //배열 맨 끝 요소 뽑아내기
array.shift() //배열 앞에 추가
array.unshift() //배열 앞에 제거
for(let i = 0: index < a.length; index++){
	console.log(days[index])
} //인덱스를 활용하여 배열 안의 요소를 하나씩 꺼내옴
let days = ['월', '화', '수'];
for(let day of days){
	console.log(day)
} //인덱스를 활용하지 않고 요소를 직접 뽑아옴

JavaScript 또한 객체지향적인 언어이기 때문에 크게 어려운 개념은 아닌 것 같다. 파이썬과 자바의 class 개념과 비슷한부분이 많다. 본격적으로 이번 장을 시작하기 전에 정말 간단한 자바스크립트 개념은 알고 가야할 것 같아서 시간을 할애하였다. 객체지항 언어인 파이썬과 자바를 공부해서 그런지 문법만 다를뿐 개념은 거의 비슷해서 비교적 수월하게 공부할 수 있었던 것 같다. 이제 강좌에 본격적으로 들어가보자.