흰둥씨의 개발장

불변성(Immutable) ㄴ 상태를 변경하지 않는 것 ( 상태가 변경된다는 의미는 "메모리에 할당된 값을 변경하는 모든 행위") ㄴ 불변성을 지키지 않는 예시 ) 전역변수 남용해서 어디서 값이 바뀐지 모르는 상황, 변수에 재할당, etc... ㄴ 불변성을 지키지 않을 때 함수형 프로그래밍에서 일어나는 일 : 야근, 예기치 못한 동작(에러, 실행...등), 의도치 않은 상태 변화... ㄴ 불변성을 지키는 것으로 "참조에 의한 전달"로 변경될수 있는 자료형의 변화를 쉽게 감지할수 있어 예기치못한 상황을 막을수 있음 변수는 메모리 주소를 가지고 있고, 변수의 선언은 값이 할당될 공간을 마련하는 것 (변수는 값을 저장하기 위한 공간 자체, 메모리 공간을 식별하기 위해 붙인 이름) => 변수에 값을 할당하면 "..

비동기 코드 개발의 어려움 비동기 요청은 1. 함수간 일시적 의존 관계가 형성됨 (데이터 도착할때까지 or 다른 함수가 실행될 때까지 어떤 함수가 기다리는 경우) 2. 콜백의 늪에 빠짐 (이벤트가 발생하면? 콜백함수를 실행하는데 그와중에 에러나면 또 에러 콜백 호출되고... 복잡도 증가) 함수형기법과 프로미스를 사용해서 비동기 코드를 능률적으로 ! => 위 문제를 해결하기 위해서 1. 연속체 전달 스타일 continuation-passing style 사용 (콜백함수를 모두 개별 함수로 나눠서 개별컴포넌트처럼 취급) 2. 비동기 로직을 Promise로 일급화 하기 프로미스의 상태는 항상 pending(unresolved), fulfilled, rejected, settled 중 하나로 fulfilled는..

