프런트엔드 뜻

프런트엔드에 대해 알고 계신가요? 프런트엔드란 사용자와 직접 상호 작용하는 웹 애플리케이션의 사용자 인터페이스(UI)를 의미해요. 예를 들어 웹사이트나 웹 애플리케이션에서 사용자가 보고, 조작하고, 사용하는 부분이라고 보시면 되는데요. 프런트엔드 개발은 HTML, CSS, JavaScript와 같은 기술을 사용해서 이용자에게 깔끔하고 빠른 웹사이트나 애플리케이션을 제공하는데 초점을 맞추고 있어요.

프런트엔드 개발자는 어떤 일을 할까?

프런트엔드 개발자는 웹 디자인과 시각적 요소의 배치, 구성, 반응형 디자인, 웹의 접근성 및 사용자 경험을 고려해야 해요. 다양한 기기 및 브라우저 크기에 맞게 웹 페이지의 레이아웃이 자동으로 조정되는 반응형 웹페이지를 만든다거나, 빠른 로딩 시간과 페이지의 효율적인 동작을 위해 코드를 최적화할 수 있는 능력도 필요해요.

프런트엔드 개발에 중요한 테스트

프런트엔드 개발자를 위한 테스트 가이드는 웹 테스트 프레임워크들을 활용해서 웹 개발 과정을 진행하기 위한 분들을 위한 책이라고 할 수 있어요. 대표적인 웹 테스트 프레임워크인 셀레늄, 사이프러스, 퍼피티어, 프레이라이트를 활용하는 방법에 대해서 배울 수 있는데요.

웹 개발에서 개발역량에 5을 투입했다면, 테스트에도 5를 투입하시는게 안정적인 방법인 것은 누구나 아실 거예요. 빠르게 변화하는 웹 환경과 브라우저에 대응하기 위해 자동화 프레임워크를 활용하고, 최신 웹기술과 웹 환경의 변화에 대응하는 전략을 소개하는 프런트엔그 개발자를 위한 테스트 가이드를 추천드리고 싶어요.

출판사를 통해 도서를 제공받아 직접 읽고 작성한 후기예요.

프런트엔드 기술은 서버보다는 브라우저에 종속적이기에 백엔드에 비해 공개적으로 테스트 할 수 있는 프레임워크가 흔한 것으로 알고 있었지만 이 책을 통해 현 시점 프런트엔드 시장에서 주도적인 위상을 차지하는 대표적인 프레임워크를 알게 되었다.

더불어 프런트엔드는 과거 기준으로는 적어도 백엔드에 비해 테스트의 중요성이 부각되지 않은 것이 사실이나 모바일 등장 이후 대규모 변화를 겪고 있어 생각보다 많은 부분을 신경써야 한다는 것도 새롭게 알게 된 사실이다.

모든 링크가 제대로 동작하는지 테스트하는 것에서 시작하여 반응형 웹 등의 접근성 측면은 물론이고, 보안, API, 성능에 이르기까지 테스트 할 사항은 많지만 이를 자동화하여 편의성을 제공하는 방법을 찾기는 쉽지 않다.

그런 측면에서 이 책의 파트 2 ~ 3에 걸친 테스트 프레임워크의 활용법에 대한 소개는 이 책이 가지는 가장 큰 장점이라 생각한다.

이 책이 소개하는 프레임워크로는 오픈소스 테스트 프레임워크에 해당하는 셀레늄, 사이프러스, 플레이라이트, 퍼피티어 등이 있고, 코드리스 툴로는 퍼펙토 스크립트리스, 테스팀, 메이블 등을 소개한다.

특히 오픈소스 테스트 프레임워크의 기본 기능과 고급 기능을 실습을 통해 세부적으로 소개하고 있는데 이를 잘 정리한 표는 다음과 같다.

접근성, 성능, 시각적 테스트 측면에서는 대동소이하게 모두 훌륭한 기능을 지원하는 편인데 고유기능은 각기 지향하는 포커스가 다르기에 현업에서 집중하고자 하는 기능을 담고 있는 프레임워크를 선택하는 것이 좋은 선택이 될 것 같다.

