이번 프로젝트는 이래저래 혼자서 해낸 것들이 없었다
물론 모든 프로젝트들이 남의 손을 빌어서 만들어진 것들이 많지만 이번에는 그리 어렵지 않은 것들로 다른 사람들의 도움을 많이 받았던 프로젝트였다ㅜㅠㅜㅠ
번아웃? 이런건 아닐테고 사실 처음부터 로직을 짤 때 고른 예제가 잘못됐다고 생각한다. (는 무슨 다시 생각해보니 세미번아웃 맞음;; 아주 익숙한 맛이었따 흐앙)
그리고 이번엔 좀 집중을 하지 못했고 4일 내내 타입스크립트 공부하느라 쩔쩔맸다가 바로 닥친 프로젝트라서 더더욱 집중하지 못한 프로젝트였다고 생각한다...
그리고 만약에 순수하게 자바스크립트로만 만들었다면 좀 쉬웠었을 것같은데 고려해야할 점이 많았었다.
또한 map안에 map을 넣는 실수로 인해서 무한로딩이 되었던 것도... 아쉬웠다
그 문제로 1시간을 날릴 줄은 몰랐기 때문이다...8ㅁ8...
내일 있을 발표회가 끝나면 next.js로 들어갈텐데 그때 next.js강의는 찍먹만 하고 react공부를 더 해야겠다...
useState가 값을 전달해주는건 알겠는데 정작 쓰려면 이해를 못하는 순간이 자주 와서... 너무 슬프다 씁
redux도 구조도는 다 외웠는데 막상 입력하려면 또 안되구...
여러모로 고민되는 부분들이 많은 한주였다.
그래도 팀원분들 덕분에 미숙하고 완성되진 않았지만 기능적으로는 구현할 수 있었다고 생각한다...!
그냥... 미안혀... 더 많이 배워와서 엄청 쩌는 개발자가 되어서 만나요...ㅜㅜ
다음 프로젝트는 정말 최최최종 프로젝트인만큼 다른 사람들의 발목을 잡지 않을만큼 잘하는 사람이 되고싶다....ㅜㅜ
일단...일단... 코드는 공유...!
리액트로 검색창을 만들기 위해서 작성된 것으로 띄어쓰기를 하지 않아도 검색이 가능한 검색창을 만들었다.
코테에서 공부했었던 replace를 쓰니 말끔히 해결되었었다.
음... 그리고 검색 로직은 map과 filter로 해결했는데, 다음번에 여러 조건이 걸리면 reduce를 사용해보라는 조언이 있어서 공부할 때 써봐야겠다...
그리고 검색기능이 react공부하는데 있어 필요한 filter, map, reduce 세 메소드를 사용할 수 있다고 하다보니...!
공부할 때 해당기능을 구현하는걸 한번 더 만들어봐야겠다고 생각이 들었다...ㅜㅜㅜㅜ
const Search = () => {
const [search, setsearch] = useState("");
const [result, setResult] = useState("");
const musicsdata = useAppSelector((state) => state.musics);
const dispatch = useAppDispatch();
// 입력값을 가져와서 소문자로변경
const getValue = (e: any) => {
setsearch(e.target.value.toLowerCase());
};
// 띄어쓰기하지 않아도 검색할 수 있게 변경
const filterTitle = musicsdata.popular.filter((item: any, index: any) => {
return item.title
.toLowerCase()
.includes(result.toLocaleLowerCase().replace(" ", ""));
});
// 애니메이션
useEffect((): any => {
Aos.init();
return () => dispatch(resetPlaylist());
}, []);
return (
<Background>
<SearchWrap>
<SearchTitle>원하는 플레이리스트를 검색해보세요.</SearchTitle>
<SearchInputBox>
<SearchInput
type="text"
placeholder="노래 제목을 입력해주세요"
value={search}
onChange={getValue}
/>
<SearchButton
onClick={() => {
setResult(search);
}}
>
<Icon kind="search" color="#ffffff"></Icon>
</SearchButton>
</SearchInputBox>
{filterTitle?.map((item: any, index: any) =>
getValue.length !== 0 ? (
<MusicContainer
key={item.id}
index={index}
data={item}
genre="popular"
></MusicContainer>
) : null
)}
</SearchWrap>
</Background>
);
};
export default Search;음 그래서 기능적으로 반성하자면 그랬고 사실 이번에 처음 팀장을 하게 되었는데, 이전 혹은 이이전 팀장분들이 전달해주신 것들로 작성한 것들이 많이 도움되었다. 다들 허락해줘서 고마워욕....!!!
정리하는 법도 리드미에 기록하는 것도 배포하는 것도!!!! 정말 익숙하지 않았는데 어떻게든 해냈다는 점에서 의의를 두려고 한다...ㅜㅜ
나중에 협업할 때 리더가 된다면 이렇게 해야하는구나, 이런 점을 고려해야하는구나, 나중에 정말 실력이 좋은 팀원들을 만난다면 이렇게 흘러가겠구나 라는 점을 좀... 미리 경험한 것 같다.
담에는 소통잘하는 리더도 좋지만 실력도 좋은 리더가 되고 싶다...ㅜㅁㅜ.....!!!!
