오늘 한 일

  • 웬일인지 출근까지 한참 남은 시간에 눈이 떠졌다. 어제 자기 전까지 환경변수 설정 파일 작성과 관련해서 이게 맞는 건지 계속 고민하고 있었는데, 마침 나보다 훨씬 일찍 일어났다는 상현님에게 도움을 요청할 수 있었다. 덕분에 물론 애매한 부분은 있지만 적어도 완전히 틀리지는 않았다는 약간의 자신감을 얻었다.
  • 출근 시간이 되자마자 승진님께 다시 한 번 확인을 부탁드렸다. 아직 실환경 관련한 세팅까지 마무리할 수 있는 단계는 아니므로 일단은 적당히 맞게 했다-는 게 결론. 마무리 작업에 대해서 간략하게 설명을 해주셨는데 알아들을 수가 없었따.. 공부할 거리가 태산이다.
  • 승진님이 구글 소셜 로그인 버튼을 프론트단에 넣어 놓으셨다고 하시면서 코드 정리를 부탁하셨다. 환경변수 설정도 했으니 내친 김에 그 부분도 아주아주 약간 손을 봤다. 그런데 문제는 그 버튼이 로그인 페이지로 처음 진입했을 경우나 페이지 자체를 새로고침한 경우에는 잘 보이는데, 링크를 통해 회원가입 페이지로 넘어갔다가 돌아오면 버튼이 없다!?
  • 이걸 해결해 보겠다고 시간을 다 썼다. 하루종일 낑낑대다가 beforeMount와 mounted에 각각 구글 로그인 버튼을 렌더링하는 함수를 넣어놓으니 결과적으로 버튼이 두 경우 모두 잘 보이기는 한다. 그런데 브라우저 콘솔 창이 에러로 새빨갛다. 저 어떡하죠
  • 1시 30분부터 3시까지는 AWS 클라우드 컴퓨팅 웨비나를 BGM처럼 깔아놓고 있었다. 처음에는 열심히 들으려고 했는데 새로운 내용이 아주 많지 않았고 나중에 필요할 때 구글링해서 찾는 게 훨씬 빠를 것 같았다.
  • 용빈님이 docker로 서버 구동하는 게 잘 안된다고 하셔서 상현님과 셋이서 머리를 맞대고 허들을 했다. 그런데 충격적이게도 원인이 또 다시 VPN이었다...!? 잊을 만 하면 나오는 그것

오늘 한 일

  • 어제 오후부터 회원가입과 로그인 절차에 대한 전체적인 테스트를 (혼자) 해보고 있었는데, 퇴근 직전부터 회원가입 페이지에서 이메일을 입력하면 날아오는 인증메일이 발송되지 않았다. 회원가입 페이지를 완료한 지가 며칠이 지나서 그동안은 확인해볼 일이 없었는데 오랜만에 해보니 갑자기 안되는 것이었다. 메일은 오지도 않고 콘솔창에는 "Email address is not verified. The following identities failed the check in region US-EAST-1: id@email.address"라고 에러 메시지가 찍히는데 이것만 보고는 무슨 상황인지 이해할 길이 없었다. 구글링해봐도 다들 나와는 다른 상황인 것 같고 별로 참고할 만한 내용이 없었다. 무슨 에러인지 알고 나서야 뒤늦게 스택오버플로우에 있던 해결책이 보였다.
  • 사용자 인증을 AWS cognito를 통해 처리하고 있다. cognito에서 인증메일을 보내는 방식은 cognito 자체에서 보내주는 디폴트 설정과 AWS SES를 통해서 보내는 설정, 두 가지 중 선택할 수 있다. 처음에는 디폴트 설정으로 진행했었는데, 그러면 발신 주소가 no-reply@verificationemail.com이라는 별로 예쁘지 않은 걸로 자동 설정된다. 이사님이 이걸 좀 더 보기 좋은 계정으로 바꾸려고 하셨는데, 이 FROM email address를 바꾸려면 반드시 디폴트가 아닌 AWS SES를 이용해야 하기 때문에 이 설정을 바꾸셨다.
  • 디폴트로 설정을 돌려놓으면 다시 인증메일이 제대로 오기 시작하고, AWS SES만 선택하면 다시 에러가 떴다. 에러 메시지에 나온 것처럼 이메일 주소를 확인되게 하려면 AWS SES의 해당 리전에 접속해서 직접 처리해야 한다. 처리한 후에는 확인한 이메일 주소에 인증메일을 보낼 수 있게 된다.
  • 하지만 여기서 문제: 회원가입을 하고 싶어하는 사용자가 입력하는 사용자의 이메일 주소인데, 그리고 이건 불특정 다수에게 발송될 메일인데, 이 메일을 받을 그 모두의 이메일 주소를 등록해야 한다고? 그럴 리가 없다.
  • 이 문제의 근본적인 원인은, AWS SES를 처음 사용하면 계정이 샌드박스에 들어간다는 데 있었다. 누구에게 어떤 메일을 보낼지 알 수 없는 AWS 입장에서는 콘솔에서 인증 처리를 거치지 않은 이메일 주소에는 어떤 메일도 발송할 수 없게 제한해둔 것이었다. 물론, 메일을 보낼 발신자의 주소 역시 인증을 거쳐야 한다.
  • 한 마디로, 인증메일에서 no-reply@verificationemail.com이 발신자 주소로 찍히는 게 보기 싫어서 이 주소를 바꾸고자 한다면 반드시 AWS SES에 연결하고 + AWS SES 계정을 샌드박스에서 나가게 해야 한다. 여기에까지 이르느라 시간을 얼마나 썼는지

