_app.jsx(tsx) _app.jsx(tsx) 내의 컴포넌트는 모든 페이지를 렌더할 때 항상 호출됩니다. 그래서 모든 페이지에 필요한 공통 로직의 경우 App 컴포넌트에 추가할 수 있습니다. _app.jsx(tsx) 필요한경우 페이지 이동할 때마다 유지해야 하는 스타일이나 레이아웃 적용 페이지 이동할 때 유지해야할 state 관리 componentDidCatch 라이프사이클로 공통 에러 처리 페이지에 공통 로직을 통해 데이터를 주입해야하는 경우 모든 페이지에 필요한 css를 적용하는 경우 _app.jsx(tsx)의 site title tag site의 title 또한 _app.tsx에서 추가하는데 아래와 같이 next/head에서 Head 컴포넌트를 import해서 사용하면 됩니다. 동적 title이 필요할 때는 pages 폴더 하위에 개별 컴포넌트마다 title 태그를 추가하면 overwrite 됩니다. _document.jsx(tsx) Next.js에는 SPA에서 하나의 h…

웹팩 웹팩은 이다! 즉, 웹팩을 이해하기 위서는 “모듈”을 먼저 알아야한다. 모듈패턴과 필요성 자바스크립트의 소스를 모듈 단위로 관리하거나 라이브러리 등을 만들 때 사용 전역 변수의 사용을 최소화 하기 위함 변수 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) 이라고하고 검색품질에 대…