0. PR 링크

• repository: bigsaigon333/javascript-subway
• step 1: [1단계 - 지하철 노선도 미션] 동동(김동희) 미션 제출합니다. #15
  
• step 2: [2단계 - 지하철 노선도 미션] 동동(김동희) 미션 제출합니다. #42
  
• step 3: [3단계 - 지하철 노선도 미션] 동동(김동희) 미션 제출합니다. #72
  

1. 학습로그

1. 함수형 프로그래밍

함수형 프로그래밍은 순수 함수(pure function) 를 조합하고 공유 상태(shared state), 변경 가능한 데이터(mutable data) 및 부작용(side-effects) 을 피하여 소프트웨어를 만드는 프로세스입니다. 함수형 프로그래밍은 명령형(imperative) 이 아닌 선언형(declarative) 이며 애플리케이션의 상태는 순수 함수를 통해 전달됩니다.

순수함수(Pure function)

순수 함수란 함수형 프로그래밍에 필요한 개념으로 아래 조건을 만족하는 함수를 뜻한다.

• 동일한 입력에는 항상 같은 값을 반환해야 한다.
• 함수의 실행은 프로그램의 실행에 영향을 미치지 않아야 한다. (Side effect 가 없어야 한다)
  예를 들어, 함수 내부에서 인자의 값을 변경하거나 프로그램 상태를 변경하는 것

함수형 프로그래밍의 장점은 무엇인가?

높은 수준의 추상화를 제공한다

• 추상화란, 복잡한 무언가를 단순해보이도록 만들어주는 행위를 의미한다. 즉, 추상화의 수준이 높다는 것은 복잡한 것을 단순해보이도록 만드는 행위 자체의 수준이 높아졌다는 것을 의미하는 것이다.

함수 단위의 코드 재사용이 수월하다

불변성을 지향하기 때문에 프로그램의 동작을 예측하기 쉬워진다

https://codesandbox.io/s/7wqn2j3wmq

reference

• 기존의 사고 방식을 깨부수는 함수형 사고
• 함수형 프로그래밍 요약
  

2. HTML5 Built-in Form Validation

1. HTMLInputElement 는 validity State를 가지며, validity property를 통해 접근할 수 있습니다.(Read Only)
2. attribute로 지정한 constraint를 하나라도 충족하지 않으면 validity.valid = false가 되고, 어떤 constraint를 어긴 것인지 validity를 확인하여 알 수 있다.

// html
<input id="input" type="number" required />

// console
console.log($("#input").validity);

/* {
  valid: false, 
  valueMissing: true,    // #input 에 입력된 값이 없는 경우 valueMissing이  true
  customError: false, 
  ...
} */

3. validity.valid = false 인 경우, CSS pseudo-class :invalid 가 바로 적용된다.

4. HTML built-in constraints(required, min, max, pattern 등) 외의 조건으로 input이 invalid한 경우에는, setCustomValidity method를 호출하여 customError 값을 변경하여 validity.valid값을 변경할 수 있다.
   setCustomValidity(message)

   • message === "": customError가 false로 된다.
   • message !== "": customError가 true로 된다.

5. checkValidity method 를 호출하면, valid값을 확인하여 valid === false 인 경우 invalid event가 발생하며, valid 값을 반환한다.

6. reportValidity method 를 호출하면, valid값을 확인하여 valid === false인 경우 invalid event가 발생하며, valid 값을 반환한다.
   또한, Form Validation이 실행되어 setCustomValidity 로 설정한 message를 html5 built-in message로 표시한다.(이는 브라우저의 default action으로 형태나 지속시간 등을 제어할 수 없다.)

Reference

• https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
• https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

3. babel: what's the difference among css-loader and style-loader, and MiniCssExtractPlugin.loader?

• css-loader: js 파일내 import "*.css" 구문을 해석하여, css 를 파싱합니다.
• style-loader: 불러들인 css를 HTML파일 내 <style></style> 로 넣어줍니다.
• MiniCssExtractPlugin.loader: 불러들인 css를 단일 css파일로 만들어준다

Reference

• https://mingule.tistory.com/57

4. 예외 처리

1. 발생한 위치에서 의미있게 처리할 수 있는 문제가 발생하면 바로 처리합니다.
2. 발생한 위치에서 의미있게 처리할 수 없는 문제가 발생하면 예외를 일으킵니다(throw).
3. 예외를 처리할 수 있는 위치를 찾아서 catch문에서 예외를 처리합니다.
   악셀 라우슈마이어 - 자바스크립트를 말하다 14장 예외 처리 p251

예외 처리를 잘못 쓰는 가장 흔한 경우는 정상적인 결과를 처리할 때도 쓰는 것입니다. 예를 들어 파일을 읽는 함수에서 파일을 찾을 수 없는 것은 예외가 아닙니다. 흔히 일어날 수 있는 일이죠. 예외 처리는 예상하지 못한 문제를 처리할 때만 사용되어야 합니다.
더글라스 크록포드 - 자바스크립트는 왜 그 모양일까 14장 예외 - 일상적인 예외 152p

예측할 수 없는 에러가 발생하면 예외를 일으킵니다.
예를 들어 input 태그로부터 입력받은 값이 원하는 타입이 아니거나 정해진 제약조건을 충족시키지 않는 것은 정상적인 결과입니다. 따라서 이는 예외를 일으키지 않고(throw하지 않고), input 의 border 색상을 변경하거나 주의 문구를 표시하는 등 적절한 처리를 수행합니다.

추후 정리

## 3. github pages 배포를 위한 subpath 설정(webpack 설정)
  - 함수형 config 작성
  - env, argv 
  - webpack.DefinePlugin 을 통해 상수를 src 내에 전달한다