`프론트엔드 개발자` 개형이의 벽돌집

웹 최적화를 공부하다가 Intersection Observer API에 대해 알게되었다. 자바스크립트에 내장된 기능인데 나름 재밌어서 포스팅을 해두고자 한다. Intersection Observer는 어떤 기능을 제공할까? 간단하게 설명하자면 HTML 내부 Element 중 내가 관찰하고 싶은 Element에 Intersection Observer를 걸어두면, 화면 안에 해당 Element가 보여지는 순간 Observer에 내가 지정해둔 콜백 함수가 실행된다. 공식 문서 를 보면 해당 기능을 언제 사용하면 유용한지 친절하게 설명이 되어있다. 첫 번째 줄의 이미지 지연 로딩 (이미지를 한번에 로드하지 않고 필요할 때 로드하는 최적화 기술) 이 최적화를 공부하면서 알게된 기법인데, 해당 포스팅에서는 Inte..

지난 포스팅에 이어 테스트코드 작성 방법에 대해 기록해보려고 한다. 테스트 코드 Arrange, Act, Assert 🤔 테스트 코드의 작성은 Arrange, Act, Assert 세가지의 세팅을 해준다고 보면 된다. test('loads and displays greeting', async () => { // Arrange // Act // Assert }) 먼저 테스트할 컴포넌트 예시 코드를 하나 작성해봤다. // Hello.jsx const Hello = () => { return ( Hello World ) } export default Hello 위 컴포넌트에서 Hello World가 제대로 렌더링되는지 테스트하고 싶다. 우선 테스트 코드를 만들어주는데 {name}.test.js 와 같은 네이밍..

이전 회사에서 자동화 테스트를 도입하기 전, 엑셀 시트에 작성된 테스트 케이스를 보며 일일이 매뉴얼 테스트를 했던 경험이 있다. 이 경험은 썩 좋지 않았다. 서비스가 변경될 때마다 테스트 케이스를 변경해 줘야 했고 업데이트될 때마다 테스트를 일일이 수행하는 건 상당한 번거로움이 있었다 🤕 그리고 매뉴얼 테스트만 진행할 경우 파생되는 다른 에러를 잡기에는 분명 어려움이 있을 것이다... 그렇기에 자동화된 테스팅을 도입하면 언급된 문제점들을 어느정도 보완해줄 수 있고 자동 테스트와 매뉴얼 테스트를 함께 진행하면 품질이 더 우수해질 것이다. 단위 테스트란? 🤔 흔히 테스트의 종류는 세 가지로 분류되는 듯하다. 1) 단위 테스트: 모듈 테스트라고도 한다. 하나의 기능을 테스트한다고 보면 되며 단위는 함수, 컴포..

친구와 같이 프로젝트를 진행하기로 했는데, 프론트엔드 배포를 도커로 해보기로 하였다. 우선은 내 로컬 환경인 윈도우에서 진행해보려 한다. 우선은 내 윈도우에 도커를 설치해보자. 아래 URL에서 쉽게 설치를 할 수 있었다. https://www.docker.com/get-started Get Started with Docker | Docker Learn about the complete container solution provided by Docker. Find information for developers, IT operations, and business executives. www.docker.com 설치를 마치고 Docker Desktop을 열어보았는데.. Docker Engine failed ..