✍ 프로젝트 소개
기간 : 2023.03~2023.05 (2달)
인원 : 1명
주제 : 영화 사이트
사용스택 : React, javascript, axios, styled-components, aws s3, eslint, prettier, craco
사이트&코드 : https://github.com/5o-hyun/movieapp
🙋♀ 개요
프로젝트를 조그만것이라도 계속 해보면 리액트에 익숙해질것같아서 찾아보던도중, 사실 api가 없으면 데이터바인딩을 못하기떄문에 오픈api를 찾아봤는데 영화정보api tdmb를 찾아서 이것을 사용해 무비앱을 만들어보기로했다.
이번 프로젝트를 할때는 최대한 나 혼자 만들어보기로했고 theme를 사용하는것과, axios를 default 주소를 설정하고 사용해보고싶었고, 저번보다 깔끔한 ui를 만들기를 원했다.
🏃 러닝
이번 프로젝트에서는 초기설정부터 탄탄하게 잡아보고싶었다. 전과 동일하게 cra로 생성해서 prettier,craco설정을했는데 craco는 처음 사용해봐서 어려울줄알았는데 구글링하니까 금방 찾아서 했다.
craco를 설정해서 폴더구조는 page, container, components로 짰고 import할때 순서를 중구난방으로 배치하지않고 순서감있게 배치할수있게됬다.
처음엔 src 기준으로 page, container, components 폴더를 짜고, public기준으로 images 안에 svg, png, jpg를 나누고싶었는데 기준점을 두개로하는걸 습득하지못해서 src에 모든 폴더를 짰다. 크리티컬하지않아서 그냥 냅뒀는데 다음에 더 알아봐야겠다고 생각했다.
또한 theme를 설정하는데 회사플젝에 theme를 설정해놨어서 그것을 참고하면서 하니 쉽게 설정할수있었고 axios도 마찬가지였다.
이미지를 불러오는데 https// , /https// , https://image.tmdb.org/t/p/w500 등 너무 다양하게 이미지들이 들어가있어서 null값과 분리시키는데 번거로웠지만 받은후에 경우의수를 다 넣어 짜니 어렵지는않았다.
🧐 아쉬운점
craco의 기준점이 public, src 두개가 가능한지 찾아보는것과,
무한스크롤을 구현하는데 자꾸 처음 렌더링될때 page=1이 2번찍히고 그이후에 page=3이찍힌다. 다른 탭을 클릭했을때는 이상없이 나오는데 처음렌더링될때만그럼.. 리렌더링도 막았는데 왜그런지 이유를 모른채 끝이나버렸다..ㅠㅠ
회고록쓴담에 바로 알아봐야겠다.
ui를 너무신경쓰느라 시간을 너무버렸다. 담부터는 ui를 미리 구상을 해놓고 하던지 해야겠다.
😁 좋았던점
저번 프로젝트를하고 이번에 2번쨰로 해보니 확실히 코드가 달라진것같다.
확실히 코드 구조만 깔끔하게 container-데이터처리 components-ui,데이터바인딩만 해놔도 보기 편했고 직관적인 변수명을 써서 누가봐도 이거구나 하게 짰다.
와 렌탈킹 플젝보니까 코드 진짜 개판이다ㅋㅋㅋㅋ
내가 몇달만에 이렇게 늘었다는게 좋았고, 앞으로도 여러개 열심히 해봐야겠다고 생각했다.
🧨 리덕스
저번에 다음플젝에서는 리덕스를 제대로 이해하고 사용해보고싶다했는데, 이번 플젝은 혼자 힘으로 해보고싶었는데 리덕스 개념도 모른채로 사용하면 의미없을거같아서 아예 배제시켰다.
대신 container에 모든 데이터에 관한것을 처리하고, components는 ui만 구성하고 바인딩만해서 깔끔해서 보기 편했다.
그래 기초부터 탄탄히 다지자.
🐣 느낀점
저번에는 알속에있는 병아리였으면 그래도 이제 깨는중은 되지않았을까?ㅋㅋㅋㅋ
아직 응애긴하지만... 응애
저번 플젝에 비해 훨씬 깔끔해진거같긴하다. 아직 useEffect의 지옥속에 살고있지만 그래도 container에서 모든 데이터처리를 해서 확실히 달라졌다.
이렇게 점점 코드의 간결성도 배워가며 나도 성장하고있구나 하며 느끼고있는 요즘이다.
api가 갖춰진것만 쓰다보니 로그인구현이나 게시판만들어서 데이터 저장하는것도 해보고싶어졌다.
그렇게해서 정말 하나의 완벽한 사이트를 만들고싶다 느낌?
비전공자라 힘들겠지만 간단하게라도 배워보면 좋을거같아서 다음에는 백엔드 서버 구축하는걸 한번 배워보고싶어졌다.
