Recommended
More Related Content
Similar to 2023_테오콘_패턴매칭을 통해 선언적으로 타입스크립트 다루기_허브
Similar to 2023_테오콘_패턴매칭을 통해 선언적으로 타입스크립트 다루기_허브 (20)
2023_테오콘_패턴매칭을 통해 선언적으로 타입스크립트 다루기_허브
- 1. 패턴매칭을 통해 선언적으로 typescript 다루기 허브 | fastforward 사진 사이즈 맞춰주세 요
- 2. 발표자 소개 시간을 만드는 개발자 허민입니다 Code Abstraction, Build Optimization, DX-UX Synergy 🏢 fastforward / frontend engineer 🧑💻 toss/slash, pnpm translate ✉ huhmin0409@naver.com
- 3. 목차 1. 패턴매칭이 필요한 이유 2. 패턴매칭이란? 3. 패턴매칭이 어떻게 문제를 해결하는가? 4. 패턴매칭을 통해 해결해보고 느낀점
- 4. 패턴매칭이 필요한 이유 1. 패턴매칭이 필요한 이유
- 5. 1. 패턴매칭이 필요한 이유 오늘도 출근하여 업무를 보는 개발자
- 6. 1. 패턴매칭이 필요한 이유 개발자, 기획자, 디자이너 등등.. 에게 오는 많은 메시지 ㅋㅋ 님아 빨리 해주셈 확인점
- 7. 1. 패턴매칭이 필요한 이유 열어보니..? 놀랍도록 다채로운 요구사항!
- 8. 1. 패턴매칭이 필요한 이유 기존 코드를 수정, 유지보수하는 과정에 서 오는 고민들
- 9. 1. 패턴매칭이 필요한 이유 복잡한 분기를 거치며 추론 되지 않는 타입
- 10. 1. 패턴매칭이 필요한 이유 타입 작성 코드와 로직의 주 객전도 타입 관련 코드 로직
- 11. 1. 패턴매칭이 필요한 이유 타입 에러 보느라 시간을 다썼네..
- 12. 1. 패턴매칭이 필요한 이유 타입이 정확한 코드 간결한 코드 빠르고 효율적인 코드
- 13. 1. 패턴매칭이 필요한 이유 “복잡한 분기와 타입처리”
- 14. 1. 패턴매칭이 필요한 이유 🧐 문제는 알았는데 그러면 해결책은?
- 15. 1. 패턴매칭이 필요한 이유 🧐 그럼 다른 언어는 어떻게 효율적으로 분기를 할까?
- 16. 1. 패턴매칭이 필요한 이유 🧐 그럼 다른 언어는 어떻게 효율적으로 분기를 할까? 클린코드나 아키텍쳐에서 해답을 얻을 수 있을까?
- 17. 1. 패턴매칭이 필요한 이유 🧐 그럼 다른 언어는 어떻게 효율적으로 분기를 할까? 클린코드나 아키텍쳐에서 해답을 얻을 수 있을까? 함수형 프로그래밍을 쓰면 어떻게 분기처리할 수 있지?
- 18. 1. 패턴매칭이 필요한 이유 🤩 함수형 프로그래밍을 쓰면 어떻게 분기처리할 수 있지? 함수형 프로그래밍에서 힌트를 얻다!
- 19. 1. 패턴매칭이 필요한 이유 if/else switch ternary operator 분기처리를 할 수 있는 방법
- 20. 1. 패턴매칭이 필요한 이유 분기처리를 할 수 있는 방법 if/else switch ternary operator 🤔 한정된 자료형 변경, 확장할 수록 복잡 해지는 코드 휴먼 에러 타입 추론
- 21. 1. 패턴매칭이 필요한 이유 분기처리를 할 수 있는 방법 if/else switch ternary operator pattern matching 🪄 함수형 언어에서는 마법같은 방법이 가능합니다.
- 23. 2. 패턴매칭이란?
- 24. 2. 패턴매칭이란? 다양한 형태의 데이 터
- 25. 2. 패턴매칭이란? 다양한 형태의 데이 터 원하는 데이터 패턴 을 선언
- 26. 2. 패턴매칭이란? 다양한 형태의 데이 터 원하는 데이터 패턴 을 선언 추상화된 내부 로직 타입 추론된 데이터
- 27. 2. 패턴매칭이란? 어떤 데이터든 손쉽게 추상화 할 수 있습니다.
- 28. 2. 패턴매칭이란? 그리고 타입 시스템까지 지원합니다.
- 29. 2. 패턴매칭이란? 기존 함수형 프로그래밍 언어 문법 데이터를 조작하고 처리하기 위해 선언적인 방식을 채택 특정 패턴(형태)을 가진 데이터를 찾거나 추출
- 30. 2. 패턴매칭이란? 자바스크립트에서는 패턴매칭이란걸 들어본적이 없는데..?
- 32. 2. 패턴매칭이란? https://tc39.es/proposal-pattern-matching 표준 스펙은 아니지만 꾸준한 수요와 구현체 有
- 33. 2. 패턴매칭이란?
- 34. 2. 패턴매칭이란? TypeScript의 자동 타입 추론을 갖춘 완전한 패턴 매칭 라이브러리 더 쉽고 안전한 분기 코드를 작성하세요. 패턴 매칭을 사용하면 복잡한 조건을 단일하고 간결한 표현으로 표현할 수 있습니다. 코드가 더 짧고 가독성이 향상됩니다. 완전성 검사 는 가능한 모든 분기 조건을 빼먹지 않았는지 확인합니다.
- 35. 2. 패턴매칭이란? TypeScript의 자동 타입 추론을 갖춘 완전한 패턴 매칭 라이브러리 더 쉽고 안전한 분기 코드를 작성하세요. 패턴 매칭을 사용하면 복잡한 조건을 단일하고 간결한 표현으로 표현할 수 있습니다. 코드가 더 짧고 가독성이 향상됩니다. 완전성 검사 는 가능한 모든 분기 조건을 빼먹지 않았는지 확인합니다.
- 36. 2. 패턴매칭이란? TypeScript의 자동 타입 추론을 갖춘 완전한 패턴 매칭 라이브러리 더 쉽고 안전한 분기 코드를 작성하세요. 패턴 매칭을 사용하면 복잡한 조건을 단일하고 간결한 표현으로 표현할 수 있습니다. 코드가 더 짧고 가독성이 향상됩니다. 완전성 검사 는 가능한 모든 분기 조건을 빼먹지 않았는지 확인합니다.
- 37. 2. 패턴매칭이란? TypeScript의 자동 타입 추론을 갖춘 완전한 패턴 매칭 라이브러리 더 쉽고 안전한 분기 코드를 작성하세요. 패턴 매칭을 사용하면 복잡한 조건을 단일하고 간결한 표현으로 표현할 수 있습니다. 코드가 더 짧고 가독성이 향상됩니다. 완전성 검사 는 가능한 모든 분기 조건을 빼먹지 않았는지 확인합니다.
- 38. 2. 패턴매칭이란? TypeScript의 자동 타입 추론을 갖춘 완전한 패턴 매칭 라이브러리 더 쉽고 안전한 분기 코드를 작성하세요. 패턴 매칭을 사용하면 복잡한 조건을 단일하고 간결한 표현으로 표현할 수 있습니다. 코드가 더 짧고 가독성이 향상됩니다. 완전성 검사 는 가능한 모든 분기 조건을 빼먹지 않았는지 확인합니다.
- 39. 2. 패턴매칭이란?
- 40. 2. 패턴매칭이란? 분기 안에서 변수를 선언할 수 없다. 항상 기본값을 가져야 하며, 모든 경우를 고려하지 않는다.
- 41. 2. 패턴매칭이란? 함수로 선언, 반환
- 42. 2. 패턴매칭이란? 매핑된 모든 상태를 체크
- 43. 2. 패턴매칭이란? 더 구체적인 매칭
- 45. 2. 패턴매칭이란? 타입이 정확한 분기 코드 유연하고 명확한 선언적인 코드 복잡한 조건을 가졌지만 간결한 코드 빠른 개발과 효율적인 코드
- 46. 2. 패턴매칭이란? 타입이 정확한 분기 코드 유연하고 명확한 선언적인 코드 복잡한 조건을 가졌지만 간결한 코드 빠른 개발과 효율적인 코드
- 47. 2. 패턴매칭이란? 타입이 정확한 분기 코드 유연하고 명확한 선언적인 코드 복잡한 조건을 가졌지만 간결한 코드 빠른 개발과 효율적인 코드
- 48. 2. 패턴매칭이란? 타입이 정확한 분기 코드 유연하고 명확한 선언적인 코드 복잡한 조건을 가졌지만 간결한 코드 빠른 개발과 효율적인 코드
- 49. 2. 패턴매칭이란? 타입이 정확한 선언적인 간결한 빠르고 효율적인
- 50. 패턴매칭이 어떻게 문제를 해결하는가? 3. 패턴매칭이 어떻게 문제를 해결하는가?
- 51. 3. 패턴매칭이 어떻게 문제를 해결하는가? 출처 : 토스 피드
- 52. 3. 패턴매칭이 어떻게 문제를 해결하는가? 금융 자산의 이름과 가격을 보여주는 가상의 컴포넌트
- 53. 3. 패턴매칭이 어떻게 문제를 해결하는가?
- 54. 3. 패턴매칭이 어떻게 문제를 해결하는가? 국가의 종류는 한국, 미국, 중국
- 55. 3. 패턴매칭이 어떻게 문제를 해결하는가? 금융 자산은 주식, 펀드, 지수 국가 타입을 가지고 있다. 조금씩 타입이 다르다.
- 56. 3. 패턴매칭이 어떻게 문제를 해결하는가? 금융 자산 유니온
- 57. 3. 패턴매칭이 어떻게 문제를 해결하는가?
- 58. 3. 패턴매칭이 어떻게 문제를 해결하는가? 분명 타입은 지정되어 있는데 분기를 거치면 속성을 못찾는다.
- 59. 3. 패턴매칭이 어떻게 문제를 해결하는가? 타입 추론의 한계 타입 겹침(Type Overlap) 문제 🙁
- 60. 3. 패턴매칭이 어떻게 문제를 해결하는가? https://github.com/microsoft/TypeScript/issues/18758
- 61. 3. 패턴매칭이 어떻게 문제를 해결하는가? 서로 다른 유니온 멤버들의 타입이 겹 칠 수 있는 상황이 발생 TypeScript는 어떤 멤버가 선택되어 야 하는지를 명확하게 결정하기 어려 움 의도한 대로 타입을 추론하지 못하고 오류가 발생하는 원인 🧐 😵💫 🤯 타입 겹침(Type Overlap)
- 62. 3. 패턴매칭이 어떻게 문제를 해결하는가? 타입 겹침(Type Overlap) 서로 다른 유니온 멤버들의 타입이 겹 칠 수 있는 상황이 발생 TypeScript는 어떤 멤버가 선택되어 야 하는지를 명확하게 결정하기 어려 움 의도한 대로 타입을 추론하지 못하고 오류가 발생하는 원인 🧐 😵💫 🤯
- 63. 3. 패턴매칭이 어떻게 문제를 해결하는가? 타입 겹침(Type Overlap) 서로 다른 유니온 멤버들의 타입이 겹 칠 수 있는 상황이 발생 TypeScript는 어떤 멤버가 선택되어 야 하는지를 명확하게 결정하기 어려 움 의도한 대로 타입을 추론하지 못하고 오류가 발생하는 원인 🧐 😵💫 🤯
- 64. 3. 패턴매칭이 어떻게 문제를 해결하는가? 타입 겹침(Type Overlap) 서로 다른 유니온 멤버들의 타입이 겹 칠 수 있는 상황이 발생 TypeScript는 어떤 멤버가 선택되어 야 하는지를 명확하게 결정하기 어려 움 의도한 대로 타입을 추론하지 못하고 오류가 발생하는 원인 🧐 😵💫 🤯 타입 캐스팅, 단언, 가드.. 타입을 추론하기 위한 코드 작성
- 65. 3. 패턴매칭이 어떻게 문제를 해결하는가? 타입 가드를 사용한 코드
- 66. 3. 패턴매칭이 어떻게 문제를 해결하는가? 유연성 부족 타입 추가의 번거로움 중복된 코드 타입 가드 함수의 중복 로직 긴 코드 배보다 배꼽 답답하니 서버 개발자와 이야기 그래도 답답한 나의 코드 BFF에서 원하는 데이터 형식으로 만들기 타입 시스템이 뭐라고..
- 67. 3. 패턴매칭이 어떻게 문제를 해결하는가? 유연성 부족 타입 추가의 번거로움 중복된 코드 타입 가드 함수의 중복 로직 긴 코드 배보다 배꼽 답답하니 서버 개발자와 이야기 그래도 답답한 나의 코드 BFF에서 원하는 데이터 형식으로 만들기 타입 시스템이 뭐라고.. 패턴매칭으로 속 시원하게 해결 ✨
- 68. 3. 패턴매칭이 어떻게 문제를 해결하는가? 찾고자 하는 패턴 타입 추론된 콜백 인자 더이상 불필요한 타입 관 련 코드
- 69. 3. 패턴매칭이 어떻게 문제를 해결하는가? 그렇다면 패턴을 통해 필터링 된 데이터가 어떻게 올바른 타입을 가지고 있을까? 패턴과 필터링된 데이터의 타입을 조합 조합된 타입을 이용하여 match 함수의 인자로 들 어온 데이터를 역추론 이 과정에서 매우 복잡한 타입 분기와 타입 캐스팅 을 수행
- 70. 3. 패턴매칭이 어떻게 문제를 해결하는가? 그렇다면 패턴을 통해 필터링 된 데이터가 어떻게 올바른 타입을 가지고 있을까? 패턴과 필터링된 데이터의 타입을 조합 조합된 타입을 이용하여 match 함수의 인자로 들 어온 데이터를 역추론 이 과정에서 매우 복잡한 타입 분기와 타입 캐스팅 을 수행
- 71. 3. 패턴매칭이 어떻게 문제를 해결하는가? 그렇다면 패턴을 통해 필터링 된 데이터가 어떻게 올바른 타입을 가지고 있을까? 패턴과 필터링된 데이터의 타입을 조합 조합된 타입을 이용하여 match 함수의 인자로 들 어온 데이터를 역추론 이 과정에서 매우 복잡한 타입 분기와 타입 캐스팅 을 수행
- 72. 3. 패턴매칭이 어떻게 문제를 해결하는가? 정확한 타입 추론을 통한 코드 안전성 증가 부동산 타입에 대한 조건을 with 함수에 작성하지 않았다는 에러
- 73. 3. 패턴매칭이 어떻게 문제를 해결하는가? 선언적인 코드를 통해 유연한 코드 작성 가능 선언적 프로그래밍은 무엇(WHAT)을 나타내야하는지를 프로그래밍 적으로 표현 어떻게(HOW) 할건지 보단 무엇인지(WHAT)를 정의합니다.
- 74. 3. 패턴매칭이 어떻게 문제를 해결하는가? 선언적인 코드를 통해 유연한 코드 작성 가능 화장실로 가서 칫솔을 들고 치약을 칫솔에 묻힌 다음 칫솔에 물을 묻히고 이를 닦을 때는 윗몸부터 아래로 이를 쓸듯이 닦아주세요. 명령형(HOW) 👩🏫
- 75. 3. 패턴매칭이 어떻게 문제를 해결하는가? 선언적인 코드를 통해 유연한 코드 작성 가능 “난 이빨이 없는데..?” 명령형(HOW) 👴
- 76. 3. 패턴매칭이 어떻게 문제를 해결하는가? 선언적인 코드를 통해 유연한 코드 작성 가능 “양치 해” 선언형(WHAT) 🫵
- 77. 3. 패턴매칭이 어떻게 문제를 해결하는가? 선언적인 코드를 통해 유연한 코드 작성 가능 선언형(WHAT) 🐶 👴 🧛 양치(이를 깨끗이 하는 행위)는 알 아서 자율적으로 가능
- 78. 3. 패턴매칭이 어떻게 문제를 해결하는가? 선언적인 코드를 통해 유연한 코드 작성 가능 선언형(WHAT) 가독성과 추상화 수준을 높여 본질 에 집중할 수 있다.
- 79. 밴더에서 제공하는 주식명이 복잡해 실제 쓰이는 이름과 다릅니다. 어드민에서 주식 이름을 변경할 경우 금융 정보 API에 새로운 필드가 nullable하게 추가될 예정입니다. 3. 패턴매칭이 어떻게 문제를 해결하는가? 선언적인 코드를 통해 유연한 코드 작성 가능 👨💻 서버 개발 자
- 80. 밴더에서 제공하는 주식명이 복잡해 실제 쓰이는 이름과 다릅니다. 어드민에서 주식 이름을 변경할 경우 금융 정보 API에 새로운 필드가 nullable하게 추가될 예정입니다. 3. 패턴매칭이 어떻게 문제를 해결하는가? 선언적인 코드를 통해 유연한 코드 작성 가능 👨💻 서버 개발 자 금융정보에 코인과 부동산 정보도 함께 제공할 수 있도록 하겠습니다. 🧑💼 기획자
- 81. 3. 패턴매칭이 어떻게 문제를 해결하는가? 선언적인 코드를 통해 유연한 코드 작성 가능 다양하고 복잡한 요구명세가 발생하여도 패턴매칭을 통해 대응이 가능합니다.
- 82. 3. 패턴매칭이 어떻게 문제를 해결하는가? 선언적인 코드를 통해 유연한 코드 작성 가능 What 금융 데이터가 무엇을(What) 처리되어야 하는지를 데이 터의 형태만으로 선언적으로 표현 가능 How 조건문과 같은 논리구조를 통해 어떻게(How) 데이터를 처리해야되는지 고려하지 않아도 된다.
- 83. 3. 패턴매칭이 어떻게 문제를 해결하는가? 선언적인 코드를 통해 유연한 코드 작성 가능 What 금융 데이터가 무엇을(What) 처리되어야 하는지를 데이 터의 형태만으로 선언적으로 표현 가능 How 조건문과 같은 논리구조를 통해 어떻게(How) 데이터를 처리해야되는지 고려하지 않아도 된다.
- 84. 3. 패턴매칭이 어떻게 문제를 해결하는가? 선언적인 코드를 통해 유연한 코드 작성 가능 What 금융 데이터가 무엇을(What) 처리되어야 하는지를 데이터의 형태만으로 선언적으로 표현 가능 How 조건문과 같은 논리구조를 통해 어떻게(How) 데이터를 처리해야되는지 고려하지 않아도 된다.
- 85. 패턴매칭을 통해 해결해보고 느낀점 4. 패턴매칭을 통해 해결해보고 느낀점
- 86. 4. 패턴매칭을 통해 해결해보고 느낀점 오늘 발표의 Key point
- 87. 오늘 발표의 Key point 패턴매칭을 통해 선언적으로 데이터의 패턴을 매칭하고 추상화함으로써 “무엇 (What)”을 처리해야 하는지 데이터 형태만으로 정의할 수 있었다. 4. 패턴매칭을 통해 해결해보고 느낀점
- 88. 오늘 발표의 Key point 패턴매칭을 통해 선언적으로 데이터의 패턴을 매칭하고 추상화함으로써 “무엇 (What)”을 처리해야 하는지 데이터 형태만으로 정의할 수 있었다. “어떻게(How)” 데이터를 처리해야 하는지에 대한 구체적인 논리를 추상화하여 간결 하게 표현할 수 있었다. 4. 패턴매칭을 통해 해결해보고 느낀점
- 89. 4. 패턴매칭을 통해 해결해보고 느낀점 Before 타입 시스템을 위한 복잡한 단언과 추론 요구명세에 따른 깊은 조건 이로 인해 길어진 코드 💩
- 90. 4. 패턴매칭을 통해 해결해보고 느낀점 Before 타입 시스템을 위한 복잡한 단언과 추론 요구명세에 따른 깊은 조건 이로 인해 길어진 코드 💩 after 타입 추론을 통한 개발 경험 향상 라이브러리 제공 인터페이스를 통해 개발 피로도 감소 타입 추가, 변경에 대한 유지보수성 확보 ✨
- 91. 4. 패턴매칭을 통해 해결해보고 느낀점 그런데 말입니다.
- 92. 4. 패턴매칭을 통해 해결해보고 느낀점 패턴매칭은 항상 정답일까요?
- 93. 4. 패턴매칭을 통해 해결해보고 느낀점 패턴매칭은 언제나 간결하고 좋은 코드를 만들어주지 않는다. 코드 작성 시 어떤 문제를 해결할 수 있는지를 깊이 고려해야한다. 아무리 좋은 기술이라도 팀을 설득시키고 동의를 받아야 한다. 복잡한 비즈니스를 거친 JSON 데이터를 다뤄야하는 상황은 ts-pattern 이 효과적이다.
- 94. 4. 패턴매칭을 통해 해결해보고 느낀점 패턴매칭은 언제나 간결하고 좋은 코드를 만들어주지 않는다. 코드 작성 시 어떤 문제를 해결할 수 있는지를 깊이 고려해야한다. 아무리 좋은 기술이라도 팀을 설득시키고 동의를 받아야 한다. 복잡한 비즈니스를 거친 JSON 데이터를 다뤄야하는 상황은 ts-pattern 이 효과적이다.
- 95. 4. 패턴매칭을 통해 해결해보고 느낀점 패턴매칭은 언제나 간결하고 좋은 코드를 만들어주지 않는다. 코드 작성 시 어떤 문제를 해결할 수 있는지를 깊이 고려해야한다. 아무리 좋은 기술이라도 팀을 설득시키고 동의를 받아야 한다. 복잡한 비즈니스를 거친 JSON 데이터를 다뤄야하는 상황은 ts-pattern 이 효과적이다.
- 96. 4. 패턴매칭을 통해 해결해보고 느낀점 패턴매칭은 언제나 간결하고 좋은 코드를 만들어주지 않는다. 코드 작성 시 어떤 문제를 해결할 수 있는지를 깊이 고려해야한다. 아무리 좋은 기술이라도 팀을 설득시키고 동의를 받아야 한다. 복잡한 비즈니스를 거친 JSON 데이터를 다뤄야하는 상황은 ts-pattern 이 효과적이다.
- 97. 4. 패턴매칭을 통해 해결해보고 느낀점 No Silver Bullet “한 방이면 해결되는 마법같은 방안은 없다”
- 98. 4. 패턴매칭을 통해 해결해보고 느낀점 한방에 되는 것은 없으니 많이 도전해보고 고민해보자!!
- 99. 4. 패턴매칭을 통해 해결해보고 느낀점 시도와 실패를 거치는 과정 속에서 더 발전한 모습을 발견하게 될 것입니다.
- 100. 4. 패턴매칭을 통해 해결해보고 느낀점 여러분의 도전을 응원합니다. ❤
- 101. Q&A
- 102. Thank you.
- 103. 4. 패턴매칭을 통해 해결해보고 느낀점 ● 선언적인, 추상화된 코드가 주는 장점은 무엇이 있을까요? ● 반대로 단점이 있진 않을까요? ● 그렇다면 우리는 어떤 코드가 좋은 코드라고 말해볼 수 있을까요? ● 경험에 비춰 좋은 코드라고 느끼는 것들의 특징을 말해보는 시간을 가져보아 요 네트워크 질문