동적 웹페이지 예시 - dongjeog webpeiji yesi

동적 웹페이지와 정적 웹페이지란

정적 웹페이지(static web page): 서버에 저장되어있는 HTML+CSS 파일 그대로 보여주는 방법

목차 Show

• 동적 웹페이지와 정적 웹페이지란
• 동적 웹페이지의 종류
• Client Side Rendering (CSR)
• Server Side Rendering (SSR)

동적 웹페이지(dynamic web page): 상황에 따라 서버에 저장되어있는 HTML에 데이터 추가/가공을 해서 보여주는 방법

특징

정적 웹페이지(static web page)

웹페이지에서 추가적인 통신 및 계산이 필요 없기 때문에 속도가 빠르고 서버에 부담이 적다는 장점이 있지만추가/수정/삭제 등 내용 변경이 필요할 때 HTML 자체를 수정해야 하기 때문에 번거롭다는 단점이 있습니다.

동적 웹페이지(dynamic web page)

한 페이지에서 상황/시간/사용자요청에 따라 다른 모습을 보여줄 수 있다는 장점이 있지만 상대적으로 보안에 취약하고 모습이 계속 변하기 때문에 검색 엔진 최적화(search engine optimazation, SEO)가 어렵다는 단점이 있습니다.

요약

동적 웹페이지의 종류

Client Side Rendering (CSR)

자바스크립트에 데이터를 포함해서 보낸 후, 클라이언트에서 HTML을 완성하는 방법이다.
브라우저는 웹서버로부터 다운받은 js파일을 실행합니다.
실행하는 동안 딜레이가 발생하지만 이후에는 서버의 의존도가 낮아 빠른 화면이나 인터렉션이 가능합니다.
단순히 뼈대만 있기 때문에 SEO에 취약하다.

Server Side Rendering (SSR)

서버에서 HTML에 데이터를 끼워넣어 완성된 형태의 HTML을 보내주는 방법이다.
브라우저에서 보는 파일을 만들어 내는 로직 파일을 서버에 올려서 실행합니다.
이미 DOM 구성이 다 된 파일을 브라우저가 받기 때문에 초기 구동 속도가 빠르다.
이미 내용이 다 차있기 때문에 검색 엔진들이 정보를 수집할때 정확한 정보를 가져갈 수 있어서 SEO에 좋습니다.

출처

• 위펄슨 기술 블로그 | https://tech.weperson.com/wedev/frontend/csr-ssr-spa-mpa-pwa/#csr-client-side-rendering-vs-ssr-server-side-rendering)
• 스파르타 코딩클럽 참고 자료

이번에는 정적 웹 페이지와 동적 웹 페이지에 대해서 알아보겠습니다. 특히 웹크롤링에 관심이 있으신 분이라면 알아두면 도움이 됩니다. 

정적 웹 페이지 (static web pages)

정적 웹 페이지는 언제 접속해도 같은 응답을 보내줍니다. 일단 HTML, CSS, JS 파일 등이 서버에 업로드되면 개발자가 수정하기 전까지 매번 같은 파일을 브라우저에 건네줍니다. 즉, 웹 서버가 정적 웹 페이지에 대한 요청을 받은 경우 서버는 추가적인 처리 과정 없이 클라이언트에게 응답을 보냅니다. 예를 들어 회사나 개인의 소개 페이지가 정적 웹 페이지의 좋은 예시입니다. 

동적 웹 페이지 (dynamic web pages)

웹 서버가 동적 웹 페이지에 대한 요청을 받은 경우 서버는 추가적인 처리 과정 이후 클라이언트에게 응답을 보냅니다. 동적 페이지는 방문자와 상호작용하기 때문에 페이지 내용은 그때그때 다릅니다. 댓글, 날씨, 주가 정보 등과 같이 정보 변경이 잦은 곳에 많이 사용됩니다. 

웹 페이지 상에서 특정 부분을 동적으로 바꾸는 형태로 사용됩니다. 예를 들어 다음 뉴스 댓글, 스타벅스 매장 정보, 롭스 상품 검색 결과 등이 해당합니다. 해당 사이트들은 웹 페이지 전체에 해당하는 정적인 페이지 데이터(HTML 등)를 다 보여준 후에야 동적으로 데이터를 가져와서 나타내 줍니다. 

그렇기 때문이 이런 사이트들은 파이썬에서 requests 라이브러리를 이용해서 html 응답을 받아와도 동적인 데이터는 보이지 않는 것입니다. 받아온 응답에는 정적 페이지의 html 코드만 포함되어있으니까요.

그럼 파이썬으로 동적 웹페이지는 어떻게 크롤링할 수 있을까

