코드스테이츠/JavaScript

4.6 S2U10 종합퀴즈

스우티 2023. 4. 7. 00:05

💁‍♀️ 동일 출처 정책(SOP)에서 동일한 출처(Origin)로 보기 위해 동일해야 하는 요소를 고르세요. (정답 세 개)

 

A. protocol
B. host
C. port
D. url-path
E. query

 

🔈 해설

정답 A,B,C

동일 출처 정책(SOP)에서

protocol, host, port가 같으면 동일한 출처로 보고 있습니다.

 

 

💁‍♀️🙈 CORS(Cross-Origin Resource Sharing)에 대한 설명으로 옳은 것을 고르세요.

 

A. 같은 출처의 리소스만 공유가 가능한 정책이다.
B. 보안을 위해 잠재적으로 공격받을 수 있는 경로를 줄이기 위한 정책이다.
C. 다른 출처의 리소스를 받아오기 위해서 CORS가 등장했다.
D. POST 메서드로 프리플라이트 요청을 보내 해당 출처 리소스에 접근 권한이 있는지 확인한다.B.

 

🔈 해설

정답 C

A. 같은 출처의 리소스만 공유가 가능한 정책은 동일 출처 정책(SOP) 입니다.

B. 잠재적으로 공격받을 수 있는 경로를 줄이기 위해 동일 출처 정책(SOP)이 있습니다.

D. OPTIONS 메서드로 프리플라이트 요청을 보냅니다.

 

 

💁‍♀️ 프리플라이트 요청(Preflight Request)에 사용하는 메서드로 옳은 것을 고르세요.

 

A. GET

B. POST
C. PUT
D. PATCH

E. OPTIONS

 

🔈 해설

정답 E

프리플라이트 요청(Preflight Request)에 사용하는 메서드는 OPTIONS 입니다.

 

 

💁‍♀️ 프리플라이트 요청(Preflight Request)에 대한 설명으로 옳은 것을 고르세요.

 

A. 응답 헤더의 Access-Control-Allow-Credentials로 출처가 허용되면 실제 요청을 보낸다.
B. POST 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지 확인한다.
C. 프리플라이트 요청으로 미리 접근 권한을 확인할 수 있다.
D. 요청을 두번 보내기 때문에 리소스 측면에서 비효율적이다.

 

🔈 해설

정답 C

A. 응답 헤더의 Access-Control-Allow-Credentials가 아닌 Access-Control-Allow-Origin 입니다.

B. POST 메서드가 아닌 OPTIONS 메서드 입니다.

D. 프리플라이트 요청을 했을 때, 접근 권한이 없는 경우 CORS 에러가 나기 때문에 실제 요청을 불필요하게 보내지 않아도 됩니다.

 

 

💁‍♀️🙈 CORS 설정 방법에 대한 설명으로 옳지 않은 것을 고르세요.

 

A. Node.js에서 setHeader 메서드를 이용해 설정할 수 있다.
B. Node.js에서 writeHead 메서드를 이용해 설정할 수 있다.
C. Node.js에서 Access-Control-Allow-Origin에 출처를 설정해야 한다.
D. Express에서 cors 미들웨어를 이용해 설정할 수 있다.
E. Express에서 출처 접근 권한을 설정하려면 credentials를 설정해야 한다.

 

🔈 해설

정답 E

Express에서 출처 접근 권한을 설정하려면 cors 미들웨어를 사용하면 됩니다.

세부적으로 출처를 설정해주기 위해서는 cors의 전달인자에 Configuration Options를 설정해야 합니다.

Configuration Options의 credentials가 아닌 origin을 설정합니다.

 

 

💁‍♀️ Express 미들웨어를 사용하는 상황으로 보기 어려운 것을 고르세요.

 

A. 모든 요청에 대해 url이나 메서드를 확인할 때
B. POST 요청 등에 포함된 body(payload)를 구조화할 때
C. 단순 요청 (Simple Request)이 필요할 때
D. 모든 요청/응답에 CORS 헤더를 붙여야 할 때
E. 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때B.

 

🔈 해설

정답 C

단순 요청(Simple Request)은 프리플라이트 요청(Preflight Request)을 생략하는 요청으로 Express 미들웨어와를 사용하는 상황으로 보기는 어렵습니다. 단순 요청은 만족시켜야 하는 조건들이 많습니다.

  • GET, HEAD, POST 요청 중 하나여야 합니다.
  • 자동으로 설정되는 헤더 외에, Accept, Accept-Language, Content-Language, Content-Type 헤더의 값만 수동으로 설정할 수 있습니다. Content-Type 헤더에는 application/x-www-form-urlencoded, multipart/form-data, text/plain 값만 허용됩니다.

 

