거북이개발자

1. 웹이란? (1) 웹 : 오늘날 인터넷에 연결된 컴퓨터를 통해 정보를 공유할 수 있는 인터넷 대표적 서비스이다. (2) 웹 3요소 : - URL(Uniform Resource Locator) : 웹 자원이 인터넷상 어느 위치에 존재하고 있는지 알려주는 방법. 구성 요소로는 클라이언트와 서버가 어떤 방식으로 주고받을지 결정하는 프로토콜, 서비스의 이름을 대표하는 도메인 영역, 해당 자원이 위치하는 장소를 구조적으로 나눈 디렉터리 실제 자원이 존재하는 파일 확장자를 포함하는 자원의 결로 - 네트워크 프로토콜 : URL을 통해 알게 된 웹의 자원 위치에 접근하는 방식이다. 웹에서는 대부분 HTTP를 사용한다. HTTP는 정보를(클라이언트와 서버 사이에 필요한 정보) 주고받는 헤더 부분과 실제 데이터를(HT..

1. HTTP/1.1의 문제점 -HOLB(Head Of Line Blocking) : -HOLB(Head Of Line Blocking) : HTTP 요청을 할 때는 요청을 하고 나서 응답이 와야 다음 요청을 할 수 있었는데 HTTP/1.1에 들어오면서 파이프라이닝 기법을 통해 응답을 받지 않고도 여러개의 요청을 연속적으로 할 수 있게 되었다. 하지만 이 또한 처음의 요청에 대한 응답이 오래 걸리는 경우, 그 다음 응답까지의 시간이 지연되는 현상이 발생한다. 이렇게 파이프라이닝 기법은 심각한 문제를 안고 있었으며 이를 Head Of Lin Block 문제라고 한다. -무겁고 중복 많은 헤더 구조 : 요청을 할 때 요청에 메타정보를 넣어서 보내게 되는데, 매 요청마다 보내는 정보가 많아져서 헤더가 무거워지..

1. HTTPS란? -HTTPS는 HTTP over Secure Socket Layer의 약자로 SSL(Secure Socket Layer)을 이용한 HTTP통신 방식을 의미한다. -HTTPS는 HTTP 통신을 함에 있어서 데이터를 암호화하여 통신한다. 따라서 중간에 통신을 도청할지라도 내용을 알아볼 수 없습니다. 2. SSL란? - 클라이언트와 서버 간의 통신을 공인된 제삼자(CA) 업체가 보증해주는 전자화된 문서 - 대칭키 암호화 방식 : 인코딩과 디코딩에 같은 키를 사용하는 알고리즘 - 공개키 암호화 방식 : 인코딩과 디코딩에 다른 키를 사용하는 알고리즘 - CA : 디지털 인증서를 제공하는 공인된 기업 3. HTTPS 동작방식 1. 클라이언트와 서버에게 접속 요청을 하면 서버는 CA에서 발급받은 ..

1. HTTP(Hyper Text Transfer Protocol) -client와 web server가 통신하는 규칙 -Request : Client가 Server에 요청하는 행위 -Response : Server가 Client한테 응답하는 것 -Request Headers : 웹 브라우저가 웹 서버한테 요청한 데이터 -Response Headers : 응답하는 헤더. 2. HTTP Request message -GET : method이다. 브라우저와 서버가 어떤 방식으로 통신할 것인가 알려준다. GET은 데이터를 브라우저로 가져올 때 쓰는 것이다. -text.html : 우리가 웹서버에 요청하는 정보가 무엇인지 나타낸다. -HTTP/1.1 : 브라우저가 현재 사용할 수 있는 HTTP 버전이 1.1이다..

1. 브라우저 구조 -사용자 인터페이스 -브라우저 엔진 : 인터페이스와 렌더링 인젠 사이 동작 제어 -렌더링 엔진 : 요청한 콘텐츠를 표시 -통신 : 네트워크 호출에 사용 -자바스크립트 해석기 : 자바스크립트 코드 해석 및 실행 -UI백엔드 : 캄보 박스와 창 같은 기본 장치를 그림 -자료 저장소 : 자료를 저장하는 계층(ex 쿠키) *) 렌더링 : 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정. 2. 렌더링 엔진 -요청한 내용을 브라우저 화면에 표시하는 작업을 수행 -브라우저마다 다른 엔진 사용 -렌더링 과정 : HTML파싱(*파싱 : 읽어드린다.) -> 렌더 트리 구성 -> 렌더 트리 배치 -> 렌더 트리 그리기 (렌더링 과정에서 HTML과 CSS파일을 DOM트리 형태로 구성) 1. HTM..

1. CSR(Client Side Rendering) -CSR은 최초 요청시에 HTML을 비롯해 CSS, JS 등 각종 리소스를 받아온다. 이후에는 서버에 데이터만 요청하고, js로 뷰를 컨트롤 한다. 장점 : -첫 로딩만 기달리면, 동적으로 빠르게 렌더링이 되기 때문에 UX이 좋다. -서버에게 요청하는 횟수가 훨씬 적어서 서버의 부담이 덜하다. 단점 : -모든 HTML과 static파일이 로드될 때까지 기다려야 한다. (리소스를 청크 단위로 묶어서 요청할 때만 다운받에 하는 방식으로 완화시킬 수는 있지만 해결은 어렵다.) -SEO문제가 발생한다. (검색엔진이 크롤링을 하는데 어려움을 겪는다.) 2. SSR(Server Side Rendering) -SSR은 브라우저가 페이지를 요청할때마다 해당 페이지에..

1. 결과 2. 동적 라우터 next는 위와 같이 각각의 페이지를 일일이 만드는 것이 아닌 id값으로 동적 라우터가 가능하다. 3. 내비게이션 위의 내비게이션 구현은 import { useRouter } from "next/router"; import { Menu } from "semantic-ui-react"; export default function Gnb() { const router = useRouter(); let activeItem; if (router.pathname === "/") { activeItem = "home"; } else if (router.pathname === "/about") { activeItem = "about"; } else if (router.pathname ==..

0. 배경 위와 같은 제품 상세페이지를 만들려고 한다. 1. SSR적용 안할시 import axios from 'axios'; import Head from 'next/head'; import { useRouter } from 'next/router' import { useEffect, useState } from 'react'; import { Loader } from 'semantic-ui-react'; import Item from '../../src/component/Item'; const Post = () => { const router = useRouter(); const { id } = router.query; const [item, setItem] = useState({}); const [..