개인적으로 프런트엔드가 주전공 분야는 아니기에 이 책에 소개된 프레임워크의 기능을 십분 이해하고 제대로 활용하기엔 가진 실력이 부족했다. 책에서 다양한 테스트를 다뤄주고는 있지만 짧은 설명의 실습으로 그치기에 구체적으로 테스트 결과 및 증상에 따른 해결책이 소개되지 않은 것은 아쉬운 부분이었다.

그럼에도 한 떄나마 소극적으로 프런트엔드 프로젝트에 가담했던 경험이 있는 입장에서 그리고 아직도 프런트엔드 기술에 관심을 갖고 지켜보는 입장에서 테스트 프레임워크를 집대성하여 정리한 책은 거의 찾아보기가 힘들기에 이 책의 가치를 높게 평가하고 싶다.

특히 구글 개발자 도구의 프로토콜을 활용하는 퍼피티어나 플레이라이트 등의 도구는 다루기가 쉬워 향후 자주 활용해 봐야겠다는 생각이 들었다.

또한 이 책은 오픈소스 테스트 프레임워크를 주로 다루고 있지만 그 외에도 프런트엔드 품질을 위한 많은 조언을 담고 있다. 특히 테스트 프로세스 측정을 위한 애자일 방식의 27가지 지표나 Miro 마인드맵 툴을 활용한 테스트 전략 예시는 짧은 지면에도 불구하고 많은 인사이트를 얻을 수 있었다.

그 외에도 OWASP 보안 취약점에 대한 고려, 프런트 엔드 플랫폼에 대한 고민, 세부적인 테스트 유형의 항목 정리 등 최신 트렌드에 맞춰 프런트엔드 진영이 필수적으로 알아야 할 기술 지식들을 다양하게 습득할 수 있었다.

IT 어느 분야에서나 테스트는 늘 우선순위에 조금씩 밀리는 것이 현실이나 차후 기술적 부채를 감안한다면 테스트는 피할 수 없는 필수적인 과정임을 다시 한 번 느낄 수 있었고, 프런트엔드 테스트 자동화를 원하는 개발자에게 이 책을 추천하고 싶다.

• 책소개 - 프런트엔드 개발자를 위한 테스트 가이드

네이버 블로그 리뷰: https://blog.naver.com/rock1192/223150665103

예제 코드

https://github.com/PacktPublishing/A-Frontend-Web-Developers-Guide-to-Testing

이 책에서는 모든 브라우저에서 공통으로 사용할 수 있는 오픈소스 테스트 자동화 프레임워크

셀레늄(selenium), 사이프러스(Cypress), 퍼피티어(Puppeteer), 플레이라이트(Playwright) 같은 주요 프레임워크를 다룬다

웹 테스트의 핵심 개념과 여러 종류의 자동화 프레임워크를 프런트엔드 개발 업무에 어떻게 적용할 수 있는지 배우고

책 전반에 걸쳐서 각 테스트 자동화 프레임워크가 가진 고유의 기능을 살펴볼 수 있으며, 각각의 장단점과 앱 변경 때문에 초래되는 오류를 사전에 찾아낼 수 있는 테스트 작성 방법도 다룬다

소프트웨어 테스트에는 다양한 종류가 있다

기능성 테스트, API 테스트, 통합 테스트, 비기능 테스트, 단위 테스트, 접근성 테스트, 탐색 테스트 등이 있다

기능성 테스트는 테스트 시나리오에 따라 다시 세부 유형으로 나눌 수 있다

세너티(sanity), 회귀(regression), 스모크(smoke), 통합(integration), 그리고 사용자에 의한 사용성(usability) 테스트 등이 이에 해당한다

각 테스트의 범위는 소프트웨어 개발 주기 단계, 소프트웨어 이터레이션 내의 변경, 애플리케이션 오류 이력(안정성과 신뢰성)에 따라 달라진다

비기능성 테스트에서는 정적이나 동적 보안 테스트, 성능 및 부하 테스트, 접근성 테스트를 고려해야 한다

