dev 썸네일형 리스트형 FP 중요 개념 정리3 :: 조합기를 사용한 제어 흐름 관리 함수형 프로그래밍에서는 if, for같은 제어 흐름도 함수 조합기를 이용해 구현합니다. 이전에 살펴본 compose, pipe도 함수 조합기의 일부입니다. 이번 포스트에서는 제어 흐름을 관리하는데 자주 사용되는 함수 조합기를 다루어 보겠습니다. 이번 포스트에서 다루게 될 함수들을 간단히 정리하면 다음과 같습니다. identity : 주어진 인수와 동일한 값을 반환. tap : 객체 하나와 함수 하나를 받아, 객체에 함수를 실행하고, 다시 객체를 반환. alternation : 함수 2개를 받아 값이 있으면 첫 번째 함수를, 없으면(ex. null)두 번째 함수를 실행. sequence : 2개 이상의 함수를 인수로 받아, 동일한 값에 대해 각 함수를 차례로 실행하는 함수를 반환. fork(join) : .. FP중요 개념 정리2 :: 합성 함수형 프로그래밍의 핵심은 문제를 작은 작업들로 쪼갠 후, 이들을 다시 조합하는 것입니다. side effect가 없는 순수한 함수는 합성이 가능합니다. 이렇게 합성된 함수는 그 자체로도 순수한 함수이기 때문에 시스템의 다른 부분을 손대지 않아도 더 복잡한 프로그램의 일부로 다시 합성될 수 있습니다. 함수 합성을 R.compose로 구현하는 예시는 다음과 같습니다. // 서술부 const explode = str => str.split(/\s+/); const count = arr => arr.length; const coundWords = R.compose(count, explode); // 평가부 countWords("hello, world"); //-> 19 함수 합성을 이용하면 위와 같이 서술부와.. FP 중요 개념 정리1 :: 다항함수의 항수 줄이기 함수형 프로그래밍에서는 인수의 개수(항수)가 적을수록 좋습니다. 항수의 개수가 복잡도와 비례하는 경우가 많기 때문입니다. 이번 포스트에서는 다항함수의 항수를 줄여, 더 유연한 함수를 만드는 기능들을 소개합니다. curry 항수가 1개인 순수함수는 한 가지 용도, 즉 단일 책임을 담당하는 가장 단순한 함수이며, 가장 좋은 형태의 함수라고 할 수 있습니다. curry를 사용하면 다항 함수를 단항 함수로 쉽게 변형할 수 있습니다. 다항함수를 curry한 후, 일부 인수만 넣고 호출하면 함수가 실행되는 게 아니라 모자란 나머지 인수가 채워지기를 기다리는 새로운 함수가 반환됩니다 즉, 커링은 함수가 인수를 모두 받을 때 까지 실행을 보류/지연시켜 단항 함수의 순차열로 전환하는 기법이라고 할 수 있습니다. curr.. mirage.js with react.js mirage.js mirage.js는 API 서버를 mocking 하는 기능을 제공합니다. 작동 방식은 클라이언트가 보내는 리퀘스트를 인터셉트해서 mock response를 보내주는 방식입니다. 일종의 가짜 서버를 만드는 방식이라 테스팅 뿐만 아니라 개발에도 활용할 수 있습니다. Mirage is a JavaScript library that lets frontend developers mock out backend APIs. Unlike other mocking libraries, Mirage makes it easy to recreate dynamic scenarios, the kind that are typically only possible when using a real production se.. AWS 인프라를 이용한 페이지 CI/CD 구축 github action -> s3 https://velog.io/@1nthek/GitHub-Action%EC%9C%BC%EB%A1%9C-AWS-S3%EC%97%90-%EB%B0%B0%ED%8F%AC-%EC%9E%90%EB%8F%99%ED%99%94 GitHub Action으로 AWS S3에 배포 자동화 일반적으로는 EC2에 nginx나 apache를 띄우고, static 파일을 업로드하는 식으로 배포를 하는데, 단순히 Vue.js나 React같이 SPA로 된 프로젝트의 경우는 자바스크립트만 동작하면 되기에 서버가 필요없다 velog.io https://weekwith.tistory.com/entry/Nextjs-AWS-S3%EB%A5%BC-%ED%86%B5%ED%95%9C-%EC%A0%95%EC%A0%.. redux를 이용해 react modal을 효율적으로 관리하는 방법 이전에 봤던 코드 중에 전체 프로젝트의 모달을 하나의 컴포넌트에서 제어하는 것을 보았습니다. 이번에 모달을 만들 일이 생겨 관련 내용을 검색해보니 실제로 저와 같은 생각을 하시는 분도 종종 계셨습니다. [Okky 질문글 링크] 링크를 따라가 보시면 댓글에서 Practical Redux, Part 10: Managing Modals and Context Menus 라는 글을 소개하고 있는데, 조금 오래된 글이지만 이 글을 읽고 대략적인 구조를 잡을 수 있었습니다. 본론에 앞서, 이 작업의 목표를 정의하자면 '모달의 상태, 렌더링을 다른 컴포넌트에서 분리하자' 입니다. 자세히 말하자면 다른 컴포넌트에 isOpen 같은 state를 두지 말고 redux 스토어로 관리하는 것이 첫 번째 목표입니다. 그리고 렌더.. Next.js TypeScript 환경에서 Jest 초기 설정 create next app(CNA)에 typescript 옵션을 붙여 프로젝트를 생성한 후 Jest를 설정하는 방법입니다. CNA 을 사용할 경우 Jest 세팅이 되어 있지 않기 때문에 별도로 세팅을 해 주어야 합니다. 공식 문서 링크 Testing | Next.js Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Jest, and React Testing Library. nextjs.org 1. 필요 패키지 설치 테스트에 필요한 파일들을 설치합니다. $ yarn add -D @testing-library/dom @testing-library/jest-dom @testing-library/r.. Jest import (ESM)기능 활성화하기 (with 프로그래머스 과제관) 프로그래머스 과제관의 vanilla.js 과제를 복기하던 도중 문제가 생겼다. 프로젝트가 기본적으로 Ecmascript modules(이하 ESM)를 지원하지 않아서 import 구문을 사용할 수 없었다. 이 문제같은 경우에는 단순히 ESM을 사용한다는 것만 명시해주면 되기 때문에 수정이 어렵지 않았다. // index.html // package.json { "type": "module" } 문제는 ESM을 활성화하니 Jest에서 에러가 났다. node 기반의 테스트 환경이기 때문에 ESM을 기본적으로는 지원하지 않기 때문이다. 이전에는 이 에러를 수정하고 ESM을 사용하기 위해서 상당한 삽질(?)이 필요했던 것 같은데, Jest 25.4.0 버전 이후로는 설정이 매우 간단해졌다. [Meta: Nati.. 이전 1 2 3 4 5 ··· 10 다음
