😌 마음가짐
초급 리액트 강의를 듣기 시작할 때, 리액트... 부숴주겠다는 마음으로 시작했지만 부서지는 건 나였다. 초급이라 만만하게 봤는데
만만하게 볼 만한 것이 못 되었다.😂 그래도 열심히 강의를 듣고 이해하니 점점 리액트를 이용해 개인 프로젝트를 만들고 싶어졌다.
개인 프로젝트를 만들면서 리액트 사용도 익숙해지고 싶었고, 리액트로 웹 사이트를 만들면서 필요한 기술은 무엇인지 알아내고 배우고 싶었다.
😳 느낀 점
와, 초급 리액트 강의만 듣고 혼자서 만드려니까 너무 힘들었다😂 생각하지 못 했던 장애물들이 툭툭 튀어나오고 넣고 싶은 기능은 많고…
노마드 코더의 리액트 무료 강의는 정말 기본만 알려준 것 같았다( 초급 강의니까 당연하다 ). 개인 프로젝트를 하면서 리액트를 더 심화적으로 배울 수 있는 강의의 필요성을 느꼈다.
리액트 훅이나 다른 다양한 기능들을 배워 편안하게 리액트를 사용할 줄 아는 개발자가 되고 싶다.
🧐 기여도 100% 작업?
노마드 코더 강의를 들으면서
- async, await과 함께 fetch를 사용해 API를 호출했고,
- React Router를 사용해 새로고침(rerendering) 없이 다른 페이지로 이동할 수 있게 했다.
아래와 같은 기능들은 모두 혼자서 작업했다.
- The Movie DB API 호출
- 평점에 따라 상세정보 내 노란 별의 개수 변화
- 돋보기 버튼/검색란 클릭 시 검색창(모달창) 나오게 하기 + 엑스(X) 버튼이나 검색창 아닌 바깥 영역 클릭 시 검색창 닫기
- Slice 메서드 이용해 글자 수와 출연진, 보여지는 포스터 개수 조절
- Slick과 Swiper 라이브러리를 이용해 슬라이더 생성 + 화살표 커스텀
- 포스터 호버 시 영화 줄거리와 상세정보 페이지로 이동할 수 있는 버튼이 나오게 함
- Flex와 Grid 사용해 구성요소 배치 + CSS 애니메이션 이용
앞으로 추가하고 싶은 기능은 다음과 같다.
- 장르별 영화를 볼 수 있는 메뉴 추가
- 검색 기능
다른 리액트 강의를 들으면서 틈틈이 수정해야겠다.
🤓 글을 마치며
노마드 코더 강의와 다른 API를 호출하는 바람에 생각보다 힘들었지만 끝내고 나니 뿌듯하다. 다른 API들도 잘 사용할 수 있을 것 같은 자신감이 생겼다.
개인 프로젝트를 하면서 다양한 라이브러리와 다양한 메서드를 사용해서 새롭게 공부하는 느낌도 나고 그동안 배웠던 것들을 복습하는 느낌도 났다.
계획했던 개인 프로젝트를 하나 둘씩 완성하면서 점점 성장하는 것 같다. 발생한 오류의 원인을 파악하고, 그 오류를 해결하는 것도 재밌다.
물론 해결하는 과정이 길어지면 그다지 즐겁지 않지만… 그래도 힘들었던 만큼 해결하면 그만큼 기분 좋은 것도 없다.😂