폭파할까 말까 고민중인 잡지식 메모장

타임라인 다이어그램을 그려서, 시간에 따라 어떤 일이 일어나는지 보고, 버그를 수정 액션 확인하고 -> 액션그리기(순서대로 실행, 비동기실행분류) -> 타임라인 단순화 -> 타임라인 읽고 결과예측 > 두가지 액션이 순서대로 나타나면 같은 타임라인에 넣음 ㄴ순차 실행 함수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. 복사..

절차적 방법 구현 ? 순차적 처리를 중요시 함 (컴퓨터가 처리하는 방향대로 코드를 작성함) ㄴ단점 : 순서 바꾸면 결과 값 이상해질 수 있음 / 유지 보수 어렵다고 하고 코드가 길어질수록 가독성이 떨어짐 (대형 프젝 부적합함) 액션이 뭘까? ㄴ 외부에 영향을 줄 수 있는 것 (ex. 전역변수, DOM에서 읽고, 바꾸는 것) ㄴ 액션이 하나만 있어도 그 함수 전체가 액션이 됨 ㄴ 부수효과가 있는 함수 ㄴ 암묵적 입력 : 인자외 다른 입력 (부수효과) ㄴ 암묵적 출력 : 리턴값 외 다른 출력 (부수효과) 함수의 입력과 출력 ㄴ명시적 입력 : 인자 ㄴ명시적 출력 : 리턴값 ㄴ함수에 암묵적 입력과 암묵적 출력이 있으면 액션이 됨 ㄴ암묵적 입력을 명시적입력(함수의 인자)으로/ 암묵적 출력을 명시적출력(리턴값)으로..

액션 : 실행시점과 횟수에 의존함 (ex)이메일 보내기, 데이터 베이스 읽기 계산 : 입력과 출력을 계산함, 어떤 일을 결정하는 것 (ex) 최댓값 찾기, 이메일 주소가 올바른지 확인하기 데이터 : 이벤트에 대한 사실 (ex) 사용자가 입력한 메일주소, 은행 API로 읽은 달러 수량 1. 문제에 대해 생각할 때 ㄴ 코딩 시작전, 문제 고민단계에서도 문제를 액션, 계산, 데이터로 나눠볼 수 있음 2. 코딩할 때 ㄴ액션과 계산과 데이터를 분리해서 코드작성하도록 고민할 것 3. 코드 읽을 때 ㄴ액션은 시간에 의존하기 때문에 ㄴ숨어있는 액션까지 잘 파악하고, 계산, 데이터로 나눠지지 않은 부분을 리팩토링 하도록 생각해보기 ***참조 투명(referentially transparent) ? 계산의 결과값은 동일한..

함수형 사고 ? ㄴ1) 액션, 계산, 데이터 => 계층형 설계 ㄴ2) 일급 추상 => 타임라인 다이어그램(분산시스템을 이해하기 위해 사용), 일급함수(함수를 인자로 받음) 피자집 예시 1)번 적용예시 ㄴ액션, 계산, 데이터를 구분하고, 계층형 설계하기 ㄴ계층형 설계는 유지 보수를 잘하기 위해 사용(각 계층은 코드의 변경 가능성에 따라 나눔) 액션 - 반죽 펴기 - 피자 배달 - 재료 주문 자주바뀜 | | | | 자주안바뀜 피자 조리법 --------------- 이번주 사야 할 것 조리법 순서 ----------------- 재료 목록 JS 객체 / 배열 --------------JS 객체 / 숫자 계산 - 조리법에 나온것을 두배로 만들기 - 쇼핑목록 결정 데이터 - 고객 주문 - 영수증 - 조리법 계층..

함수형 프로그래밍 ? 1. 수학함수를 사용하고 부수효과를 피하는 것이 특징인 프로그래밍 패러다임 2. 부수효과 없이 순수 함수만 사용하는 프로그래밍 스타일 부수효과 ? 함수가 리턴값 이외에 하는 모든 일 순수함수? 인자에만 의존하고 부수효과가 없는 함수 (인자에만 의존 = 같은인자를 넣으면 항상 같은 결과를 돌려줌 = 수학함수) 실용적 측면에서 함수형 프로그래밍 정의의 문제가 있기 때문에 "학문적접근 보다 기술과 개념으로 보기" ㄴ1. 부수효과는 실제로 필요함 (=> 필요하면 써야함) ㄴ2. 함수평프로그래밍은 부수효과를 잘 다룰 수 있음 (=> 부수효과가 필요하지만 문제될 수 있음을 인지하고 대응할 것) ㄴ3. 함수형 프로그래밍으로 잘 만든 소프트웨어가 많음(실용적) 함수평 프로그래머는 코드를 3분류로 ..