IDC
DevOps 개발자가 배포운영까지!
하지만 서비스가 커질수록 DevOps팀이 분리되어진다.
HTTP(HTML, HyperTextMarkupLanguage)
JSX, Javascript XML, Extensible MarkupLanuage
SMTP
FTP
scrapping
og(openGraph) 웹에서 특정 주소를 입력했을 때 미리보기를 제공해주고싶을 경우 meta tag에 작성하여 웹 주소의 title, image, description 등을 미리 보여주는 것.
@ twitter도 있음
서버사이드렌더링과 서버사이드렌더링이 아닌 것의 차이!
우리가 axios.get을 할 때 받아오게되는 소스코드는 useQuery까지 기다려주지 않고 처음 받아온 데이터만 화면에 그려주게된다.
만약 다이나믹 라우팅한 페이지에서 useQuery를 사용한 데이터를 받아와서 화면에 그려주려면 미리 useQuery를 실행하고 백엔드에 데이터를 주면 데이터가 채워진 html를 브라우저에 그려주게된다 -> 서버사이드렌더링
SEO, Search Engine Optimization 검색엔진최적화
검색엔진 서비스는 다른 웹사이트를 돌아다니면서 정기적으로 scrapping을 하는 크롤러(봇) 프로그램을 만들어서 검색을 하게되면 나오는 결과를 점수 측정하여 높은 것부터 결과로 보여지도록 해준다.
예) 구글 크롤러봇, 네이버 크롤러봇
이러한 크롤러봇도 서버사이드렌더링이 필요하다.
어떻게하면 SEO를 높일 수 있을까? 웹 접근성을 높여준다! (...청각, 시각 장애인 분들을 위한 기능구현, 이미지태그에 alt, symmentic tag)
SSG(VM, GCP): html, css, javascript를 build하여 하나의 묶음 파일로 만들고 각각의 스토리지에 올려놓는다.
SSR: dev하여 대기해놓는다.
-> multicould
load balalncer 처음에 있는 서버사이드렌더링을 위한 컴퓨터의 용량이 커지게되면 다른 컴퓨터를 만들어서 그 곳으로 list-connection을 해준다. 각각 다른 페이지를 보여주게 해주는 역할도 한다. auto-scaling
DNS 네트워크 서비스 도메인을 사용하여 zone을 만들어 A record를 만들어 로드 밸런서 주소를 입력해놓으면 도메인 주소에 접속하였을 때 로드 밸런서로 연결되어 각각의 페이지에서 어떤 것을 보여줄지 할당해주는 방식.
여기에서 연결해주기 위해서는 도메인이 꼭 필요하다!!!
VPC 전체를 감싸고 있는 하나의 큰 네트워크 보통은 백엔드에서 많이 하며 DevOps팀에서, 네트워크 전문가들이 사용.
prod 배포환경 (실제 사용자들이 사용하는 환경) 중요!!!
staging
dev 프론트, 백을 통합하여 사용하는 개발환경
local 개발할 때 사용하는 내 컴퓨터 안에서 소스코드를 설치하여 사용
실제 사용자가 사용할만큼 개발된 버전2로 업데이트될 내용을 staging에서 만들어놓는다. 테스트를 해보며 사용하다가 배포할 정도로 괜찮다 생각된다면 prod로 올린다.
LB -> VM에 있는 paths마다 backend를 설정해줄 수 있다.
스토리지 -> 클라우드 스토리지 버킷을 만들어서 폴더를 만들고 이미지, html, css 등을 넣어놓을 수 있다. 최종적으로는 index.html 파일이 필요한 것.
yarn dev는 누가 접속을 하면 javascript -> html, css, js로 변환하여 보여준다. 하지만 SSR 방식에서는 bulid로 보여주어야 하기때문에 미리 변환하여 스토리지에 넣어준다.
실무에서 쓰이는 알고리즘 -> 과제에서 해보기
DDDD.YY.DD
퀴즈 한 번씩 다 다시 풀어보기!!!
Object.keys()
Object.values()
Object.entries()
배열을 객체로 만들기, 객체를 배열로 만들기
체크박스(전체, 해제)
