본문으로 건너뛰기
Jun's Portfolio
프로젝트
사이드·

Blog

카테고리와 댓글, 다크모드까지 붙여 본 첫 CRUD 웹사이트

처음으로 React SPA를 만들고 EC2에 직접 배포까지 해봤습니다

블로그 홈 화면. 상단에 Home·Language·Framework 카테고리와 검색·프로필이 있고 본문에 유튜브 영상이 embed되어 있다
글 하단에 달린 댓글 목록
S3에 업로드한 이미지로 프로필을 설정한 화면

이렇게 만들었습니다

Blog는 저의 첫 CRUD 웹사이트 프로젝트입니다. 개발자라면 자신만의 기록 공간이 필수적으로 있어야 한다고 생각했기 때문에 첫 번째 프로젝트로 블로그를 만들어 보았습니다.

무엇으로 만들었나

여기서 첫 React SPA 사이트를 만들었고, 서버와의 비동기 통신에는 Redux Saga를 썼습니다. 글쓰기는 텍스트 에디터 중 하나인 CKEditor로 구현하였습니다. 프로필 이미지는 AWS의 S3에 올리도록 만들었고 AWS EC2 인스턴스로 실제 배포 단계까지 밟아 봤습니다.

Redux Saga에서 겪은 좌절

Redux Saga는 러닝커브를 각오하고 시작했지만, 개발하는 내내 반복되고 장황한 코드 패턴과 생소한 generator 함수에 좌절했던 기억이 있습니다. 지금 돌아보면 이 정도 규모에 Redux Saga를 쓴 것 자체가 비효율이었지만, 덕분에 비동기 통신 개념은 확실히 잡았습니다.

백엔드를 처음 만져 보고

프론트엔드 개발자가 목표였지만, Node.js 환경에서 백엔드를 다뤄 보니 JavaScript의 매력을 새삼 느꼈습니다.
아직 미흡한 점이 많아, 나중에 실제 제 블로그로 쓸 수 있도록 코드를 리팩토링하고 기능을 더할 생각입니다.