틈틈히 메모중

재귀 Recursion ?  자기 자신을 호출하여 문제를 해결하는 프로그래밍                               더 작고 더 간단한 하위문제로 분할됨 (즉, 전체중 일부 하위문제해결법을 가지고 전체문제를 해결함)나의 경우에 재귀를 떠올릴때면 ? 생각나는 그림이 엘리베이터에 탔을 때 서로 마주본 거울 같은 느낌이다. 마주 본 거울은 계속 자신을 반사반사반사하면서 작아지고 어떤 한 점에 이른다. 재귀를 쓸 때 생각 할 것들1. Base case(종료조건)이 필요함 2. 자기 자신을 호출해야 하고 하위 문제를 결합하여 전체에 대한 해결책을 얻어야 함 (recursive case)3. 재귀 호출시 반드시 종료조건으로 수렴할 수 있도록 하는 조건 필요4. 호출할때마다 콜스텍을 쓰기 때문에 메모리..

🤍 함수형 프로그래밍과 프로그램 테스트 명령형 코드를 테스트 하려고 한다면... 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! 위와 같이 정해진 답을 가질수..

프로젝트를 생성 할 폴더에서 터미널 실행 yarn create vite -> 생성할 프로젝트 이름 입력하면 프로젝트 폴더 생성됨 프로젝트 폴더에서 터미널 실행 yarn -> React 선택하고 -> Typescript 선택하면 끝!

eslint와 prettier는 각각 다른 기능을 제공한다. eslint는 정적 코드 분석 툴로 문법적 문제 식별 등을 할 수 있고, prettier는 코드 포맷터로 스페이스 설정, 들여쓰기 설정 등 코드 작성 양식을 동일하게 유지시켜준다. 이 두가지는 협업시 꼭 함께 사용하게되는데, .eslintrc.js랑 .prettierrc를 작성했음에도 VScode에서 이 두가지 익스텐션이 작동하지 않기도 한다. 그럴 때 vscode의 setting을 열고, setting의 json을 열어서 아래 두가지를 추가하면 eslint와 prettier를 함께 사용할 수 있게 된다. { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vsc..

생각보다 굿즈가 많아서 좋았고, 그래서 노트북 가져와서 듣는건 비추천...! (세션강의도 인프런에 업데이트 된다고 함)당신의 웹페이지는 몇 점인가요 - 라이트 하우스를 통한 프런트 성능 개선(남상우 - 어니컴)라이트하우스의 여러가지 기능에 대해서 자세히 볼 수 있었다. 대략적으로는 라이트하우스에 대해서 알고있었는데솔직히 말하면 성능까지 신경 못썼어요... (물론 성능이슈가 있다면 바로 신경써야 하는데!)이슈가 있을때 라이트하우스를 통해 어떤 지표가 확인되면 어떤 부분을 고쳐나가야 좋을지에 대한 실전 팁을 많이 얻었다.  어느 날 고민 많은 주니어 개발자가 찾아왔다 2탄 - 주니어 시절 성장과 고민들(김영한 - 지식공유자)나는 프론트지만, 백엔드의 인기왕 김영한님의 강의가이번 인프콘의 세션 중 가장 인상 ..

Array 일반적으로 배열은 메모리에 할당된 연속적인 공간을 차지함 int arr[5] = {1,2,3,4,5}; //메모리에 연속적인 공간에 1,2,3,4,5를 할당함 //컴퓨터는 배열의 첫번째 값의 메모리주소만을 기억함 //인덱스로 배열에 접근하면 컴퓨터는 첫번째 메모리주소로부터 인덱스만큼 떨어진 곳을 찾아 값을 가져옴 //그렇기 때문에 참조시 O(1)의 성능을 가짐 => 참조는 빠름 처음에 5만큼의 크기를 차지할 배열을 선언하고 이후 10만큼의 크기로 변경하려고 하면 컴퓨터는 크기가 10인 연속적인 공간의 메모리를 다시 찾아야 하고, 값도 복사해서 다시 할당함 + 데이터 중간에 삽입하면 모든 데이터의 위치를 변경해야 하기 때문에 오버헤드 많이 발생 => 일반적으로 배열은 데이터 추가 삭제에 있어서 ..

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