개발생존기

웹 브라우저는 사용자가 요청한 웹 콘텐츠를 화면에 표시하는 역할을 합니다.브라우저의 작동 과정은 크게 다음과 같은 단계를 통해 이루어집니다.URL 입력사용자가 주소창에 URL(Uniform Resource Locator)을 입력하거나 검색을 실행하면, 브라우저는 이를 분석하여 아래의 과정을 수행합니다.프로토콜(예: HTTP, HTTPS)을 확인합니다.도메인 이름(예: example.com)을 기반으로 서버의 IP 주소를 찾기 위해 DNS(Domain Name System) 요청을 보냅니다.서버와의 연결DNS를 통해 IP 주소를 얻은 후, 브라우저는 해당 서버와 TCP 연결을 설정합니다.HTTPS를 사용하는 경우, SSL/TLS 암호화를 통해 보안 채널을 설정합니다.HTTP 요청브라우저는 요청된 리소스(예..

컴파일(Compile)웹 개발에서 컴파일(Compile)은 주로 웹 애플리케이션의 소스 코드를 브라우저가 실행 가능한 형태로 변환하는 과정에서 사용됩니다. 이 과정은 웹 기술의 다양성과 브라우저 간 호환성을 보장하기 위해 필수적인 작업입니다.웹 개발에서의 컴파일이 필요한 이유최신 문법과 호환성 문제최신 JavaScript(ES6+) 문법은 일부 오래된 브라우저에서 지원되지 않습니다.TypeScript와 같은 언어는 JavaScript로 변환이 필요합니다.다양한 언어 사용CSS 전처리기(SASS, LESS 등), TypeScript, JSX(React) 등은 브라우저에서 직접 실행할 수 없으며, 컴파일 후 표준 코드로 변환해야 합니다.최적화웹 앱의 성능을 높이기 위해 코드 최적화 및 압축이 필요합니다.웹 ..

JavaScript 모듈 번들러는 여러 개의 모듈로 나뉘어 있는 코드를 하나의 파일(또는 여러 파일)로 묶어주는 도구입니다. 이를 통해 웹 브라우저가 여러 파일을 로드하면서 생기는 성능 저하를 방지하고, 코드가 잘 작동하도록 최적화된 형태로 제공합니다. 회사에서 일하다 보면 이런 것들에 대한 지식에 무뎌진다. 우린 생존을 해야하니 더 쉽고 빠르게고 비용을 줄이면서 일할 수 있는 방법을 찾아야한다. 화이팅!왜 모듈 번들러가 필요한가? JavaScript 모듈화의 문제ES6 이후 JavaScript는 import와 export를 사용하여 코드를 모듈화할 수 있게 되었습니다.하지만 브라우저는 모듈이 많아질수록 파일을 하나씩 다운로드해야 하기 때문에 성능 문제가 발생합니다.모듈 번들러는 이를 하나의 파일로 묶어..

Jest는 JavaScript 및 TypeScript를 위한 테스트 프레임워크이며, @testing-library/jest-dom은 Jest의 매처를 확장하여 DOM 관련 테스트를 용이하게 해주는 라이브러리입니다.toBeInTheDocument 같은 matcher는 @testing-library/jest-dom에서 제공하는 기능입니다.중요한건 에러가 발생했다는 것이죠.저는 일반적인 에러 해결법으로 진행해도 해결이 안되더라구요... 다신 그러지 않기위해 과정을 기록합니다!필요한 의존성 설치npm install --save-dev @testing-library/jest-domjest-dom 타입 추가TypeScript에서 jest-dom의 타입을 인식하게 하려면, 프로젝트의 src/setupTests.ts ..