[WIL]항해99 6주차 주특기 미니 프로젝트 회고록

weekend I Learned

 

6주차 주특기 미니 프로젝트 주차 (12. 6 월 ~ 12. 11 토 )

 

 

 

 

목차

 

- CORS

 

- 주특기 미니 프로젝트 회고

 

 

 

 

1. CORS

CORS (Cross-Origin Resource Sharing)란?

CORS는 자신이 속하지 않은 다른 도메인, 다른 프로토콜, 혹은 다른 포트에 있는 리소스를 요청하는 Cross-Origin HTTP 요청 방식이다.

 

CORS가 등장한 이유?

CORS가 등장한 이유는 Same-Origin Policy(동일 출처 정책)때문이다. 이 정책은 어떤 출처에서 문서 혹은 스크립트가 다른 출처에서 가져온 Resource(자원)과 상호작용 하는 것을 제안하는 보안 방식을 말한다. 쉽게 얘기하면, 서로 다른 Origin(다른 도메인, 포트)에서 자원 공유를 보안 이슈로 인해 제안한다는 의미다. 

 

위 정책을 적용하면 다른 Origin에서 Resource 요청이 불가능해지므로 공격받을 수 있는 경로를 제한하거나 해로운 문서들을 분리를 할 수 있어서 확실한 보안성의 이점이 있다.

 

그러나 SPA(Single Page Application)의 등장으로 클라이언트, 서버의 도메인을 따로 유지하는 경우가 발생했다. 그 외에도 외부 API를 연동해서 사용하는 경우에는 App과 외부 API의 Origin이 다르기 때문에, Same-Origin Policy로 인해 Resource 공유가 불가능한 상황이 발생한다. 하지만 CORS를 활용하면 위 보안 문제들을 예방하고 내가 허용하는 Origin만 요청할 수 있게 된다.

 

CORS 동작 과정

브라우저에서 Resource를 요청할 때, 추가적인 헤더에 정보를 담는다. 이때, Origin이 무엇이고 어떤 method를 사용해서 요청을 할 것 인지, 어떤 헤더들을 포함할 것인지를 담아 서버에 전송한다.

 

그리고 서버에서는 서버가 응답할 수 있는 Origin들을 헤더에 담아 브라우저에게 전송한다. 브라우저는 이 헤더를 참고하여 해당 Origin에서 요청할 수 있는지 판단하고 가능하다면 Resource전송을 허용하고, 불가능하다면 Error를 발생시킨다.

 

Node.js express로 CORS 방식 허용하기

CORS를 사용하기 위해서는 우선은 CORS 라이브러리를 설치를 해줘야한다.

npm i cors

그 후 서버를 모두에게 허용할 때는

const cors = require('cors')

app.use(cors())

위와 같이 별도의 Option없이 app.use(cors())를 하게 되면 모든 도메인에서 제한 없이 서버에 요청을 보내서 요청과 응답을 할 수 있다.

 

이번에는 서버를 특정 도메인에만 허용을 할 때는

const cors = require('cors')

const options = {
	origin: "http://www.domain.com",
	credentials: true
}

app.use(cors(options))

위와 같이 options 변수에 서버에서 허용할 도메인을 추가하고, app.use(cors(options))를 해주면 해당 도메인은 제한 없이 서버에 요청을 보내서 응답을 받을 수 있다.

 

 

 

 

2. 주특기 미니 프로젝트 회고

첫 협업을 진행하며 느낀 아쉬운 점

이번에 처음으로 프론트와 협업을 진행하면서 아쉬웠던 점은 팀을 Lead하면서 많이 부족하다는 걸 깨달았다. 우리팀은 프로젝트를 제 시간에 제출을 못하면서 많은 기능들을 포기하며 아쉬움을 남긴 채 미완성으로 제출을했다.

 

내 탓이다. 팀 리더로써 일정을 조율 못하고 어려움에 빠진 팀원을 구해주면서 도움을 줬어야 했는데 한번 더 여쭤보면서 진행상황을 체크하면서 확인해야 했던 것을 대충 지나쳤던게 아직도 신경이 쓰인다. 만약 그때 내가 조금 더 신경을 썼더라면 어땠을까라는 생각을 많이한다.

 

