본문 바로가기

엄마의 성장일기🌱

🌱 엄마의 코딩성장기록 Day 133 - [개발 일기] 유튜브 클론 코딩 배포 성공! AWS S3 에러 격파와 리액트(React)로의 새로운 시작

오늘은 내 개발 여정에서 꽤 의미 있는 이정표를 세운 날이다.

어제 오늘 나를 괴롭혔던 유튜브 클론 코딩 프로젝트를 드디어 세상 밖(인터넷)으로 배포했다!

🧱 끝없는 에러, 마치 벽돌 깨기 게임처럼

처음에는 '그냥 올리면 끝이겠지'라고 가볍게 생각했다. 하지만 배포의 세계는 호락호락하지 않았다.

  • AWS IAM 키 문제: 권한 설정부터 인증까지 내 인내심을 테스트했다.
  • 환경 변수(Environment Variables): 분명 설정했는데 자꾸 undefined로 뜨는 바람에 서버 로그를 몇 번이나 뒤졌는지 모른다.
  • S3 영상 재생 에러: 업로드는 성공했는데 정작 영상이 보이지 않을 때의 그 막막함이란...

하지만 포기하지 않고 에러 로그를 한 줄 한 줄 뜯어보며 수정해 나갔다.

하나를 해결하면 또 다른 문제가 튀어나왔지만, 그 과정이 마치 벽돌 깨기 게임처럼 느껴지기도 했다.

결국 마지막 벽돌을 깨뜨린 순간, 내가 만든 사이트에서 영상이 부드럽게 재생되는 걸 확인했다.

“아… 진짜 웹서비스 하나를 내 손으로 완성했구나.”

그 뿌듯함은 말로 다 표현할 수 없다.

테스트용으로 올렸던 데이터들을 MongoDB에서 깔끔하게 정리하며 기분 좋게 프로젝트를 마무리했다.

 

https://wetube-restless-hill-4870.fly.dev/

 

Home | Wetube

 

wetube-restless-hill-4870.fly.dev

 

⚛️ 새로운 도전: 리액트(React)와 useState

배포의 기쁨도 잠시, 나는 바로 다음 단계로 넘어갔다.

이번에는 'React JS로 영화 웹서비스 만들기' 강좌다.

이전까지는 프론트엔드 구조에 대해 깊이 고민해 본 적이 없었는데, 리액트를 접하니 **'컴포넌트로 쪼개는 방식'**이 무엇인지 조금씩 감이 오기 시작했다.

오늘은 리액트의 핵심인 useState를 만났다.

지금은 전체적인 흐름을 파악하기 위해 눈으로 먼저 익히고 있다.

바닐라 JS로 길게 늘어놨던 코드들이 어떻게 효율적으로 변할지 벌써 기대된다.

내일부터는 본격적으로 손을 움직이며 코드를 따라가 볼 생각이다.

🌙 오늘을 마무리하며

유튜브 클론 코딩 배포 성공, 그리고 리액트라는 새로운 시작. 오늘 하루는 정말 밀도 있게 잘 보낸 것 같다.

어려운 문제를 만날 때마다 조금씩 성장하고 있다는 게 느껴진다. 내일도 오늘처럼, 딱 한 걸음만 더 나아가자.

 

#유튜브클론코딩 #배포성공 #AWSS3 #환경변수 #MongoDB #리액트시작 #useState #개발자성장일기