WEB/node.js

생활코딩 node.js_26강부터 27강까지

l._.been 2020. 9. 12. 23:09
728x90

# App 제작 - 함수를 이용해서 정리 정돈하기

앞서 배운 내용을 통해서 이제까지 했던 데이터를 정리해볼 것이다

기계는 상관없지만 사람에겐 코드의 복잡성이 코드 관리에 치명적이다

따라서 사람이 감당할 수 있는 수준으로 만들지 못한다면 복잡한 것에 도전할 수 없을 것이다

이번 시간에는 우리 수업에서 코드를 함수로 정리 정돈하는 모습을 통해서 함수의 사용법을 익혀볼 것이다

 

저번에도 똑같은 말을 했던 것 같다!

중복은 코드의 복잡성의 주요 원인이기에 반복되는 부분이 있다면 함수화를 통해 복잡한 코드를 단순하게 만들어 주어야한다 :-)

main.js파일에서 중복되는 코드는 다음과 같다 이 코드를 함수화 시켜보겠다!

(전제 코드를 보여주고 싶지만 캡쳐할 수 있는 크기가 한정적이어서 필요한 부분만 캡쳐했습니다)

위의 드래그한 부분이 전체 코드에서 2번 반복이 되고 있다!

너무나도 길고 복잡해 보이는데 이것을 함.수.화 시켜볼 것이다

저 드래그한 부분을 새롭게 만든 함수 function templateHTML(){} 안에 넣어서보자! 그리고 원래 있던 var template에는 templateHTML();을 연결해주면 될 것 같다

여기서 template은 재사용할 수 있는 껍데기? 라고 생각하면된다 그리고 달라질 수 있는 부분들을 재사용할 수 있다.

함수에 전달되는 인자값과 매개변수를 넣어서 더 예쁘게 만들어보았다

function templateHTML 안에 있는 html코드에서 

<h2>${title}</h2> 

<p>${description}</p> 라는 부분은 유동적으로 바뀔 수 있기 때문에 ${body}라고 대체해볼 것이다 다음 사진을 보자!

 

맨 위의 이미지에서 아래로 넘어가면서 설명할 것이다

function templateHTML의 매개변수에 title, list, body가 들어가 있다

이것들은 var template = templateHTML의 인자 (title, list, `<h2>${title}<h2>${description)과 대응된다!

이로써 복잡한 코드를 함수화를 하면서 단순하게 바꿔보았다!

이제 또 추가적으로 함수로 만들어줘야할 부분이 있는지 살펴보자

이처럼 드레그한 부분이 중복이 되고 있다! 이 부분을 함수화하기 위해 위로 가서 fuction templateList()를 만들어주자

 

위의 이미지의 fuction templateList(filelist){}는 filelist를 값으로 받아서 안에 있는 코드를 실행한 후에 list값을 반환하도록 되어있다! 이 함수를 이용해서 중복되어있는 부분을 고쳐본 코드는 다음과 같다

 

wow.. 엄청 간결해졌다 👏👏👏👏 

 

 

 

 

🙋‍♀️ 함수형 프로그래밍이란?

자료 처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임의 하나이다.

명령형 프로그래밍에서는 상태를 바꾸는 것을 강조하는 것과는 달리, 함수형 프로그래밍은 함수의 응용을 강조한다.

 

수학적 함수와 명령형 프로그래밍에서 사용되는 함수는 차이가 있는데, 명령형 함수는 프로그램의 상태값을 바꿀 수 있는 부작용이 생길 수 있다. 이 때문에 명령형 함수는 참조 투명성이 없고, 같은 코드라도 실행되는 프로그램의 상태에 따라 다른 결과값을 낼 수 있다. 반대로 함수형 코드에서는 함수의 출력값은 그 함수에 입력된 인수에만 의존하므로 프로그램의 동작을 이해하고 예측하기가 훨씬 쉽게 된다.

 

참고자료:

ko.wikipedia.org/wiki/%ED%95%A8%EC%88%98%ED%98%95_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D

 

함수형 프로그래밍 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 함수형 프로그래밍(functional programming)은 자료 처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임의 하나이다. 명령

ko.wikipedia.org

 

 

 

# 수업의 정상

그동안 program이란 무엇인가 programming이란 무엇을 하는 일인가 programmer은 무엇을 하는 사람인가에 대해서 충분히, 많이, 깊게 알아봤다!

또 JavaScript를 이용해서 Node.js의 기능을 제어함으로써 Web application을 구동시키는 방법을 알아보았다

지금까지의 내용은 node.js에서 가장 필수적인 내용을 소개해준 것이고 이후의 강의들은 지금까지 배운 것보다 훨씬 덜 중요하기도 하다

지금 이후의 강의들은 지금까지 배워 온 강의들에서 해결할 수 없는 문제들이 생겨났을 때 필요하게 될 것이다

그렇기 때문에 잘 생각해보고 다음 강의를 듣기를 바란다 :-)