전체 글
-
E2E TestNote 2021. 9. 28. 14:15
E2E Test(End To End Test) E2E Test는 개발물을 사용자의 입장에서 점검하는 것이다. 사용자에게 직접 노출되는 페이지에서 원하는 텍스트가 제대로 출력되는지 버튼을 클릭했을 때 올바르게 동작하는지 등을 점검한다. E2E가 왜 필요할까? 모든 애플리케이션은 자체 환경 외부의 여러 시스템 및 데이터베이스에 연결되고 통합된다. 말할 필요도 없이 이로 인해 앱의 Workflow가 상당히 복잡해지게 된다. E2E Test를 하면 사용자의 동작을 모사해야 하기 때문에 사용자 입장의 Workflow와 Laytency를 측정하고 점검할 수 있다. 자연스럽게 사용자의 경험을 더 고민하게 되는 것이다. E2E 테스트는 애플리케이션의 다양한 종속성이 정확하게 작동하는지 확인해준다. 또한 여러 시스템 구..
-
Front-end Clean CodeNote 2021. 9. 24. 14:57
토스 개발자 컨퍼런스를 보고 실무에서 바로 쓰는 클린 코드는 어떻게 되어있는지 정리해보려고 한다. 실무에서의 클린 코드 실무에서 클린 코드의 의의는 유지보수 시간의 단축을 의미한다고 한다. 동료 혹은 과거의 내가 스스로 짠 코드를 다시 봤을 때도 빠르게 이해할 수 있다면 유지 보수할 때 드는 개발 시간이 짧아질 것이다. 유지보수 시간의 단축 1) 빠른 코드 파악 2) 버그가 났을 때 디버깅 시간 단축 3) 코드 리뷰 시간 단축 코드를 처음 설계하고 새로운 파일에서 짤 때는 대부분 깨끗할 것이다. 하지만 기존 코드에 기능을 추가하는 상황이라면 조금 달라지게 된다. 사실 회사에서 개발자 대부분의 일이 기존 코드에 기능을 추가하는 것인데, 남이 짠 코드, 혹은 내가 지난주에 짠 코드에 기능을 붙이다 보면 코드..
-
webpackNote 2021. 9. 9. 16:40
웹팩(webpack)이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)다. 그럼 모듈과 번들러는 무엇일까..? 모듈(module) 모듈이란 아래와 같이 기능 단위의 "자바스크립트 개별 파일"이라고 생각하면 된다. // math.js function sum(a, b) { return a + b; } function substract(a, b) { return a - b; } const pi = 3.14; export { sum, substract, pi } 이 math.js 파일은 아래와 같이 3가지 기능을 갖고 있는 모듈이다. 두 숫자의 합을 구하는 sum() 함수 두 숫자의 차를 구하는 substract() 함수 원주율 값을 갖는 pi 상수 이처럼 성격이 비..
-
Context APINote 2021. 9. 3. 15:43
이전까지 프로젝트를 진행하면서 전역 상태 관리를 할 때 Redux를 사용하였다. Redux를 사용할 때마다 느낀 점은 초기 세팅이 복잡하고 어려웠다는 것이다. saga, thunk 같은 다양한 미들웨어를 추가적으로 사용하여 비동기 작업이나 상태를 변경하는 과정에 추가적인 도움을 받을 수 있어 좋았지만 준비하는 과정이 꽤나 복잡했었다. 이 과정이 진행 중인 프로젝트에 비해 꽤나 무게감이 나가 다소 피곤한 부분이 있었다. 그래서 전역 상태 관리가 Redux에 비해 간단하고 리액트에서 공식적으로 소개한 Context API에 대해 정리해보기로 하였다. Context API? 리액트 공식문서에서는 Context를 다음과 같이 소개하고 있다. context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 ..
-
PortalsNote 2021. 8. 30. 14:22
Portals Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법을 제공합니다. by React 사이트를 구성하다 보면 모달이나 다이얼로그, 툴팁 같이 DOM 상에서도 최상단에 위치시켜 화면 위로 튀어나오도록 보여야 하는 경우가 있다. 그러나 리액트 기본 설정으로 구성하면 볼 수 있는 ReactDOM.render() 함수로 인해 모달이나 다이얼로그 등은 언제나 root의 자식 요소로 배치되게 되는데, 이때 포탈(portal)을 활용하면 부모 요소 바깥에 컴포넌트를 렌더링 할 수 있게 된다. // index.js ReactDOM.render(, document.getElementById('root')); Portal을 통한 이벤트 버블링 portal이..