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를 적용하기 위해서는 도메인..
모듈화란? 코드를 작성할 때 코드의 재사용성과 유지보수성을 높이기 위해 모듈 단위로 코드를 구성하는 것 모듈화를 통해 코드를 분리하고 필요한 모듈만 가져와 사용하는 것이 가능 Class 모듈화 예시 class Person { constructor(name, age) { this.name = name; this.age = age; } hello() { console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`); } } export default Person; 다른 파일에서 person을 사용하고 싶으면 아래처럼 작성하면 된다. import Person from './person.js'; const person = new Pers..
브라우저 저장소란? 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를 사용하는 것이 중요하다.
