🤷🏻‍♂️이번 달은 어떻게 보냈나?

💻데브코스 강의 수강

2월부터 데브코스 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 2기에 참여중이다.

매일 온라인 강의를 들어야 하기 때문에 평일 낮에는 항상 강의를 듣고, 강의 내용을 내가 원하는대로 변형해서 코드를 작성해 Github에 push하는게 이번달의 주 일과였다. (잔디심기는 중대사항이니까🌿)

이번달은 npm, express 기초와 API 작성 등을 배웠다. 강의 시간 자체도 짧았고, 주제를 깊게 다루지도 않아서 좀 아쉬움이 남는다.

5월부터 프론트엔드 파트 강의가 시작되는걸로 알고 있다. 배울게 많을 것 같아서 기대된다.

👨🏻‍🏫매주 복습발표

지금은 데브코스에서 두 번째 스프린트가 진행중이다. 그리고 매 스프린트마다 새로 배정되는 팀에서 팀원들끼리 매주 날짜를 정해서 복습발표 및 주간회고 공유를 진행한다.

우리팀은 금요일 오전에 슬랙에 모여서 복습발표 허들을 진행한다. 각자 한 주 동안 배운것 중에 인상 깊은 주제를 가져와서 발표하고, 질문과 답변이 오고간다. 이 과정에서 정말 배우는게 많다. 강의보다 복습발표에서 얻어가는게 훨씬 많다는 생각이 들 정도다.

또한 발표할때마다 항상 아쉬움이 남는다. 복습발표를 준비하며 블로그에 복습내용을 정리할 때는 내가 이 주제에 대해 잘 알고있는 것만 같고, 어떤 질문이 들어와도 답변할 수 있다는 근거 없는 자신감이 든다. 하지만 막상 발표를 진행하다보면 내가 횡설수설 하고 있다는 것이 느껴지고, 이 주제에 대해서 내가 얼마나 무지한지 깨닫게 된다. 하지만 그 아쉬움을 발판삼아 매번 더 나은 발표를 할 수 있도록 노력하고 있다.

🔥말해보카 141일 연속 출석!

3월에도 하루도 빠짐없이 말해보카로 영어 공부했다. 하루에 한 시간 정도 부담없이 영어 공부하기에 참 좋은 앱이라고 생각한다.

이제 다시 그랜드마스터 리그에 진입했고, 4월 첫째주가 끝나면 5번째 환생을 하게 될 것 같다.

근 1년간 영어 공부를 한 결과 GPT와 영어로 채팅하는것도 어느정도 익숙해졌고, 특히 노래의 영어가사가 이제는 잘 들린다.

🔥듀오링고 66일 연속 출석!

1월 말부터 듀오링고로 일본어 공부도 하는 중이다. 처음에는 그냥 취미삼아 시작했는데, 어느샌가 하루 루틴에 떡하니 자리잡아서 매일 한 시간씩 투자하게 되었다.

듀오링고에서는 한국어로 일본어를 공부하는 것은 지원하지 않기 때문에, 영어로 일본어를 공부해야한다. 그래서 영어, 일본어 공부를 한꺼번에 하는 기분이 들어서 좀 이득인것 같다.😹

🏊🏻‍♂️꾸준히 수영하기

작년 6월부터 수영을 시작했으니 이제 1년이 다 되어가고, 수영을 못하던 나는 어느새 상급반에서 수영하고 있다.

작년에 SeSAC 과정을 시작하기 전까지만 해도 주5일 개근이었으나... 이제는 듬성듬성 운동하게 됐다.😿

3월 첫째주, 둘째주는 워치를 안차고 수영해서 운동기록이 안됐는데 한 3~4일 정도 수영하러 갔던 것 같다.

4월은 매주 3일 이상 수영하는걸 목표로 해야겠다.

👨🏻‍🔧ANGO 프론트엔드-백엔드 통신 문제 해결

