🔍
kiam.kr →
매뉴얼 홈›명함 프로필›생명주기

⏱️ 페이지 생명주기 (Lifecycle) 완전 분석

페이지가 로드되고, 실행되고, 소멸될 때까지 어떤 순서로 코드가 실행되는지 초 단위로 분석합니다.

전체 실행 타임라인

T+0ms    브라우저가 URL(/?cur_win=paper_card)로 HTTP GET 요청 전송
T+50ms   서버가 index.php 실행, PHP 세션 복원, 사용자 인증 확인
T+80ms   PHP가 HTML 생성 시작 ( 태그 출력)
T+90ms   CSS 파일 10개 로드 시작 (병렬, 브라우저가 처리)
T+100ms   종료,  시작

T+310ms  ★ DOMContentLoaded 이벤트 발생
          └── 등록된 jQuery ready 핸들러들 실행

T+310ms  jQuery.ready() #1 실행
          ├── for(i=0;i<3;i++):
          │   ├── #alertid0, #alertid1, #alertid2 확인
          │   └── 쿠키에 해당 알림ID 없으면 showIframeModal()

T+315ms  ★★★ jQuery.ready() #2 실행 (메인 초기화)
          ├── cur_win_name = "paper_card" 설정
          ├── key1_gwc_show == '4' 확인 → 분기
          │   ├── [일반모드] wecon_search_div 표시, scroll="overflow-y:hidden"
          │   └── [와이드모드] 레이아웃 조정, 미디어 높이 계산
          ├── bottom_wt = $("#bottom").width()
          ├── checkMobile() 호출 → 화면 크기에 따라 카드 너비 설정
          │   ├── 모바일: 카드 49% (2열)
          │   └── 데스크탑: 카드 24% (4열)
          └── console.log('paper_card', '')

T+350ms  HTML 파싱 완료, body 렌더링 시작
          ├── 헤더 표시 (position:fixed, top:0)
          ├── footer_menu 표시 (position:fixed, bottom:0)
          └── #middle 영역: 검색창, 정렬, +버튼, 리스트 영역

T+400ms  ★ AJAX 데이터 로딩 시작
          ├── getIamPaper('[사용자ID]','[관리자ID]','','0',1) 호출
          │   └── GET → [내부API]/[명함목록]
          │       파라미터: card_owner=[사용자ID], page=1 등
          │       응답: HTML (명함 리스트)
          │       → #papercard_list에 삽입
          └── displaySample(lim, off) 호출
              └── GET → [내부API]/[콘텐츠조회]
                  파라미터: limit, offset, sample_type=paper_card
                  응답: HTML → .sample_main에 추가

T+600ms  서버 응답 도착, 리스트 렌더링 완료
          └── 사용자에게 종이명함 목록 표시

T+1000ms 이후: 사용자 인터랙션 대기 상태
  ├── 스크롤 이벤트 → panelGroupState 처리
  ├── 클릭 이벤트 → 각종 함수 호출
  ├── 검색어 입력 → paper_submit()
  ├── +버튼 클릭 → add_paper_card() (앱에서만)
  ├── 편집 클릭 → create_paper() or edit_papersender()
  └── 결제 버튼 → settlement()

T+2000ms  sign_toggle() 첫 번째 실행
          └── .blink 요소 색상 토글 (#0fc5b5 ↔ #ec0e03)

T+4000ms  sign_toggle() 두 번째 실행
T+6000ms  sign_toggle() 세 번째 실행
... (2초마다 계속 반복)

생명주기 5단계

1단계: 요청 & 인증 (0~80ms)

브라우저가 URL로 HTTP GET 요청을 보내면, 서버의 PHP(index.php)가 실행됩니다. PHP는 세션을 확인하고 로그인 상태를 검증합니다. HTML 생성에 필요한 사용자 정보(사용자ID, 카드소유자, 사이트설정 등)를 PHP 변수로 준비합니다.

2단계: 리소스 로딩 (80~250ms)

CSS 10개와 JS 11개 파일을 순차적으로 로드합니다. 주요 의존성 순서: jQuery → main.js → bootstrap.js → rlatjd.js → chat.js. 이 단계에서 전역 유틸리티 함수들이 정의됩니다.

3단계: 초기화 (250~350ms)

가장 중요한 단계입니다. 인라인 스크립트가 실행되며: ① 전역 변수 선언, ② 80+ 비즈니스 함수 정의, ③ jQuery ready 핸들러 등록, ④ sign_toggle 인터벌 시작, ⑤ DOM 요소 접근 및 스타일 조정.

4단계: 데이터 로딩 (350~600ms)

AJAX 요청으로 실제 데이터를 서버에서 가져옵니다. getIamPaper()가 명함 목록 HTML을 받아와 #papercard_list에 렌더링합니다. 이 시점에 사용자가 실제 콘텐츠를 보게 됩니다.

5단계: 상호작용 (600ms ~ 페이지 이탈)

완전히 로드된 상태에서 사용자 입력을 기다립니다. 이벤트 리스너가 클릭, 스크롤, 키보드 입력을 감지하고 적절한 함수를 호출합니다. sign_toggle은 2초마다 계속 실행되며 온라인 상태 표시등을 점멸시킵니다.

💡 초등학생을 위한 비유: 이 과정은 마치 레고로 성을 쌓는 것과 같아요. ① 먼저 설명서를 보고(요청), ② 필요한 블록들을 꺼내고(리소스 로딩), ③ 블록들을 분류해서 준비하고(초기화), ④ 블록을 조립해서 성을 만들고(데이터 로딩), ⑤ 다 만든 성으로 놀기 시작하는 거예요(상호작용)!

주요 포인트