팀에 따라서는 접근성을 기능성 테스트로 보는 경우도 있지만, 분류에 상관없이 실시하는 것이 중요하다

그리고 가능한 한 많은 유형의 테스트를 하는 것이 높은 품질의 웹 애플리케이션을 만들어 준다

물론 테스트를 모두 통과한다는 것이 전제 조건이다

크롬 헤드리스 브라우저와 궁합이 좋은 자동화 프레임워크 퍼피티어에 대해 살펴보도록 하겠다

이 툴은 구글이 개발한 노드 라이브러리이며 높은 수준의 API를 통해 크롬을 헤드리스로 제어할 수 있게 해준다

크롬 브라우저가 가진 모든 기능을 활용할 수 있으며, 폼 제출이나 사용자 입력은 물론 애플리케이션의 런타임 성능 측정과 같은 헤드리스 기능도 제공한다

2부의 첫 장에서는 웹 애플리케이션 개발 프로젝트의 테스트 전략에 대해 다룬다

테스트 전략에는 요구사항이나 목표 설정 단계에서부터 성공 여부 측정까지 포함된다

셀레늄은 역사가 오래된 테스트 자동화 프레임워크 중 하나다

이 프레임워크는 오픈소스로 자바, 자바스크립트, 파이썬 등과 같은 다양한 언어와 연동되고, 웹드라이브IO와 같은 다른 주요 프레임워크의 근간이 되기도 했다

또한, W3C와 웹드라이브 프로토콜을 따르고, 클라이언트-서버 방식으로 모든 PC 및 모바일 브라우저를 대상으로 테스트 자동화를 구축할 수 있게 해준다

그리드 툴과 병렬 실행, 대규모 실행 등도 지원한다

이 장에서는 셀레늄 프레임워크으 기술적 특성을 더 깊이 다루며, CDP, 상대 위치 지정자, 시각적 테스트, 클라우드 테스트, 행위 주도 테스트(BDD), 자가 복구 툴 등과 같은 고급 기능에 대해 집중적으로 살펴본다

1부 프런트엔드 웹 테스트 소개에서는 애플리케이션 테스트 방법론과 최신 기술에서 발생하는 문제들, 대표적인 테스트 자동화 프레임워크가 어떤 것들이 있는지와 주요 프런트네드 웹 개발 프레임워크가 어떤것들이 있는지에 대해 다룬다

2부 웹 애플리케이션 개발자를 위한 지속적인 테스트 전략에서는 품질과 사용자 경험을 지속적으로 만족시킬 수 있는 테스트 전략과 고려해야 할 사항, 웹 애플리케이션이 요구하는 가장 중요한 테스트기능, 각 기능별 적합한 테스트 프레임워크 추천, 셀레늄, 사이프러스, 퍼피티어, 플레이라이트와 같은 다양한 테스트 프레임워크에서 코드 범위에 기반한 애플리케이션의 품질 평가 방법에 대해 소개한다

3부 프런트엔드 자바스크립트 테스트 자동화 프레임워크 가이드에서는 셀레늄, 사이프러스, 플레이라이트, 퍼피티어, 로코드 프레임워크의 사용방법과 각 프레임워크의 기술적 특성을 심도있게 다룬다

이 책을 통해 각 주요 프레임워크의 기술적 특성으리 깊이 있게 다루고 있다

셀레늄의 CDP, 상대 위치 지정자, 시각적 테스트, 클라우드 테스트, BDD, 자가 복구 툴등과 같은 고급 기능

사이프러스의 타임 트래블, 컴포넌트 테스트, 네트워크 컨트롤, API 테스트, 지원 플러그인, 클라우드 테스트, BDD 테스트

플레이라이트와 퍼피티어의 고급 기능들도 충분히 다루고 있다

4개의 프레임워크는 많은 공통점을 가지지만 각각의 고유 기능도 제공한다

따라서 테스트 계획 시 하나 이상의 프레임워크를 고려하는 것이 더 생산적인 결정이 될 수도 있다