나는 작년 10월부터 올해 2월까지 SeSAC 성동캠퍼스에서 자바스크립트 풀스택 개발 과정에 참여했다.

과정 마무리로 최종 팀프로젝트를 진행했고, 우리팀은 지하철 탑승칸 추천 서비스인 ANGO를 배포해서 지금도 서비스중이다.

기존 배포 환경은 다음과 같았다:

• React app: netlify
• Express server: EC2, EC2 load balancer, Docker
• Database: RDS

처음 배포하고 프로젝트 발표할때까지만 해도 아무런 문제가 없었으나... 백엔드 서버 및 DB를 아무 생각없이 배포한게 문제의 시작이었다.

AWS는 올해 2월부터 할당된 모든 IPv4 주소에 대해 시간당 0.005 달러를 부과하도록 요금 정책을 바꿨다. (Free tier EC2 제외)

나는 https 통신을 위해 EC2 로드 밸런서를 생성해 EC2 인스턴스와 연결했다. RDS의 public access도 열어둔 상태였다. 이 경우 EC2 로드 밸런서, RDS 인스턴스에 각각 IPv4 주소가 할당되기 때문에 시간당 0.01달러가 과금된다. 한달 750시간으로 계산하면 7.5달러, 세금까지 8.25달러로 현재 환율기준 11,000원 정도 과금된다.

고작 한달 11,000원 갖고 호들갑이냐?😾 할 수도 있겠지만... 아무것도 안해도 매달 지불해야하는 요금이고, 배포환경만 개선하면 얼마든지 불필요한 과금을 막을 수 있겠다는 생각이 들어서 배포환경을 다음과 같이 변경하게 되었다:

• React app: Amplify
• Express server: EC2, Docker
• Database: RDS
• CDN: Cloudfront

EC2를 Cloudfront와 연결해서 서버가 https 통신을 할 수 있도록 했고, RDS는 인스턴스를 삭제하고 public access를 disable로 설정해서 IPv4 주소가 할당되지 않도록 했다. 물론 이 경우 EC2 인스턴스와 RDS 인스턴스가 VPC 내부에서 통신할수 있도록 설정해야한다.

이렇게 배포환경을 구성하면 더 이상 AWS에서 요금이 청구되는 일은 없다.

하지만 이번엔 프론트엔드-백엔드 간 통신에 문제가 생겼다. React app에서 아무리 서버로 axios 요청을 보내도 콘솔에는 에러만 출력될 뿐이었다. postman으로 서버와 통신하는건 전혀 문제가 없었기 때문에 머리털이 다 빠져버릴 지경이었다.😿

며칠간의 삽질 후... Cloudfront가 CDN이라는걸 드디어 알게 되었고, response를 캐싱하며, 헤더·쿠키·쿼리스트링 등 다방면에서 통신에 관여한다는 사실을 알게 되었다. 프론트엔드-백엔드 간 통신이 되지 않던 이유는 origin, 즉 EC2 서버로 요청이 갈 때 Cloudfront가 중간에서 헤더·쿠키·쿼리스트링 등을 어떻게 처리할지 설정해두지 않아서였다. Cloudfront 배포의 동작 설정에 들어가서 요청의 모든 헤더·쿠키·쿼리스트링 전송을 허용했고, 지금은 문제가 해결되었다. (아직 쿠키는 해결안된건 비밀)

이 문제를 해결하는 과정에서 SOP, CORS, CDN 등에 대해서 많이 배웠다. 나중에 더 깊게 공부해서 복습발표 주제로 써먹을 생각이다.😸

---

💭이번 달 회고

😸좋았던 것 (Liked)

• 복습 발표
  위에서 말했듯이 새로운걸 많이 배울 수 있는 좋은 시간이다.
  또한 온라인으로만 진행되는 데브코스에서 팀원들과 이런저런 이야기도 하고, 정보공유도 하는 시간이기 때문에 유익하고 보람차다!

