임시저장 글 추가

save/post5/indext.mdx

@@ -0,0 +1,213 @@
+---
+title: "쏙쏙 들어오는 함수형 코딩 - (1) 액션, 계산, 데이터"
+date: "2024-02-04"
+slug: "grokking-simplicity-action-calc-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)
+  - 인자에만 의존하고 부수효과가 없는 함수
+  - 같은 인자라면 항상 동일 결과를 반환
+  - == 수학함수. 수학에서의 함수와 동일하게 동작
+
+그럼 함수형 프로그래밍은 순수함수만 사용하면 되는 것일까? 애초에, 실제 개발을 하면서 그게 가능할까?
+
+### 함수형 프로그래밍의 오해
+
+애초에 함수형 프로그래밍은 학문에서 시작되었기 때문에, 함수형 프로그래밍의 정의와 실제 개발과는 맞지 않는 점이 있다.
+
+#### 1. 부수 효과는 필요하다.
+
+정의에서 부터 부수 효과를 피해야 한다고 하지만, 우리가 소프트웨어를 개발하는 목적이 애초에 부수 효과를 만들기 위함이다.
+투두리스트를 만들면서 할일 추가 함수를 만들었는데, 추가된 값만 리턴하고 실제 목록에 추가하지 않는다면 투두리스트를 왜 만들어야하는가?
+부수 효과를 피하는게 아니라, 필요할 때 '잘' 써야한다.
+
+#### 2. 함수형 프로그래밍은 부수 효과를 잘 다룰 수 있다.
+
+그럼 정의에서 왜 부수효과를 피하라고 했을까? 부수효과는 위험하다. 함수가 실행될떄마다 어떤 일을 발생시킬지 예상하기 어렵기 때문에 문제가 될 수 있다.
+그래서 함수형 프로그래밍을 이용해 부수효과를 잘 다루고자 하는 것이다.
+
+#### 3. 함수형 프로그래밍은 실용적이다.
+
+함수형 프로그래밍은 수학적이다.실제 소프트웨어 개발에서 사용하기 이상적인 프로그래밍 방식이라고 생각될 수 있다.
+하지만 배우면 다 도움이 되지 않을까? ^^ 하하
+함수형 프로그래밍을 학문적 지식이 아닌 기술로 보자.
+
+### 함수형 사고
+
+함수형 프로그래밍으로 소프트웨어 문제를 해결하기 위해서는 2가지 핵심을 이해해야 한다.
+
+#### 1.액션, 계산, 데이터
+
+코드를 액션, 계산 데이터 3가지로 나누는 것이 함수형 프로그래밍의 기본 개념이다.
+코드를 읽거나 쓸때 항상 3가지로 구분해서 생각하고, 3가지 중 하나를 다른 하나로 리팩토링할 수 있어야 하고, 액션을 잘 다루는 방법을 이해해야한다.
+
+#### 2. 일급추상
+
+함수에 함수를 넘겨 재사용성을 높인다. 하지만 너무 남용하지는 않는 법을 배운다.
+
+# 액션, 계산, 데이터
+
+## 액션
+
+> 외부 세계에 영향을 주거나 받는 것.
+
+실행시점과 횟수에 의존한다.
+
+- 실행 시점과 횟수에 의존한다.
+- == 부수효과, 부수효과가 있는 함수, 순수하지 않은 함수
+  자바스크립트에서는 함수로 구현
+
+액션 잘 쓰는법
+
+- 가능한 적게 쓰기. 계산으로 대체가능한지 고민
+- 가능한 작게 쓰기. 빼낼 수 있는 건 빼내기
+- 내부에는 계산, 데이터만. 가장 바깥쪽에 액션이 있는 구조 -> 어니언 아키텍처
+- 호출 시점에 의존하는 것을 제한하기
+
+### 자바스크립트 액션의 형태
+
+자바스크립트는 언어에서 액션, 계산, 데이터를 구분하지 않는다. 따라서 우리가 의식적으로 이를 구분해야한다.
+구분하기 위해 액션이 코드에서 주로 어떤 형태로 나타나는지 알아보자.
+
+- 함수 호출
+  - `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` 속성을 지움으로써 다른 코드에 영향을 준다. 액션이다.
+
+호출하는 시점, 횟수에 따라서 다른 결과가 나오는 것은 모두 액션이다. 그리고 이러한 액션은 코드 전체로 퍼지기 쉽다.
+
+## 계산
+
+- input으로 output을 계산
+- == 순수함수, 수학함수
+
+실행시점, 횟수와 관계없다. 같은 Input이라면 항상 같은 output
+함수로 구현한다.
+테스트하기 쉽다.
+조합해서 더 큰 계산을 만들기 쉽다.
+실행전까지 어떤 일이 발생할지 모르는 단점
+
+## 데이터
+
+- 이벤트에 대한 사실. 이벤트가 일어난 결과를 기록한 것.
+  자바스크립트에서는 기본 데이터 타입으로 구현한다. 숫자, 문자, 배열, 객체 등
+
+데이터 구조로 데이터에 의미를 담을 수 있다. 목록의 순서가 중요하다면 순서를 보장하는 데이터 구조를 사용하면 된다.
+
+함수형 프로그래밍에서는 불변 데이터 구조를 지켜야함. 이를 위한 2가지 원칙(카피-온-라이트 / 방어적 복사)는 추후에 깊게 공부
+
+데이터의 장점
+
+- 직렬화
+- 동일성 비교
+- 자유로운 해석
+  단점
+-
+
+개발 전 과정에서 3가지를 구분해야한다.
+
+문제 이해 단계
+문제를 액션, 계산, 데이터로 구분해보자. 액션은 문제를 풀면서 주의해야할 부분이다. 계산은 문제를 풀기 위해 결정을 내리는 부분이다.
+
+코딩 단계
+최대한 액션에서 계산을 빼내야 한다. 그리고 계산에서 데이터를 분리해야한다.
+즉 액션 -> 계산 -> 데이터 순서로 변경할 수 있는지 고민하면서 코드를 작성하자.
+
+코드 읽는 단계
+코드가 어디에 속하는지 고민해보자.
+그리고 기존 코드를 구분하면서 리팩토링을 해보자.
+
+## 새로운 코드에 함수형 사고 적용하기
+
+1. 예시 상황을 시나리오 세우기
+   다이어그램 그림 그려서 첨부
+2. 실제 코드로 구현하기
+   코드 첨부
+
+- 가져온 할일 목록 데이터
+  자바스크립트에서는 데이터베이스 행을 표현하기 위해 객체를 사용한다.
+
+```javascript
+const todo = { id: 1, text: "JavaScript 공부하기", completed: false };
+```
+
+- 미완료된 할일 개수를 세는 것은 함수
+
+```javascript
+const countCompletedTodos = (todos) => {
+  return todos.filter((todo) => todo.completed).length;
+};
+```
+
+## 이미 있는 코드에 함수형 사고 적용하기
+
+예시 들면서 액션 퍼져나가는거 보여주고, 고치기
+
+새로운 코드를 작성할 때 어떻게 함수형 사고를 적용하는지 알아보았다. 그렇다면 이미 존재하는, 레거시 코드에도 함수형 사고를 적용해보자.
+
+코드를 읽을때도 액션, 계산, 데이터 관점으로 생각해야한다.
+
+다음 예시는 함수형 코드가 아니다. 왜일까?
+
+```javascript
+// 할일 삭제
+function addTodo(todo) {
+  // 액션 : DOM 트리에 할일 추가
+  addTodoForList(todo);
+}
+
+// 할일 전체 추가
+function addAllTodos(todos) {
+  for (let i = 0; i < todos.length; i++) {
+    addTodo(todos[i]);
+  }
+}
+
+// 투두리스트 초기화 : 기존 할일 전체 추가
+function main(todos) {
+  addAllTodos(todos);
+}
+```
+
+실제로 액션은 하나인 것 같은데, 액션이 하나라면 적절하게 분리되어있는게 아닐까?
+
+1. 실제 DOM 트리에 인자로 받은 `todo`를 추가하는 코드. 호출 횟수나 시점에 따라 결과가 달라지기 때문에 액션이다.
+
+2. 액션은 호출 시점이나 횟수에 의존한다.`addAllTodos` 함수는 액션인 `addTodo` 함수를 호출하므로 역시 호출 시점과 횟수에 의존하게 된다.
+   따라서 `addAllTodos` 함수도 액션이 된다.
+
+3. 같은 논리로 `main` 함수도 액션.
+
+코드 안쪽에 액션을 호출하는 작은 코드 하나가 전체 프로그램을 액션으로 만들었다.
+
+액션은 코드 전체로 퍼져나간다. 액션을 호출하는 함수도 액션이 된다. 작은 액션 하나가 코드 전체로 퍼져나간다.
+그래서 액션을 사용할떄 조심해야한다. 그래서 함수형 프로그래밍에서는 이 액션을 어떻게 사용해야하는지 배우게 된다. 일단은 조심해야한다~ 까지만 이해하자.

src/pages/index.tsx

@@ -62,7 +62,7 @@ const HomePage = ({ data: { recently, recommend } }: PageProps<DataProps>) => {
                   font-style: oblique;
                 `}
               >
-                ALL.
+                Recent.
               </h1>
 
               <Link