오늘 배운 것

  • 내가 맞닥뜨린 오류는 아래 링크에서 'Email address is not verified' 부분에 해당한다.
 

Amazon SES 이메일 전송 오류 - Amazon Simple Email Service Classic

Amazon SES는 여러 AWS 리전에 엔드포인트가 있으며 이메일 주소의 확인 상태는 AWS 리전마다 서로 다릅니다. 사용하려는 AWS 리전에서 각 발신자에 대해 확인 프로세스를 완료해야 합니다.

docs.aws.amazon.com

  • '이메일 계정 구성' 또는 '사용자 풀에 대한 이메일 구성' 항목에서 2단계(Amazon SES 샌드박스에서 계정 이동)를 참고하면 좋다.
 

Amazon Cognito 사용자 풀의 이메일 설정 - Amazon Cognito

이러한 단계에서 생성하는 리소스는 AWS 계정에서 공유할 수 없습니다. 예를 들어 사용자 풀을 구성한 한 계정을 다른 계정의 Amazon SES 이메일 주소로 사용할 수 없습니다. 여러 계정에서 Amazon Cogn

docs.aws.amazon.com

  • AWS SES에서 메일 주소 확인 처리를 할 때 참고하면 좋다.
 

Amazon SES에서 확인된 자격 증명 - Amazon Simple Email Service

이 페이지에 작업이 필요하다는 점을 알려 주셔서 감사합니다. 실망시켜 드려 죄송합니다. 잠깐 시간을 내어 설명서를 향상시킬 수 있는 방법에 대해 말씀해 주십시오.

docs.aws.amazon.com

  • 마지막으로, 이 모든 상황을 전부 파악하고 나서야 찾았던 스택오버플로우. 아는 만큼 보인다 했던가.
 

Email address is not verified (AWS SES)

I want to use Amazon's Simple Email Service to send emails. I verified my domain as well as the email address I want to send from. For both it says verified. Now when I use the Send Test Email f...

stackoverflow.com

오늘 한 일

  • 사실 Amplify를 연계한 로그인, 회원가입 페이지 작업은 지난 주에 끝냈지만... 오늘은 동영상 인코딩 문제 때문에 하루종일 씨름만 하고 성취해 낸 건 딱히 없는 기념으로 뒤늦게 가져와 봤다. 아니 그나저나 도대체 왜 어떤 mov는 인코딩 속도가 느려?!
  • AWS Amplify 문서는 정말 너무 깔끔하고 너무 좋다. 괜히 자꾸 읽고 싶고 정독해야 할 것 같고 다른 키워드도 다 클릭해봐야 할 것 같고 저 오렌지 색도 예쁘고 막... 어제 올린 멀티파트 업로드 쪽 문서가 Amplify의 반만 됐어도 그렇게까지 애먹지는 않았을 텐데, 같은 AWS여도 워낙 서비스가 다양해서인지 참 다르다.

