wero
2차 프로젝트때는 flo라는 음악스트리밍 사이트를 클론을 하는 프로젝트를 했다. 처음에 팀 프로젝트 이름을 무엇으로 해야될까 고민하다가, 여러가지의 이상하고 재밌는 의견들중 wero라는 이름으로 결정되었다.
“코로나시대의 살아가는 당신의 지친마음을 음악으로 wero한다!”
“우린 더 좋은 개발자가되어 더 높은곳으로 Wero!”
2차 프로젝트 때는 1차와 비교해서 바뀐점들이 몇가지 있었다, 프론트엔드들은 여러가지 새로운 기술들을 배워서 적용해야됬고, Library를 사용을 자제하고 기능들을 직접 구현해야됬다, 또한 멘토분들께서도 1차때 했던 기능과는 다른 기능을 만드는데 집중하라고 추천을 해주셨다.
1차프로젝트때는 로그인, 회원가입, 그리고 기본적인 마이페이지를 만드는 기능을했었기 때문에, 이 기능들 말고 뭘 해야될까 고민하다가, 팀원들과 얘기하다가 어쩌다보니 메인페이지를 맡게되었다. 어떻게보면 프로젝트와 얼굴과 같은 메인페이지여서 잘할수있을까 하는 걱정이 들었지만 끝나고 나서 생각해보면 결과물 자체는 나쁘지 않은것같다.
사실 메인페이지가 끝나고 보관함 그리고 사용자의 취향에따라서 메인페이지 나타나는 앨범및 곡들의 정보가 바뀌는 기능을 넣을려고했지만. 슬라이더 기능 자체도 여러가지로 쉽지않았고 데이터를 가공해서 display하는것 또한 처음하는 나로서는 쉬운작업이 아니여서 예정되었던 많은 기능을 넣지 못했던것은 조금 아쉬움으로 남는다.
mainPage
carousel slider
그래서 1주차가 끝날무렵 어떻게든 메인페이지는 완성해야겠다는 생각으로 임했다. 플로 메인페이지에 가보시면 알겠지만 거의 대부분이 슬라이더 기능으로 곡들 및 앨범들이 보여지고있다. 이번 프로젝트때 많은 기능들을 못했지만 carousel slider 기능을 어떻게든 라이브러리를 사용하지 않고 만들어야겠다 생각했고 결과물은 나쁘지 않았던것같다. 유튜브나 구글에 검색해보면 여러가지 참고자료들이 많이 나온다. 그중에서 민아님께서 추천해주신 영상 자료가 제일 도움이 됬던것같다.(감사합니다 민아님ㅠㅠ) 처음에는 어떻게 시작해야되는지도 몰라서 막막했는데, 의외로 슬라이더 기능자체는 어려운 기능이 아니였고, 적적하게 css와 간단한 function을 합치면 쉽게 구현되는 기능이였다. css에서 transform property, translateX를 사용해서 클릭됬을때 return() 위에 선언된 function에서 일정의 값을 받아서 움직이는 형식으로 하면 슬라이드 기능자체는 구현된다. 거기서 transition 값을 사용하면 슬라이드될때 더 자연스럽게 되는것을 표현할수있다.
data 받아서 가공하기
carousel slider 못지 않게 도전이 되었던부분은 data를 받아서 가공해서 display하는것이였다. 예를들면 40개의 노래 data를 받아서 8개씩 짤라서 5개의 슬라이더 섹션으로 display한다거나 10개씩 짤라서 두개의 섹션으로 나눈 슬라이더를 표현한는것. 이 부분 또한 뭔가 slice나 filter 함수를 써서 하면되지 않을까 하는 생각이 들었는데 구체화 할려니까 쉽지는 않았다. 이 부분에서는 태현님과 장현님에게 도움을 받아서 해결할수있었다. 먼저 for(i=0,i<2;i++) 반복문을 이렇게 선언하면, i<2는 2개의 섹션으로 나눈다는 뜻이고 for문안에서 empty array에 push를 해주는데 slice이런식 받아온 데이터의 개수를 slice하는데 slice함수안에 (i*5, i*5+5) 이렇게 하면 처음 for문이 돌아갈때 0번째부터 5번째 곡정보를 첫번째 섹션에 넣어주는 조건이 완성이된다. 슬라이더 마다 나타나는 갯수나 섹션이 달라서 이 조건을 잘활용하면 data를 가공할수있다. 근데 한가지 더 문제가 있었다.
NEW
functional component, hooks, dependency…
2차 프로젝트에서 새로 배웠던 기술중 하나는 함수형 컴포넌트였다. 클래스형 컴포넌트와는 사용법이 많이 달랐는데, 요소나 객체를 선언하고 관리하는방법 자체가 조금 달랐고. lifecycle을 관리하는것도 달랐다. hook은 함수형 컴포넌트에 안에서 react state와 lifecycle을 연동해주는 역할을 한다고하는데. React에 4가지 built-in hooks중 하나인 useEffect는 클래스형 컴포넌트에서 ComponentDidMount와 ComponentDidUpdate를 합친 기능을한다. useEffect와 fetch를 함께 사용해서 서버에서 데이터를 받아오고 이제 이 데이터를 가공해야되는데, 위에서 말한 문제가 생겼다. 받아온 데이터를 이제 가공해야되는데 이걸 useEffect밖에서 가공할려고하면 에러가 뜬다, 그래서 useEffect안에있는 fetch함수안에서 받자마자 데이터를 가공해서 empty array안에 넣어줘야 에러가 사라진다. 아직 정확히는 모르지만 hooks를 사용하는데는 몇가지 규칙이 있는데 그중 하나는 최상위에서만 hook을 호출해야되는것 근데 hook으로 받아온 데이터를 바꿀려고 하면 에러가 났던것이다. 아마 최상위에서 불러오면서 바로 데이터를 바꿔주고 empty array 에 넣어 줘야 한다. 한가지 더 기억해야될것, useEffect의 첫번째 인자는 function이 들어가고, 두번째인자에는 dependency가 들어가는데 여기에 들어간 값이 변경될때마다 실행 되게끔 해주는 역할을 하는데, 두번째인자는 비어있어도 상관이 없을때도 있지만, 내 경우는 dependency를 설정을 안하면 무한루프를 돌면서 에러가 뜬다. dependency설정을 잊지말것.
styled-components는 또 뭐야
2차 프로젝트때는 새로운 기술을 정말 많이 사용해보았다. 그 이유중 하나는 이 기술들이 현업에서 많이 쓰이고 있다는 얘기를 멘토님들께서 해주셔서 동기들끼리도 “그래 지금부터 습관처럼 써봐야지” 라는 마음으로 2차때 새 기술들을 많이도입했던것같다. 그중 하나는 styled-components. 쉽게 말하면 Sass 업그레이드 버전.. 지금까지 front를 꾸미는 기술의 변천사는 ‘css -> Sass/Scss -> styled-components’이와같다. 처음에는 어떻게 쓰이는지 정말 헷갈리고 굳이 이걸 이렇게 사용해야되나 싶었지만, 조금 쓰다보니 한 파일에서 모든 스타일들을 관리해서 더 좋았던것같고 따로 css혹은 scss파일을 만들어서 왔다갔다 할 필요 없는것도 좋았다. 쓰다보니 jsx안에 html기본 태그들은 없고 거의다 styled-components로 생성된 태그들만있었다.
그놈의 rebase
scss에서 styled-components로.. 클래스형 컴포넌트에서 함수형 컴포넌트로.. 익술해질만 하면 새로운 기술을 적용했는데 2차 프로젝트에서 그런 기술이 또 하나있었는데.. 그것은 git rebase.. rebase는 지금까지 commit했었던 history를 수정할수있고 기준자체를 바꿔버리는 역할을한다 잘못사용하면 시간여행을 해서 초기로 돌아가거나 파일이 다 없어지거나 하는 불상사가 일어날수있다.. 그런데 그것이 실제로 일어났습니다..
처음에는 나를포함한 많은 동기들이 시간여행을해서 파일이 다 날라가거나 작업했던게 날라가는 경우도있었다, 그리고 계속해서 conflict가 나서 rebase가 진행이 안되거나 꼬이는 경우도 있었지만, 이럴때일수록 침착하고 진행하면된다.. rebase를 시작하고 상황이 자꾸 이상해지고 해결이안된다면 git rebase — abort를 사용해서 rebase 진행전으로 돌아가면된다, 그리고 rebase(나같은경우는 revert썻다가)했다가 시간여행으로 파일이 다 날라가버리면, 침착하고 git reflog쳐본다.. 그러면
git 내역이 이렇게 나올텐데 git reset — hard HEAD@{2} 혹은 git reset 71572a8을하면 날라가버리전으로 복원된다..ㅠㅠ
conflict가 나면 당황하지말고 error가 난 화면을 잘읽어보면 conflict해결하고 git add 혹은 remove하라고 되있는데 이과정을 계속하다보면 해결된다(이과정중에 파일이 초기화된것처럼 보일수있는데 conflict를 해결하고 Add하기를 반복하면 원래대로 돌아온다)
git add . -> git commit -m “” -> git checkout main -> git pull origin main -> git checkout feature/nameName -> git rebase -i main
나는 이 순서로 rebase를 진행했던것같다..
redux & component recyle
새로 배운 기술중 Redux라는 기술이있었는데..
죄송합니다 지영님..ㅠㅠ
Redux는 상태관리 라이브러리다. 컴포넌트들 안에서 관리해야될 상태 로직들을 분리시켜서 관리가 가능한데, 컴포넌트들을 거치지않고도 상태값을 전달 할수있는점이 좋다. 쉽게 보면 중앙 관리 시스템 인것같다. 아쉽게도 이번에 Redux는 사용하지못했다..
component를 재사용하는것도 더 체계적으로 할수있었을텐데 그러지 못했던것같다..
team wero
1차 프로젝트도 팀워크가 정말 좋았는데, 2차때는 다들 재미있고 농담코드도 비슷하다보니까 계속 정신 나간것처럼 계속 웃으면서 했던것같다. 결과적으로 봤을때는 많이 아쉬운 부분이 남는다, 맡았던 부분을 많이 끝내지 못했고 백엔드와 소통을할때 기본적으로 어떻게 맞춰봐야될지 그리고 백엔드에 관한 기본적인 지식이 많이 부족했어서 조금 어려움이 있었다.
1차때 에어비앤비에서 했던거랑은 다르게, 2차 프로젝트때는 공유 오피스를 빌려서했는데 더 오피스 분위기에서 할수있어서 좋았다. 단점이라면, 새벽까지 할때는 택시잡아서 가야되기도하고, 또 중간에 폭설이 몇번와서 집에 못가고 고립된적도있다.. (위에 저때는 작업하다가 그냥 오피스에서 의자 붙여놓고 잤었음)
그래도 정말 즐겁게 진행했던 프로젝트이고, 많은 새로운 기술들을 경험하고 또 적용도해봐서 많은 경험이 된것같다. 다음 프로젝트 때는 이번에 느끼고 경험한것을 바탕으로 더 깊게 프로젝트를 진행할수있을것같다.
