원래 로컬 환경에서 다 하고 싶었지만,
CORS 문제에 직면했다.
CORS란 무엇인가?
CORS가 무엇인지 알기 전에, 이 CORS가 등장하게 된 배경을 먼저 알아보자.SOP는 2011년 RFC 6454에서 등장한 보안 정책으로 "같은 출처에서만 리소스를 공유할 수 있다"라는 규칙을 가진 정책이다.그러
velog.io
로컬에서 서버를 굴리려고 해도 SSL 문제에서 자유롭지 않았다.
결국 마지막으로 택한 방법은 외부 호스팅에 프록시 서버 올리기.
내가 선택한 서비스는 Railway
Railway
Railway is an infrastructure platform where you can provision infrastructure, develop with that infrastructure locally, and then deploy to the cloud.
railway.app
Render는 무료플랜일 때 일정 시간 이상 사용하지 않으면 비활성화되기 때문에,
빠른 응답이 필요한 API 서버에 적합하지 않다고 생각했다.
서버는 다음과 같이 작성했다.
app.get('/search', async (req, res) => {
console.log("Get call");
const query = req.query.query;
const url = `https://openapi.naver.com/v1/search/news.json?query=${encodeURIComponent(query)}`;
try {
const response = await fetch(url, {
method: 'GET',
headers: {
'X-Naver-Client-Id': clientId,
'X-Naver-Client-Secret': clientSecret
}
});
console.log("Get Response");
const data = await response.json();
res.json(data);
console.log("Send Response");
} catch (error) {
res.status(500).json({ error: error.message });
}
});
app.listen(port, () => {
console.log(`Proxy server running at ${port}`);
});
단순히 리소스를 받아오기만 할 것이므로 엔드포인트는 ``/search``하나만 두었다.
이렇게 배포가 완료된 것을 확인했다.
이제 웹 스크립트에서 엔드포인트를 배포한 서버로 바꿔주면 완료.
엄청 빠릿한 건 아니지만, 그렇다고 한참 걸리는 것도 아니니 꽤 괜찮다.
이런 부분 보다 프론트엔드적인 부분을 다루는 게 더 힘들었다.
나와 디자인은 정말 맞지 않구나... 하는 생각도 들었고.
'Camp > T.I.L.' 카테고리의 다른 글
[TIL #3] this, call(), apply(), bind() (0) | 2024.08.12 |
---|---|
[KPT 회고] 팀 소개 페이지 미니 프로젝트에 대한 회고 (0) | 2024.08.09 |
[TIL #1] 명세 (0) | 2024.08.05 |
[TIL #20] 3진법 뒤집기 (0) | 2024.07.22 |
[TIL #19] 사각형 별 찍기 (0) | 2024.07.17 |