[Web] em 과 rem, CORS 란?

혼나고 배우는 것은 기억에 오래 남는 법.

1. em과 rem의 차이

1) 상대 단위란?

고정되지 않고 유동적으로 바뀔 수 있는 길이 단위이다.

em, rem 을 포함해 %, vh, vw 등이 대표적인 css의 상대단위이다.

반대로 절대단위는 고정된 길이 단위이다.

대표적으로 px, pt를 들 수 있다.

쉽게 말해 1cm는 항상 손가락 한마디 반정도의 길이인것 처럼, 1px은 항상 0.02645833cm 인 것이다.

2) em과 rem의 공통점

em과 rem은 css의 font-size 속성값에 비례해서 결정되는 상대 단위이다.

예를 들어 기본 font-size가 16px의 경우 다음 과 같이 em의 크기가 정해진다

0.5em	16px * 0.5	8px
1em	16px * 1	16px
2em	16px * 2	32px

3) em과 rem의 차이점

위에서 말했던 비율의 기준이 되는 font-size의 속성값이 어디에 있는 속성값인지에 따라 차이가 발생한다.

em의 경우 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준이 된다.

rem의 경우 root, 즉 최상위 요소(html)의 font-szie 속성 값이 기준이 된다.

예를 들어 root(html)의 font-size 값이 다음과 같이 16px 일때,

html {
  font-size: 16px;
}

div 요소에 em과 rem을 각각 주었을 때의 차이점을 확인할 수 있다.

div {
  border : 1px solid red;
  font-size: 20px;
  width: 10em; /* 200px */
}

div {
  border : 1px solid red;
  font-size: 20px;
  width: 10rem; /* 160px */
}

2. CORS

1) CORS란?

Cross Origin Resource Sharing

교차 출처 리소스 공유

: 서로 다른 출처의 데이터를 공유할 수 있게 만들어 주는 것

브라우저에서는 기본적으로 SOP(Same Origin Policy)를 적용한다.

즉, 같은 출처로부터 오는 데이터들만 허용한다는 룰이다.

예를 들어, Naver 서비스는 Naver 서버에서만 데이터를 요청하고, 응답하고, 뿌려줘야한다는 것이다.

하지만 다양한 웹서비스들이 생기고, 상호간의 데이터를 요청하고, 콜라보할 일이 많아졌다.

네이버 메인 화면만 봐도 그 많은 데이터들을 모두 네이버가 가지고 있어서 뿌려주는 것이 아니라, 다양한 웹서비스 플랫폼으로 부터 요청을 하고 받아오는 것들이라는 것이다.

그럼 원래 브라우저가 가진 SOP 를 서로간의 약속이 된 친구들에 한해서 풀어주는게 바로 CORS이다.

서로 다른 (Cross) 출처로 부터온 데이터를 공유(Sharing)하는 것이다.

그럼 내가 필요한 외부의 서비스를 요청할 때 서로 CORS 설정을 해주면 되는 것이다.

어떻게 하는지는 간단하게는 요청을 받는 서버에 허락한 출처들을 명시해 주면 되는 것이다.

예를 들어, Naver 지도 API 서버에 나의 웹서비스 출처 (http://myserver.com) 를 허용해라 라고 등록하면 되는 것이다.

좀 더 자세히 알아보면, 요청에도 종류가 있다.

2) 요청의 종류에 따른 설정방법

① Simple Request : GET, POST 로 요청하는 경우

- 위에 간단히 언급했던 요청을 주고받을 서버에 각각 허용하는 출처를 등록하면 된다.

② Preflight Request : PUT, DELETE 로 요청하는 경우

- 요청하는 서버의 데이터에 직접적인 영향을 줄 수있는 요청이므로, 실제 요청을 보내기 전에 preflight 요청을 먼저

보내고, 허가를 받으면, 그때 실제 요청을 보낸다.

③ Credential Request : 사용자의 인증정보를 포함하여 요청하는 경우

- 요청의 옵션에 credential = true 설정하여 보낸다.

받는 쪽에서는 보내는 쪽의 출처를 정확히 명시하고, Access-Control-Allow-Credential = true 로 설정하여야 한다.

3) 해결방법

1) 백엔드에서 처리-1 : Access-Control-Allow-Origin 응답헤더 세팅

# 백엔드 (app.js)

app.use((req, res, next) => {
	res.header("Access-Control-Allow-Origin", "*") //모든 도메인 : 위험
    res.header("Access-Control-Allow-Origin", "https://hello.com") // 특정 도메인
});

2) 백엔드에서 처리-2 : cors 모듈사용

# 백엔드 (app.js)

const cors = require('cors');

app.use(cors({
    // origin : 'http://nodebird.com' // 실제 서버주소만 허용
    origin : 'http://localhost:3060', // cors 허용 : Header 추가 : Access Control Allow Origin
    credentials : true, // 다른 포트로부터의 쿠키 받기 허용
}));

3) 프론트에서 처리-1 : proxy 설정

# 프론트 (package.json)

"proxy": "http://localhost:8080", // 사이트명

tacit