다양한 기술을 보유한 팀이라면 더 많은 연동 언어를 제공하는 플레이라이트를 고려하고, API 테스트나 내장 코드 커버리지, 쉬운 디버그, 강력한 코드리스 생성 기능 등의 추가 기능을 원한다면 플레이라이트나 사이프러스를 고려하면 된다

이 책의 특장점은 프런트엔드 테스트에 대한 전반적인 지식을 습득할 수 있다는 점이라고 말하고 싶다

다양한 산업에 걸쳐 경쟁력을 유지하려면 팀의 강력하고 넓은 범위의 커버리지를 구축해야 하며, 보안, 접근성, API, 성능 등 모든 유형을 테스트해야한다고 책에서는 설명하고 있다

책에서 테스트는 애플리케이션 품질향상을 위해 선택이 아닌 필수라는 점을 강조하고 있다

당장의 업무의 편의성을 위해 테스트의 중요성을 간과하고 있다면 반드시 후폭풍은 본인이 추후 감내해야될 엄청난 숙제로 다시 되돌아 올 것이다

이 책에서 소개하는 테스트 프레임워크의 사용법을 익히고 내 업무환경에 적용할 수 있는 프레임워크가 어떤 것이 있는지 확인 해보고 반드시 적용하여 애플리케이션 품질향상에 기여해보도록 하자

※출판사로부터 책을 무상으로 제공받아 직접 실습해보고 정성껏 작성한 리뷰 입니다

해당 책은 웹애플리케이션 프런트엔드 개발 시 오픈소스 테스트 자동화 프레임워크를 활용해서 기능/비기능 테스트를 할 수 있는 테스트 방법론과 오픈소스 테스트 자동화 프레임워크 사용법에 대해 소개하고 있습니다.

도구 사용법 뿐만 아니라 최근 동향의 웹 애플리케이션 개발 추세, 프레임워크를 소개하고 있으며, 해당 프레임워크에 맞는 테스트 도구를 선택할 수 있는 가이드를 제공하고 있어 프런트엔드를 개발하고 있는 개발자와 또는 웹 애플리이션 테스트 및 품질 담당자가 참고하면 좋은 서적인 것 같습니다.

오픈소스 테스트 프레임워크에 대한 궁금증과 이를 활용한 테스트 방법론에 대한 지식을 습득을 원하는 분들이 읽으면 좋은 개념서로 재미있게 읽을 수 있는 책인것 같으며, 셀레늄, 사이프러스와 같은 대표적인 오픈소스 테스트 프레임워크의 기본적인 사용법을 알 수 있는 책이었습니다.

최근 정산 관련 프로젝트를 진행한 적이 있었다. 
정책대로 제대로 작업이 된 것이 맞는지 아닌지 확인하기 위해 나나 기획자나 그저 직접 입력해서 상황에 대해 직접 확인하고, 사용자가 올바른 데이터를 입력했는지 아닌지도 직접 확인하였다.
그러다보니 정책을 모두 제대로 확인했는지, 올바른 데이터가 무엇이였는지  기억하기 어려웠다. 

만약 기획자의 체크리스트대로 테스트를 만들고 자동화했다면 어땠을까? 
단위 테스트, e2e테스트, 통합 테스트등이 있다는 것도 알고 있지만 테스트 도구에는 어떤 것들이 있는지는 어떤 도구가 우리 서비스에 적합한지 경험이 없어 선택하기 쉽지 않았다. 

이 책은 그러한 어려움을 줄여주기에 충분하다. 
특히 어떤 테스트 도구를 써야 좋을지는 p.64~65쪽 테스트 자동화 평가 매트리스를 보고  결정할 수 있다. 다음 프로젝트에서 요구하는 환경에 따라 매트리스를 보고 결정해봐야겠다. 

웹 프레임워크에 관한 설명이 아쉽지만 그에 비해 테스트 환경을 구축하기 위한 전략과 고려사항에 대해서 잘 설명해주고 있다. 사이프레스, 셀레늄, 퍼피티어, 플레이라이트 4가지 테스트 도구에 대해 한 장씩 할애하여 설명해주고 있어서 쉽게 환경을 구축할 수 있을 듯하다. 