💁‍♀️🙈 다음 Node.js 서버 코드에 대한 설명 중 옳지 않은 것을 고르세요.

const http = require('http');
const PORT = 4999;
const ip = 'localhost';

const server = http.createServer((request, response) => {
  console.log(
    `http request method is ${request.method}, url is ${request.url}`
  );
    response.writeHead(200, defaultCorsHeader);
    response.end('hello quizsets');
});

server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

const defaultCorsHeader = {
  'Access-Control-Allow-Origin': 'http://localhost:1234',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  'Access-Control-Max-Age': 10
};

 

 

A. 클라이언트 http://localhost:1234에서 POST 요청을 보낼 시 CORS 에러가 발생하지 않는다.
B. 클라이언트 http://localhost:3000에서 POST 요청을 보낼 시 CORS 에러가 발생한다.
C. 서버에서 http://localhost:1234에 대하여 CORS를 허용하고 있다.
D. 서버에서 허용하는 메서드는 GET, POST, PUT, DELETE, OPTIONS이다.
E. request 객체에서 method, url을 사용할 수 없다.

 

🔈 해설

정답 E

서버에서 요청(Request)를 처리할 때, 메서드와 url 관련된 작업을 할 것입니다.

그러기 위해서 Node.js에서는 request 객체에 method, url 같은 유용한 프로퍼티를 세팅해두었습니다.

 

 

💁‍♀️🙈 다음 Express 서버 코드에 대한 설명 중 옳지 않은 것을 고르세요.

const express = require('express')
const app = express()
const port = 3000

const logger1 = (req, res, next) => {
  console.log("logger1");
  next();
}

const logger2 = (req, res, next) => {
  console.log("logger2");
  next();
}

const codestates = (req, res) => {
  res.send('Hello CodeStates!');
}

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.use(logger1, logger2);

app.get('/codestates', codestates);

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

 

 

A. GET /요청을 서버에 보내면 'Hello World!'가 응답으로 온다.
B. GET /codestates요청을 서버에 보내면 'Hello CodeStates!'가 응답으로 온다.
C. GET /요청을 서버에 보내면 "logger1", "logger2"가 콘솔에 출력된다.
D. GET /codestates요청을 서버에 보내면 "logger1", "logger2"가 콘솔에 출력된다.
E. logger1, logger2는 미들웨어(middleware)다.

 

🔈 해설

정답 C

app.use(logger1, logger2) 코드가 app.get('/', //생략) 보다 밑에 있기 때문에 미들웨어 적용이 되어있지 않습니다.

따라서 GET /요청을 서버에 보내면 "logger1", "logger2"가 콘솔에 출력되지 않습니다.

반면에, app.get('/codestates', codestates) 코드는 app.use(logger1, logger2)보다 아래에 있기 때문에 미들웨어 적용이 됩니다.

따라서 GET /codestates요청을 서버에 보내면 "logger1", "logger2"가 콘솔에 출력됩니다.

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.use(logger1, logger2);

app.get('/codestates', codestates);

 

💁‍♀️🙈 GET http://localhost:4000/flight/af6fa55c-da65-47dd-af23-578fdba40bed 요청을 보냈을 때 돌아오는 응답으로 옳은 것을 고르세요.

//App.js
const express = require('express');
const app = express();
const port = 4000;

const flightRouter = require('./flightRouter');

app.use('/flight', flightRouter)

app.get('/', (req, res) => {
  res.send('Welcome, States Airline!');
});

app.listen(port, () => {
  console.log(`http://localhost:${port}`);
});

//flightRouter.js
const express = require('express');
const router = express.Router();

router.get('/', function(req, res) {
	res.send('항공편 목록')
});
router.get('/:id', function(req, res) {
	res.send('항공편 id 조회')
});
router.put('/:id', function(req, res) {
	res.send('항공편 수정')
});

module.exports = router;

 

 

A. 'Welcome, States Airline!'
B. 'http://localhost:4000'
C. '항공편 목록'
D. '항공편 id 조회'
E. '항공편 수정'

 

🔈 해설

정답 D

app.use와 express.Router를 활용하여 라우팅을 하고 있는 코드입니다. GET http://localhost:4000/flight/af6fa55c-da65-47dd-af23-578fdba40bed 요청을 보내면, '항공편 id 조회'가 응답으로 옵니다.

router.get('/:id', function(req, res) {
	res.send('항공편 id 조회')
});