개인 프로젝트 기록 - 3

Ham S. J·2022년 12월 10일

개인 프로젝트 1

목록 보기

3/10

Previously.........

기본적인 페이지 구성이라던지, 모달을 통한 로그인, 회원가입 버튼을 구현하였다.
회원가입 / 로그인 로직은 음악평가라던지, 게시판을 구현한 후에 만들기로 생각을 했다.

어떤가요는, 음악을 평가하는 애플리케이션이기 때문에, 다양한 음악 정보가 필요하다.
앨범이라던지, 노래 제목, 가수, 장르 .... 그래서 나는 API를 이용할 것이다.
이 넓고 넓은 웹의 바다엔 많은 자원들이 있기에....

API(Application Programming Interface)

API에 대한 설명은, 웹에 검색해보면 정말정말~~ 가지각색 다양한 방법으로 이해가능하도록
사람들이 소개하고 있다. 하지만 프로그래밍이 너무 추상적이고 생소했던 나는,
볼 때 마다 새로운 개념인 것 같다.

Red Hat 에서는 ...
API는 애플리케이션 소프트웨어를 빌드하고 통합하기 위한 정의 및 프로토콜 세트인
애플리케이션 프로그래밍 인터페이스(Application Programming Interface)를 뜻합니다.
API를 사용하면 구현 방식을 알지 못하는 제품 또는 서비스와도 통신할 수 있으며 애플리케이션 개발을 간소화하여 시간과 비용을 절약할 수 있습니다. 새로운 툴과 제품을 설계하거나 기존 툴과 제품을 관리할 때 API를 사용하면 유연성을 높이고 설계, 관리, 사용 방법을 간소화하며 혁신의 기회를 얻을 수 있습니다.

Interface라는 단어에서 볼 수 있듯이, 어떤 애플리케이션과 애플리케이션 간의 접촉점이라 할 수 있다.
내가 이해한 바로는, (정확하지 않을 수 있다는 떡밥)

TV(삼성, LG, 등등...) 마다 전원을 키거나 끄고, 볼륨을 조절하거나 채널을 이동하고, 또 밝기를 조절하거나 꺼지는 시간을 예약하는 등의 기능이 작동하는 매커니즘은 각자 다를 것이다.
하지만 우리는 '리모콘' 이라는 API를 통해 각 TV에게 전원을 키고 끄도록 하는 기능을 작동하게 하고, 볼륨을 조절하고 채널을 변경하며 여러 기능을 사용할 수 있다.

즉, 작동하는 매커니즘은 다르지만 해당 기능임을 표시한 버튼을 누르는 것 만으로
어떤 기기던 간에, 기능을 수행할 수 있는 것... 이라고 생각한다.

API에 대한 설명은 저엉말 많고, 이해하기 쉽게 설명해놓은 분들도 많으니
어떤 정보든 찾아서 보고 익숙한 개념으로 자리잡을 수 있게 하는 것이 중요한 것 같다.

다시 본론으로 돌아와서, 방대한 음악 자료를 얻을 수 있는 api를 조사하다가 아주 유용한
블로그의 글을 발견했다 ! adore_voy님의 티스토리 바로가기

spotify, applemusic, shazam, maniadb... 장단점이 있거나 사용에 어려움이 있던 api를
사용하지 못하고, last.fm api document 바로가기 의 api를 사용하기로 했다.
adore_voy님의 경우 음악검색 기능을 구현하셨는데, 이렇게 유용한 정보를 공유해주셔서
정말 감사하다 .

하지만 또 여기서 하나의 고비를 넘어야 했으니... 바로... CORS 를 만나게 되었다......

CORS(Cross-Origin Resource Sharing) 교차 출처 리소스 공유 란?
추가 HTTP 헤더를 사용하여 한 출처에서 실행중인 웹 애플리케이션이
다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
출처 : MDN CORS 바로가기

CORS는 프론트엔드 개발자들이 꼭 넘어야하는 하나의 언덕이라고 할 정도로 유명한 녀석이었다.
또 생소한 개념.. 추상적인........ 하지만 나에겐 아주 든든한 공부 블로그가 있다.
피그브라더님의 IT 엘도라도 티스토리 : CORS 문서 바로가기

CORS가 필요한 이유는 SOP라는 정책을 이해하는 것으로부터 시작된다.

SOP(Same Origin Policy) 동일 출처 정책이란?
다른 Origin(Origin은 URL에서 프로토콜, 도메인, 포트 번호를 합친 부분을 의미)으로
요청을 보낼 수 없도록 금지하는 브라우저의 기본 보안정책이다.

SOP는 브라우저의 정책으로, 만약 이가 금지되어 있지 않다면 브라우저에 담긴 사용자의 인증정보, 보안정보들이 다른 페이지를 방문하거나 버튼을 클릭하는 것 만으로 타인에게 전송될 수 있다.
이러한 피해와 관련해서는 CSRF 공격이라는 개념이 존재하는데, 추후에 알아보도록 하자.

그래서 CORS는
SOP라는 브라우저 보안정책에 의해 금지된 다른 Origin으로의 요청전송을 가능하게 해주는 정책이다.
그러나 이는 브라우저 보안정책이라 서버간 통신에서는 적용되지 않는다고 한다.

그래서, CORS를 사용하기 위해 패키지를 설치해주고, 미들웨어로 사용했다.
(미들웨어에 대한 개념도 공부해야 할 부분이 많다... ^ㅅㅠ)