백엔드 0강 -Javascript문법

본 게시글의 js파일은 대충 html를 만들어서 거기에 적용 후 chrome 웹 브라우저에서 실행하였음 + 개발환경 : VSCode

0. WAS와 그 문제점

작성 시기 상으로는 추후에 작성을 하겠지만, Web의 기초 부분에 대해서 공부하면서 서버에 대해서 다룬 적이 있습니다.

기초적인 웹 개발에서는 백엔드 부분을 구현한 바 있습니다.

1. aws의 인스턴스 대여.
2. tomcat이라는 Java 기반 was를 사용해서 웹서버를 구축
3. MariaDB를 활용하여 DB 구축
4. jsp기술을 이용하여 서버에 업로드된 프론트엔드와 DB를 이어 백엔드를 구현 및 완성

이 방식의 문제점은 크게 2가지가 있습니다.

1. 이 tomcat(was)는 서버를 쉽게 사용할 수 있게 해주는 서드파티 응용프로그램입니다. 이는 사용하기 쉽다는 장점이 존재하지만, 사용자환경으로 커스텀화 하기에는 라이브러리나 프레임워크만 못하다는 단점이 존재합니다.

2. jsp는 근본적으로 frontend 부분과, backend부분의 코드가 한 파일 내에서 작성되기 때문에 생산성이 떨어집니다.
   뿐만 아니라 백엔드와 html이 한 파일 안에 존재하므로, 백엔드 통신을 하기 위해 무조건 페이지 이동이 존재해야 한다는 명확한 한계가 존재합니다.

1. 근데 갑자기 왜 Javascript?

우리가 앞서 기초적인 웹 개발을 하는데에 있어서 실행환경은 단순하게 웹 브라우저였습니다.
하지만, Node.js이라는 JavaScript 런타임(실행환경)이 발표 되는데, 저희가 사용하던 방식과는 다른 2가지의 특징이 존재합니다.

1. 웹 브라우저 없이 실행이 가능함.
2. html이나 Css 없이 javascript만으로 파일 실행 가능

이를 활용하여 기타 프론트엔드적인 환경(Css, html, 웹 브라우저)으로부터 벗어나 온전히 Javascript만을 이용하여 백엔드 개발에만 몰두할 수 있게 됩니다.

그렇게 되면 Javascript에 대한 언어 하나만을 사용하는 만큼 언어 사용에 익숙해 져야만 합니다.

2. Es6 문법 - 1

Javascript도 버전이 존재하는데, 제가 Web 개발 입문 단계에서 사용한 버전언 Es5입니다.

이제 Es6버전의 자바스크립트가 가지는 문법들에 대해 간단히 알아보겠습니다.

Es5문법이 가지는 가장 큰 문제점은 크게 2가지입니다.

1. 변수, 함수 중복 선언 문제
2. Hoisting 문제

중복선언 문제 :

var num1 = 10;
console.log(num1);
var num1 = 20;
console.log(num1);

function printMessage(){
    console.log("hello");
}
printMessage();
function printMessage(){
    console.log("bye");
}
printMessage();

다음과 같은 코드는 놀랍게도 정상작동합니다. 다른 언어였으면 변, 함수이름을 중복으로 생성했더라면 무조건 오류가 발생했을 것입니다.

Hoisting: 문제

var num1 = 10;
console.log(num1);
console.log(num2);
var num2 = 20;

해당 코드는 2번째 console.log의 출력이 오류가 아닌, null값이 출력됩니다.
그 이유는 변수 생성에서 선언부와 초기화부가 나뉘면서 선언부는 코드의 맨 위로, 초기화부는 원위치 그대로기 때문입니다.
이를 작동 코드로 표현하면,

var num1;
var num2;
num1 = 10;
console.log(num1);
console.log(num2);
num2 = 20;

같이 됩니다.

첫번째 문제인 중복선언 문제 해결법:
선언 명령어로 var이 아닌, let과 const를 사용합니다.

const num3 = 10; // 변경불가 변수(상수)
let num4 = 20; // 변경가능 변수

두번째 문제인 Hoisting 문제 해결법:
첫번째 방식으로 하면, 다행히 변수 중복 문제 뿐 아니라, hoisting 문제도 해결 가능합니다.
다만, 함수 생성에 대해서는 여전히 hoisting 문제가 존재하는데, 이는 함수 생명 명령어 형식을 다음과 같이 변경합니다.