그래도 힘들어하신 팀원분이 포기안하시고 정말 열심히 하시는 모습이 동기부여가 되고, 그 분께서는 개발자의 자세?가 잘 잡혀있으신 것 같아서 앞으로의 내 개발습관에 대해 많은 영향을 주셨다. 포기하지 않고 열심히 해주셔서 너무 감사했다.

 

그리고 내 실수로 인한 거의 과제 미제출이라고 볼 수 있지만, 그래도 팀원분들께서 열심히 해주시고 활동을 너무 활발하게 해주셔서 너무 감사하다. 그리고 또한 너무 죄송하다. 내가 좀 더 분발을했더라면 잘 할 수 있을 것 같은 생각이 들었다.

 

하지만 이런 마음을 계속해서 갖지 말고 지금은 실전 프로젝트도 아닌 주특기 미니 프로젝트에서 연습을 하는 거니까 만약 현업에서 이런 일이 발생했을 때 어떻게 대처해야할지 예행 연습이라고 좋게 생각을 해보려고 한다.

첫 협업을 진행하며 느낀 뿌듯한 점

개인적이지만 정말 주특기 커리큘럼안에서 기초 주차때와 지금 주특기 미니 프로젝트 때를 비교해보면 정말 많이 성장했다고 몸소 느꼈다.

서버-클라이언트의 요청 응답에서 많이 힘들어했었고, Javascript 기초가 너무 부족했던 나는 주특기 커리큘럼 때 잠을 줄여가며 항해99에서 나눠준 강의와 youtube에 돌아다니는 강의들을 참고해서 낮과 밤없이 열심히 기초를 다진 결과인 것 같다.

 

그 결과, 클라이언트에서 서버에 요청할 때 생기는 Error에 대해서 프론트분들이 힘들어 하셨을 때 내 개인적인 생각으로는 빠른 피드백을 해드렸던 것 같다.

 

그리고 무엇보다. 클라이언트 요청 방식이 잘못 됐을 때 HTTP 상태 통신을 걸어놔서 Error를 좀 더 손쉽게 해결할 수 있었다. 내 코드에 대해서 뿌듯했던 순간이었다.

 

하지만 아직도 잘하는 건 아니니까 node.js 기초 공부를 통해서 기초를 다지고 틈 날때마다 나만의 프로젝트를 만들어볼거다.

첫 협업을 진행하며 느낀 어려웠던 점

서버를 웹과 연결하는 작업이 너무 어려웠다. 처음보는 Error에 식은땀이나며 구글링을 엄청 해봤는데, 알고보니 서버에서 CORS를 안해줘서 생긴 문제였다... 분명 이번 프로젝트에 대해 발제를 해주신 내용에 협업꿀팁으로 따로 페이지에 정리를 해주셨는데 확인을 못한 결과다.

 

처음에 확인을 안했을 땐 socket.io를 써야하네 그랬지만 위에 내용을 확인하니까 간단하게 CORS를 설치해주면 해결이 되는 일이었다.

다음 프로젝트 할 때는 한번 더 확인을해서 이런 일이 없도록 해야할 것 같다.

첫 협업을 진행하며 느낀   좋았던 점

좋았던 점은 재밌었다. 뭔가 정말 프로젝트다운 프로젝트를 한 것 같았다. 항해 1주차 미니 프로젝트는 아무것도 모르는 상태에서 했지만 이번 주특기 미니 프로젝트는 각자의 주특기를 공부해서 Front와 Back을 나눠서 서로의 합의점을 찾고, 기획도해서 프로젝트를 선정하고 해결이 어려운 부분이나 Front와 Back과의 협업이 재밌었다.

 

주특기 커리큘럼에서는 개인과제라서 Front가 얼마나 힘든지 가늠이 안갔지만, 이번 프로젝트를 하면서 Front분들이 얼마나 고생하시는지 알 수 있는 계기가 된 것 같아서 이 점 또한 인상적이었다.

 

앞으로 협업을 할 때는 이번주보다 더 좋은 모습으로 발전해가는 퍼포먼스를 보여드리고싶다.