흰둥씨의 개발장

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

반응형 아키텍쳐 - 순차적 액션 단계에 사용 (여러 원인 + 여러가지 효과 있는 경우 사용하기 좋음 / 하나의 원인으로 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){ //..

타임라인 다이어그램을 그려서, 시간에 따라 어떤 일이 일어나는지 보고, 버그를 수정 액션 확인하고 -> 액션그리기(순서대로 실행, 비동기실행분류) -> 타임라인 단순화 -> 타임라인 읽고 결과예측 > 두가지 액션이 순서대로 나타나면 같은 타임라인에 넣음 ㄴ순차 실행 함수A() | 함수B() | 함수C() > 두가지 액션이 동시에 실행되는 경우 순서를 예측할수 없음 > 다른 타임라인에 넣음 ㄴ 자바스크립트는 stack에서 한가지만 수행하기 때문에 동시에 실행되지는 않음 함수A() | exeA() 함수B() | | exeB() 함수C() 자바스크립트는 싱글스레드(single threaded) - 하나의 실행 컨텍스트를 가짐(=동기적 처리한다= 한번에 코드 한줄씩 차례차례 실행한다= synchronous =콜..

# 이번장의 핵심내용 : 객체를 다루는 함수형 도구 알아보기 어떤객체라도 바꿀수 있는 함수update()를 만들어서 재활용성을 높이자 function objectSet(obj, key, value){ //카피온라이트 let copy = Object.assign({}, obj); copy[key] = value; return copy; } function update(obj, key, modify){ //여러 함수들 중 객체상태를 업데이트 하는 동작이 많아 //재사용할수있도록 고차함수로 update()를 만듦 let value= obj[key]; let newValue = modify(value); let newObj = objectSet(obj, key, newValue); return newObj; }..

##이번장의 핵심 내용 : 배열을 다루기 위한 함수형 도구 알아보기 1. 함수형 도구 : map(); [1,2,3,4,5].map((item) => { //여기서 사용한 콜백함수를 "사용할 곳에서 바로 정의한 익명함수(=인라인함수)" return item + 1; }) //[2, 3, 4, 5, 6] ㄴ 배열에 null이나 undefined를 미리 거르고 싶은데 map()은 그게 안되네 => filter()를 쓰자 2. 함수형 도구 : filter(); [1,2,3, null, undefined, 4,5].filter(item => item !== null && item !== undefined) //filter함수 안에 '술어(true, false를 리턴하는 함수)'를 넣음 // [1, 2, 3, 4,..

일급함수(first-class function) ? 함수를 "일급객체"로 여긴다는 의미 일급 객체 ? 아래 조건 만족하는 객체 1. 무명의 리터럴로 생성할 수 있음. (런타임에 생성가능하다) 2. 변수나 자료구조(객체, 배열등)에 저장 가능. 3. 함수의 매개변수에 전달 할 수 있음 4. 함수의 반환값으로 사용가능 자바스크립트의 함수는 위 조건을 모두 만족하기 때문에 일급객체 임 ㄴ 함수를 객체와 동일하게 쓸 수 있다는 뜻 ㄴ 객체는 값이기 때문에 함수도 값과 동일하게 취급 ㄴ 함수는 값을 사용할 수 있는 곳은 어디든 리터럴로 정의가능하고, 런타임에 함수 객체로 평가됨 ㄴ 일급객체 함수의 특징 : 일반 객체처럼 함수의 매개변수로 전달 가능 / 함수의 반환값으로 사용가능 (고차-콜백함수생김) => 함수형 ..

계층형 설계 : 소프트웨어를 계층으로 구성하는 기술 => 추상화 //계층형 설계 getsFreeShopping(); cartTax(); //비즈니스 규칙 \ | removeItem(); calcTotal(); addItem(); setPrice(); // 장바구니를 위한 동작들 | / | remove_items(); add_item(); | //카피온 라이트 | / | .slice(); --------------------------| //언어를 지원하는 배열관련기능 계층형 설계감각을 키우기 위한 입력 단서 함수본문 계층구조 함수시그니처 길이 화살표 길이 함수명 복잡성 응집도 인자이름 구체화 단계 구체화 단계 인자값 함수 호출 리턴값 프로그래밍 언어의 기능 사용 계층형 설계 감각을 키우기 위한 출력 조직..

클린코드란 무엇인지에 대해 생각하게 됨 ⇒ 결국 말하고자 하는 바가 프로그램의 재사용성 높이고, ⇒ 테스트단계에서 에러를 잡아내기 용이하도록, ⇒ 가독성이 좋은 코드로 유지 보수에 용이하도록, ⇒ 성능향상도 생각해보기 등… 하는 것의 일환 아닌가! 비즈니스 요구사항과 동작 코드를 분리하는 것 (추상화) 액션, 계산, 데이터로 나누어 생각하는 것 (가독성측면?) 액션보다는 계산을 주로 사용하기(암묵적 입 출력을 명시적 입 출력으로 바꿔서 / 테스트 용이하도록) 하나의 함수가 하나의 일을 수행하도록 설계하기(단일책임) 원본 데이터 보존하고, 변경 사항은 복사본 만들어 리턴 하기 (카피 온 라이트, 원본데이터를 계속 변경하면 결합도가 높아짐...) 전역변수 가급적 사용하지 말 것 (모듈화, 독립성 높이는 것)..

동작을 읽기, 쓰기 , 읽기쓰기 로 분류하기 1. 읽기 : 데이터를 바꾸지 않고 정보를 가져오는 것 / 데이터가 바뀌지 않기 때문에 다루기 쉬움 2. 쓰기 : 데이터를 바꾸는 것 / 바뀌는 값은 어디서 사용될 지 모르기 때문에 바뀌지 않도록 원칙 필요 (=> 불변성 원칙 필요) 예시) 장바구니 동작 과정을 읽기, 쓰기로 나눠보기 ㄴ읽기/ 제품 개수 가져오기 ㄴ읽기/ 제품이름으로 제품가져오기 ㄴ쓰기/ 제품 추가하기 ㄴ쓰기/ 제품이름으로 제품빼기 ㄴ쓰기/ 제품이름으로 제품 구매수량 바꾸기 쓰기에서 필요한 불변성 원칙 : 카피 온 라이트(copy-on-write) ㄴ자바스크립트는 불변성 적용하려면 직접 구현해야함 카피 온 라이트의 원칙 1. 복사본 만들기 2. 복사본 변경하기(원하는 만큼) 3. 복사본 리턴하..

리팩토링 => 재사용 유지보수,테스트를 쉽게 하기 위해 하는 것 0. 중복된 코드가 없을수록 GOOD 1. 암묵적 입력과 암묵적 출력은 적을수록 GOOD(계산 뿐 아니라 액션에도 적용되는 내용) ㄴ 암묵적 입력 : 인자가 아닌 모든 입력 => 인자로 바꾸자 ㄴ 암묵적 출력 : 리턴값이 아닌 모든 출력 => 리턴값으로 바꾸자 2. 함수를 작은 단위로, 한개의 함수가 1개의 일을 하는 것이 좋음 ㄴ 재사용, 유지보수, 테스트 면에서 쉬워짐 ㄴ 카피-온-라이트 패턴을 빼내기 (아래 예시 참고) //카피온 라이트를 빼내기 전 function add_item(cart, name, price) { let new_cart = cart.slice(); // 1. 배열 복사 new_cart.push({ // 2. 복사..