발단 최근, 회사 프로젝트에 유닛 테스트를 도입하기로 했습니다. 기존에는 Cypress를 이용한 E2E 테스트만을 통해 데일리 빌드를 수행하고 있었는데요, Cypress가 유닛 테스트의 영역까지 차지하고 있는 게 좀 어색하게 느껴졌기 때문이에요. 컴포넌트가 다른 환경에 의존하지 않고 그 자체만으로 제대로 동작하는지는 유닛 테스트를 통해 확인되어야 한다고 생각하거든요. 테스트 방법론이야 여러가지가 있겠지만, E2E는 유저의 입장에서 전체적인 어플리케이션의 Flow를 테스트하는 것이라고 봅니다. 그에 비해 유닛 테스트는 별개의 컴포넌트의 무결성을 체크하는 것이라고 보면 될 것 같아요. 각종 Validation checking이나 그에 따른 UI 상태의 변화 같은 것들이죠. 기존에는 Jest를 이용한 테스트가..
Introduction 일반적으로 Javascript에서 DOM에 직접 접근할 때는 document.getElementById등을 통해서 접근하고는 합니다. 하지만 React에서는 ref라는 것을 사용해서 접근하는데요, ref란 무엇이고, 기존의 방법과는 무엇이 다른지, 어떻게 사용하면 되는지 알아보겠습니다. What is ref? 우선 ref란, reference의 줄임말입니다. 노드나 컴포넌트에 ref 값을 만들어서 해당 요소의 값을 얻어오거나 해당 요소를 제어하는 데 사용되죠. React팀에서는 아래와 같은 경우에 ref를 사용할 것을 권장하고 있습니다. 내용을 보시면 알 수 있겠지만 React에서 만들고 통제하는 요소(제어 컴포넌트; Controlled Component)가 아닌 경우를 통제하고자..
이번 포스트는 atomic-web-design을 번역한 글임을 밝힙니다. 원문을 있는 그대로 옮겨오기보다는 자의적 판단에 의해 필요해 보이는 부분들을 가져왔습니다. 다소 의역이나 오류가 있을 수 있습니다. 댓글로 알려주시면 수정하도록 할게요. 개요 우리는 페이지가 아니라 시스템 컴포넌트를 디자인 해야 한다. — Stephen Hay 웹 디자인의 기술이 계속 발전함에 따라, 우리는 단순한 웹 페이지 모음을 만드는 것이 아니라 사려 깊은 디자인 시스템을 개발해야 할 필요성을 인식하고 있습니다. 디자인 시스템을 만드는 것에는 다양한 논의가 있어왔는데, 보통은 color, typography, grids, texture 같은 것들을 위한 것이 대부분이었습니다. 물론 이런 것들도 중요하겠지만, 제 생각에는 이것은..
