기록들 https://github.com/ndgndg91

사이드 프로젝트 여정 제 3탄의 주제는 개발자라면 누구나 한 번 쯤 마주치는 SOP, CORS 에 대해서 이전에 정리한 것 보다 상세하게 정리하고, Spring Boot 에서 어떻게 동작 하는지 어떻게 적용하는지 정리를 해보려고 한다. 1탄 : SSO 2탄 : AWS Amplify 3탄 : CORS && SOP with Spring Boot 먼저, CORS 란 무엇인가? Cross Origin Resource Sharing 의 약자이다. 한국어로는 교차 출처 리소스 공유이다. 역시 번역은 쓸모없는 경우가 많다.  Origin ? Protocol + Host + Port 를 합쳐서 Origin 이라고 부른다. ex) http://localhost:8080 은 하나의 Origin 이다. 그렇다면 Cross Origin 은 뭘까? 한국어로 교차 출처라고 하는데, 쉽게 말해서 Origin 이 다를 때 Cross Origin 이라고 한다. Origin 이 다르다는 의미는 무엇일까? 방금 언급한 Protocol + Host + Port 중 하나라도 다르면 Cross Origin 이다. ex) http://localhost:8080 과 http://localhost:9090 은 Cross Origin 이다. ex) http://example.com 과 https://example.com 도 Cross Origin 이다. ex) https://example.com 과 https://www.example.com 도 Cross Origin 이다. Cross Origin 이 무엇인지 알아봤는데 리소스 공유는 무엇인가? web application 스스로 자원을 가지고 있어서 방문자들에게 serving 을 할 수 도있지만, 다른 server 에 있는 자원을 요청해서 보여주거나, 다른 server 에 어떤 자원을 생성하거나 삭제하거나 변경하기 위해서 요청을 할 수도 있다. 다른 server 에 요청할 때 이는 Cross Origin 에게 요청을 하는 것을 의미한...

사이드 프로젝트 여정 두 번째 이야기이다. 첫 번째 이야기는 SSO 를 다루어 보았다. 이번에는 Front 를 구현하고, CI/CD Pipeline 및 Infra 구성에 대해서 간략하게 정리해보려고 한다. 우선, 간단하게 프로젝트 Front 는 angular11 로  my.new 루트 도메인을 가진 repository 한 개, shortcut.my.new 서브 도메인을 가진 repository 한 개로 두 개의 repository 이다. 처음 infra 구성은 S3 Static web hosting 과 CloudFront 구성을 취하려고 했었다. 하지만, 해당 구성을 취하는 과정에서 관리비용이 꽤나 큰 것을 느꼈다. 각가의 CI/CD pipeline 을 손수 구성해줘야 되었다. 예를 들어, Github Action 을 사용할 경우, 특정 브랜치 master 에 Pull Request 혹은 Push 가 발생할 경우, angular project 를 build 하고 artifact 를 aws cli 통해서 S3 에 put object 를 통해서 업로드 하고, CloudFront Invalidation 을 직접 구성해주어야 하며, Domain 연동도 Route 53 Record 및 SSL 인증서를 ACM 에 직접 발급받고, 도메인을 구입한 DNS Provider 에서 Record 설정을 꼼꼼하게 신경써야한다. 혼자서 사이드 프로젝트를 진행하면서 Front 뿐만 아니라, Back-end 도 개발 및 인프라 관리를 하기 때문에 관리 비용이 꽤나 크게 다가왔다. 그러던 도중에 AWS Amplify 라는 서비스를 이용해보았고, 굉장히 큰 도움이 되었다. AWS Amplify 에 대한 내용을 정리하기 전에 우선 간단하게 S3 Static website hosting 설정을 정리하겠다. 아래는 CloudFront 를 이용하여 S3 웹사이트 호스팅 방법에 관련한 안내서이다. 4가지 방법을 알려주고 있는데, 웹사이트 엔드 포인트를 오리진으로 사용하는 방법만 일단 간략하게 ...

작년 2020년 11월 초부터 현재 재직 중인 회사 CPO 님과 2명이서 사이드 프로젝트를 하나 시작했다.   서비스 소개 영상이다. 제품의 아이디어 및 디자인 그리고 정체성 및 사용성에 대한 기획은 CPO 님이 그리고 나머지 기술 부문은 내가 맡아서 진행했다. 개발 스킬 향상을 위해서 혼자서 또는 개발자들끼리의 사이드 프로젝트를 진행한 경험은 많았지만, 사용자를 위한 제품을 만들기 위해서 진행한 사이드 프로젝트는 이번 경험이 처음이라고 할 수 있다. Slack 과 Notion 을 이용하여 프로젝트에 필요한 커뮤니케이션을 진행했고, 퇴근 후 각자 주당 평균 10시간 정도 투자해서 100일 안에 완성을 목표로 시작했다. 100일을 목표로 잡은 이유는 100일이 넘어가면 늘어지고 지쳐서 서로가 힘들어지기 때문에 다소 타이트할 수도 있고 넉넉할 수 도 있는 시간으로 적절하게 잡았다. 또한 .new 라는 도메인을 사용했는데, 구글에서 만든 도메인으로 도메인 구입 후 100일 이내에 도메인을 적용한 서비스를 출시해야 되며, 구글에서 만든 정책을 준수하는 서비스를 만들어야한다. 이러한 과정속에서 제품을 만드는 과정에서 개발이외에 부분에서도 많은 것을 느끼고 성장한 부분도 있지만, 나는 엔지니어로서 기술적인 부분에서 고생을 하고 배운 것들에 대해서 정리를 해보려고 한다. 그 첫 번째 주제가 바로 SSO 이다. 간단하게 SSO 의 개념에 대해 먼저 짚어보겠다. SSO 란 Single-Sign-On 의 약자이다. 우리나라말로 풀이하자면, 통합 인증 혹은 단일 인증 단일 계정 로그인 정도로 정리할 수 있다. 예시를 들자면, 우리 실생활에서 많이 사용하는 구글 서비스를 들 수 있다. 구글의 경우 한 번의 로그인을 통해서 Gmail, Youtube, Drive, Docs, Spreadsheet 등 여러 서비스를 사용할 수 있다. 구글의 여러 서비스의 경우, gmail 과 같이 mail.google.com 서브도메인으로 구성된 서비스도 있고, youtube 와 같이 youtu...