프론트랑 백엔드 협업 어케하는데

협업 하는 거에 대한 자료의 출처는 

https://velog.io/@eunnbi/Project-%EB%B0%B1%EC%97%94%EB%93%9C%EC%99%80-%ED%98%91%EC%97%85%ED%95%98%EA%B8%B0

[Project] 백엔드와 협업하기

이곳에서 가져오고 모르는 정보도 다른곳에서 가져왔기에 출처는 매번 밝히겠습니다.

프론트랑 백엔드 협업 어떻게함?

 

크게 두가지.

 

• 처음에는 첫 번째 방법을 선택했는데 쿠키 이슈로 인해 두번째 방법을 이용했다고 한다.

쿠키 이슈 (refresh token)

출처:https://velog.io/@eunnbi/Project-social-login-fe#%EC%BF%A0%ED%82%A4-%EC%9D%B4%EC%8A%88-refresh-token

[Project] 소셜 로그인 구현하기 (FE 관점에서)

 

 

 

이때 백엔드 api를 이용하려면 CORS 정책을 피해갈 수 없다. CORS 정책을 위반하지 않기 위해 백엔드에서 Access-Control-Allow-Origin을 알맞게 설정하거나 클라이언트 측에서 proxy 서버를 설정해야 한다.

• 만약 첫번째 방법을 이용한다면 클라이언트 측에서 proxy 설정을 하면 CORS 정책을 우회하여 백엔드 api를 호출할 수 있다.
• 만약 두번째 방법을 이용한다면 클라이언트 측에서 로컬 서버 base url를 proxy로 설정하고, (ex. http://localhost:8080) 백엔드에서는 배포된 클라이언트 url를 Access-Control-Allow-Origin으로 설정해주면 된다.
• 백엔드에서 Access-Control-Allow-Origin을 http://localhost:3000 (로컬 클라이언트 url)으로도 설정할 수 있다. 하지만, 이 출처는 범용적이기 때문에, 보안 상의 issue가 발생할 수 있다. 차라리 클라이언트 측에서 로컬 백엔드 서버 url이나 배포된 백엔드 서버 url를 proxy로 설정하는 것이 보안적인 측면에서 더 좋다.

 

먼저 CORS란?

CORS는 한 도메인 또는 Origin의 웹 페이지가 다른 도메인 (도메인 간 요청)을 가진 리소스에 액세스 할 수 있게하는 보안 메커니즘이다.

CORS는 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식으로 CORS라는 이름으로 표준화 되었다. CORS는 최신 브라우저에서 구현된 동일 출처 정책(same-origin policy) 때문에 등장했다. 

라고한다. 출처 : 

https://bohyeon-n.github.io/deploy/web/cors.html

CORS란? CORS를 해결해보자 | 구보현 블로그

(여기는 CORS에 대해서 더 자세하게 알려주는 것 같다)

https://velog.io/@eunnbi/CORS

CORS

 

proxy 서버

프록시 서버란 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 하는 컴퓨터 시스템 혹은 응용 프로그램을 의미한다. 서버와 클라이언트 사이에서 중계역할을 수행하는 것을 가리켜 '프록시'라 하며 그 중계 기능을 하는 것을 프록시 서버라 한다. 

https://www.joinc.co.kr/w/Site/System_management/Proxy

Proxy 서버 구축하기

 

또 다른 방법 Swagger

그 뒤에 내용은 서로의 대한 의사소통의 활발함이나 태도 같은것이기에 생략하도록 하겠다.

https://velog.io/@eunnbi/Project-%EB%B0%B1%EC%97%94%EB%93%9C%EC%99%80-%ED%98%91%EC%97%85%ED%95%98%EA%B8%B0

[Project] 백엔드와 협업하기

 

 

 

 

 

 

 

이 밑 블로그는 실제로 회사에서 프론트엔드와 백엔드 개발자들이 실제로 개발할때 어떤식으로 돌아가는지 자세하게 알려준다.

 

 

https://www.grabbing.me/6166144602844aab9b361c79b8f90785

프론트엔드 & 백엔드 개발자들이 실제로 회사에서 하는 일

 

 

먼저 프론트 엔드부터 알아보도록 하자.

프론트 엔드

프론트 엔드에 대해 짧게 설명 하자면, 프론트 엔드 개발자는 우리들이 사용하는 웹 서비스를 개발한다. 프론트엔드 개발자는 실제로 화면 작업과 더불어 웹에서 벌어지는 모든 일들을 도맡아 하게 된다. (사용자가 바라보는건 개별적인 화면이 전부이지만, 실제로는 개발자들이 개고생하는게 현실). 사용자 관점과 다르게 소스 코드 관점에서는 페이지 별들이 코드로 전부 연결되어 있기 때문이다. 예를 들어 로그인 기능만 하더라도 로그인 페이지에서만 작업해야 하는게 아니라 다른 페이지들도 처리를 해야한다(와우)

프로덕트 디자이너에 대한 간단한 설명

• 문제 정의 : 문제 가설을 수립하고, 유저 데이터와 VOC(voice of costumer 고객의 목소리)를 통해 문제점 발굴
• 유저 이해 : 유저 니즈를 발굴 하고, 사용자 인터뷰와 사용성을 테스트.
• UI : UI 디자인 및 프로토타입 제작을 하고 디자인 시스템을 고도화하며 인터랙션을 디자인 한다.
• UX : IA 설계, 사용자 여정 설계
• 퀄리티 관리 및 유지.

 

 

백엔드 엔드

백엔드에서도 가볍게 짚고 넘어가자. 백엔드라는 영역은 실제로 굉장히 넓다(굉장히, 매우, 쥰내). 백엔드 개발자는 IT 서비스에 필수적인 데이터들과 관련된 모든 프로그램을 관리하는 직군이다. 데이터를 저장하는 데이터베이스부터 시작해서 데이터를 처리하기 위한 API 서버, 파일들을 저장하는 스토리지 등등 정말 많다. (백엔드를 더 자세하게 알고 싶다면 https://www.grabbing.me/69a68655ae9c46efaeae5014b9f9034d으로)

백엔드(서버/클라우드) 큰그림 뿌셔먹기

 

백엔드가 주로 하는 일

 

• 매니지드 서비스 : IT 인프라 운영을 전문기업에게 아웃소싱(위탁)하는 것으로, 개별 고객에 맞춘 보다 체계적이고 세밀한 운영관리 서비스를 제공하는것.

출처 :  https://www.grabbing.me/6166144602844aab9b361c79b8f90785

프론트엔드 & 백엔드 개발자들이 실제로 회사에서 하는 일

 

 

우리가 하는 것은 API 개발 협업에 대한 것이니 밑에 글도 어느정도 도움이 될 것 같다.

https://velog.io/@city7310/%EB%B0%B1%EC%97%94%EB%93%9C%EA%B0%80-%EC%9D%B4%EC%A0%95%EB%8F%84%EB%8A%94-%ED%95%B4%EC%A4%98%EC%95%BC-%ED%95%A8-6.-API-%EC%8A%A4%ED%8E%99-%EC%84%A4%EA%B3%84%EC%99%80-%EB%AC%B8%EC%84%9C%ED%99%94-%EB%B0%A9%EC%8B%9D-%EA%B2%B0%EC%A0%95-1

백엔드가 이정도는 해줘야 함 - 6. API 스펙 설계와 문서화 방식 결정 - (1)

 

API 스펙 설계에 대한 설명이다.

 

 

 

• 솔직히 저 글 밑에 token 어쩌구저쩌구 하는데 나는 게임 토큰밖에 생각 안나서 뭔 개소리지 하다가 글 찾아보니 좋은글 있어서 일단 가져와봤다 https://velog.io/@boo1996/Token  토큰에 대해 잘 모른다면 이글을 참고해보자

Token