그리하여 다음 프로젝트는 꼭 테스트 주도 개발 방식으로 작업을 해보고 기획자에게 산출물을 전달하기 전에 기능 정의서 기준으로 테스트 해서 전달해야겠다. 

본 리뷰는 제이펍 출판사로부터 책을 제공 받아 작성했습니다.

프런트엔드 개발자라면 피할 수 없는 테스트, 『프런트엔드 개발자를 위한 테스트 가이드』로 배우자!

정성껏 개발한 애플리케이션이 제대로 동작하는지 확인하기 위해서는 테스트 작업이 필수입니다. 하지만 테스트를 수작업으로 진행하는 것은 시간과 비용이 많이 들며, 오류가 발생할 가능성도 높아집니다. 그렇다면, 프런트엔드 개발자는 어떻게 테스트를 자동화할 수 있을까요? 에란 킨스브루너의 『프런트엔드 개발자를 위한 테스트 가이드』는 이러한 고민에 답을 주는 책입니다. 이 책은 웹 애플리케이션을 테스트하는 데 유용한 오픈소스 테스트 자동화 프레임워크들을 소개하고, 그들의 장단점과 사용법을 실제 예제와 함께 설명합니다.

저자인 에란 킨스브루너는 현재 Perforce Software의 최고 에반젤리스트이자 수석 이사입니다. 그는 썬 마이크로 시스템즈, 텍사스 인스트루먼츠 및 GE와 같은 유명한 같은 회사에서 21년 이상의 개발 및 테스트 경험을 보유하고 있습니다. 또한 ISTQB(International Software Testing Qualifications Board) 및 CMMI(Capability Maturity Model Integration)와 같은 다양한 산업 인증을 보유하고 있습니다.

책은 크게 네 부분으로 구성됩니다. 각 부분에서는 웹 애플리케이션 테스트와 관련된 다양한 주제들을 다루고 있습니다.

첫 번째 부분에서는 웹 애플리케이션 테스트의 필요성과 종류, 그리고 테스트 자동화 프레임워크의 역할과 선택 기준에 대해 다루고 있습니다. 웹 애플리케이션의 복잡도와 변화에 따라 테스트가 어떻게 중요해지고 있으며, 어떤 종류의 테스트가 필요하고, 어떤 테스트 자동화 프레임워크를 사용해야 하는지에 대한 정보를 제공합니다.

두 번째 부분에서는 셀레늄이라는 테스트 자동화 프레임워크를 소개하고, 그것의 설치와 설정, 기본적인 사용법, 웹 요소의 탐색과 조작, 테스트 케이스의 작성과 실행, 테스트 결과의 확인과 보고 등에 대해 다루고 있습니다. 셀레늄은 웹 애플리케이션의 UI를 테스트하는 데에 널리 사용되며, 다양한 브라우저와 언어를 지원하고 커뮤니티와 문서가 풍부하여 학습이 비교적 쉽습니다.

세 번째 부분에서는 사이프러스, 퍼피티어, 플레이라이트라는 테스트 자동화 프레임워크들을 소개하고, 그들의 설치와 설정, 기본적인 사용법, 웹 요소의 탐색과 조작, 테스트 케이스의 작성과 실행, 테스트 결과의 확인과 보고 등에 대해 다루고 있습니다. 각각의 프레임워크는 셀레늄과 비교하여 장점과 단점을 가지고 있으며, 어떤 상황에 적합한지에 대한 정보를 제공합니다.

네 번째 부분에서는 웹 애플리케이션 테스트의 심화 주제들을 다루고 있습니다. 모바일 웹 애플리케이션 테스트, 크로스 브라우저 테스트, API 테스트, 성능 테스트, 보안 테스트 등에 대해 다양한 정보를 제공합니다.