자바스크립트 함수 실행의 내부원리 - 자바스크립트는 싱글 스레드로 작동 - 전역 context는 단 하나만 존재함 - 모든 함수는 전역 context를 공유함 - 자바스크립트 초기 실행시 콜스택에는 맨 밑에 "전역 context 프레임"이 위치하게됨 - 함수 context에 개수 제한은 없음(FE에서는 브라우저마다 제한개수다름) - 함수를 호출할 때마다 실행 context (= 함수 context프레임)이 생성됨 - 함수 context 프레임은 각 내부 지역 변수개수만큼 메모리를 차지함 (함수 본체에 변수 선언 많을수록 메모리 많이 소요) - 커리된 함수를 지나치게 많이 쓰면 콜스택에 영향 줌(= 오버헤드 많이 발생 = 메모리 많이씀 = 실행 속도 느려질수있음) - 재귀도 지나치면 콜스택에 영향줌(스택오..

🤍 함수형 프로그래밍과 프로그램 테스트 명령형 코드를 테스트 하려고 한다면... 1. 순수함수와 부수효과가 있는 함수를 분리해서 테스트 가능한 단위를 설정해야 함 2. 전역 데이터에 의존하는 함수를 테스트 할 수 없음 3. 평가순서도 신경써야 함 선언형 코드(함수형)를 테스트 하려고 한다면... 1. 평가해야할 함수를 블랙박스로 보고 "동일한 input에 동일한 output내는지" 보면 됨 2. 비즈니스 로직에 집중해서 테스트 할수 있음 3. 모나드로 결합된 함수에서 순수함수/부수효과있는 함수를 떼어서 테스트할 수 있음 4. 부수효과 있는 함수는 "mocking"을 이용하여 테스트 (mocking? 테스트할 함수와 상호작용하는 객체가 할 일을 미리 정의, 기대식을 충족하지 않으면 불합격하는 식으로 사용)..

🧡 명령형 에러 처리 체계의 문제점 try-catch문으로 예외처리를 하는 것은 1. 함수 합성과 체이닝을 할수 없게 하고 2. 동일 input일때 동일한 output을 낸다는 참조 투명성원리에 위배되며, 3. 부수효과발생가능성 4. 에러발생시 호출지점을 벗어나 비지역성 non-locality원리에 위배 5. catch문안에서 특정 예외를 처리하는데에도 에너지를 써야 하기 때문에 호출자 부담 증가 6. 에러 조건 처리 블록들이 중첩되어 사용하기 어려움 예외처리는 적재적소에 쓰면 가장 좋다. 🧡 컨테이너로 잘못된 데이터 접근을 차단 값을 컨테이너화 해서 값을 안전하게 다루고, 프로그램 불변성이 지켜지도록 직접적인 접근 차단하기 //값을 함수형 자료형으로 감싸기 class Wrapper { construct..

💡 모듈성? 프로그램을 작고 독립적인 부분으로 나눌수 있는 정도 💡 함수체인과 함수 파이프라인 비교 함수형 프로그래밍에서 함수는 참조 투명성을 가진 것을 뜻함 (참조 투명성: 동일한 input을 넣으면 동일한 output을 낸다) - 메서드를 체이닝 (단단한 결합, 제한된 표현성) - 함수 파이프라인을 배열 (느슨한 결합, 유연성) 파이프라인 ? 한 함수의 출력이 다음 함수의 입력이 되게 느슨하게 배열한 방향성 함수 순차열 (디자인 패턴 중 '파이프 & 필터' 와 동등한 패턴) 파이프 함수를 만들기 위한 호환요건 ? 형식 : 앞단계 함수의 반환형식과 수신함수의 인수 형식이 일치해야 함 항수 : 수신함수는 앞단계 함수가 반환한 값을 처리하기 위해 적어도 하나 이상의 매개변수 선언해야 함 f(g(x)) = ..

✅ 프로그램 제어와 흐름 📎 제어흐름 (control flow) ? 프로그래밍 정답에 이르기까지 거치는 경로 ㄴ 명령형의 경우 - 분기, 루프에 따라 움직이는 일련의 연산(구문)으로 구성됨 ㄴ 선언형의 경우 - 서로 연결된 블랙박스 연산을 제어함 (= 고수준으로 추상화된 함수을 가지고 체이닝함) 함수형 으로 작성한 코드에서 고수준 추상화 함수로 가는 이유 ? ㄴ 콜백처럼 로직을 파악하려면 가장 안쪽에 감싼 내부 함수부터 하나씩 읽어야 하기 때문에 "가독성이 떨어짐" ㄴ 이미 존재하는 자료구조(배열, 이터러블...등)를 이용해 고계연산을 적용하여, 에러가능성은 줄이고, 유지보수시 편하게 함 ㄴ 부수 효과를 일으킬만한 기존의 수동 루프를 대체함 📎 람다 표현식 ? 한줄 짜리 익명함수를 일반 함수 선언보다 단..

➡️ 자바스크립트가 함수형 언어로 적합한 이유 1. 어디에나 있고 가장 널리 쓰임 2. 동적 형식 (dynamically typed => 다형성있는 함수를 만들 수 있음) 3. ES6에서 함수형 프로그래밍에 걸맞는 기능들 많이 추가됨 (화살표함수, 상수, 이터레이터, promise...) 4. 객체지향과 함수형 두 패러다임을 함께 사용할수있는 하이브리드 언어 (=> 자바스크립트는 다중 패러다임 개발이 가능한 언어) ✔️ 객체지향과 함수형의 가장 큰 차이는 "데이터(객체 속성)와 기능(함수)를 조직하는 방법"에 있음 ㄴ> 객체지향 : 인스턴스 메서드를 통해 조작 ㄴ> 함수형 : 두루두루 적용 가능하고, 굵게 나뉜(coarse-grained) 연산에 의존 ➡️ 불변성 및 변경에 대한 정책 자바스크립트의 동적..

객체 지향(OO)은 가동부를 캡슐화 하여 코드의 이해를 돕고, 함수형프로그래밍(FP)은 가동부를 최소화하여 코드의 이해를 돕는다 - 마이클 페더스 번외) 리액티브 프로그래밍은 '데이터 흐름(data flow)', '변화에 대한 전달(propagation of change)'에 초점을 둠 함수형 사고방식 - 확장성 => Yes!(추가기능을 만들기위해서 코드리팩토링이 계속 필요한가? No!) - 모듈화 용이성 => Yes!(파일 하나 고치면 다른 파일도 영향받는지? No!) - 재사용성 => Yes!(중복이 많은지? No!) - 테스트성 => Yes!(단위 테스트 하기 쉬운 함수인가? No!) - 헤아리기 쉬움 => Yes!(체계도 없고 가독성좋지 않은 어려운 코드인가? No! 위와 같이 정해진 답을 가질수..

반응형 아키텍쳐 - 순차적 액션 단계에 사용 (여러 원인 + 여러가지 효과 있는 경우 사용하기 좋음 / 하나의 원인으로 a-b-c단계로 효과가 일어난다면 비추) - "이벤트에 대해 일어날 일을 지정하는 것 (X가 일어나면 Y가 일어난다)" - 원인과 효과를 분리해서 표기 - 파이프라인 사용(여러가지 함수를 조합해서 쓸수있음, 그래서 여러단계일때 유용) - 타임라인이 유연해짐(순차적인 액션의 순서를 뒤집어서, 효과와 효과의 원인을 분리함) //초기 값을 받아서 => 업데이트 할수있는 기능을 가진 함수 만들기 function ValueCell(initialValue){ let curr = initialValue; return{ val: ()=>{ return curr; }, update: (f)=>{ let..

다이어그램을 그리기 위한 3단계 1. 액션확인 2. 각 액션을 그리고 3. 단순화 하기 ㄴ>자바스크립트에서 단순화 하기위한 단계 : 액션 통합하기 / 타임라인 통합하기 ㄴ> 1장?에서 본 cuttingline역할해줄 cut()함수 구현하기 (=> 기다렸다가 동작하기) const cut = (num, callback) => { let numFinished = 0; //카운터 초기화 return ()=>{ numFinished += 1; numFinished === num ? callback(): 0; } } let done = cut(3, ()=>{console.log("3개의 타임라인이 끝났습니다."); }) done(); //undefined done(); //undefined done(); //"3개..

선형자료구조 Queue ㄴ> 리스트 한쪽에서는 in, 다른 한쪽에서는 out작업 일어남 ㄴ> 선입선출방식(먼저들어온애가 먼저나감) ㄴ> 운영체제의 작업스케줄링에 사용함 선형자료구조 Stack ㄴ> 리스트의 한쪽으로만 in, out작업 일어남 ㄴ> 후입선출 (늦게 들어온애가 먼저 나감) 그밖의 선형자료구조 : 배열, 데크, 연속리스트, 연결리스트 비선형자료구조 : 트리 , 그래프 버그 수정을 위해 "DOM에 업데이트 되는 순서"를 만들자 ㄴ> 자료구조 QUEUE를 활용! => 순서대로 꺼내니까 액션 순서 조율하기에 좋음 (but 차례차례 실행되어서 기다림 발생함) ㄴ> 동시성 기본형: 자원을 안전하게 공유할 수 있는 재사용 가능한 코드 function DroppingQueue(max, worker){ //..