Web Development/ETC (7) 썸네일형 리스트형 백엔드 데이터 요청 로직 개선 사례 공유 백엔드 이슈를 처리하는 과정에서 데이터 요청 로직을 수정하게 되었고,그 과정에서 발견한 개선 포인트와 실제 적용한 개선 내용을 공유드립니다.1. 불필요한 컬럼 조회 제거 (Attributes 명시)기존 문제기존 코드에서는 필요한 컬럼만 선택하지 않고, 연관된 모델 전체 컬럼을 조회하고 있었습니다.이로 인해 JOIN 대상에 content와 같은 대용량 컬럼이 포함되어 성능 저하 가능성이 있었습니다.개선 내용각 include 구문에 attributes 옵션을 명시하여 실제로 필요한 컬럼만 조회하도록 수정했습니다.개선 효과JOIN 시 사용되는 메모리 사용량 감소(특히 content와 같은 대용량 컬럼이 JOIN 대상에 포함되지 않도록 제한)DB ↔ 서버, 서버 ↔ 프론트엔드 간 전송되는 데이터 크기 감소전체 .. Typography 프리셋 구조 개선 정리 1. 현재 구조Typography 프리셋을 함수형 컴포넌트로 정의하고, 내부에서 공통 Typography 컴포넌트에 스타일 props를 주입하는 방식.const Typography = ({ children, ...props }) => ( {children} );const StyledTypography = styled.div` font-family: 'SUIT', sans-serif; margin: 0; font-size: ${({ $fontSize }) => $fontSize}; ...`;// 프리셋export const Medium2Body2 = (props) => ( );현재 구조의 특징구조함수형 컴포넌트가 스타일 프리셋 역할을 함공통 Typography에 props를 주입하는 형.. [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 다음