책에서 소개하는 테스트 자동화 프레임워크들의 주요 특징과 장단점을 다음과 같이 설명하고 있습니다. 셀레늄은 오래된 프레임워크로 다양한 브라우저와 언어를 지원하며 학습하기 쉽습니다. 다만, 웹 드라이버 설정과 비동기 처리에 문제가 있을 수 있습니다.

다음으로 사이프러스는 빠르고 안정적으로 작동하며 간편한 UI와 디버깅 도구를 제공합니다. 하지만, 크롬 계열 브라우저만 지원하고 자바스크립트만 사용할 수 있으며, 비용이 발생할 수 있습니다. 마지막으로 퍼피티어와 플레이라이트는 크롬 브라우저를 제어하는 API를 제공하며 스크린 샷과 PDF 생성 등의 기능을 제공합니다. 다만, 셀레늄과 사이프러스에 비해 기능과 문서가 부족하며 다른 브라우저와의 호환성이 낮고 UI나 디버깅 도구가 없습니다.

책에서 인상 깊은 부분으로는 첫째, 웹 애플리케이션 테스트의 필요성과 종류에 대해 배웠습니다. 웹 애플리케이션은 다양한 브라우저와 기기에서 작동해야 하며, 사용자 요구와 환경에 따라 빠르게 변화해야 합니다. 이로 인해 웹 애플리케이션을 테스트하는 것은 프런트엔드 개발자에게 쉬운 일이 아닙니다. 또한, UI 테스트, 기능 테스트, 유닛 테스트, 통합 테스트, 회귀 테스트, 성능 테스트, 보안 테스트 등 다양한 종류의 테스트가 필요함을 알게 되었습니다.

둘째, 셀레늄, 사이프러스, 퍼피티어, 플레이라이트 등의 오픈소스 테스트 자동화 프레임워크를 사용하는 방법에 대해 배웠습니다. 각 프레임워크의 설치와 설정, 기본적인 사용법, 웹 요소의 탐색과 조작, 테스트 케이스의 작성과 실행, 테스트 결과의 확인과 보고 등을 실제 예제와 코드를 통해 학습하였습니다. 이를 통해 각 프레임워크의 장단점과 적용 가능한 상황을 파악할 수 있었습니다.

셋째, 테스트 자동화 프레임워크의 선택 기준에 대해 학습했습니다. 테스트 자동화 프레임워크는 웹 애플리케이션 테스트 과정을 자동화하고 간소화하여 효율성과 정확성을 높여줍니다. 그러나 모든 프레임워크가 동일하지는 않으며, 각각의 프레임워크는 지원하는 브라우저와 언어, 기능과 문서, 비용 등에 따라 장단점이 있습니다. 따라서 적절한 프레임워크를 선택하기 위해서는 이러한 요소들을 고려해야 할 것입니다.

『프런트엔드 개발자를 위한 테스트 가이드』는 웹 애플리케이션 개발에 관심이 있는 사람들 중에서도 테스트에 대한 지식이 부족한 사람들에게 유용합니다. 이 책은 웹 애플리케이션 테스트의 필요성과 종류를 설명하고, 다양한 오픈소스 테스트 자동화 프레임워크들을 소개하고 있습니다. 따라서, 이 책은 웹 애플리케이션 개발에 입문하는 사람들에게 유용한 지식과 인사이트를 제공할 수 있습니다.

또한 웹 애플리케이션 개발에 이미 경험이 있지만, 테스트 자동화 프레임워크를 사용해보지 않은 사람들에게 유용합니다. 이 책은 실제 예제와 코드를 제공하고 있습니다. 따라서, 이 책은 웹 애플리케이션 개발에 이미 경험이 있는 사람들에게 유용한 실습과 학습을 제공할 수 있습니다.

이 책은 웹 애플리케이션 테스트에 관심이 있는 프런트엔드 개발자들을 위한 유용하고 실용적인 책입니다. 이 책을 읽고 많은 것을 배우고 느낄 수 있었습니다. 웹 애플리케이션 개발에 관심이 있거나 배우고 싶은 분들에게 이 책을 추천합니다.

본 리뷰는 제이펍 출판사로부터 책을 제공 받아 작성했습니다.