오늘 아니고 그때 배운 것

  • 지난 번에도 올렸던 링크다. 그때는 sign in/out만 구현했었고, 이번에는 sign up까지 완료했다. 아무래도 회원가입 페이지가 로그인보다는 만들 게 많으니까 뒤로 미뤘었다. 그리고 Amplify에서 제공하는 UI components를 사용하면 더욱 간단했겠지만, 무엇보다 뷰 자체는 회사 기획안에 맞추다 보니 시간이 좀 더 걸렸다.
 

https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js/

 

docs.amplify.aws

  • 이건 로그인 화면 어딘가에 위치한 '비밀번호 찾기'에서 쓰이는 함수를 포함한 부분이다.
 

https://docs.amplify.aws/lib/auth/manageusers/q/platform/js/

 

docs.amplify.aws

  • 근데 문제는 이 공식문서에서 소개하는 함수들을 그대로 사용하다 보면, 회원가입 절차가 [아이디(이메일), 비밀번호 입력 -> 회원가입 -> 입력한 이메일로 인증번호 발송 -> 인증번호 입력하면 회원가입 절차 완료] 이런 식으로 가게 된다. 하지만 기획안대로라면 [아이디(이메일) 입력 -> 입력한 이메일로 인증번호 발송 -> 인증번호 입력해서 확인되면 비밀번호 입력 -> 회원가입] 순서여야 한다. 인증 메일은 회원가입이 되고 난 후에나 보내주는 것인데, 우리는 가입을 완료하지 않은 시점에서 이메일만 우선적으로 확인하고 싶은 것이다. 회원가입 절차 자체를 커스터마이징 해야 하는 거라 이건 추후 Lambda Trigger를 활용하거나 해야 할 것 같다. 아직은 안 해봄
 

Pre Sign-up Lambda Trigger - Amazon Cognito

If an alias with the same phone number already exists, the alias will be moved to the new user, and the previous user's phone_number will be marked as unverified. The same is true for email addresses. To prevent this from happening, you can use the user po

docs.aws.amazon.com

오늘 한 일

  • 지난 주에도 뭔가 많은 걸 해내서 뿌듯했던 것 같은데 기록을 남기지 않았더니 기억이 안 난다. 이번 주부터는 그러지 맙시다...ㅠㅠ
  • 오늘은 지난 주 후반부터 작업한 AWS S3에 멀티파트 업로드하는 코드에, 업로드 진행상황을 알려주는 프로그레스바를 붙이는 작업을 했다. 프로그레스바 작업은 딱히 참고한 문서나 링크 없이 한 거라 별 게 없다. progress를 useState로 관리하고, progress의 setter 함수를 멀티파트 업로드 함수에 인자로 넘겨서 그 안에서 업로드 상황에 따라 progress를 설정하게끔 했다. 5MB 단위로 분할하게 해 놨기 때문에, 파일 전체 크기를 1024 * 1024 * 5로 나눈 후 그걸로 다시 100을 나눠서 파트 하나당 몇 %를 먹는지 계산하고, 그걸 그대로 progress에 넘겨서 프로그레스바의 너비로 지정해주었다. 뭔 소리..
  • AWS S3 멀티파트 업로드를 공부하며 애먹었던 가장 큰 이유는, 일단 AWS 사이트 내에 산재된 수많은 사용설명서들 중에 어떤 게 가장 직접적으로 큰 도움을 줄지 알 수 없었던 것이었다. 자꾸 아래에 레퍼런스라면서 다른 링크가 걸려 있는데 들어가보면 너무 예전 링크인 것도 있고, 딱히 별 도움이 안 되는 이론만 적혀 있는 것도 있고, 아까 봤던 링크를 다시 걸어놓은 것도 있었다. 혹시 나중에 또 멀티파트 업로드를 시도할 일이 있을까 봐 미래의 나 분명 삽질하고 있을 테니 그만하고 보라고 가장 도움 되었던 링크를 아래 붙인다.

