끄적이는 개발노트

프론트에서 api를 통해 백엔드와 통신할 때, console 창에서 CORS 에러를 마주친 경험이 한번씩은 있을 것이다.CORS?Cross-Origin Resource Sharing의 줄임말로 교차-출처 리소스 공유다른 출처이기 때문에 발생하는 에러로 동일한 출처의 리소스에만 접근하도록 제한하는 정책이다.출처는 프로토콜, 호스트명, 포트를 의미한다. 이 때, 통신하고자 하는 api가 자체 백엔드라면 백엔드에서 CROS 에러를 해결하는 것이 일반적이다. 하지만, 외부 api를 프론트에서 직접적으로 가져다 쓰는 경우도 있기 때문에 프론트에서 CORS 에러를 해결하는 방법을 알아두는 것도 좋다. 따라서, Next.js(프론트엔드)와 NestJS(백엔드) 방법을 각각 정리해둔다. 1. Next.js (프론트엔드..

아직 블로그 포스트로 다루지는 않았지만, Next.js에서는 api를 통한 서버사이드 렌더링이 가능하다. 이는, 생산성이 높고, React.js를 다룰 줄 안다면 Next.js에 대해 좀만 학습한다면 쉽게 서버를 개발할 수 있는 장점이 있다. 하지만, 규모가 큰 프로젝트일수록 프론트엔드와 백엔드 개발을 구분지어 개발할 필요가 있어, Next-Nest를 연동한 서버구축을 실습하고 다뤄보고자 한다. Next-Nest 포스트에서는 Next.js와 NestJS를 이용한 서버를 구축한다. 일종의 프론트엔드와 백엔드 개발을 나누어 각각 최적화된 프레임워크를 사용하여 서버를 구축해본다. 프론트엔트 : Next.js 백엔드 : NestJS 1. 필수 패키지 npm 설치 $> sudo apt-get install npm..