🍱 한솥도시락 클론코딩

📜 프로젝트 소개

기간 : 2022.09 (1주)

인원 : 1인

주제 : 한솥도시락 사이트 클론 코딩

사용 스택: React.js, Redux, Bootstrap, Express, OracleDB

졸업 전에 프론트엔드 분야를 더 공부하고자 휴학했는데, 마침 그 시기에 열린 교내 웹 교육 프로그램에서 진행한 개인 공통 프로젝트이다. 개인 프로젝트라 전반적으로 설계하고 개발하였지만 프론트엔드 회고록인만큼 프론트엔드 중점으로 회고하겠다.

🤓 리액트를 똑똑하게!

지난 학기에 진행하였던 Movie In Memory에서 컴포넌트 분리를 체계적으로 하지 않아서 불편함을 겪었었다. 고급웹프로그래밍 수업의 텀프로젝트였던 영화관 클론코딩 미니 프로젝트에서도 교수님께 페이지 새로고침에 대해서 지적을 들었었다.

페이지 새로고침 같은 경우에는 window.location.href를 남발했기 때문에 발생한 문제였다. 컴포넌트에서 수정이 발생하면 그 컴포넌트만 새로고침을 하면 되는데 페이지 전체를 새로고침함으로써 컴포넌트가 새로고침 된 것이였다. 학기 중에는 완성에 급급해서 이러한 것들을 신경쓰지 않았는데, 꼭 개선하고 가야 할 부분이었다. 컴포넌트 분리와 부분 리랜더링이 리액트의 장점이라고 생각하는데, 장점을 하나도 제대로 이용하지 못하고 있었다. 앞으로 리액트를 똑똑하게 사용해봐야겠다고 다짐하였고, 한솥 클론코딩은 이런 마음가짐으로 맞이하는 첫 리액트 프로젝트이다.

컴포넌트는 도메인에 따라서 나누어 보았다. MIM 프로젝트를 진행할 때는 페이지를 구성하는 작은 부분들을 전부 component 폴더 하나 안에 때려넣어서 찾기가 많이 힘들었다. 한솥 프로젝트와 같이 도메인별로 폴더를 분리한다면 사진에서 보이는 부분들은 common이나 admin 폴더를 만들어서 폴더 분리를 할 수 있겠다.

🤩 리덕스!

교육에서 프론트엔드를 배우면서 상태 관리라는 개념과 리덕스를 알게 되었다. 일반적으로 리액트에서는 useState를 통해 컴포넌트의 상태를 관리한다. 하지만 컴포넌트 안에서만 공유가능하기 때문에 다른 컴포넌트에서도 그 상태를 사용하려면 props로 상태값과 상태변경값을 넘겨줘야 했다. hook이라는 개념을 이때는 몰랐었기 때문에 MIM 프로젝트때부터 나름 고민해왔던 사항이였다. 또 useState를 남발하니 코드도 너무 길어져서 눈에 잘 들어오지 않았다.
리덕스를 사용하면 하나의 store에 상태들을 저장할 수 있기 때문에 이러한 고민거리들을 해소할 수 있었다. 나에겐 매우 신세계였고 다음에 리액트 프로젝트를 진행하게 된다면 리덕스를 꼭 사용해야겠다고 결심하게 되었다.

😶‍🌫️ 리덕스...?

그렇게 적용한 리덕스는 신세계이면서도 조금 혼란스러웠다. 상태를 관리하려면 초기 데이터를 가지고 있어야하니까 db에서 데이터를 들고와서 가지고 있어야 하지 않나?에서 시작한 꼬리에 꼬리를 무는 의문이 생겨났다. 회고를 하고 보니 hook을 몰랐어서 그런 것 같다. 그래서 이때의 나는 리덕스의 액션으로 데이터를 패치하는 액션도 만들었다. 너무 많은 액션을 만들어서 함수 찾기가 너무 힘들고 헷갈려서 고생 좀 했다. 다시 보니까 함수도 액션이랑 이름이 다르네 이러니까 해맸지...

👩‍💻 프로젝트를 마치며...

의문점이 전부 해소된 것은 아니지만 그래도 과거보다는 리액트를 조금 더 똑똑하게 사용한 것 같아서 뿌듯했다. 이 포스팅을 작성하는 지금도 개선해야 할 사항이 보인다. 그래서 개발자들이 항상 프로젝트를 마치면 회고를 하는 것 같다. 여기에서 1주의 개발 기간 중 무려 하루를 갈아넣어 만든 홈 화면을 확인할 수 있다. 밑의 사진을 클릭하면 DB까지 연동되어 사이트가 어떻게 구동되는지를 확인할 수 있다.