오늘 배운 것

  • AWS S3 기본 사용설명서 링크. 영어로 보다가 속도가 안 나서 손절하고 한국어로 갈아탔다.
 

멀티파트 업로드를 사용한 객체 업로드 및 복사 - Amazon Simple Storage Service

멀티파트 업로드의 시작 및 완료 중간에 전송된 다른 요청을 우선 수행할 수 있습니다. 예를 들어, 특정 키를 사용하여 멀티파트 업로드를 시작한 후 업로드가 완료되기 전에 다른 작업에서 해

docs.aws.amazon.com

  • 위 링크를 통해 멀티파트 업로드가 어떤 원리로 돌아가는지 알게 되었다면, 그 다음은 SDK 문서를 보면 된다. 이게 가장 도움이 많이 되었는데 개인적으로는 가장 찾기 어려웠다. SDK로 제공하는 모든 함수들이 예제 코드와 함께 자세히 나열되어 있다.
 

S3 Client - AWS SDK for JavaScript v3

@aws-sdk/client-s3 Description AWS SDK for JavaScript S3 Client for Node.js, Browser and React Native. Installing To install the this package, simply type add or install @aws-sdk/client-s3 using your favorite package manager: npm install @aws-sdk/client-s3

docs.aws.amazon.com

  • 위 링크에 함수들이 있는 건 알겠는데 혹시 언제 어떤 함수를 써야 할지 헷갈린다면 이걸 보면 좋다. 여긴 한국어 지원이 안 된다.
 

CreateMultipartUpload - Amazon Simple Storage Service

After you initiate a multipart upload and upload one or more parts, to stop being charged for storing the uploaded parts, you must either complete or abort the multipart upload. Amazon S3 frees up the space used to store the parts and stop charging you for

docs.aws.amazon.com

  • 실제로 AWS SDK를 이용한 멀티파트 업로드로 동영상을 업로드한 코드를 올려놓은 블로그. 멀티파트 업로드는 말 그대로 업로드 과정만 지원하기 때문에 파일은 업로드하기 전에 알아서 분할을 해야 하는데, 파일을 분할한다는 게 감이 잘 안 잡혀서 조금 헤맸었다. 파일 분할하는 부분이 특히 참고할 만했다.
 

Upload Videos to Amazon S3 from the browser using React, Cognito and aws-sdk in multipart upload

I will help you out with the quickest and easiest way to upload videos files in multipart upload on AWS using React.

medium.com

오늘 한 일

  • 팀원 두 분을 모시고 지금껏 해온 웹 프론트 작업에 대한 리뷰(라고 쓰고 발표라고 읽는다)의 시간을 가졌다. 프로젝트 폴더 구조를 어떻게 만들었는지, styled-component를 이용한 CSS는 어떤 식으로 짰는지, 작업한 페이지는 어떻게 구성했는지, 첨부파일은 왜 리덕스를 거쳐 업로드 하는지 등등.. 말하다 보니 내가 무슨 말을 하고 있는지도 잘 모르겠지만 어떻게든 끝내긴 했다. 관객이 둘뿐이어도 난 역시 무대 체질은 아닌 것 같다ㅠㅠ 내가 그냥저냥 주워섬기는 두서없는 말들을 잘 이해해주신 두 분이 그저 대단하시다.
  • 어제 진행해 본 AWS Amplify 튜토리얼을 토대로 공식문서를 참고해서, 직접 만든 로그인 폼에 로그인/아웃 기능을 붙여 보았다. 뷰를 직접 짰다고는 하지만 레퍼런스 자체가 Amplify UI를 이용해 만들어진 것이었어서 생김새는 똑같다는 게 함정ㅋㅋ.. 아무튼 지금 기본 기능만 제대로 돌아가게 해놓으면, 나중에 기획이 나왔을 때 UI를 그대로 가져다 쓰는 것보다는 더욱 자유로운 커스터마이징이 가능할 테니 좋은 게 좋은 거라 생각하고 있다. 

