[TIL][01.21] HTML, form, HTTP, React, Next.js, CSS

HTML

favicon : 브라우저 탭의 페이지 제목 옆에 뜨는 작은 이미지

title : 브라우저 탭의 페이지 제목

table : 행, 열로 구성된 표

list : 목록으로 그룹화

 

block elements : 한 줄을 다 차지 함

inline elements : 남은 공간에 다른 태그가 올 수 있음

 

file:// 이면 파일로 html 오픈

http:// 이면 http로 html 오픈, web server가 구축되었다는 의미

 

form

name 속성으로 input value를 보낼 수 있음

name 속성이 없으면 각 value가 전송안됨

쿼리 스트링 형식 >> 이름=값&이름=값&이름=값 (&로 구분) >> GET방식

전송 버튼 클릭 시 동작하게 하려면 form태그에 action속성 지정해줘야함

 

http method(요청방식)

GET : 리소스 요청 (디폴트)

HEAD : 리소스 요청 (응답 본문 미포함, 서버 정보만 받음)

POST : 리소스에 제출

PUT : 리소스에 제출

DELETE : 삭제

등등...

 

보안 문제로 GET, POST만 주로 씀

GET방식은 쿼리 스트링으로  value가 다 보임

POST는 value를 안보이게 가능

은행권에서는 POST만 씀

 

RESTful : CRUD 비즈니스를 GET, POST 등 메소드로 처리

 

기술이 노출되지 않도록 해야함 (ex <form action="main" method="post">)

보안은 빌미를 주지않거나, 한 과정을 힘들게 하도록 해야함

 

React

리액트 세부 구성을 하나하나 다 다운받기에는 복잡해서 npm 사용

jsx : js 안의 가짜 html element로 js엔진이 jsx를 해석해서 실제 DOM을 그려냄

 

웹 서버의 3000번 포트로 요청 => 정적파일을 응답해야함 => jsx의 경우 해석되어야함 => react engine(npm 등)이 해석 => 만들어진 파일 응답 => 하지만 만들어진 js는 복잡함 => 가상 DOM, js엔진을 이용해 html 페이지 렌더링

 

Next.js

리액트 기반. 서버 사이드 렌더링 기능 지원

리액트는 js가 클라이언트에서 그려짐. Next는 서버에서 js가 html로 다 그려지고, 그 html을 클라이언트에 전송해서 보여줌

 

CSS

웹 페이지 스타일 정의해서 html을 꾸밈

선택자 : 스타일을 지정하려는 태그

태그가 중복될 수 있으므로, id를 이용해 구분 가능

class를 이용해 그룹화 가능

* : 전체 선택자

 

내부 css : html 내에 style태그에서 정의

외부 css : css파일을 분리해서 link태그의 href속성으로 참조해서 연결

cascading : css가 같은 태그에 중복되게 적용되는 경우 아래에 있는 css가 적용됨