function printMessage3(param1,param2){} //기존 방식
const printMessage4 = function(param1,param2) {} //새로운 방식

** 람다식표현**
const printMessage5 = (param1,param2) =>{}

** 패러미터가 하나면 소괄호 생략 **
const printMessage5 = param =>{}

** 함수 식이 한 줄이라면 중괄호 생략**
const printMessage5 = param => console.log("hi")

** 그 한 줄이 return문이면 return 생략 **
const printMessage5 = param => param*2

기존 문제를 해결하는 방법으로는 다음과 같은 방법이 있습니다.

3. 그 외 문법 - 2

이제 문제점을 해결하기 위한 문법보다는 편의를 위한 코드를 간단히 적어보겠습니다.

1. Template Literal: 문자열끼리 조합할 때, "+"기호 사용하지 말고 백틱 이용

console.log(`내가 입력한 메세지 ${power(message2)}`)//백틱 이용

2. default parameter: 기본 패러미터값 설정

const area = (num1,num2=10) => console.log(num1+num2);
area(5,3); // 5 + 3
area(5) // 5 + 10

3. Rest parameter: 받아온 변수들 list로 만들기

const sum2 = (...list) =>{ // 리스트로 받아오기
    let total = 0
    for(let i = 0; i < list.length;i++){
        total += list[index]
    }
}

4. 반대로 Spread 연산자로 list 해체하기

const list = [1,2,3]
console.log(...list)

**응용**
const list2 = [4,5,6]
const newArr = [...list, ...list2]
console.log(...newArr) // 두 배열을 합쳐서 다시 분리해서 출력

추가적으로 설명하고자 하는 것이 있는데, 이렇게 배열에 대한 처리를 함수 내에서 다시 분리해서 사용하는 이유가 존재합니다.
Javascript에서 parameter로 변수를 전달할 때, 일반 변수가 아닌 list는 call by reference(address)형식이어서 원값에 영향이 갈 수 있기 때문입니다.

4. 그 외 문법 - 3

Destructring에 대해서 배울 겁니다.

Javascript에는 object라는 변수가 존재하는데요, 말 그대로 객체의 의미를 내포하며, (key:value)의 값의 배열로 이루어져 있습니다.
이를 아예 파일로 따로 빼는 경우도 있는데(확실치는 않음),
이를 JavaScript Object Notation = JSON이라 불리는 우리가 흔히 아는 데이터 통신에 사용하는 용어입니다.

예시:

const tmpObj = {
    "name": "hyoseok",
    "university":"inha",
    "major":"CSE,ECE"
}

이러한 파일의 형식을 함수 내에서 사용할 것입니다.
이 때, object를 원하는 방식으로 쪼개서 저장이 가능한데, 이유는 크게 2가지입니다.

1. objectname.key로 접근하는 것이 번거롭기 때문에
2. pass by reference로 인해서 원값이 수정될 수 있기 때문에

다음 코드와 같습니다.

const func = (tmpObj) =>{
    let {name, university,major} = tmpObj;

    console.log(name)
    console.log(company)
    console.log(major)
    
    //리스트는 rest랑 spread 쓰고, 이것만.
    //이게 번거로워 보여도, 밑에서 쓸 때 쪼갠 걸로 접근 가능합니다.
}

5. 그 외 문법 - 4

마지막으로 array helper입니다.
list와 반복문을 같이 쓸 때, 더 편하게 쓸 수 있게 합니다.

const tmpList = [1,2,3,4,5];

아래의 두 코드는 일치합니다.

for (let index = 0; index<tmpList.length;index++){console.log(tmpList[index])}

tmpList.forEach((elem)=>console.log(elem))

map : list를 반환해서 mapping을 해주고, 옮겨담음(배열이 결과물)

const newList = tmpList.map((elem) => {
    return elem * elem
});
console.log(newList) //새로운 리스트로 옮겨담음

filtering : 동일- 조건 달기

const newList = tmpList.filter((elem) => {
    return elem < 3;
});
console.log(newList)

reduce - 줄여 나가서 하나의 변수만 저장(하나의 변수가 결과물)

const value = tmpList.reduce((accl,curr)=>{
    return accl + curr;
    //초기값은 0이고, 이에 대해서 전부 순회 돌아서 연산한 값 반환
    //위의 예는 전체 합 반환
},0)
console.log(value)

다음과 같은 코드들을 이용하면 javascript개발에 용이하기 사용이 가능합니다.

이상입니다.