오늘 배운 것

  • UI 없이 Amplify Authentication 기능 붙이기에 관한 링크
 

https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js/

 

docs.amplify.aws

오늘 한 일

  • 아직 출근한 지 3주도 지나지 않았지만, 돌이켜 생각해보자면 (총 3번에 걸친 면접 중) 첫 면접을 볼 때였는지 아니면 합격하고 나서였는지, 이사님이 구글링을 할 때 다른 건(그 중 특히 블로그, 그 중 특히 한글로 쓰인) 다 볼 필요 없고 공식문서만 보면 충분하다고 하셨었다. 항해 때도 귀에 딱지가 내려앉도록 들었던 얘기였지만 언어의 장벽을 무시하기란 결코 쉽지 않았다. 영어 읽기를 싫어하지도 않는데 한글이어도 익숙지 않을 용어들이 그것도 영어로 자꾸 나와서 그런지 왠지 거리를 두곤 했었다.
  • 하지만 역시 회사란 나로 하여금 많은 것을 하게 만드는 존재인가 보다. 어느새 나도 모르게 영어로 검색하고 영어로 된 자료를 찾아보고 있다. 물론 한글로 된 자료도 많이 참고하고 있지만, 낯설게만 느껴졌던 용어들은 오히려 영어일 때가 쉬운 경우도 있었다. 원래부터 영어였던 그 말들을 한글로 옮기는 과정에서 해석의 여지가 있으면 그게 더 나를 헷갈리게 만들었다.
  • 오늘은 드디어 그간 부여잡고 있던 페이지 작업을 얼추 마무리하고 로그인 페이지로 넘어갔다. 퇴근이 가까워진 시간이어서 로그인 관련해서는 이렇다 할 진전이 있지는 않았고, AWS Amplify 튜토리얼 정도만 진행했다.
  • 와 근데 이건 뭐 프론트에서 백엔드 작업까지 할 수 있고, 그래 어쩐지 소제목부터 Set up fullstack project 혼자서 토이 프로젝트 하거나 할 때는 말 그대로 진짜 혼자 하는 것도 가능할 것 같다.

오늘 배운 것

  • Amplify 공식문서 튜토리얼 링크. Amplify CLI를 다운 받을 때는 npm 사용하고 모듈 에러 나서 PATH 맞춘다 뭐다 죽어라 애쓰지 말고 마음 편히 curl로 받자...^^
 

https://docs.amplify.aws/start/getting-started/data-model/q/integration/react/

 

docs.amplify.aws

오늘 한 일

  • 사용자가 파일을 첨부하면 해당 파일을 aws s3 버킷에 업로드하는 기능을 붙였다.
  • 현재의 프로덕션 페이지에서는 파일을 첨부하면 즉시 s3에 들어가는데, 첨부한 파일이 사용자가 실제로 제출하기를 원치 않는 것이었다 할지라도 무조건 업로드 된다. 물론 오늘 구현한 기능도 첨부할 파일 목록에서 사용자가 삭제할 수 있는 것까지는 포함하지 않지만, 이것도 언젠가는 추가되어야 하지 않을까 추측해본다.
  • 아무튼 이번에는 사용자가 파일을 첨부하면 파일 데이터를 리덕스에 저장해놨다가, 제출 버튼을 누르면 리덕스에 저장된 데이터를 이용해 그때서야 s3로 넘어가게 했다.

오늘 배운 것

  • 오늘 하루종일 열심히 이용한 SDK란 무엇인가에 관한 링크
 

SDK란?

소프트웨어 개발 키트(Software Development Kit, SDK)는 (일반적으로) 하드웨어 플랫폼, 운영 체제(Operatting System, OS) 또는 프로그래밍 언어 제작사가 제공하는 일련의 툴입니다.

www.redhat.com

  • AWS SDK for JavaScript 링크. 여기서 Uploading a file to an Amazon S3 bucket 항목을 참고했다.
 

Creating and using Amazon S3 buckets - AWS SDK for JavaScript

To create a directory for the object, use the format directoryY_NAME/OBJECT_NAME.

docs.aws.amazon.com

+ Recent posts