HTML
[NextJS] Hydrate?
Next.js 프레임워크의 동작원리를 알고있다면 Hydrate에 대해서는 이미 익숙하게 들었을 거다. 하지만, 놓치기도 쉬운 개념인 만큼, 이번에 제대로 공부하고 정리 해보려고 한다. 일단 React에서 렌더링 되는 과정과 Next에서 렌더링 되는 과정의 차이점에 대해서 정리 해 보자. React.js HTML과 JS파일을 한꺼번에 보내고 클라이언트에서 JS 코드를 통해 웹 화면을 렌더링한다. React는 JS파일만을 이용하여 웹 화면을 구성하는 원리를 가지고 있기 때문에 실제 HTML 코드는 안에 내용이 하나도 없는 상태이다. (CSR이 SEO에 적합하지 않은 원리) // public/index.html 단순 뼈대만 있는 HTML document와 Js 파일들을 클라이언트로 모두 보낸 뒤, 클라이언트 ..
[JavaScript] DOM (Document Object Model)
DOM이란 웹 페이지에 대한 프로그래밍 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있는 API를 제공한다 Document Object Model을 번역해보면 문서 객체 모델로 번역할 수 있다. 문서 객체란 같은 html 문서의 태그들을 자바스크립트가 이용할 수 있는 객체 즉, object로 만들면 문서 객체라고 한다 넓은 의미로는 웹 브라우저가 HTML 페이지를 인식하는 방식이고 좁은 의로 본다면 document 객체와 관련된 객체의 집합을 의미할 수 있다 이러한 DOM을 이해하기 전에는 웹 페이지가 어떻게 빌드 되는지 봐야한다 웹 페이지가 만들어지는 방법 웹 브라우저가 HTML 문서를 읽어들이면 스타일을 입히고 대화형 페이지로 만들어 뷰포트에..
[Network] HTTP Request / Response
HTTP 메시지는 서버와 클라이언트 간에 데이터가 교환되는 방식이다. 이때 메시지 타입은 두 가지 Request와 Response가 있다 Request는 클라이언트가 서버로 전달하는 메시지이고 Response는 이러한 Request에 대한 서버의 답변이다 HTTP 메시지는 ASCII 즉, 숫자 0, 1로 인코딩된 텍스트 정보이며 이러한 메시지는 설정파일 (프록시, 서버), API(브라우저 경우) 혹은 다른 기타의 인터페이스에 의해 가공되어 제공한다 출처 : https://deepwelloper.tistory.com/98 HTTP Request 구조 Start Line Start Line에는 HTTP 메소드, Request target, HTTP version이 있다 HTTP Method - 요청시 보내는..
[HTML] 헷갈릴 수 있는 태크들!
i vs em 둘 다 이텔릭체로 폰트 타입을 변환 i : 시각적으로만 나타내고 싶을 때 em : 문장에서 정말 강조하고 싶은 부분이 있을 때i vs em b vs strong 둘 다 bold체로 보이지만 strong은 정말로 강조하고 싶을 때 ol vs ul vs li ol ordered list로 목록 순서가 중요하면 사용하는 태그 ol 속 li 태그 안에 또다른 ol 태그 사용가능 ul unordered list로 순서가 필요 없을 때 ul 안 li 태그 안에 또다른 ul 태그 가능, nestled loop처럼 dl description list로 단어에 대해 설명을 묶고 싶을 때 dt는 목록을 나타내는 단어 dd는 그 단어에 설명 img vs background-image img : html에서 사..
[HTML] Semantic Tags
Semantic Tag HTML5부터 등장하는 태그들이다 div에 class 값을 붙이면 모든 스타일링 작업이 가능하지만 어느 부분이 제목이고 바디인지 알 수가 없다 div에 class 붙여서 만드는 모든 구조와 파일은 현 상황에서는 하면 안 되는 일이다... 정의 semantic : 의미의, 의미가 있는 HTML 태그들 중에서도 나름의 의미가 있는 태그 들을 말한다 특징 SEO (Search Engine Optimization) 검색 엔진 최적화는 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성하면 브러우저의 검색 엔진이 내가 만든 웹 사이트를 어떤 검색 결과에 띄워줘야 될지를 알려줄 수 있다 웹 접근성 (Accessibility) 보통 사람들과 달리 웹 이용에 불편함..
[HTML] 정의 & 구조 & 특징들
정의 HyperText Markup Language HyperText : 웹 페이지에서 다른 페이지로 이동할 수 있도록 링크를 정의 (연결되어 있다) Markup : 태그로 이루어져 있으며 웹 페이지의 구조를 정의 (형태나 효과) Language : 언어 웹 페이지의 구조를 설명하는 프로그래밍 언어의 한 종류로 웹 브라우저에서 웹 페이지의 정보를 적절한 태그와 속성을 이용해서 명확한 의미를 가진 문서를 만들어 설명한다 ‘무엇을 어디에 배치할지’ 구조화하는데 사용된다 ex) 방 하나가 웹 페이지라고 생각하면 그 방 안에 가구들을 배치하는데 사용되는 것이 HTML! 특징 구조가 단순 / 문법이 쉽다 논리적이고 연산적인 요소가 없으며 단순한 구조를 가지고 있다 텍스트 파일 따로 컴파일 작업이 필요하지 X 편집..