📋 나의 두 번째 프로젝트
💡 팀명 : FLOrida
- FE : 김진영 김충만 임지영 최승철
- BE : 김교은 이신희
- 프로젝트명 : FLOrida (FLO 사이트 클론)
- 개발기간 : 9/19(월) ~ 9/30(목) 14:00 (12일)
사용한 기술 및 라이브러리
FE :JavaScriptReact.jsstyled-componentreact-h5-audio-playerMUI등등
BE :Node.jsJavaScriptMySQLExpress.js
이번엔 팀장을 따로 정하지 않고 진행했다.
저번 프로젝트와 같이 FE 4명, BE 2명으로 이루어진 팀으로 진행했다.
🔧 작동 영상과 설명을 보려면
여기를 클릭하세요! (포트폴리오로 이동)
1. 🤔 사이트 선정 이유
1차 프로젝트가 끝나고 어느 정도 자신감이 붙은 나는 평소 취미인 음악 감상과 관련된 사이트를 클론 해보고 싶다고 생각하고 있었다.
11일 안에 완성할 수 있을 정도로 약간은 덜 복잡하고, 그렇다고너무 가볍지만은 않은 사이트를 찾다가 FLO를 찾게 되었다.
팀원 분들께도 의견을 냈는데 팀원분들도 모두 찬성하셔서 FLO를 클론하기로 결정되었다.
내가 흥미있는 분야를 개발하니까 프로젝트를 진행할 때도 열정이 올라왔었던 것 같다ㅋㅋㅋ
2. 🤓 먼저 생각해라
1차 프로젝트를 진행하며 느낀게 있다.
바로 이번 프로젝트는 먼저 생각하고 시작해야겠다 라는 점이다.
1차 프로젝트인 ROYCE 초콜릿 클론 프로젝트를 진행할 땐, 첫번 째 프로젝트라 쓸데없이 자신감만 넘쳐서 "할 수 있겠지" 라는 마인드로 전체 구조를 생각하지도 않고 무작정 시작했었다.
그러다보니 백엔드와의 통신 과정이 내가 생각한 부분과 달랐던 부분도 있었고, 백에서 구현할줄 알았던 기능이 내가 구현해야하는 경우도 있어서 코드를 수정해야할 일이 있었다.
그래서 나는 이번 프로젝트는 백엔드 분들과 소통하고, API 명세서를 보며 내가 만들 음악 플레이어와 보관함, 보관함 상세페이지의 기능을 어떤 식으로 구현할지 간략하게 정리하고 시작했다.
물론 프로젝트를 진행하다보니 중간에 백엔드와 조율해야하는 부분도 있었지만, 그래도 먼저 생각하고 기능을 구현하니 1차 프로젝트보다는 훨씬 수월했다.
3. 💻 기억에 남는 코드
const shuffle = () => {
if (JSON.parse(sessionStorage.getItem("tracks")).length) {
const randomTracks = [...musicTracks].sort(() => Math.random() - 0.5);
if (randomTracks[0] === musicTracks[0]) {
const lastIndex = randomTracks.length - 1;
const randomValue = Math.floor(Math.random() * (lastIndex - 1) + 1);
const temp = randomTracks[0];
randomTracks[0] = randomTracks[lastIndex];
randomTracks[lastIndex] = temp;
}
setMusicTracks(randomTracks);
}
}기억하고 싶은 코드는 현재 재생목록 셔플 버튼의 로직이다.
그냥 배열을 섞기만 하면 배열 순서가 바뀌지 않는 경우도 있어 무조건 배열 구조가 변경되도록 구현했다.
생각보다 로직 자체는 쉽게 짰지만 어려웠던 이유가 섞은 배열을 setState를 통해 현재 트랙값으로 설정하려고 하는데 적용이 되지 않아서였다.
알고보니 그 이유는 setState의 인자에 순서만 바뀐 원래의 state값을 넣으면 같은 state로 인식해서 반영이 되지 않기 때문이였다.
때문에 구조 분해 할당을 통해 새로운 배열을 선언하여 state를 설정해주어서 해결할 수 있었다.
4. 📌 성장
이번 프로젝트에서는 이전보다 정보 탐색 및 활용 능력이 크게 늘어난 것 같다.
FLOrida 프로젝트를 진행하며 처음 사용해본 react-h5-audio-player 사용법, 또 마주친 수많은 에러 등을 검색해가며 점점 인터넷에서 정보 탐색 능력을 기를 수 있었다.
이전 프로젝트에서도 다양한 라이브러리, 카카오 주소 API 등 다양한 걸 인터넷에서 찾아 사용했지만 이번 프로젝트를 진행하며 점점 정보를 탐색하고 활용하는 속도가 빨라지는걸 느꼈다.
사람은 적응의 동물이라던데, 앞으로도 새로운 기술을 사용하는 것에 두려움을 갖지 않고 매일처럼 성장하는 개발자가 될 것이다.
5. 📌 반성
반성할 점은 포트폴리오에도 작성했다 싶이 아무래도 팀원 간 소통의 부재와 비효율적이고 명확하지 못했던 프로젝트 계획이 아니었을까 싶다.
하지만 나는 이 트러블을 성장의 발판으로 생각하여 다음 프로젝트 때부터는 소통을 중요시하고 프로젝트 계획을 명확히 짜고 시작할 수 있게 되었다.
또 이 글을 재작성하는 시점은 JUSTCODE 과정이 거의 끝나가는 10월 말 즈음인데, 1차 프로젝트 때도 마찬가지지만 이제 와서 보면 내가 왜 이렇게 작성했지? 싶을 정도로 가독성이 떨어지는 코드들이 많다.
현재는 많이 고쳐졌지만 앞으로 더욱 더 가독성이 좋은 클린 코딩을 하고 싶다.
6. 📌 후기
1차, 2차 프로젝트를 진행하며 하루종일 노트북 앞에 앉아있었다.
잠시 딴짓을 하기도 했지만, 거의 대부분의 시간을 집중하며 보냈다.
힘들기도 했지만 이 결과물들을 보니 프로젝트를 시작하기 전까지 걱정만 안고있었던 내가 이렇게까지 성장할수 있었다는 사실이 너무나도 신기했다.
이처럼 성장한 나의 모습을 바라보는건 너무나도 뿌듯한 것 같다.
앞으로도 계속 성장하는 개발자가 되어 이 감정을 매일매일 느끼고싶다.
