RESTful API? RESTful은 REST의 설계 규칙에 따라 설계된 API를 말함 REST의 원리를 따르는 시스템을 RESTful이라고 함 그렇다면 REST는 무엇일까? REST? REST(Representational State Transfer)는 자원의 표현에 의한 상태 전달이라는 의미로 웹에서 사용되는 아키텍쳐 스타일 중 하나임 HTTP 프로토콜을 기반으로 하여 웹의 장점을 최대한 활용할 수 있고, 클라이언트와 서버간의 통신을 처리함 HTTP URI를 통해 리소스를 명시하고 Method(get, post, put, delete, patch)를 통해 자원에 대한 CRUD(create, read, update, delete)연산을 적용함 REST API를 사용하는 이유 - HTTP 프로토콜을 기..
HTTP Hypertext Transfer Protocol의 약어 인터넷에서 데이터를 전송하는데 사용되는 통신 프로토콜 웹 브라우저와 웹 서버 간에 통신하는 데 사용 HTTPS Hypertext Transfer Protocol Secure의 약어 인터넷에서 데이터를 보호하기 위한 보안 프로토콜 HTTP 프로토콜을 보안한 버전 데이터 전송 중에 데이터를 암호화하고 인증서를 사용하여 클라이언트와 서버 간의 안전한 통신을 보장 HTTPS는 웹 사이트의 보안과 사용자 개인정보 보호를 강화하고, 데이터 도난의 공격으로부터 보호 대부분의 인터넷 브라우저는 HTTPS를 사용하는 것을 권장하고 많은 웹 사이트들이 HTTPS를 사용하여 보안을 강화하고 있음 HTTPS 적용 방법 1. HTTPS를 적용하기 위해서는 도메인..
브라우저 저장소란? Web Storage는 HTML5부터 추가된 기능 웹사이트의 데이터를 클라이언트에 저장할 수 있다. key-value로 데이터를 저장하고, key를 기반으로 데이터를 조회 로컬스토리지(Local Storage) 쿠키보다 더 많은 데이터를 저장할 수 있음(쿠키 4KB, 로컬스토리지 최대 5MB) 서버에 데이터를 전송할 필요가 없어서 네트워크 부하를 줄일 수 있음(클라이언트에서 사용) 데이터 만료날짜가 없어서 자동으로 삭제되지 않음 하지만 로컬스토리지에 저장된 데이터는 보안이 취약하다. 로컬스토리지에 저장된 데이터는 사용자가 직접 삭제하지 않는 이상 계속 보관됨 세션스토리지(Session Storage) 세션스토리지는 로컬스토리지랑 비슷하지만 큰 차이점이 있음 세션스토리지에 저장된 데이터..
noreferrer, noopener, nofollow는 HTML에서 사용되는 rel 속성이며, a태그의 targe=_blank속성의 보안 취약점을 보완하기 위한 속성이다. 1. noreferrer noreferre속성을 사용하면 링크를 클릭한 사용자의 웹 브라우저가 HTTP Referer 헤더를 전송하지 않는다. (HTTP Referer 헤더는 현재 페이지가 어떤 페이지에서 링크를 클릭했는지를 나타내는 정보를 포함) 이 속성을 사용하면, 링크를 클릭한 사용자가 이전 페이지의 URL을 알 수 없게 된다. noreferre은 아래 살펴볼 noopener의 기능에 http referer 헤더를 전송하지 않는 기능이 추가된 것이다. 2. noopener noopener 속성을 사용하면 링크를 클릭한 사용자의 ..
Flex와 Grid의 차이 플렉스와 그리드는 레이아웃을 잡을 때 많이 사용된다. flex는 1차원으로 행, 열 영역 중 하나의 방향으로 레이아웃을 나눌 수 있고, Grid는 2차원으로 행, 열 영역을 동시에 나눌 수 있다. flex에 적합한 레이아웃은 아래의 이미지와 같다. 아래처럼 콘텐츠를 한 방향으로 정렬할 때 flex는 빛을 발한다. 반면 그리드는 아래처럼 좀 더 복잡한 레이아웃을 잡을 때 편리하다. grid는 flex와 달리 열과 행을 함께 나눠야할 상황에 사용하면 좋다. flex와 grid 중 어느 하나만을 고집해서 레이아웃을 잡기 보다는 각 상황에 알맞게 flex와 grid를 사용하는 것이 중요하다.
미디어쿼리는 반응형 웹 페이지에서 가장 큰 역할을 한다 하지만 너무 많이 사용하면 웹 페이지의 성능이 저하될 수 있기 때문에 미디어 쿼리를 최소화하는 방법을 정리하고자 한다. 1. 불필요한 미디어 쿼리 삭제 사용되지 않는 미디어 쿼리는 삭제하는 것이 좋다. ex) 모바일 장치에서는 적용되지 않는 데스크톱용 미디어 쿼리를 삭제 2. flex, grid 사용 플렉스와 그리드를 사용하면 뷰포트의 너비에 따라 자동으로 레이아웃을 조정할 수 있어서 미디어 쿼리를 줄일 수 있다. See the Pen flex by 이아름 (@aahreum) on CodePen. 3. CSS 가변단위 사용 CSS 가변단위인 rem, em, vw, vh를 사용해서 미디어 쿼리를 최소화할 수 있다. h1 { font-size: 1.5e..
