1주차 PBL 부트캠프에서 배운 내용을 바탕으로 2주차에는 팀별로 광고 중개 서버를 개발하는 프로젝트를 진행했다.
진행 과정
- AD서버 개발을 위한 프로그래밍 언어, 프레임워크 및 개발 환경을 정하고
- 지난 주에 만든 도식화 및 문장 정리 과정을 바탕으로 실제 우리의 서비스를 개발하는 것
프로그래밍 언어 및 프레임워크 선정
첫날엔 각자 프로그래밍 언어와 프레임워크 등에 대해 공부하는 시간을 가졌다.
나는 백엔드 - 스프링에 대해 조사하였고, 다른 팀원분들은 각각 Node.js와 Django를 조사하였다.
Spring.동연 | Notion
스프링 프레임워크의 장, 단점 및 특징
dusehd1.notion.site
우리 팀은 다른 팀에 비해 한 명이 적은 3명으로 구성되었기 때문에 새로운 기술을 배우며 프로젝트에 적용하기엔 시간이 촉박하다고 생각되어 각자 잘 사용할 수 있는 언어를 사용하여 개발하기로 했다.
나는 프론트엔드를 맡았는데, 리액트에 자바스크립트를 사용하였고,
백엔드는 스프링에 자바를,
DB는 MySQL을 사용하여 진행하였다.
개발 환경
그래도 우리 모두 써보기만 한 기술들로 프로젝트를 진행하면 재미없으니까, Docker를 사용해 배포해보기로 했다.
도커에 대해 전혀 무지해서 개념 이해만 하는데도 오랜 시간이 걸렸다.
아무튼 이렇게 프론트 - 백엔드 - DB를 하나의 컨테이너에 넣어 연결했다고 생각했는데 .. 연결 상의 문제가 있던 걸 확인하지 못했다.
단순히 저렇게 올리기만 하면 될 줄 알았는데 마지막날 CORS에러가 우리를 괴롭힐 것을 알지 못했다..
앞으로는 더미데이터를 통해 프론트엔드 - 백엔드 - MySQL의 연결을 확인한 후 프로젝트를 진행하는 것이 좋을 것 같다.
MySQL에 string "Hello World" 저장 -> 프론트에서 API Call -> 백엔드에서 MySQL 내 데이터를 꺼내와 프론트에 전달
하는 과정을 꼭 마친 뒤 프로젝트를 진행하자.
API Documents 작성
프론트엔드와 백엔드 간의 통신이 필요할 시 참고할 문서인 API Documents를 작성하였다.
프로젝트 초반에는 무슨 데이터가 필요할 지 확고하지 않아 중간중간 많은 수정이 이루어졌다.
앞으로 백엔드 개발자와 함께 할 시 혼선을 줄이기 위해 처음에 많은 시간을 투자하여 API Documents를 딱 정해놓고 중간에는 적당히 수정할 수 있도록 해보도록 해야겠다.
컨벤션 정리
를 해야하는데 프론트를 나 혼자 거의 도맡아 하게 되어 컨벤션 문서 작성에 큰 신경을 쓰지 않았다.. 반성!
이외에도 최대한 간결하고 알아보기 쉬운 함수명을 만들고자 다짐하였고 꽤 괜찮은 결과가 나왔다고 생각한다!
그래도 앞으로 협업할 때는 이런거 하나 때문에 시간을 낭비할 수 있으니 미리 정하고 그에 맞춰 코드를 작성하는 것이 중요해 보인다.
프론트엔드 제작
활용한 기술들
- adminLTE (부트스트랩)
- 다운로드를 통해 사용이 가능한 부트스트랩이다. 자주 사용하는 React-bootstrap과 비교했을 때 내가 코드에 관여할 수 있는 부분이 더 많다고 생각된다.
- https://adminlte.io/
- react-bootstrap (부트스트랩)
- 다양한 버튼, 모달 창, 캐러샐 등을 만들 때 쉽고 편하게 가져올 수 있는 라이브러리이다. 이름처럼 리액트의 대표적인 부트스트랩이다.
- https://react-bootstrap.netlify.app/
- fontawesome (웹 아이콘)
- 이전부터 많이 사용해온 웹 아이콘 대표 사이트이다. 다양한 아이콘들이 있어 편하게 사용 가능하다.
- https://fontawesome.com/
- axios (통신)
- 백엔드와 통신하기 위해 필요한 라이브러리이다.
폴더 구성
한 화면에서 모달창을 띄우는 방식으로 진행되기 때문에 mainPage.js에서 광고 추가, 광고 테스트, 광고 목록을 모두 보여준다.
광고 등록, 광고 테스트 등의 많은 function이 필요해 코드가 길어진 AdModal, testModal 컴포넌트는 각각 testModal.js, adModal.js는 파일을 분리하여 가독성이 높게 만들었다.
삭제 여부를 묻거나 상세 정보를 보여주는 간단한 DetailModal, DeleteModal 컴포넌트는 modal.js에 한 데 모아 저장하였다.
앞으로 코드가 많이 길어진다면 /modal 폴더를 만들어 그 안에 담아도 되겠다.
자주 사용하는 Button컴포넌트는 button.js 파일로 만들어 코드를 간결하게 만들었다.
검색을 위한 SearchForm컴포넌트는 searchForm.js 파일에 만들었다.
화면에서 보여줄 표는 cardContainer.js에 저장하였다. CardContainer 컴포넌트에서는 표의 기본 틀 및 서버와 통신을, Card 컴포넌트에서는 앞서 받아온 데이터를 나타내주는 형식으로 만들었다.
컨셉
처음 공부를 시작하고 나서부터 나는 대한민국을 대표하는 IT기업인 네이버에 취업하고 싶었다.
하지만 생각보다 내가 네이버에 대해 아는 것이 없다고 생각이 들었고, 이번 기회에 '네이버라면 이런 서비스를 어떻게 꾸밀까?'라는 생각을 가지고 디자인해보았다.
개발자들을 위해 네이버에서 공개한 색상 코드를 사용하여 기본적인 색감을 잡았고, 직접 로고도 만들어보았다ㅋㅋㅋ
솔직히 표의 action 부분의 '수정' 버튼을 어떤 색으로 해야할지 감이 잘 오지 않아 파란색으로 칠해버렸다.
시간관계상 버튼의 디자인을 제대로 마치지 못한 것도 아쉬웠다.
시간이 남아돈다면 재미삼아 redux를 사용해서 간단한 로그인 기능을 만들어보고 싶었는데 만들지 못해 아쉬웠다.
(로그인을 누르면 '무적4팀' 이름이 나오는 간단한 눈속임)
미리보기
CORS 에러
개발 4일차, 대략적으로 틀이 다 갖춰지고 백엔드와 통신이 잘 되는지 확인해보려 했는데 CORS 에러가 났다.
분명 Postman으로 확인해볼 때도 데이터가 잘 날아왔고, 프론트엔드에서의 요청도 멀쩡한데 왜 에러가 났지? 했는데 브라우저 자체 오류라고 한다.
처음 보는 에러라 당황했고, 백엔드 설정 변경 및 프록시 설정 등 다양하게 오류 수정을 위해 노력했었다.. 프록시 설정 한번 잘못 건드려서 노트북의 모든 네트워크가 차단되는 일들도 있었다ㅋㅋ 그건 멘토님이 해결해주심
발표날은 어쩔 수 없이 백엔드와 DB는 Docker에서, 프론트엔드는 내 로컬에서 실행하는 것으로 마무리지었다.
그렇게 고생을 했는데도 아직 CORS 에러에 대해 잘 알지 못한다. 반성ㅠㅠ
나중에 CORS 특집으로 오류에 대해 한번 찾아봐야겠다.
최종 발표
최종 결과물
https://github.com/KMU-PBL-team4/front
GitHub - KMU-PBL-team4/front: 무적프론트
무적프론트. Contribute to KMU-PBL-team4/front development by creating an account on GitHub.
github.com
후기
엄청난 경험이었다!
경험 많고 노련하신 멘토님들과 능력있는 팀원들 덕분에 많은 동기부여를 얻었고 시야가 한 층 높아진 느낌이 들었다.
특히 이전까진 주로 혼자 프로젝트를 해와서 막히거나 불편한 부분들을 지적해주시고 조언해주셔서 감사했다.
대장님께 내 블로그(https://cyblog.fly.dev/)도 보여드렸는데, 많이많이 지적해주셔서 감격스러움과 앞으로 갈길이 멀다는 생각이 복합적으로 들었다. 현직자 베테랑이 내 프로젝트를 보고 지적해주시다니! 피와 살이 될 피드백이었다.
프로젝트를 함께 한 백엔드 친구와도 앞으로 공모전을 같이 나가기로 약속을 했고 이외에도 다른 친구들을 많이 알게 되는 등 얻은 것이 정말 많았던 2주였다. 인생 최고의 2주였음!
마지막날 인터뷰도 했었는데.. 어떻게 찍혔는지도 잘 모르겠다ㅋㅋㅋ 카메라 앞이라 좀 긴장했음,,
다른 멘토님께선 AI에 대한 강연도 해주셔서 덕분에 깃헙 코파일럿과 함께하는 개발자가 되었다.
이전까진 ChatGPT를 사용하는 개발에 대해 불편한 시각을 가지고 있었는데(모든건 내가 직접 개발해야지 하는 바보같은 마인드였음), 신기술을 활용해 효율성을 높이는 것도 하나의 능력이라는 생각으로 바뀌어 요즘은 적극적으로 AI를 활용하고 있다. 특히 이번 프로젝트에서 ChatGPT의 많은 도움을 받아 마무리할 수 있었다.
또한 수없이 많이 만난 에러들을 전부 블로그에 정리해보라는 조언도 해주시고, 개발자로써 알고 있어야 할 프로젝트의 진행 과정 및 프론트엔드-백엔드 간 협업 방법 등 멘토님들께서 툭툭 던지시는 말들이 나에게는 전부 귀중한 양분이 된 것 같다.
2주간 쓴 노션 페이지만 해도 30개가 넘음ㅋㅋ
한창 진로에 대해 고민이 많은 시기였는데, 멘토님들 덕분에 확신이 생겼다.
앞으로도 좋은 일 있으면 연락하고 고민상담 하기로 약속도 함!!
'코딩 > 프로젝트' 카테고리의 다른 글
| npm WARN deprecated tar@2.2.2 에러 (0) | 2024.03.21 |
|---|---|
| [PBL 부트캠프] 1주차 (1) | 2024.01.21 |
| 월간 신천팟 (3) | 2024.01.15 |
| 월간신천팟(2) (0) | 2023.11.16 |
| 월간신천팟(1) (1) | 2023.11.16 |