feat: post5 1차 작성

posts/post1/index.mdx

@@ -7,7 +7,7 @@ thumbnail_image_alt: "how-to-javascript-compile thumbnail"
 thumbnail_image_credit_text: "Growtika"
 thumbnail_image_credit_link: "https://unsplash.com/ko/%EC%82%AC%EC%A7%84/%EA%B7%B8%EB%9E%98%ED%94%BD-%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4-qaedPly-Uro?utm_content=creditShareLink&utm_medium=referral&utm_source=unsplash"
 subtitle: "JavaScript는 인터프리터 언어인가요?"
-tags: ["JavaScript", "Compile"]
+tags: ["JavaScript"]
 ---
 
 먼저, 자바스크립트란 무엇일까?

posts/post5/indext.mdx

@@ -0,0 +1,165 @@
+---
+title: "쏙쏙 들어오는 함수형 코딩 - (1) 액션, 계산, 데이터"
+date: "2024-02-04"
+slug: "grokking-simplicity-action-calculation-data"
+thumbnail_image: "./image5-1.png"
+thumbnail_image_alt: "쏙쏙 들어오는 함수형 코딩 : 심플한 코드로 복잡한 소프트웨어 길들이기"
+thumbnail_image_credit_link: "https://www.google.co.kr/books/edition/%EC%8F%99%EC%8F%99_%EB%93%A4%EC%96%B4%EC%98%A4%EB%8A%94_%ED%95%A8%EC%88%98%ED%98%95_%EC%BD%94%EB%94%A9/Q6F2EAAAQBAJ?hl=ko&gbpv=1&printsec=frontcover"
+subtitle: "내 코드도 안전해질 수 있을까?"
+tags: ["함수형"]
+---
+
+# 함수형 프로그래밍이란?
+
+개발하다 보면 한 번쯤 함수형 프로그래밍이란 용어에 대해서 들어봤을 것이다. 과연 함수형 프로그래밍은 무엇일까? (함수만 쓰면 되나? ㅋㅋ)
+
+먼저 인터넷에 등장하는 함수형 프로그래밍의 정의를 먼저 살펴보자.
+
+> **수학 함수**를 사용하고, **부수 효과**를 피하는 것이 특징인 프로그래밍 패러다임. **부수 효과** 없이 **순수 함수**만 사용하는 프로그래밍 스타일.
+
+수학 함수, 부수 효과, 순수 함수라는 용어가 등장한다.
+
+- 부수 효과 (side effect)
+  - 함수가 return하는 값 이외에 하는 모든 일
+  - 함수 호출 시 마다 발생하므로 문제 발생 가능
+- 순수 함수 (pure function)
+  - 인자에만 의존하고 부수 효과가 없는 함수
+  - 같은 인자라면 항상 동일 결과를 반환
+  - == 수학함수. 수학에서의 함수와 동일하게 동작
+
+정의에서 함수형 프로그래밍은 부수 효과를 매우 싫어하는 것을 느낄 수 있다. 그럼 함수형 프로그래밍은 순수함수만 사용하면 되는 것일까? 애초에, 실제 개발을 하면서 그게 가능할까?
+
+### 함수형 프로그래밍의 오해
+
+함수형 프로그래밍의 시초는 학문이다. [(참고: 함수형 프로그래밍의 역사)](https://tpgns.github.io/2018/03/20/the-rise-and-fall-and-rise-of-functional-programming-composable-software/)
+
+따라서 함수형 프로그래밍의 정의를 그대로 실제 소프트웨어 개발에 맞추기에는 오해가 있다.
+
+#### 1. 부수 효과는 필요하다.
+
+정의에서부터 부수 효과를 피해야 한다고 하지만, 우리가 소프트웨어를 개발하는 목적은 부수 효과를 발생시키기 위함이다.
+개발을 시작하면서 Todo list를 만들었는데, 할 일을 추가하는 함수를 호출할 때마다 실제 UI에는 업데이트되지 않는다면 우리가 만든 Todo list, 소프트웨어는 아무 의미가 없다.
+
+부수 효과를 피하는 게 아니라, 필요할 때 '잘' 써야 한다.
+
+#### 2. 함수형 프로그래밍은 부수 효과를 잘 다룰 수 있다.
+
+부수 효과는 필요하다. 그런데 왜 이를 피하라고 했을까?
+
+부수 효과는 위험하다. 순수하지 않은 함수는 실행될 때마다 어떤 일을 발생시킬지 예상하기 어렵기 때문에 문제가 될 수 있다. 함수형 프로그래밍은 이러한 위험을 잘 다루고자 하는 방법론이다.
+
+#### 3. 함수형 프로그래밍은 실용적이다.
+
+함수형 프로그래밍의 정의는 수학적이다. 이로 인해 실제 소프트웨어 개발에서 사용하기에는 너무 이상적인 프로그래밍 방식이라고 생각될 수 있다.
+하지만 함수형 프로그래밍을 학문적 지식이 아닌 기술로 바라봐보자. 분명히 함수형 프로그래밍으로 만들어진 좋은 소프트웨어가 많이 있다.
+
+또한 함수형 프로그래밍의 아름다움은 어느 프로그래밍 언어에서든지, 코드 어디에서든지 적용할 수 있다는 점이다.
+
+이제 함수형 프로그래밍에 대한 오해를 품으로써 실제 개발에 사용해 볼 만 하다는 생각이 든다. 그럼 어떻게 사용할 수 있을까?
+
+## 함수형 사고
+
+함수형 프로그래밍으로 소프트웨어 문제를 해결하기 위해서는 함수형 사고를 이루는 2가지 핵심을 이해해야 한다. 이 핵심이 안전하고 실용적인 프로그램을 개발하는 출발점이 된다.
+
+#### 1. 액션, 계산, 데이터
+
+코드를 **액션, 계산, 데이터** 3가지로 나누는 것이 함수형 프로그래밍의 기본 개념이다.
+코드를 읽거나 쓸 때 항상 3가지로 구분해서 생각하고, 3가지 중 하나를 다른 하나로 리팩토링할 수 있어야 하고, 액션을 잘 다루는 방법을 이해해야 한다.
+
+#### 2. 일급추상
+
+함수형 프로그래밍에서는 함수에 함수를 넘겨 더 많은 함수를 재사용한다. 이러한 방식을 어떻게 사용하는지 알아보고, 또 이를 지나치게 남용하지 않는 법을 배운다.
+
+먼저 첫 번째 핵심인, 코드를 액션, 계산, 데이터로 구분하는 방법에 대해서 자세히 알아보자.
+
+---
+
+# 액션, 계산, 데이터
+
+함수형 프로그래밍에서는 코드를 3가지로 분류한다. 각 분류가 무엇을 의미하는지 알아보자.
+
+## 액션
+
+> 실행 시점과 횟수에 의존하는 것.
+
+액션은 실행 시점과 횟수에 의존한다. 그리고 외부에 영향을 주거나 받는다.
+그래서 순수하지 않은 함수(impure function), 부수 효과 함수(side-effecting function) 등으로도 불린다.
+
+외부와 영향을 주고받기 때문에 액션은 다루기 힘들다. 하지만 소프트웨어를 실행하는 가장 중요한 이유이기 때문에, 꼭 써야 한다.
+따라서 함수형 프로그래밍은 액션을 '잘' 쓰는 것에 집중한다.
+
+다음은 액션을 잘 사용하기 위한 방법들이다.
+
+- 가능한 적게 쓰기. 계산으로 대체 가능한지 고민해야 한다.
+- 가능한 작게 쓰기. 액션에서 빼낼 수 있는, 액션과 관련 없는 코드는 모두 빼내야 한다.
+- 소프트웨어의 내부에는 계산, 데이터만. 가장 바깥쪽에 액션이 있는 구조가 이상적이다. (어니언 아키텍처)
+- 액션이 호출 시점에 의존하는 것을 제한한다. 액션이 호출 시점/횟수에 덜 의존하도록 만드는 기술을 통해 액션을 더 쉽게 사용한다.
+
+#### 자바스크립트에서 액션의 형태
+
+자바스크립트에서는 액션을 함수로 구현한다. 하지만 계산도 함수로 구현하기 때문에 구분하기 쉽지 않다.
+따라서 우리가 의식적으로 이를 구분해야 하는데, 이를 위해 액션이 코드에서 주로 어떤 형태로 나타나는지 알아보자.
+
+- 함수 호출
+  - `alert("Hello World")`
+  - 팝업창이 뜨는 것도 액션이다.
+- 메서드 호출
+  - `console.log("Hello World")`
+  - 콘솔에 출력되는 것도 액션이다.
+- 생성자
+  - `new Date()`
+  - 호출하는 시점의 날짜와 시간을 생성하기 때문에 호출되는 시점에 따라서 다른 값을 가진다. 액션이다.
+- 표현식
+  - 변수 참조 `y` : `y`가 공유되고 변경가능한 변수라면, 읽는 시점에 따라 값이 달라질 수 있다. 액션이다.
+  - 속성 참조 `user.name` : `user`가 공유되고 변경가능한 객체라면, `name`을 읽는 시점에 따라 값이 달라질 수 있다. 액션이다.
+  - 배열 참조 `todo[0]` : `todo`가 공유되고 변경가능한 배열이라면, 첫번째 항목은 읽는 시점에 따라 값이 달라질 수 있다. 액션이다.
+- 상태
+  - 값 할당 `x = 1` : `x`가 공유되고 있고, 변경가능한 변수라면 `x`에 값을 할당함으로써 다른 코드에 영향을 준다. 액션이다.
+  - 속성 삭제 `delete user.name` : `name` 속성을 지움으로써 다른 코드에 영향을 준다. 액션이다.
+
+호출하는 시점, 횟수에 따라서 다른 결과가 나오는 것은 모두 액션이다. 그리고 이러한 액션은 코드 전체로 퍼지기 때문에 조심해야 한다.
+
+## 계산
+
+> 입력값으로 출력값을 만드는 것
+
+계산은 입력으로 출력을 만드는 것이다. 호출 시점/횟수에 의존하지 않고, 같은 입력이라면 항상 같은 출력을 반환한다. 그리고 외부에 영향을 주지 않는다.
+따라서 순수 함수, 수학 함수라고도 불린다.
+
+테스트하기 쉽고(항상 결과가 동일), 조합하기 좋다. 계산을 조합해 더 큰 계산을 만들 수 있다(일급 계산).
+
+따라서 함수형 프로그래밍에서는 위험한 액션보다 계산을 많이 사용하려고 한다. 계산은 더 이해하기 쉽고, 호출 횟수나 시점에 따른 실행 결과를 걱정하지 않아도 된다.
+
+하지만 계산도 액션과 마찬가지로, 실행 전까지는 어떤 일이 발생할지 알 수 없다. 물론 우리는 코드를 읽으면서 예상할 수 있지만, 소프트웨어는 결과를 실행하기 전까지 알 수 없다. 입력값으로 계산을 실행할 때 비로소 결과를 알 수 있다.
+이 점이 싫다면, 실행하지 않아도 되는 데이터를 사용해야 한다.
+
+## 데이터
+
+> 이벤트에 대해 기록한 사실
+
+데이터는 이벤트가 발생하고 나서 그 결과를 기록한 것이다. 데이터는 실행하지 않아도, 그 자체로 의미를 가진다. 그리고 데이터 구조(자료구조)로 데이터에 의미를 담는다. 순서가 중요하다면, 순서를 보장하는 구조를 사용한다.
+
+자바스크립트에서는 기본 데이터 타입(숫자, 문자, 배열, 객체...)로 데이터를 구현한다.
+
+함수형 프로그래밍에서는 데이터의 **불변성**을 지켜야한다. 이를 위해 2가지 원칙(**카피-온-라이트** / **방어적 복사**)을 사용하는데, 이는 추후에 깊게 알아본다.
+
+---
+
+함수형 프로그래밍의 핵심은 코드를 액션, 계산, 데이터 3가지로 구분하는 것임을 알았고, 각각이 무엇을 의미하는지도 알았다.
+이제 우리는 개발 전 과정에서 3가지를 구분하기 위해 노력해야한다.
+
+- 문제 이해 단계
+
+  - 코드를 통해 해결하고자 하는 문제부터 3가지로 나눠 생각해보자.
+  - 액션은 문제를 풀면서 특히 주의해야할 부분이다.
+  - 계산은 문제를 풀기 위해 결정을 내리는 부분이다.
+
+- 코드 작성 단계
+
+  - 최대한 액션에서 계산을 빼내야 한다.
+  - 계산에서 데이터를 분리할 수 있는지 생각해야 한다.
+  - 즉 **액션 -> 계산 -> 데이터** 순서로 변경할 수 있는지 고민해야 한다.
+
+- 코드 읽는 단계
+  - 작성된 코드가 어느 분류에 속하는지 고민해보자.
+  - 숨어있는 액션을 찾아보고, 계산과 데이터로 리팩토링해보자.