Higher의 창작소

함수형 프로그래밍(Functional Programming)이란?

프로그래밍 패러다임(Programming Paradigm)

프로그래밍 패러다임(Programming Paradigm)은 프로그래머에게 프로그래밍의 관점을 갖게 하고 코드를 어떻게 작성할 지 결정하는 역할을 한다. 새로운 프로그래밍 패러다임을 통해서는 새로운 방식으로 생각하는 법을 배우게 되고, 이를 바탕으로 코드를 작성하게 된다.

최근의 프로그래밍 패러다임은 크게 아래와 같이 구분할 수 있다.

• 명령형 프로그래밍: 무엇(What)을 할 것인지 나타내기보다 어떻게(How) 할 건지를 설명하는 방식
  
  • 절차지향 프로그래밍: 수행되어야 할 순차적인 처리 과정을 포함하는 방식
  • 객체지향 프로그래밍: 객체들의 집합으로 프로그램의 상호작용을 표현 
• 선언형 프로그래밍: 어떻게 할건지(How)를 나타내기보다 무엇(What)을 할 건지를 설명하는 방식
  
  • 함수형 프로그래밍: 순수 함수를 조합하고 소프트웨어를 만드는 방식 (클로저, 하스켈, 리스프)

함수형 프로그래밍(Programming Paradigm)의 등장

명령형 프로그래밍을 기반으로 개발했던 개발자들은 개발하는 소프트웨어의 크기가 커짐에 따라, 복잡하게 엉켜있는 스파게티 코드를 유지보수하는 것이  매우 힘들다는 것을 깨닫게 되었다. 그리고 이를 해결하기 위해 함수형 프로그래밍이라는 프로그래밍 패러다임에 관심을 갖게 되었다. 함수형 프로그래밍은 거의 모든 것을 순수 함수로 나누어 문제를 해결하는 기법으로, 작은 문제를 해결하기 위한 함수를 작성하여 가독성을 높이고 유지보수를 용이하게 해준다.

유명한 책인 클린 코드(Clean Code)의 저자 Robert C.Martin은 함수형 프로그래밍을 대입문이 없는 프로그래밍이라고 정의하였다.

명령형 프로그래밍의 예시

a = [10, 11, 12, 13, 14, 15];

for (let i = 0; i < a.length; i++) {
  console.log(a[i],i);
}


//1부터 10의 값을 i에 대입한다.

함수형 프로그래밍의 예시

a = [10, 11, 12, 13, 14, 15];

a.forEach(
  function (v, i) {
console.log(v, i);
});

함수형 프로그래밍은 대입문을 사용하지 않는 프로그래밍이며, 작은 문제를 해결하기 위한 함수를 작성한다. 

명령형 프로그램밍으로 적은 코드를 위와 같이 바꿀 수 있는 것이다. 

위의 함수에서는 인자로 함수를 매개변수로 받고 있다.

앞서 설명하였듯 함수형 프로그래밍은 무엇을(What)에 포커스를 두는 프로그래밍이라고 하였다.

그렇기 때문에 함수형 프로그래밍에서는 '출력을' 하는 함수를 파라미터로 넘길 수 있다.

이는 함수형 프로그래밍의 기본 원리 중 함수를 1급 시민(First-Class Citizen)또는 1급 객체(First-Class Object)로 관리하는 특징 때문인데, 이에 대해서는 뒤에서 자세히 설명하도록 하겠다.

명령형 프로그래밍에서는 메소드를 호출하면 상황에 따라 내부의 값이 바뀔 수 있다. 즉, 우리가 개발한 함수 내에서 선언된 변수의 메모리에 할당된 값이 바뀌는 등의 변화가 발생할 수 있다.

하지만 함수형 프로그래밍에서는 대입문이 없기 때문에 메모리에 한 번 할당된 값은 새로운 값으로 변할 수 없다.

함수형 프로그래밍의 특징

함수형 프로그래밍의 특징을 한줄로 요약하면 다음과 같다.

부수 효과가 없는 순수 함수를 1급 객체로 간주하여 파라미터로 넘기거나 반환값으로 사용할 수 있으며, 참조 투명성을 지킬 수 있다.

여기서 부수효과(Side Effect)란 다음과 같은 변화 또는 변화가 발생하는 작업을 의미한다.

