[알쓸신팁] 서버 개발자가 알아두면 쓸데 있는 신비한 Front팁!

서버 개발자가 어드민이나 기존 화면을 손볼 때 알아두면 쓸모 있는 프론트엔드 팁을 모은 글이다. DOCTYPE 위치, script 배치, CSS 선택자 우선순위, onload 방식 세 가지의 차이, JavaScript 조건문의 판정 규칙을 다룬다. 서버 개발자 시점의 비교 설명이 붙어 있다.

핵심 포인트

DOCTYPE 선언은 JSP나 PHP로 변환된 결과물의 맨 첫 줄에 한 칸도 띄우지 않고 와야 한다.
script는 head가 아니라 body가 끝난 뒤에 두어야 파싱과 렌더링에 유리하다.
CSS 선택자 우선순위는 !important와 id 100, class 10, tag 1, 전체 선택자 0의 가중치 합으로 정해진다.
window.onload와 body의 onload 속성은 외부 리소스와 이미지까지 다 받은 뒤 실행된다.
body 태그의 onload 속성을 쓰면 script에서 정의한 window.onload가 통째로 무시된다.
jQuery의 ready는 DOM만 준비되면 실행되고 여러 번 중첩해 쓸 수 있어 가장 안정적이다.

상세 정리

글의 배경: 서버 개발자는 API 위주로 가고 프론트는 전문 영역으로 굳어지고 있지만, 기존 소스 수정이나 어드민 개발에서는 여전히 서버 개발자가 프론트를 건드릴 일이 있다.
DOCTYPE 주의점: 서버 언어로 만든 페이지에서 변환 결과의 최상단에 정확히 와야 하며 앞에 공백 한 칸이라도 있으면 안 된다. JSP와 PHP 각각의 배치 예를 든다.
script 위치의 통념: 보통 head 안에 넣으라고 배우지만 그것은 문서 정리 관점이지 브라우저 파싱 관점에서는 적절하지 않다.
script 위치 권고: body의 태그를 모두 파싱한 뒤 스크립트를 해석하고 실행하도록 body 닫는 태그 뒤에 두면 렌더링 속도와 스크립트 실행 안정성에 도움이 된다.
CSS가 어려운 이유: JavaScript는 결국 코드를 쓰는 일이지만 CSS는 레이아웃을 배치하고 그리는 역할이라 서버 개발자에게 익숙하지 않다.
흔한 증상: CSS 파일을 고쳐도, style 영역에서 바꿔도, 태그에 직접 style을 넣어도 안 바뀌는 상황이 우선순위 때문에 생긴다.
우선순위 공식: !important가 가장 높고 id에 100, class에 10, 태그에 1의 가중치를 매겨 합산한 값이 큰 쪽이 이긴다.
실무 정리: 서버 개발자 관점에서는 !important, 태그에 직접 준 style, id, class, tag 순으로 기억하면 된다. 다만 !important는 강제 선언이라 남발하면 안 된다.
onload 방식 1: script 안에서 window.onload를 정의하면 모든 외부 리소스와 이미지가 로드된 뒤 실행되므로 이미지 로딩이 느리면 그만큼 지연된다. 여러 개를 쓰려면 실행 시점을 직접 통제해야 한다.
onload 방식 2: body 태그의 onload 속성도 리소스를 다 받은 뒤 실행되는데, 결정적으로 앞서 정의한 window.onload를 전부 무시하고 자기만 실행돼 확장성이 떨어진다.
onload 방식 3: jQuery의 ready는 외부 리소스와 무관하게 DOM 요소만 읽으면 바로 실행되고 같은 이름으로 중첩해 여러 번 쓸 수 있다.
실행 순서 예제: ready 둘과 body의 onload를 함께 둔 코드에서 ready가 1순위와 2순위로, body의 onload가 3순위로 실행되고 window.onload는 무시되는 것을 보여준다.
조건문 비교: Java는 true와 false를 가려야 해서 null 체크에 별도의 비교나 유틸리티를 쓰지만, JavaScript는 null, undefined, NaN, 빈 문자열, 0이 모두 false로 판정된다.
활용: 그래서 함수 존재 여부, 태그 존재 여부, 숫자 여부를 참인지만 확인하는 식으로 간단히 쓸 수 있다.