기술 지식 2단계 내용 정리

TypeScript

Any | Unknown

타입스크립트에서 `Any`와 `Unknown`은 모두 타입이 확실하지 않거나 동적으로 처리되는 값을 다루기 위한 타입이다.

그러나, 이 두 타입은 사용하는 방법과 안전성 측면에서 차이점이 존재한다.

 

공통점

타입 검사 우회

`Any`와 `Unknown`은 모두 타입 검사에서 벗어나게 해준다. 즉, 컴파일러는 이들 타입을 사용할 때, 타입에 대한 구체적인 검사를 진행하지 않는다.

 

유연성

이들 타입은 특정 타입이 아닌 다양한 타입을 받아들인다. 그렇기 때문에, 동적 타입의 데이터를 다룰 때 유용하다.

 

차이점

안전성

`Any` 타입은 타입 체크를 완전히 무시한다. 이 타입으로 지정된 변수는 어떤 값이든 할당할 수 있어 `Any` 타입의 변수에 대해 타입 검사가 이루어지지 않는다. 이로 인해, 런타임 에러가 발생할 가능성이 높아진다.

 

`Unknown` 타입은 `Any` 타입보다 조금 더 안전하다. `Unknown` 타입의 변수는 다른 타입으로의 직접적인 변환이나 사용이 불가능하고, 변수를 사용하기 전에 타입 검사가 필요하다. 이는 런타임 에러를 줄이는 데 도움이 된다.

 

타입 변환

`Any` 타입은 변환이 자유롭고, 어떤 타입으로도 변환이 가능하다.

 

`Unknown` 타입은 다른 타입으로 변환하기 전에 타입 검사를 해야 한다. 이로 인해 코드의 안정성을 높일 수 있다.

 

예시 코드를 통해 쉽게 이해하도록 한다.

// Any 타입 사용 예제
function processData(data: any) {
	// `data` 타입을 모르기 때문에 어떤 타입의 값이든 사용 가능
	console.log(data.toUpperCase()); // 만약, `data`가 문자열이 아니라면 런타임 에러 발생 가능
}

processData("hello"); // 동작, toUpperCase로 인해 가능
processData(123); // 런타임 에러 발생 가능, toUpperCase는 숫자를 허용하지 않음

 

// Unknown 타입 예시 코드
function processData(data: unknown) {
    // `data`의 타입을 검증한 후에 사용 가능
    if (typeof data === 'string') {
        console.log(data.toUpperCase()); // 타입이 `string`임을 보장
    } else {
        console.log("데이터가 문자열이 아닙니다.");
    }
}

processData("hello"); // 동작
processData(123); // "데이터가 문자열이 아닙니다." 출력

 

`Unknown`은 타입 검사를 강제하여 코드의 안정성을 높일 수 있습니다. 반면에 `Any`는 타입 검사가 이루어지지 않기 때문에 코드의 안정성을 보장할 수 없습니다.

 

Web

CORS(Cross-Origin Resource Sharing)

브라우저의 '동일 출처 정책(Same-Origin Policy)'를 위반한 것을 말한다. 이는, 보안상의 이유로 웹 페이지가 다른 도메인에서 오는 데이터에 접근하는 것을 제한하는 브라우저의 보안 기능으로, CORS는 이 정책을 완화하는 방법을 제공한다.

 

'동일 출처 정책(Same-Origin Policy)'는 웹 페이지가 로드된 출처(Origin)와 다른 출처에서의 리소스에 접근하는 것을 제한한다. 출처는 프로토콜(HTTP / HTTPS),호스트(도메인), 포트번호로 정의된다.

 

예를 들어, `https://example.com`에서 로드된 페이지는 `https://example.com` 도메인에서만 리소스를 요청할 수 있다.

 

CORS와 브라우저 정책

'CORS(Cross-Origin Resource Sharing)'는 다른 출처의 리소스를 안전하게 요청할 수 있도록 브라우저와 서버 간 협의하는 방법을 말한다. 서버는 특정 출처의 요청을 허용할 수 있고, 클라이언트(브라우저)는 서버의 응답에 따라 요청을 처리할 수 있다. 'CORS'는 브라우저가 '동일 출처 정책'을 강제하는 방식으로, 서버가 적절한 헤더를 설정하도록 요구한다.

 

CORS 문제 해결

프론트엔드(클라이언트) 측에서 해결하는 방법은 '프록시 서버'를 사용하는 것이다.

개발 중 로컬 프록시 서버를 사용하여 CORS 문제를 우회할 수 있다. 예를 들어, `http-proxy-middleware`를 사용하는 방법을 사용할 수 있습니다.

 

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
	app.use(
    	'/api',
        createProxyMiddleware({
        	target: 'http://backend-server.com',
            changeOrigin: true,
        })
    );
};

 

개발 중에만 사용할 수 있는 CORS 브라우저 확장이 있다. 그러나, 이 방법은 배포 환경에서는 사용할 수 없다.

 

그리고, 백엔드(서버) 측에서 해결할 수 있는 방법이 있다.

서버는 CORS 요청을 수용할 수 있도록 응답 헤더를 설정해야 한다. 일반적으로 `Access-Control-Allow-Origin` 헤더를 사용하여 특정 출처를 허용한다.

 

// NodeJS, Express 예제
const express = require('express');
const app = express();

// CORS 미들웨어
cosnt cors = require('cors');
app.use(cors({
	oritin: 'http://example.com',
    methods: ['GET', 'POST'],
    allowedHeaders: ['Content-Type']
}));

app.get('/api/data', (req, res) => {
	res.json({ message: 'Hello Server' });
});

app.listen(3000, () => {
	console.log('Server running on port 3000');
});

// Java CORS 예시 코드
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://example.com")
public class ApiController {

    @GetMapping("/data")
    public Map<String, String> getData() {
        Map<String, String> response = new HashMap<>();
        response.put("message", "Hello from server");
        return response;
    }
}

// Apache HTTP Server (웹 서버) 설정
.htaccess
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type"

// Nginx 설정
nginx.conf
location /api/ {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
    # 다른 설정들...
}