requests 라이브러리를 이용해서는 나타나지 않는 데이터들을 수집하는 가장 손쉬운 방법은 코드로 브라우저를 제어하는 것입니다. Selenium 라이브러리를 사용하면 브라우저의 동작을 파이썬 코드로 조작할 수 있습니다. 이 라이브러리를 활용해서 원하는 페이지에 접근해서 동적 데이터가 모두 로딩된 이후의 상태를 크롤링하면 됩니다. 

사장님 몰래 하는 파이썬 업무자동화(부제 : 들키면 일 많아짐) Ch0. 책 소개(집필 목적) 출간 계약 후, 작성중인 저서입니다. Ch2. 목차 및 간략 소개 1-1. 변경 이력 1-2. 책 활용 방법 1-3. 업무자동화 소개(RPA) Ch2. 개발환경 구축 2-1. 파이썬 설치(Anaconda) 2-2. IDE란? 2-3. VS CODE 설치 2-4. VS CODE 사용법 (기초) 2-5. VS CODE 사용법 (디버깅) Ch3. 업무자동화 관련 패키지 3-1. Excel - OpenPyxl 소개 1) 엑셀의 구성요소 2) WorkBook, WorkSheet 객체 설정하기 3) Cell 데이터 읽기/쓰기/삭제 4) rows, columns 속성 이해하기 5) 엑셀 함수 쓰기 - max_row, max_column 속성의 이해 6) 엑셀 서식 지정하기 - 기본 7) 엑셀 서식 지정하기 - 조건부 서식 8) WorkSheet(=Sheet) 조작하기 3-2. Excel - xlwings 소개 1) 엑셀 VBA(Visual Basic for Applicaiton) 소개 2) xlwings 설치 및 Excel 환경설정하기 3) VBA에서 파이썬 코드 실행시키기 4) 파이썬에서 VBA 코드 실행시키기 3-3. Win32com (pywin32) 1) win32com 소개 및 설치 방법 2) win32com 통해 엑셀 다루기 - Cell 데이터 읽기/쓰기 3) win32com 통해 엑셀 다루기 - Cell 영역을 선택하는 방법 4) win32com 통해 엑셀 다루기 - Sheet 제어 5) win32com 통해 엑셀 다루기 - 엑셀 서식 지정 6) win32com 통해 엑셀 다루기 - 차트 7) win32com 통해 엑셀 다루기 - 파일 저장 옵션 9) win32com 통해 전자메일(Outlook) 다루기 3-4. Word문서 자동화 (python-docx) 1) 문서 생성, 저장, 불러오기, 글자 입력 2) 이미지 삽입, 표 삽입 3) 기존문서 내용 읽기 4) 글자 폰트, 크기, 색깔 변경 5) 문단 정렬, 표 셀 정렬 3-5. 파일과 폴더 다루기 1) 경로(path)와 디렉토리(directory) 2) 절대 경로와 상대 경로 3) os 모듈 4) glob 모듈 5) shutil 모듈 3-6. 이미지 처리 1) Pillow 설치 및 이미지 불러오기 2) 이미지 편집(resize,crop,rotate,flip) 3) 이미지 필터 효과(흑백, 블러, 엣지) 4) 이미지 워터마크(텍스트) 5) 이미지 엑셀에 삽입 3-7. PyAutoGUI 모듈 1) 마우스 조작하기 2) 키보드 조작하기 3) 화면 이미지 인식하기 4) 메시지 박스 띄우기 3-8. 웹크롤링 1) 크롬과 크롬 드라이버 2) 속성 HTML/CSS 강의 3) 동적/정적 웹 페이지 4) 정적 웹크롤링 - request / beautifulsoup 5) 정적 웹크롤링 - 텍스트, 하이퍼링크, 이미지 가져오기 6) 동적 웹크롤링 - selenium 소개 및 기초사용법 7) 동적 웹크롤링 - selenium으로 화면 조작하기 8) 동적 웹크롤링 - 텍스트, 하이퍼링크, 이미지 가져오기 3-9. 기타 유용한 패키지 1) zipfile 압축/해제 2) exe 파일 배포 3) 원하는 시간마다 파이썬 자동 실행 4) PDF 다루기 Ch4. 업무자동화 프로젝트 사례 - 작성중 Outlook 첨부 엑셀 파일 데이터 자동 취합하기 개별 파일의 엑셀 시트 새 파일에 취합하기 네이버뉴스 댓글 수집해서 엑셀로 저장하기 실시간으로 네이버 뉴스를 텔레그램으로 전송받기 엑셀 시트를 개별 파일로 분리하기 엑셀 시트별 PDF 자동 저장하기 엑셀의 교육자 명단을 참조하여 수료증(워드) 자동 작성하기