[FEConf 2018] Front-End 프로젝트의 Test code 작성경험기Ahreum Kim
2018. 11. 03 'FEConf 2018' 발표자료입니다.
---
처음으로 프론트엔드 프로젝트에 (유닛)테스트코드를 작성해보며 느낀 경험을 공유합니다. 어떤 관점으로 접근 했는지부터, 테스트코드 작성을 하며 만난 고민과 해결책은 어떤 방식으로 풀어 냈는지 코드와 함께 다뤄보려 합니다. 저는 테스트 숙련자가 아니지만, 저와 비슷한 위치에서 테스트에 입문하시려는 분들께 어떻게 테스트에 입문하고 코드를 작성했는지에 대해서 구체적인 경험을 공유하는 것도 의미있을 거라 생각했습니다. 제가 드릴 얘기들이 정답이 아닐 수 있지만, 더 좋은 방향을 고민하면서 같이 생각해볼 수 있다면 좋겠습니다.
[FEConf 2018] Front-End 프로젝트의 Test code 작성경험기Ahreum Kim
2018. 11. 03 'FEConf 2018' 발표자료입니다.
---
처음으로 프론트엔드 프로젝트에 (유닛)테스트코드를 작성해보며 느낀 경험을 공유합니다. 어떤 관점으로 접근 했는지부터, 테스트코드 작성을 하며 만난 고민과 해결책은 어떤 방식으로 풀어 냈는지 코드와 함께 다뤄보려 합니다. 저는 테스트 숙련자가 아니지만, 저와 비슷한 위치에서 테스트에 입문하시려는 분들께 어떻게 테스트에 입문하고 코드를 작성했는지에 대해서 구체적인 경험을 공유하는 것도 의미있을 거라 생각했습니다. 제가 드릴 얘기들이 정답이 아닐 수 있지만, 더 좋은 방향을 고민하면서 같이 생각해볼 수 있다면 좋겠습니다.
왜 프로그래머가 가독성을 향상시키는 수련을 평생 해야 하는지를 알려준다. 단지 상투적인 이유만 들먹이는 게 아니다. 좋은 가독성은 프로그래머를 프로로 만들어주고, 큰 기쁨을 주며, 성장할 기회를 준다고 역설한다. 가독성을 향상시키려면 눈에 보이는 것들부터 신경을 써야 하며, 코드 자체가 프로그램을 설명해야 하며, 흐름을 단순화하고 주석을 잘 쓰고 퇴고해야 한다는 간단한 원칙부터 지켜나가야 한다.
『이펙티브 디버깅』 - 디버깅 지옥에서 탈출하는 66가지 전략과 기법복연 이
『이펙티브 디버깅』 디버깅 지옥에서 탈출하는 66가지 전략과 기법
디오미디스 스피넬리스 지음 | 남기혁 옮김 | 한빛미디어 | 24,000원
★ 소프트웨어의 완성은 디버깅!
이 책은 경험이 풍부한 개발자를 대상으로 소프트웨어를 완성하는 마지막 기술을 가르친다. 저자는 35년 경험에서 깨우친 일반 원칙, 높은 수준의 전략, 구체적인 기술에 관한 조언, 효율 높은 도구, 창의적인 기법, 효과적인 디버깅과 관련된 행동 특성을 제시한다. 저자가 제안하는 66개의 전문 기법을 통해 디버깅 역량을 확장하고, 각 문제 상황에 맞는 최상의 접근법을 선택할 수 있을 것이다.
★ 주요 내용
다양한 소프트웨어 장애를 해결하는 높은 수준의 전략과 방법
프로그래밍, 컴파일, 실행 시 적용할 구체적인 기법
디버거를 최대한 활용하는 방법
믿고 투자해도 좋은 범용 기술과 도구
막다른 길과 복잡한 미궁에서 탈출하는 첨단 아이디어와 기법
디버깅하기 쉬운 프로그램을 만들기 위한 조언
멀티스레딩, 비동기, 임베디드 코드 디버깅에 특화된 접근법
향상된 소프트웨어 설계, 구축, 관리를 통한 버그 회피법
ChatGPT is a natural language processing technology developed by OpenAI. This model is based on the GPT-3 architecture and can be applied to various language tasks by training on large-scale datasets. When applied to a search engine, ChatGPT enables the implementation of an AI-based conversational system that understands user questions or queries and provides relevant information.
ChatGPT takes user questions as input and generates appropriate responses based on them. Since this model considers the context of previous conversations, it can provide more natural dialogue. Moreover, ChatGPT has been trained on diverse information from the internet, allowing it to provide practical and accurate answers to user questions.
When applying ChatGPT to a search engine, the system searches for relevant information based on the user's search query and uses ChatGPT to generate answers to present along with the search results. To do this, the search engine provides an interface that connects with ChatGPT, allowing the user's questions to be passed to the model and the answers generated by the model to be presented alongside the search results.
왜 프로그래머가 가독성을 향상시키는 수련을 평생 해야 하는지를 알려준다. 단지 상투적인 이유만 들먹이는 게 아니다. 좋은 가독성은 프로그래머를 프로로 만들어주고, 큰 기쁨을 주며, 성장할 기회를 준다고 역설한다. 가독성을 향상시키려면 눈에 보이는 것들부터 신경을 써야 하며, 코드 자체가 프로그램을 설명해야 하며, 흐름을 단순화하고 주석을 잘 쓰고 퇴고해야 한다는 간단한 원칙부터 지켜나가야 한다.
『이펙티브 디버깅』 - 디버깅 지옥에서 탈출하는 66가지 전략과 기법복연 이
『이펙티브 디버깅』 디버깅 지옥에서 탈출하는 66가지 전략과 기법
디오미디스 스피넬리스 지음 | 남기혁 옮김 | 한빛미디어 | 24,000원
★ 소프트웨어의 완성은 디버깅!
이 책은 경험이 풍부한 개발자를 대상으로 소프트웨어를 완성하는 마지막 기술을 가르친다. 저자는 35년 경험에서 깨우친 일반 원칙, 높은 수준의 전략, 구체적인 기술에 관한 조언, 효율 높은 도구, 창의적인 기법, 효과적인 디버깅과 관련된 행동 특성을 제시한다. 저자가 제안하는 66개의 전문 기법을 통해 디버깅 역량을 확장하고, 각 문제 상황에 맞는 최상의 접근법을 선택할 수 있을 것이다.
★ 주요 내용
다양한 소프트웨어 장애를 해결하는 높은 수준의 전략과 방법
프로그래밍, 컴파일, 실행 시 적용할 구체적인 기법
디버거를 최대한 활용하는 방법
믿고 투자해도 좋은 범용 기술과 도구
막다른 길과 복잡한 미궁에서 탈출하는 첨단 아이디어와 기법
디버깅하기 쉬운 프로그램을 만들기 위한 조언
멀티스레딩, 비동기, 임베디드 코드 디버깅에 특화된 접근법
향상된 소프트웨어 설계, 구축, 관리를 통한 버그 회피법
ChatGPT is a natural language processing technology developed by OpenAI. This model is based on the GPT-3 architecture and can be applied to various language tasks by training on large-scale datasets. When applied to a search engine, ChatGPT enables the implementation of an AI-based conversational system that understands user questions or queries and provides relevant information.
ChatGPT takes user questions as input and generates appropriate responses based on them. Since this model considers the context of previous conversations, it can provide more natural dialogue. Moreover, ChatGPT has been trained on diverse information from the internet, allowing it to provide practical and accurate answers to user questions.
When applying ChatGPT to a search engine, the system searches for relevant information based on the user's search query and uses ChatGPT to generate answers to present along with the search results. To do this, the search engine provides an interface that connects with ChatGPT, allowing the user's questions to be passed to the model and the answers generated by the model to be presented alongside the search results.
34. 2. 패턴매칭이란?
TypeScript의 자동 타입 추론을 갖춘 완전한 패턴 매칭 라이브러리
더 쉽고 안전한 분기 코드를 작성하세요. 패턴 매칭을 사용하면 복잡한 조건을 단일하고
간결한 표현으로 표현할 수 있습니다. 코드가 더 짧고 가독성이 향상됩니다. 완전성 검사
는 가능한 모든 분기 조건을 빼먹지 않았는지 확인합니다.
35. 2. 패턴매칭이란?
TypeScript의 자동 타입 추론을 갖춘 완전한 패턴 매칭 라이브러리
더 쉽고 안전한 분기 코드를 작성하세요. 패턴 매칭을 사용하면 복잡한 조건을 단일하고
간결한 표현으로 표현할 수 있습니다. 코드가 더 짧고 가독성이 향상됩니다. 완전성 검사
는 가능한 모든 분기 조건을 빼먹지 않았는지 확인합니다.
36. 2. 패턴매칭이란?
TypeScript의 자동 타입 추론을 갖춘 완전한 패턴 매칭 라이브러리
더 쉽고 안전한 분기 코드를 작성하세요. 패턴 매칭을 사용하면 복잡한 조건을 단일하고
간결한 표현으로 표현할 수 있습니다. 코드가 더 짧고 가독성이 향상됩니다. 완전성 검사
는 가능한 모든 분기 조건을 빼먹지 않았는지 확인합니다.
37. 2. 패턴매칭이란?
TypeScript의 자동 타입 추론을 갖춘 완전한 패턴 매칭 라이브러리
더 쉽고 안전한 분기 코드를 작성하세요. 패턴 매칭을 사용하면 복잡한 조건을 단일하고
간결한 표현으로 표현할 수 있습니다. 코드가 더 짧고 가독성이 향상됩니다. 완전성 검사
는 가능한 모든 분기 조건을 빼먹지 않았는지 확인합니다.
38. 2. 패턴매칭이란?
TypeScript의 자동 타입 추론을 갖춘 완전한 패턴 매칭 라이브러리
더 쉽고 안전한 분기 코드를 작성하세요. 패턴 매칭을 사용하면 복잡한 조건을 단일하고
간결한 표현으로 표현할 수 있습니다. 코드가 더 짧고 가독성이 향상됩니다. 완전성 검사
는 가능한 모든 분기 조건을 빼먹지 않았는지 확인합니다.
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는 어떤 멤버가 선택되어
야 하는지를 명확하게 결정하기 어려
움
의도한 대로 타입을 추론하지 못하고
오류가 발생하는 원인
🧐 😵💫 🤯
타입 캐스팅, 단언, 가드..
타입을 추론하기 위한 코드 작성
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) 데이터를 처리해야되는지 고려하지 않아도 된다.
87. 오늘 발표의 Key point
패턴매칭을 통해 선언적으로 데이터의 패턴을 매칭하고 추상화함으로써 “무엇
(What)”을 처리해야 하는지 데이터 형태만으로 정의할 수 있었다.
4. 패턴매칭을 통해 해결해보고 느낀점
88. 오늘 발표의 Key point
패턴매칭을 통해 선언적으로 데이터의 패턴을 매칭하고 추상화함으로써 “무엇
(What)”을 처리해야 하는지 데이터 형태만으로 정의할 수 있었다.
“어떻게(How)” 데이터를 처리해야 하는지에 대한 구체적인 논리를 추상화하여 간결
하게 표현할 수 있었다.
4. 패턴매칭을 통해 해결해보고 느낀점
89. 4. 패턴매칭을 통해 해결해보고 느낀점
Before
타입 시스템을 위한 복잡한 단언과 추론
요구명세에 따른 깊은 조건
이로 인해 길어진 코드
💩
90. 4. 패턴매칭을 통해 해결해보고 느낀점
Before
타입 시스템을 위한 복잡한 단언과 추론
요구명세에 따른 깊은 조건
이로 인해 길어진 코드
💩
after
타입 추론을 통한 개발 경험 향상
라이브러리 제공 인터페이스를 통해 개발 피로도 감소
타입 추가, 변경에 대한 유지보수성 확보
✨
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. 패턴매칭을 통해 해결해보고 느낀점
시도와 실패를 거치는 과정 속에서
더 발전한 모습을 발견하게 될 것입니다.
103. 4. 패턴매칭을 통해 해결해보고 느낀점
● 선언적인, 추상화된 코드가 주는 장점은 무엇이 있을까요?
● 반대로 단점이 있진 않을까요?
● 그렇다면 우리는 어떤 코드가 좋은 코드라고 말해볼 수 있을까요?
● 경험에 비춰 좋은 코드라고 느끼는 것들의 특징을 말해보는 시간을 가져보아
요
네트워크 질문