새내기때부터 항상 웹개발에 기웃기웃대면서, 간단한 프론트 지식과 여러번의 리액트 찍먹 경험, 그리고 인턴과정을 통해 한달남짓의 백엔드 주니어 개발자 생활을 해보았습니다.
주변에서 리액트에 백엔드 경험이 있으면 풀스택아니냐…고 해주시던데, 만들어진 api를 어떻게 웹이 뿌릴 수 있는지에 대해서는 도통 알지 못했기 때문에 휴학중 심심하던 차 하루 날잡고 풀스택을 시도해보았습니다.
목표는 인터넷에서 주워온 리액트가이드 문서 “한 입 크기로 잘라먹는 리액트” 에서 well known 예제인 '할일 관리 앱’을, 백엔드 DB와 연결하여 제어하는것으로 잡았습니다.
프론트는 리액트를 사용하였으며, 백엔드는 CCP 프로젝트에서 다루고 있는 python+fast api, DB는 maria db(+sql alchemy orm)를 사용하였습니다.
개발 순서는 다음과 같습니다.
-
리액트 앱을 빌드한다. (11:00~11:30)
-
앱이 빌드되는동안 DB를 세팅, fast api를 사용해 백엔드 서버를 올린다. (~11:30)
-
설명글을 보고 UI를 복사붙여넣기 한다(12:00)
-점심시간-
-
DB에 데이터를 추가하고, 백엔드에서 read api 작성(13:00~13:40)
- 이부분이 생각보다 오래걸렸습니다…
-
read 한 내용을 프론트에서 렌더링(~14:40)
- 아무것도 안뜨는데 왜 안뜨는지 에러를 찾기 어려웠습니다.
- 프론트 개발할땐 항상 개발자도구를 켜둬야함을 절실히 깨달았습니다.
- CORS 에러임을 발견하고 GPT의 힘을 빌려 문제를 해결했습니다.
-
나머지 API 구현(Create, Delete, Update) (16:00)
- 대부분이 CCP에서 이미 구현한 내용인데도 두 달 정도 지나니 기억이 나지 않아 고생했습니다.
- 개발문서의 필요성을 다시한번…
- 특히 CCP같은 장기프로젝트는 중간에 중단했다 돌아오는게 있으니 미래의 자신을 위해서라도 꼭 필요합니다
-
얼레벌레…얼기설기… API 적용 (16:30)
- 하나씩 구현할때마다 이게 왜 되지??? 의 연발
- 이 부분을 자세히 알고싶었는데 퇴근시간(17:00)에 쫓겨서 일단 구현만 했습니다.
- 다음번에 구현한다면 react 강의가 아니라 풀스택 강의를 찾아서 근본을 알아내야겠습니다.
완성!
후기는 다음과 같습니다.
- 생각보다 백엔드 개발환경 세팅에 오래걸렸습니다. 내 손으로 작성한 개발문서가 참 중요합니다.
- 리액트에 대한 이해가 부족하다보니 깔끔하게 구현되지 않은게 많습니다.
- 컴포넌트? 매개변수? 들이 계속 전달-전달-전달되는게 불편합니다. useReducer? 같은 최적화가 필요합니다.
- 데이터가 전달되긴 하는데 상태가 변할때마다 그부분만 렌더링할 수 있다는 리액트의 장점이 전혀 적용되지 않습니다. 변화를주고(api를 호출하고)서는 반드시 f5를 눌러야만 화면에 적용됩니다. 이 부분을 해결해야 합니다.
개발 레포는 다음 위치에 있습니다.
혹시 코드 읽어보시고 조언해주시는 부분이 있다면 감사하겠습니다.