And Chill 개발 기록

지금까지 여러 토이 프로젝트를 진행해 왔지만 전부 그저 학습을 위한 Todo리스트, 쇼핑몰 사이트 만들기 등 뿐이었습니다. 그래서 내가 정말 좋아하고 필요로 하는 개인프로젝트를 진행하고 싶은 욕구가 컸었는데 이번에야말로 그런 프로젝트를 진행해보려 합니다. 저는 평소에

기술 스택은 다음과 같이 정했습니다. React.js TypeScript React Query Zustand Styled Components 평소에 react로 작업할 때 create-react-app 을 사용해 작업했었어서 번들러로 Webpack 을 사용하게 되는데

본격적으로 코드를 뚝딱이기 전에 프로젝트에서 React Query Zustand 로 server, client 상태들을 관리하는 방법을 정리해 놓겠습니다.예시로 movie 관련 api에서 데이터를 받아와 관리하는 과정입니다.movie-request.ts다음과 같이 ho

홈 화면은 우선 페이지에 상관없이 항상 최상단에 위치할 네비게이션 바와 주제(트렌드, 개봉 예정 등)에 따른 영화 목록들을 한 줄씩 보여주려고 합니다.요런 느낌네비게이션 바를 만들 때 로고, 메뉴리스트, 검색 바 말고 넣고싶었던 것은 국가를 선택할 수 있는 버튼이었습니

홈 화면에서는 다음 항목들을 보여줍니다. 선택한 국가의 개봉 예정 영화 목록 이번 주 글로벌 트렌드 영화 목록 랜덤 장르 영화 목록들 개봉 예정 영화 목록 개봉 예정 영화 목록을 볼 때, 사람들이 가장 알고 싶은 정보가 뭘까요? 아마 개봉 예정 일자와 이 영화가 얼

GithubAndChill 배포 사이트탐색 페이지가 완성되었습니다! 탐색 페이지에서는 국가별, 장르별 필터링을 적용해 정렬 기준을 정해서 탐색을 할 수 있습니다. 영화 리스트에는 Intersection Observer, Infinite Query 를 사용한 무한스크롤을

GithubAndChill 배포 사이트 (랜덤 영화 뽑기 페이지)기획때부터 상상만 하던 기능을 완성하고야 말았습니다..이런 복잡한 애니메이션은 구현할 때마다 느끼는거지만 정말 꼼꼼해야 하는 것 같습니다. 0.X 초만 차이가 나더라도 바로 어색한 애니메이션이 되어버리기

글로벌 시대에 발맞추어 앵칠이에게도 다국어 지원 기능을 만들어 주겠습니다. i18n이란 internationalization(국제화) 라는 단어를 축약한 것이다. i부터 n까지 18개의 문자수를 축약해서 i18n 이라고 부른다는데

Github AndChill 배포 사이트 최적화.. 해야겠지? 🤓🔪 성능, 검색엔진 최적화를 하나도 진행하지 않은 상태에서의 측정 결과입니다. 차근 차근 진행해 봅시다. 웹 최적화란? (feat. Lighthouse) 웹 최적화는 사용자가 URL을 입력하고 브라우저에 화면이 띄워지기까지의 과정에서 응답속도를 향상시키는 것입니다. 이는 UX를 향상시...