• 변수의 값이 변경됨
• 자료 구조를 제자리에서 수정함
• 객체의 필드값을 설정함
• 예외나 오류가 발생하며 실행이 중단됨
• 콘솔 또는 파일 I/O가 발생함

그리고 이러한 부수 효과(Side Effect)들을 제거한 함수들을 순수 함수(Pure Function)이라고 부르며, 함수형 프로그래밍에서 사용하는 함수는 이러한 순수 함수들이다.

• Memory or I/O의 관점에서 Side Effect가 없는 함수
• 함수의 실행이 외부에 영향을 끼치지 않는 함수

순수 함수(Pure Function)을 이용하면 얻을 수 있는 효과는 다음과 같다.

• 함수 자체가 독립적이며 Side-Effect가 없기 때문에 Thread에 안전성을 보장받을 수 있다.
• Thread에 안정성을 보장받아 병렬 처리를 동기화 없이 진행할 수 있다.

그리고 1급 객체란 다음과 같은 것들이 가능한 객체를 의미한다.

• 변수나 데이터 구조 안에 담을 수 있다.
• 파라미터로 전달 할 수 있다.
• 반환값으로 사용할 수 있다.
• 할당에 사용된 이름과 무관하게 고유한 구별이 가능하다.

함수형 프로그래밍에서 함수는 1급 객체로 취급받기 때문에 위의 예제에서 본 것 처럼 함수를 파라미터로 넘기는 등의 작업이 가능한 것이다. 또한 우리가 일반적으로 알고 개발했던 함수들은 함수형 프로그래밍에서 정의하는 순수 함수들과는 다르다는 것을 인지해야 한다.

마지막으로 참조 투명성(Referential Transparency)이란 다음과 같다.

• 동일한 인자에 대해 항상 동일한 결과를 반환해야 한다.
• 참조 투명성을 통해 기존의 값은 변경되지 않고 유지된다.(Immutable Data)

명령형 프로그래밍과 함수형 프로그래밍에서 사용하는 함수는 부수효과의 유/무에 따라 차이가 있다. 그에 따라 함수가 참조에 투명한지 안한지 나뉘어 지는데, 참조에 투명하다는 것은 말 그대로 함수를 실행하여도 어떠한 상태의 변화 없이 항상 동일한 결과를 반환하여 항상 동일하게(투명하게) 실행 결과를 참조(예측)할 수 있다는 것을 의미한다.

즉, 어떤 함수 f에 어떠한 인자 x를 넣고 f를 실행하게 되면, f는 입력된 인자에만 의존하므로 항상 f(x)라는 동일한 결과를 얻는다는 것을 의미한다. 부작용을 제거하여 프로그램의 동작을 이해하고 예측을 용이하게 하는 것은 함수형 프로그래밍으로 개발하려는 핵심 동기 중 하나이다. 그리고 이러한 부분인 병렬 처리 환경에서 개발할 때 Race Condition에 대한 비용을 줄여준다. 왜냐하면 함수형 프로그래밍에서는 값의 대입이 없이 항상 동일한 실행에 대해 동일한 결과를 반환하기 때문이다.

Reference:

https://mangkyu.tistory.com/111

함수형 프로그래밍에 필요한 개념(고차함수, 1급객체, 불변성, 순수 함수 등)은 아래의 링크에서 더 자세히 확인할 수 있다.

https://velog.io/@kyusung/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%9A%94%EC%95%BD

알고리즘 문제를 풀던 중 apply의 this가 무엇을 의미하는지 헷갈려 글을 남긴다.

func.apply(thisArg, [argsArray])

apply에는 첫번쨰 인자로 this, 두번째 인자로 배열이 들어간다.

첫번째 인자로 들어가는 this는 객체를 넘긴다. 

정확히 객체를 넘긴다는 말이 무엇인지 예졔를 통해 확인해보자.

예시1)

// call 또는 apply의 첫 번째 인자로 객체가 전달될 수 있으며 this가 그 객체에 묶임
var obj = {a: 'Custom'};

// 변수를 선언하고 변수에 프로퍼티로 전역 window를 할당
var a = 'Global';

function whatsThis() {
  return this.a;  // 함수 호출 방식에 따라 값이 달라짐
}

whatsThis();          // this는 'Global'. 함수 내에서 설정되지 않았으므로 global/window 객체로 초기값을 설정한다.
whatsThis.call(obj);  // this는 'Custom'. 함수 내에서 obj로 설정한다.
whatsThis.apply(obj); // this는 'Custom'. 함수 내에서 obj로 설정한다.