• 포스트 새싹
  포스트 새싹은 SeSAC 과정 수료생을 대상으로 멘토링을 제공해주는 프로그램이다.
  내 경우는 SeSAC 과정에 워낙 만족하기도 했고, 강사님이 정말 대단한 분이기 때문에 공고 뜨자마자 바로 프로그램에 지원했다.
  줌을 이용해 강사님께 멘토링을 받았는데 ANGO 코드 리뷰, 개인프로젝트 주제 선정, 서적 추천 등 많은 부분에서 도움을 받았다.
  정말 감사하고 좋은 경험이었다. 박수현 강사님 감사합니다!👍🏻

• 새싹 글로벌 취업연계 신청
  이번에 SeSAC에서 과정 수료생을 대상으로 미국 취업을 도와주는 프로그램을 새로 진행중이다.
  비록 J-1 비자를 발급받고 미국에서 최대 1년간 인턴십을 진행하는 프로그램이지만, 나는 원래 해외취업에 관심이 많았고 지금이 해외에 진출하기에 적기라고 판단해서 신청서를 작성했다.
  인턴십 진행중에 회사 도움으로 H1B 등 비자로 전환돼서 더 오래 일할 수 있으면 좋겠다 하고 희망회로를 열심히 돌리는 중이다.

• 블로그 작성 시작
  복습발표 자료 작성용으로 velog를 시작했다.
  막상 시작해보니 블로그를 왜 쓰는건지 알게 되었다.
  마크다운 문법이 익숙해졌고, 머리속의 생각을 정리해서 기록하는 용도로 정말 유용한 것 같다.
  그리고 참고용으로 이런저런 블로그 포스트를 보는 재미가 쏠쏠하다.
  지금 내 브라우저의 북마크바에는 velog와 요즘IT가 당당하게 한 자리씩 차지하게 되었다.

🤔배웠던 것 (Learned)

• npm, Express 기초

• CJS vs ESM
  왜 아직도 옛날에 쓰던 CJS를 사용하는 사람들이 있는지 궁금해서 공부하고 기록했다.

• Map vs Object
  Key-value pair를 저장할때 Object만 사용했는데, Map은 왜 있는건지 궁금해서 공부하고 기록했다.

• JavaScript의 데이터 타입
  JS에서 문자열(String)은 객체(Object)인지 궁금해서 공부하고 기록했다.

• HTTP 메서드 탐구
  복습발표에서 팀원분이 HTTP 메서드 관련 강의를 듣고, 요점만 정리해서 발표해 주셨는데 정말 유익했다.

• JavaScript 이벤트루프
  이것도 복습발표때 팀원분이 JS 이벤트루프에 관한 좋은 영상을 공유해주셔서, 이벤트루프의 구성과 작동방식에 대해 배울 수 있었다.

🫠부족했던 것 (Lacked)

• 일찍 기상하기
  목표는 항상 9시 기상이지만... 눈 떠보면 언제나 10시나 11시다.

• 클린코드 못 읽은것
  이유는 모르겠지만 항상 시간이 부족하다. 지난주에 도서관에서 클린코드 책을 빌려왔는데 아직 반도 못 읽었다.
  이번 주 안으로 다 읽는게 목표다.

• React 공부
  프론트엔드, 특히 React에 대해서는 내가 아는것이 없다. 그래서 틈틈이 React를 공부해야겠다고 생각했는데 결국 하나도 못했다.😿

🤩바라는 것 (Longed for)

• 두 번째 스프린트도 무사히 마무리하기

• 개발관련 책 한권 더 읽기
  무슨 책을 읽을지 아직 정하지는 않았지만 아마 Node.js 교과서가 될 듯 하다.

• Udemy JS 강의 수강하기

• 개인프로젝트 설계 완료 및 구현 시작
  후보군에 있는 개인프로젝트 주제 중 하나를 선정해서 설계하고, 구현 시작할 생각이다.