웹팩 웹팩은 이다! 즉, 웹팩을 이해하기 위서는 “모듈”을 먼저 알아야한다. 모듈패턴과 필요성 자바스크립트의 소스를 모듈 단위로 관리하거나 라이브러리 등을 만들 때 사용 전역 변수의 사용을 최소화 하기 위함 변수 scope을 지정해서 사용하기 위함 Reusablility, Isolation, Organization 모듈 단위로 소스를 개발하면 각 모듈 간의 의존성을 최소화하거나 의존성 파악하기 쉬움 모듈(module) A module is one of the separate parts. 자바스크립트에서의 모듈이란 기능이 구현된 “자바스크립트 개별 파일”이라고 생각하면 됩니다. 잘 만든 모듈패턴은 하나의 파일이 하나의 모듈이 되며, 하나의 파일은 하나의 scope이 되도록 구현해야 합니다. 그래야 파일 내에서 변수도 자유롭게 선언할 수 있고, 관련 기능만 하나의 파일에 구현해서 다른 파일의 방해를 받지 않을 수 있게 됩니다. 바닐라 자바스크립트에서의 모듈패턴은 scope 개념을 활용…

Static Website(정적인 웹사이트) 화면에 보이는 컨텐츠 그대로 html 파일에 작성되어있어서, 서버에 저장된 html 파일 그대로 브라우저에 보이는 것. 주로사용자 및 시간에 따라 항상 똑같은 내용을 보여주는 사이트는 static website로 만드는게 적합하다. ex) 회사 소개 페이지, 반복이 없는 포트폴리오 페이지, gatsby 블로그 등 Dynamic Website 서버에 저장된 html 파일이 그대로 브라우저에 그려지는 것이 아니라, 다이나믹하게(=동적으로) html 파일이 만들어지는 것이다. 요즘 대부분의 웹사이트가 dynamic website이다. dynamic-website 예를 들어, airbnb 사이트에서 어제 접속하고, 오늘 접속할 때마다 추천 숙소 목록이 바뀐다. 목록 디자인은 그대로인데, 숙소 목록 데이터가 바뀌는 것은 Dynamic Website이기 때문이다. SPA (Single Page Application) spa 하나의 파일로 전체 사이…

검색 크롤러 기본 방식 웹페이지를 방문하여 모든 링크를 찾은다음, 그 링크를 목록화 한다. 그 다음 이 링크들을 이전에 방문한 적이 있는지 확인하고, 방문해본 적이 없으면 그 링크를 타고 웹페이지를 방문한다. 그런 다음 그 페이지에서 앞에서 진행한 과정을 반복한다. 현재의 검색 알고리즘 하나가 아닌 여러 개의 알고리즘으로 구성되어있다. 모든 웹페이지의 수 많은 검색어, 모든 링크를 다 합친 것이 페이지랭크가 된다. 실제로 링크를 누가 얼마나 클릭하는지도 중요하다 크롤러가 웹페이지를 찾으면 Google 시스템에서는 브라우저와 마찬가지로 해당 페이지의 콘텐츠를 렌더링한다. 이때 키워드 및 웹사이트 최신 정보에 이르는 주요 신호를 기록하며 검색 색인에서 모든 주요 신호를 추적한다. 키워드 검색과 웹페이지에 담긴 텍스트 비교, 반복성, 서체크기, 대문자, 키워드의 위치 등 여러가지 전통적인 정보검색기술과 결합한다. 여기서 전통적인 판단 요소를 시그널(signal) 이라고하고 검색품질에 대…

Web System Development History 1세대 웹 서비스 - 전통적인 Web System Architecture. 정적 웹. traditional_web_architecture 웹 서버가 모든 내용이 담긴 HTML 페이지를 클라이언트(ex. Web browser)에게 전송 초창기 웹사이트/서비스에 적합했던 시스템 초창기 웹사이트는 단순한 정보 제공 위주 특별히 기능이 X, User Interaction 이 많이 요구되지 X 1세대 웹이 정적인 이유? HTML, CSS 자체가 정적 : 링크로 연결된 문서 : “이렇게 보여줘라” 에 대한 지시 : 웹페이지의 내용을 브라우저에게 어떻게 렌더링(rendering) 해주라고 마크업 해주는 것 어떻게 보여지는가에 대한 것이기 때문에 로직(동적)이 없다. 정적 2세대 웹 서비스 - User Interaction 증가. 동적 웹 (JavaScript). first_version_of_spa_ajax 웹서비스들이 점점 발전함에…