변수를 선언하고 변수에 프로퍼티로 전역 window를 할당한다는 말은 

전역객체인 window에 프로퍼티로 a를 준다는 말로 보인다 (widow.a = 'Global')

*property의 정의:

객체의 일부로 이름과 값 사이를 연결한다 프로퍼티는 객체를 구성하는 블록이다.

일반적인 정의방식)  this.a="test";  // 객체명.a = "test"

*변수의 정의:

변수는 실행 컨텍스트 내의 존재하는 이름과 값 사이의 연결을 의미한다.

일반적인 정의방식) var a = "test"; // let a = "test" // const a = "test"

예시2)

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

// 첫 번째 인자는 'this'로 사용할 객체이고,
// 이어지는 인자들은 함수 호출에서 인수로 전달된다.
add.call(o, 5, 7); // 16

// 첫 번째 인자는 'this'로 사용할 객체이고,
// 두 번째 인자는 함수 호출에서 인수로 사용될 멤버들이 위치한 배열이다.
add.apply(o, [10, 20]); // 34

다음과 같이 this는 객체를 넘긴다고 볼 수 있다.

즉 첫번쨰 인수는 해당 함수 내의 this에 연결되는 값으로 만약 this가 상관없는 함수라면  별다른 의미가 없기 때문에 null이나 undefined값을 주는 것으로 볼 수 있다.

reference:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

mdn apply

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

mdn this

https://daramji-joa.tistory.com/17

apply참조자료

https://m.blog.naver.com/bongy12357/22197775439

변수와 프로퍼티의 차이

생활코딩의 Node.js에서 Express를 공부하던 중 의문점이 생겼다.

express.static을 통해 정적 파일을 전달하는 것은 이해가 갔다. 

하지만

var express = require('express');
var app = express();
app.use(express.static('public'));
app.get('/', function(req, res){
    res.send('Hello home page');;
});
app.get('/dynamic', function(req, res){
  var lis = '';
  for(var i=0; i<5; i++){
    lis = lis + '<li>coding</li>';
  }
  var time = Date();
  var output = `
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
    </head>
    <body>
        Hello, Dynamic!
        <ul>
          ${lis}
        </ul>
        ${time}
    </body>
  </html>`;
  res.send(output);
});
app.get('/route', function(req, res){
    res.send('Hello Router, <img src="/route.png">')
})
app.get('/login', function(req, res){
    res.send('<h1>Login please</h1>');
});
app.listen(3000, function(){
    console.log('Conneted 3000 port!');
});

위와 같이 express.static을 사용하지 않고서 html에 JavaScript 코드를 붙여 보내는 것을 동적파일을 보내는 것이라고 하였다.

구글링한 결과 동적파일이라는 용어의 정확한 정의가 없었고 애초에 정적파일에는 html, css, javascript가 모두 포함되는 것이여서 무슨 말씀을 하시는 것인지 헷갈렸다.

해답:

여기서 말하는 동적파일이란

정적파일의 html코드(정적언어)에 동적인 언어 javaScript를 추가하여 단순한 정보를 보여주는 것이 아닌

사용자가 웹페이지와 상호작용할 수 있도록 해줘서 동적파일이라고 한 것이다.

#여기서 말하는 정적언어와 동적언어는 타입스크립트와 자바스크립트의 관계를 말하는 것이 아니다.

#생활코딩에서 말하는 정적언어와 동적언어는 reference에 나와있고 https://higher77.tistory.com/9 을 통해서도 알 수 있다.

reference:

https://velog.io/@shanells/%EB%8F%99%EC%A0%81%EC%96%B8%EC%96%B4-JavaScript

https://opentutorials.org/course/2136/11858

https://www.youtube.com/watch?v=q4c69koKcOc&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=2 

오늘 정적파일의 정의와 그 반댓말을 공부하다가 많은 사람들이 잘못이해하고 게시글에서 오용하고 있는 글을 봐서 이에 대해서 올바르게 정의내리고 이해하기 위해서 글을 쓴다.

정적파일

정적파일(Static file)의 정의는 다음과 같다.

1. Javascript, CSS, Image 등 웹 서비스에서 사용하기 위해 미리 서버에 저장해 놓은 파일이다.

