👋 복습

1. 액션 → 계산 → 데이터

   • 이벤트 핸들러 : 액션

2. 계산을 꺼내기

   • 리턴 값 정하기
   • 리턴 값과 관련된 코드조각 모으기
   • 사용되는 모든 값을 함수인자로 만들기 —> 명시적 출력 + 명시적 입력
3. 외부 세계에 영향을 주거나, 실행할 때마다 달라지는 값이 있다면 제거(Array, Object)

4. 유틸리티, 비즈니스 로직, 스키마, 구분해보기

   • 유틸리티와 비즈니스 로직 차이는??????

     • 유틸리티 Lodash
     • 유틸리티가 아닌 로직들 = 비즈니스 로직

✅ 2주차 배운 내용 정리

• 어떻게 액션으로 부터 계산을 빼낼 수 있는지에 대해서 배우고 실습 진행

• 액션에서 계산을 빼내는 작업은 암묵적 입력과 출력을 -> 명시적 입력과 출력으로 바꾸는 것

  • 암묵적 입력 : 함수인자가 아닌 형태로 사용되는 데이터 및 함수 안에서 선언한 데이터 등을 의미
  • 암묵적 출력 : 함수의 반환값이 아닌 출력 ex) DOM, console.log, 전역변수 수정 등을 의미

• 암묵적 입력과 출력을 명시적 입력과 출력으로 바꾸는 방법

  • 함수에 반환값이 없다면 반환값을 만든다.(대개 마지막에 쓰이고 있는 변수)
  • 해당 값이 관련된 코드 조각을 모아 함수의 형태로 만든다.
  • 함수내에서 사용되고 있는 모든 데이터를 함수의 인자에 받을 수 있도록 리팩토링 한다.

• 계산은 여러번 수행이 되어도 외부 세계에 아무런 영향을 끼치면 안됨

  • 전역변수의 값이나, 객체 혹은 배열로 넘어온 인자의 값을 직접 수정하면 안됨
  • 만약 객체 혹은 배열로 넘어온 인자 값을 변경해야 하는 상황이라면 해당 값을 조작하여 반환하는 카피 온 라이트(방어적 복사)기법을 사용해야 함 ex) ES6에서 spread operator [...arr], {...obj}
• 유닛 테스트란 계산을 검증하기 위함
• e2e 테스트란 액션을 테스트 하는 것

✏️ 함수형 프로그래밍 코드 작성하는 Tip

• const 쓰기
• TS 쓰기
• spread operator 사용하기(방어적 복사)
• Arrow function 사용하기
• Test Code 작성하기
• 이벤트 핸들러, 상수 등 한글 변수를 사용해보자.

정리

• FE 코딩이란, 데이터를 화면에 보여주고 -> 사용자의 액션에 따라 데이터를 조작해, 다시 사용자에게 화면을 다시 그리는 것입니다.
• FE에서 이벤트 핸들러가 90% 액션입니다.
• 액션은 리턴값이 없기 때문에 굳이 계산으로 빼는 것이 아닌, 액션에서 사용되어야할 계산 함수를 쪼개서(순수함수) 액션을 조합해서 만드는 것이 함수형 코딩 본질에 맞닿아 있습니다.

참고

• 함수형 프로그래밍 스터디