cleanUrl: /lv1/13th/2week
disqus: false
adsense: false
theme: light
pagePassword: false
cherry: false
YAML
복사
오늘 스터디의 목표
TDD의 핵심철학인 문제 해결 과정에서의 ‘피드백’에 대해 이해하고 E2E 테스트 코드를 페어로 함께 짜봅니다
체크인
닉네임 | 체크인 점수(1~10) | 이유 | 2주차 미션 하면서 어려웠던 점 & 느낀점 |
kyoul | 5 | 바빠서 운동을 못갔네요ㅠㅠ | 데이터 처리? 리펙터링 할거 투성이 |
연리사 | 5 | 많이 바빴어요..ㅠㅠ | 함수 모듈화와 코드를 직관적으로 작성하는것이 많이 어려웠고 그 중요성을 절감했다. |
Bbi | 3 | 많이 바빴고 잠도 많이 못잤습니다 | 미리 설계하지 않고 작성하기 시작했더니.. 중간에 한 번 대대적인 수정을 해야했다..! |
Eunyeol-Lucas | 5 | 갈수록 정신이 없었어요 ㅎㅎ | 좋은 변수명 함수명을 짜는것은 너무나 어렵다...
상태 관리를 어떤식으로 하는 것이 조금 더 효율적일지 고민을 하게되었습니다.
그리고 코드 짤때 기도는 옵션이 아니라 필수... ️ |
suyeon | 5 | 차분해요~ | 직관적이 변수명 작성과 효율적으로 코드를 짜는 것이 어려웠다. |
jin0106 | 6 | 졸려요.. | 상태관리 및 함수 정리가 어려웠습니다. |
이정민 | 7 | 평소랑 같은 월요일인거 같습니다 | 다 완성하고나서 정상적으로 동작하는지 하나하나 테스트하는게 어려웠던 것 같습니다 |
예정 | 8 | 급하게 짜느라 코드는 엉망인데 잠은 많이 자서 컨디션은 좋아요 | 일단 고민할 시간이 적었고 빠르게 완성시키느라 변수명이나 중복처리를 제대로 고민 못한 것이 아쉽고, 상태관리할 더 좋은 방법이 있을 거 같은데 생각나지 않아서 답답했습니다. |
beomjourr | 7 | 재택근무하니까 집에만있네요,, | 아는만큼, 시간투자한만큼 코드 질이 향상된다는 것을 더욱 느낀 시간이었습니다.. |
엘리오 | 5 | 몸이 별로 안좋네요 .. | 원하는대로 상태관리가 되지 않아 힘들었습니다. |
sophie_sy | 7 | 피곤피곤 바쁘다바빠.... | 함수 정리하는게 어려웠던거같아요. |
우병 | 7 | 나쁘지 않습니다. | 한 파일내에 추상화 레벨이 유지되지 못해 코드의 이해와 수정이 다른사람이 보면 쉽지 않을것 같아요 |
keonhee Lee | 10 | 백짬뽕이 맛나네요 | localstorage, MVC 패턴 이해 |
2dowon | 8 | 오늘은 비가 안와서 그런지 저번주보다 좋습니당 | 파일분리를 하고 싶었는데, 시간이 없어서 제대로 설계를 못했더니 한 파일안에 로직이 가득 차버렸습니다..!ㅜㅜ |
호옹이 | 7 | 졸리네요 | 아직 미션을 완료하지 못해 아쉽습니다.. |
genie | 10 | 재택해서 좋아용 | 리팩토링이 너무나 힘들어요 ㅠㅠ |
박규태 | 8 | 마지막이라 아쉬워요 | 상태관리하는방법이 익숙하지 않았고, 리팩터링을 하는데 막막했어요 |
mulgyeol | 8 | 벌써 2주가 지났다니 아쉽습니다..ㅠㅠ | 작성한 상태관리 로직에 에러가 있어서 속상하네요ㅠㅠ |
genie2 | 10 | 안마하고와서 시원해요 ㅎㅎ | this 접근할 때 스코프 파악하는 게 생각보다 쉽지 않았네요 |
nanuya | 8 | 피곤하네여... | 역시 구조설계가 어려워요! |
songsimo | 7 | 오늘 이후로 좀 쉬어야겠어요. 피곤해요 | 컴포넌트 형식으로 개발을 알게되어서 이번에 적용해보고 싶어요. |
최다빈 | 5 | 퇴근길에 모바일로 듣느라 집중이 힘드네요 | 리팩토링을 했어야 하는데... |
TDD와 테스트
E2E 테스트
테스트의 종류에는 여러가지가 있습니다. 범위에 따라서는 아래와 같이 나누어 볼 수 있는데요.
•
단위(Unit) 테스트
•
통합(Integation) 테스트
•
E2E(End to End) 테스트
•
회귀(Regression) 테스트
•
성능(Performance) 테스트
Cypress
미션
내 코드에 테스트 코드를 2개 이상 작성해본다!
내가 구현한 요구사항의 기능을 테스트 케이스로 추가해보시면 됩니다.
화면 공유를 통해 적극적으로 공유해보시면서 하시면 좋습니다.
설치
npm install --save-dev cypress
npm run cypress open
Plain Text
복사
describe("moonbucks test", () => {
beforeEach(() => {
cy.visit("../../../index.html");
});
it("에스프레소 메뉴판에 아메리카노를 입력하고 추가할 수 있다", () => {
cy.get("#menu-name").type("아메리카노");
cy.get("#menu-submit-button").click();
cy.get("#menu-list li").contains("아메리카노").should("be.visible");
});
});
JavaScript
복사
alert, prompt, confirm을 확인할 때 쓰는 stub!
•
stub은
◦
어떤 입력값에 대해 어떤 출력값을 돌려줄 지와 같은 동작을 내 마음대로 지정할 수 있고
◦
어떤 파라미터와 함께 불렸는지, 몇 번 불렸는지와 같은 사용 기록도 내가 원하는대로 확인할 수 있는
◦
새로운 함수를 만들어 테스트 대상이 되는 기존 함수를 대체합니다.
•
[관련 키워드] 테스트 더블(Test Double)
•
const alertStub = cy.stub();
cy.on('window:alert', alertStub);
JavaScript
복사
•
window 객체에 있는 alert도 함수입니다. 하지만 원래의 alert은 그 함수가 호출되었는지 여부를 우리가 테스트코드에서 확인할 수 있는 방법이 없습니다.
•
그래서 테스트 코드에서는 window.alert()이 불리면,진짜 window.alert을 부르지 말고, 우리가 만든 stub 함수를 대신 불러달라고 하는 거에요.
•
중간회고
싸이프레스 인프런
쿠폰 코드: 4699-63bd0bd486da
닉네임 | 테스트 코드를 작성하면서 어떤 어려움을 느끼셨나요? | 테스트코드를 활용해보실 것 같으신가요? 활용한다면 어디에 적용해보고 싶으신가요? |
kyoul | prompt 뭐죠?ㅋㅋ | 메서드만 잘 숙지한다면 잘 쓸 수 있을 것 같아요 |
연리사 | 메소드가 매우 어려웠고, index.html에 있는 DOM만 인식할 수 있는게 아쉬웠다. | 메소드를 숙지한다면 CRUD 테스트에 쓸 수 있을것 같습니다. |
Bbi | 원하는 정보를 찾기가 어려웠는데 함께 테스트해보니 금방 진행 할 수 있었습니다!! | 프로젝트를 진행할 때 TDD방식으로 진행할 수 있을 것 같아요! |
Eunyeol-Lucas | prompt, alert는 어떻게 접근할지 좀 해맸어요! | jest를 한번 써보고싶었는데, 어떤식으로 코드를 짜야할지 감이 안잡혀서 포기헀습니다. e2e test는 그보다 명확해서 훨씬 간편한거 같아요! 다른 기능들 구현할때 써버고싶습니다. |
suyeon | cypress 내장 메서드를 잘 몰라 너무 어려웠어요 | 기능을 구현할 때 미리 작성을 해놓고 바로바로 테스트 해보고 싶어요 |
jin0106 | cypress를 처음해봐서 어려웠던거 같습니다. | 본 기능을 구현하기전에 미리 테스트코트를 구현한후 프로젝트를 해보고 싶습니다. |
이정민 | cypress를 처음 사용해보아서 테스트 메서드가 무엇인지 알기 어려웠고, 찾는 것이 어려웠습니다. | e2e 테스트를 자동화하여 사람이 일일히 테스트를 진행하지 않고 빠르게 테스팅을 할 수 있어서 유용하게 사용할 것 같습니다. |
예정 | 설치가 안되어서 어려웠습니다................... | 새로운 프로젝트에 활용해보고 싶어요 |
beomjourr | 처음 사용해서 낯설었습니다. | 꼭 활용해보고싶어요 |
엘리오 | 문법을 잘몰라서 생소했습니다. | 머릿속으로 생각했던 오류가 실제로 발견되는 걸 보아 이런 것을 잡을 수 있다면 다시 사용해볼만한 것 같습니다. |
sophie_sy | 문법을 몰라서 어려웠습니다. | |
우병 | stub에서 조금 헤맸던것 같아요 | |
keonhee Lee | stub() 이 잘 이해되지 않네요. | 개인 프로젝트 |
2dowon | 처음에는 어떻게 짜야지 했는데, 같이 작성하다보니까 결국 prompt까지 테스트할 수 있어서 너무 뿌듯했습니당 | 아직은 어색하지만, 나중에 테스트코드를 작성하다보면 코드에 대한 자신감을 가질 수 있을꺼 같습니당 |
호옹이 | 문법이 어색해서 어려웠어요 | 개인 프로젝트 먼저 활용해보고 좋은점을 블로그에 기록하고, 회사 동료들에게도 공유해주고 싶어요 |
genie | 생소해서 에러가 날때마다, 어떡하지 했는데 생각보다 잘 해결이 되었던 것 같습니다.; | 뭔가 넣은 것 같은데 제가 짠 코드에 오류가 있었는지 테스트가 작동을 안하는 것 같습니다... 빨간색이 나오는 것을 보니;; 기존에 작성한 코드를 수정해야 할 듯? |
박규태 | 에러가 나도 뭐가 문제인지 몰라서 아쉬웠어요 | 활용하면 작업시간을 단축하는데 좋을것같아요. |
mulgyeol | cypress가 동작하지.. 않아요..
Still waiting to connect to Chrome, retrying in 1 second | |
genie2 | 처음에 cypress run 하는 것에서 헤맸네용,, | 프로젝트 시작 전에 활용하면 너무 좋을 것 같아요 문법에 익숙해져서 기계적으로 입력할 수 있게 연습해봐야겠어요...! |
nanuya | 제공되는 테스트함수 찾는게 어려웠어요 ㅎㅎ | 요거 동료들에게 소개해서 같이 사용하고싶네요! |
songsimo | 설치 이후에 실행이 안되어서 고생했습니다. | 작은(개인) 프로젝트부터 시작해보려구요. 백엔드 TDD 배워서 좋은 걸 알았는데 프론트에도 TDD가 있다고 해서 신기했습니다. |
최다빈 | E2E 테스트 커버리지를 어떻게 가져가야 할지.. 막막합니다. | 간단한 토이프로젝트 에서 부터 TDD 를 적용해보고 싶습니다. |
더 자주, 더 빠른, 더 꾸준한 피드백
체크아웃
닉네임 | 체크아웃 점수(1~10) | 이유 | 스터디에 대한 피드백 | 못다한 질문이 있다면 남겨주세요 |
kyoul | 9 | 다른 사람의 코드를 리뷰해본 경험, 너무 좋았습니다 | 좋은 피드백 감사드립니다 | |
연리사 | 10 | 짧은 시간이었지만 코드리뷰와 TDD 경험이라는 일거양득을 맛볼 수 있었고, 라이브셰어를 통한 협업이 재밌었습니다. | 많이 배워갑니다! | |
Bbi | 10 | 혼자서 했다면 완수하지 못했을 미션들을 이번 기회에 해 낼 수 있어서 너무 좋았고, 좋은 분들과 함께해서 더 좋았어요! | 좋은 리뷰를 남기기 위해 많이 고민해보는 시간이 되었습니다!! 모두가 과정을 끝까지 함께 했다면 좋았을텐데 아쉽습니다 ㅠㅠ | |
Eunyeol-Lucas | 9 | 코드 리뷰를 통해 놓치고 있던 부분들을 집어볼 수 있었고, 좋은 코드들을 배울 수 있었습니다. | 코드 리뷰를 꼼꼼히 해주는 팀원들 덕분에 많이 배웠습니다! | |
suyeon | 10 | TDD에 대해 배울 수 있어 너무 좋았어요 | 팀원들 덕분에 정말 많이 배웠고 다음에도 스터디를 하게된다면 조금더 적극적인 자세로 하고싶어요 | |
jin0106 | 9 | 코드리뷰를 처음 받아보고, TDD에 대해서도 좀 더 알게되어 좋았습니다. | ||
이정민 | 10 | 짧은 시간이었지만 코드리뷰와 TDD 개념에대해 알아갈 수 있어서 좋았습니다. | 코드리뷰 경험, 다른사람들의 피드백을 받을 수 있어서 좋았습니다. | |
예정 | 9 | 바쁜 기간에 들어서 아쉬움이 남긴 하지만 좋은 스터디원들을 만나서 코드리뷰를 받을 수 있어서 좋았습니다! 다른 프로젝트때문에 마지막 코드리뷰에 참여못해서 아쉬워요ㅠㅠ TDD도 어렴풋이 알아갑니다 | 코드리뷰를 하면서 새로운 개념이나 좋은 코드를 빠르게 습득해가는 느낌이 들어서 좋았습니다. cypress는 그전주차 끝날때 설치해오라고 하면 더 좋을거같아요! | |
beomjourr | 10 | 좋은 멘토님과, 좋은 분들과 함께 해서 좋았습니다. 확실히 동기부여가 되어 정신이 바짝 들었어요.. | 스터디 전에, 스터디 도중에 자주 발생했던 이슈들 공유해주시면 더 좋을거같아요! | |
엘리오 | 9 | TDD에 대해서 배우게 되어 좋았습니다! | 너무 좋았는데 기간이 짧아서 아쉽네요 ㅠㅠ | |
sophie_sy | 9 | 마지막까지 좋은 팀원들과 함께하며 코드리뷰를 통해서 제 부족한 점을 파악하고 배울수 있게되어 좋았습니다. | 유익한 시간이었습니다! | |
우병 | 10 | cypress는 처음 접하게 되었는데 어렵지 않게 설명해주셔서 쉽게 접할수 있었던 것 같습니다. | 놓치기 쉬운 개념들에 대해서 다시한번 생각하게 되었고 날카로운 피드백에 많이 배웠습니다. | |
keonhee Lee | 10 | 유익한 시간이 된것같습니다. | 팀원들의 코드리뷰 덕에 정말 많이 배운것 같습니다 | |
2dowon | 10 | 온라인이었지만, 다른 분들과 함께 코드리뷰를 진행하고, 페어 프로그래밍을 해볼 수 있는 경험을 가져서 너무 좋았습니다!!ㅎㅎ | 게더타운 처음 써봤는데, 온라인이여도 만나는 기분도 들고 좋았습니당! | |
호옹이 | 9 | 재미있게 3주 보낸거 같아 좋았습니다 | 오늘은 처음에 셋팅 부분을 같이 진행했으면 좀 더 시간이 적게 걸렸을것 같습니다 | |
genie | 10 | 스터디를 진행할 수 있었고, 특히나 코드 리뷰를 받아보면서, 다른 분들의 피드백이 있어서 너무 좋았습니다. 또 다른 분들의 코드를 보면서도 제가 해결하지 못했던 부분에 대해서도 알 수 있어서 좋았어요 | 미리 셋팅에 대한 안내? 간략한 영상으로라도 자료가 있었으면 좋았을 것 같습니다. 오류를 줄이는 차원에서;; | |
박규태 | 10 | 코드리뷰,TDD 등 새로운 경험을 해볼 수 있어서 좋았습니다. | 팀원들이 열심히 참여해줘서 고마웠습니다! | |
mulgyeol | 10 | 함께 문제를 해결하기 위해 고민하고, 서로의 코드에 대해 이야기 하면서 보완하는 과정이 즐거웠습니다! | 2주로 끝나는게 많이 아쉬워요..! | |
genie2 | 10 | 매번 월요일이 기다려졌던 것 같아요 ㅎㅎ | 코드 리뷰 진행하면서 github 커뮤니케이션 경험에 큰 도움이 됐어요 공부하다보니 기반이 단단해지는 느낌이였습니다! 게더타운 세션도 넘 신선했어요 | |
nanuya | 10 | 테스트코드가 어렵게만 느껴졌었는데 같이하고 cypress 를 사용하니까 재밌었어요! | ||
songsimo | 10 | 좋은 팀원도 많나고 컴포넌트도 배우고 좋은 시간이었습니다 = ) | ||
최다빈 | 10 | 현생때문에 많은 시간을 투입하지 못해서 그거에 대한 아쉬움뿐 좋은 경험과 내용을 얻어 갑니다 | 코드 리뷰와 테스트 코드에 대한 조금 더 진지한 자세를 갖게 되어서 정말 좋은 수업인거 같습니다. | |
blackraven | 10 | 마지막에 코로나 3차 부작용으로 적극적으로 임하지 못한 것이 너무 아쉬웠습니다 ㅠㅠ | 너무너무 좋은 팀원들 덕분에 몇단계 성장할 수 있는 계기가 되었습니다 | |