• 파일 자체가 고정되어 있고, 서비스 중에도 추가되거나 변경되지 않는다.

우리가 페이지를 만들 때 쓰임이 정해져있는 파일들이기 때문에 개발하는 단계에서 이러한 파일들을 관리한다.

2. 외부 환경에 관계 없이 일정한 결과값을 제공해주는 걸 의미한다.

3. 정적웹페이지

• 웹서버에 미리 저장된 파일(HTML, Image, JavaScript 파일 등)이 그대로 전달되는 웹 페이지

• 서버는 사용자가 요청(Request)에 해당하는 저장된 웹 페이지를 보냄

• 사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 보게 됨

동적파일x -> 동적웹페이지

사실 동적파일이라는 말을 구글링해서 찾아보았을 때 딱히 정의된 말을 찾아 볼 수 없었다.사람들은 정적파일 vs 동적파일이라는 말보다는 정적웹페이지 vs 동적웹페이지라는 말로 주로 비교했다.그랬기에 여기서도 동적 웹페이지를 통해 비교하고자 한다.

1. 동적 웹페이지

• 웹서버에 있는 데이터들을 스크립트에 의해 가공처리 한 후 생성되어 전달되는 웹 페이지 

• 웹서버는 사용자의 요청(Request)을 해석하여 데이터를 가공한 후 웹 페이지에 보냄 

• 사용자는 상황, 시간, 요청 등에 따라 달라지는 웹 페이지를 보게 됨

동적 웹은 클라이언트의 요청에 따라 다양한 화면을 제공해 준다.  우리가 로그인을 한 후 마이페이지를 들어가면 각기 다른 정보를 확인할 수 있다. 그리고 상품 페이지에 들어갈 때 각각 다른 화면을 제공받을 수 있다. 이 경우에 웹 서버에서는 단순히 HTML, CSS, JAVASCRIPT 파일만 제공해주는 게 아니라 웹 어플리케이션 서버(WAS)와 직접 통신을 한다.

웹 어플리케이션 서버(WAS)는 복잡한 비즈니스 로직, 데이터 베이스와 통신 등을 책임진다(백엔드 개발자가 담당) 웹 서버는 WAS와 통신해서 얻은 결과 값을 바탕으로 가공 작업을 거친다. 최종적으로 만들어진 동적인 웹 파일을 클라이언트에게 전달해 준다. 기본적으로 동적 웹은 정적 웹에 비해 복잡한 로직들과 리소스를 필요로 한다고 보면 된다.

[참고]
웹 어플리케이션 서버는 일종의 API 서버라고 볼 수 있다.

데이터베이스와 통신하며 데이터를 가공하고 전달해주는 역할도 하기 때문이다.

그러나 사실 정적 웹을 다운받는 방식으로도 복잡한 어플리케이션을 구현할 수 있다.

일례로 정적인 웹을 다운받은 후 클라이언트(브라우저)에서 다른 서버와 통신을 통해 로그인, 상품 정보 불러오기, 결제하기 등의 작업을 수행할 수 있기 때문이다.

즉 웹 서버에서 단순하게 웹 껍데기를 다운받은 후 브라우저에서 핵심 작업들을 전부 수행하는 것이다.

이런 작업 방식을 Client Side Rendering(CSR)이라고 부른다.

현재 웹 개발에 많이 사용되는 웹 프레임워크 React, Vue 등은 해당 방식으로 동작한다.

미디어 파일(Media file)

사실 정적파일의 반댓말을 찾을 떄 동적파일이 아닌 미디어 파일이 주로 나왔다. 

그 정의를 명확히 알아보자.

웹사이트 사용자가 웹에서 올리는 파일

• 파일 자체는 고정되어 있지만, 언제 어떤 파일이 정적 파일로 제공되고 준비되는지 예측할 수 없음

미디어 파일은 정적 파일과는 다르게 사용자가 업로드하는 파일이다.
따라서 이는 개발하는 단계에서 관리할 수 없는 파일들이기 때문에 따로 분류하여 관리하게 된다.

Reference:

정적파일 동적파일(동적웹사이트)

https://titus94.tistory.com/4

https://maily.so/grabnews/posts/ce76c9

https://dololak.tistory.com/78

정적파일 미디어파일

https://chagokx2.tistory.com/61

https://opentutorials.org/module/4034/24663