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

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

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

지난 포스팅에 내 윈도우 환경에 리액트 앱을 배포하는 과정을 기록했다. 다만 이를 서버 (ex. ec2)에 그대로 적용한다면 화면이 뜨지 않을 것이다.. 이를 해결해주기 위해 nginx로 웹서버를 구성하고 거기에 내 리액트 앱을 올리는 과정을 진행해보고자 한다. 우선 파일 구조를 다음과 같이 잡아주었다. 그리고 각 폴더 안에는 다음 파일을 배치시켜 주었다. client - 내 리액트 앱 (node_modules, public, src, package.json 등등) - Dockerfile nginx - default.conf - Dockerfile 우선 client/Dockerfile 의 경우는 이전 포스팅과 다르지 않다. 내용은 다음과 같다. FROM node:14.17.6-alpine RUN mkdi..