반응형

레거시정리 3

여러 사이트를 동시에 고도화할 때 디렉토리 구조 설계 방법

공공기관 고도화 프로젝트를 하다 보면 이런 상황이 나온다.동일한 구조의 사이트 5~9개공통 소스는 공유일부는 별도 관리기존 레거시는 유지신규 레이아웃은 전면 개편이때 디렉토리 구조를 잘못 잡으면중반부터 수정 범위가 통제되지 않는다.고도화의 핵심은 “코딩”이 아니라구조 설계다. 1. 가장 많이 하는 실수❌ 기존 폴더 안에 그냥 덮어쓰기❌ v2, v3를 섞어 쓰기❌ 사이트별로 공통 파일을 복사해서 관리이렇게 되면:공통 수정 시 9번 수정QA 반영 누락배포 충돌유지보수 지옥 2. 기본 전략: “공통과 개별을 분리하라”여러 사이트 고도화 시폴더는 크게 3단계로 나누는 것이 안전하다./common /site-a /site-b /site-c 추천 구조 예시/assets /common /css ..

공통 CSS가 중복되는 이유와 해결법(로드순서/우선순위 실전)

공통 CSS가 중복되는 이유와 해결법(로드 순서 · 우선순위 실전 정리)고도화 프로젝트에서 가장 많이 나오는 말:“왜 여기만 스타일이 다르게 나오지?” 코드는 똑같은데페이지마다 다르게 보이는 경우. 대부분 원인은공통 CSS 중복 + 로드 순서 + 우선순위 충돌이다. 1. 공통 CSS가 중복되는 이유1) 프로젝트가 이어받기식으로 진행됨A업체 → B업체 → C업체공통 파일을 건드리기 무서워서 새로 추가결국 비슷한 버튼 스타일이 3군데 존재2) 페이지 전용 CSS가 공통을 덮어씀/* common.css */.btn { padding: 10px 20px;}/* page.css */.btn { padding: 12px 24px;} → 어디가 이기느냐는 “로드 순서”에 달림.3) !important 남발...

SCSS와 CSS가 함께 쓰인 프로젝트 정리 방법

(고도화 실전: 레거시 정리 루틴)고도화 프로젝트를 들어가면 흔히 이런 상태다.어떤 사이트는 SCSS어떤 사이트는 CSS공통은 여기저기서 불러오고파일명/경로 규칙도 제각각이 상태에서 “그냥 수정”부터 하면 중반부터 충돌과 중복이 폭발한다.정리는 코딩 전에 해야 한다. 1. 먼저 “목표”를 정하자 (중요)혼재 프로젝트 정리는 2가지 선택지 중 하나다.A. 완전 통합(추천: 신규/대규모 개편)모든 스타일을 SCSS로 통일구조 재설계 가능초기 비용 ↑ / 유지보수 효율 ↑B. 병행 운영(추천: 고도화/기간 촉박)기존 CSS 유지신규(v2/v3/v4 등)만 SCSS로 구성리스크 ↓ / 속도 ↑공공기관 고도화는 대부분 B가 현실적이야.2. “현재 상태”를 30분 안에 지도 그리기체크어디가 SCSS인지 / 어디..

반응형