Web Development/ETC (5) 썸네일형 리스트형 [ETC] 모듈 번들러와 Vite, Webpack 비교 1. 모듈 번들러의 개요 1.1 모듈 번들러란 무엇인가? 모듈 번들러는 웹 애플리케이션을 구성하는 여러 자원(예: JavaScript, CSS, 이미지 파일 등)을 하나의 파일 또는 여러 개의 그룹으로 병합하고 압축하는 도구이다. 이를 통해 네트워크 요청 수를 줄이고, 로딩 속도를 향상시키며, 코드의 유지 보수성을 높일 수 있다. 1.2 모듈 번들러의 필요성 • 의존성 관리: 모듈 간의 의존성을 자동으로 파악하여 올바른 순서로 로드되도록 한다. • 네임스페이스 충돌 방지: 전역 스코프 오염을 방지하여 변수나 함수 이름의 충돌을 예방한다. • 파일 크기 최적화: 사용하지 않는 코드를 제거하고(minification), 코드를 난독화하여 파일 크기를 줄인다. • 개발 편의성: 모듈 단위의 코딩을 가능하게 하.. [ETC] 어떤 기능을 개발하기 전 생각해볼 것 1. 이 기능이 필요한가?2. 이 기능으로 발생할 수 있는 상황이 구체적으로 몇가지나 되고 어떻게 일어나는가?2. 어떤 방법으로 구현할 것인가?3. 이 방법말고 다른 방법은 없는가?같은 실수를 반복하지 않기 위해서,생각 나는대로 추가 예정입니다. [ETC] 정규식 (Regex) 이해하기 회사 코드에서 정규식 코드를 볼 때마다, 공부 한번 해야지 하고 계속 넘어가고 있었다. 이번에야말로 정규식에 대해서 공부해보자라는 생각으로 정리해보았다. 드림 코딩 엘리의 정규식 영상을 보고, 그 안의 내용을 다 따라해보니, 정규식에 대해서 기본은 이해가 된 것 같다. https://www.youtube.com/watch?v=t3M6toIflyQ 내가 다니는 회사에서 정규식은 아래와 같은 경우 사용한다. 프론트엔드에서 라우트 경로에 따라 화면을 다르게 표현 해줘야 할 경우, 라우트 경로를 파악할 경우 프론트엔드 및 서버에서 사용자 입력 내용을 validate 할 경우 정규식은 개발자 개인이 공부하지 않았다면 모르기에 모두가 코드를 쉽게 읽고 유지보수하기에 어렵다는 단점이 있지만, 일단 알기만하면, 길게 .. [GTM, GA4] GTM, GA4 을 통해서 웹사이트 내의 고객 활동 추적하기 기본 프로세스 GTM에서 추적할 이벤트들을 관리 컨테이너 생성 태그 설정 (트리거, 변수 포함) 추적 코드를 추적할 웹사이트 Head, Body에 설치 GA4에서 그 이벤트들을 확인 데이터 스트림 설정 GTM 주요 용어 GTM Google 태그 관리자는 웹사이트 또는 모바일 앱에서 코드 및 태그 라고 통칭되는 관련 코드 조각을 쉽고 빠르게 업데이트할 수 있는 태그 관리 시스템 💡 태그 관리자가 설치되면 웹사이트 또는 앱에서 태그 관리자 서버와 통신할 수 있습니다. 그런 다음 태그 관리자의 웹 기반 사용자 인터페이스를 사용하여 추적 태그를 설정하고, 특정 이벤트가 발생하면 태그가 실행되게 하는 ***트리거***를 설정한 후 태그 구성을 간소화하고 자동화하는 데 사용할 수 있는 ***변수***를 만듭니다. .. [ETC, Amazon EC2] 탄력적 IP IP주소 IP주소란 인터넷 상에서 통신하기 위해 각각의 컴퓨터 및 통신장비에 부여하는 고유한 주소(전 세계적으로 관리되는 유한한 자원)를 의미합니다. IP주소는 IPv4, IPv6 2가지 종류가 있다. Elastic IP(탄력적 IP) 서비스 ( In 아마존EC2 ) 무엇인가? Elastic IP Address는 인터넷을 통해 접속할 수 있는 고정적인 공인 IP 주소를 할당하여 인스턴스에 연결하는 서비스 사용하는 이유? 아마존 EC2를 통해서, 서버를 임대하면, 유동 IP주소를 배정하게 된다. 이 IP주소를 그대로 사용하게 될 경우, 서버를 껐다 키게 되었을 때, 연결된 IP가 바뀌게된다. 이 때문에, 탄력적 IP를 할당해서, IP를 고정 시킴으로써, 연결된 도메인을 안정적으로 사용할 수 있다. IPv4.. 이전 1 다음