사이트 주소
https://next-js-portfolio-cat-game-phi.vercel.app/
시작하면서
-
작업물에는 목적이 있다. 예컨대 < 유리창 너머의 세계 > 는 그야말로 나를 소개하기 위한 목적으로 제작한 포트폴리오다.
-
이번 작업물의 경우 조금 느낌이 달랐다. 이전 작업물들은 필요에 따라 만들었지만, 이번 프로젝트는 그야말로 '기술을 위한 포트폴리오' 다.
-
로컬스토리지 관리 가능하다. 새로고침 해도 내용물 사라지지 않는다, 함수형 프로그래밍 할 수 있다, .reduce와 .map 등 메서드를 적극 활용하는 등 불변성을 의식하고 있다
.. 가 이번 프로젝트의 목표였다. -
타입을 세세하게 정의하지 않은 게 문제라면 문제지만, 어차피 이 부분은 내 목표가 아니었으니까 패스.
결과물 (pc)
-
고양이 모달창 등장시키기
.gif)
-
컬렉션 + 구매/반품 + 로컬스토리지에 저장됨 + 이미지를 누르면 진짜 쇼핑몰로 옮겨짐
.gif)
프로젝트 기능 설명
- 아무래도 게임이라서 기능이 다양한 편이다.
-
제목을 클릭하면 클릭수에 따라 색깔이 변한다.
-
랜덤한 오브젝트를 클릭하면 고양이가 등장한다.
-
구매 / 반품을 누를 때마다 보유 금액이 달라지며, 일정 수 이상 클릭하면 쇼퍼홀릭 고양이/ 스크루지 고양이가 등장한다.
-
각 상황은 로컬스토리지에 on-time으로 저장되며, 새로고침해도 진행상황이 지워지지 않는다.
-
로컬스토리지 및 진행상황을 리셋시키고 싶다면, 리셋 버튼을 누른다.
프로젝트에 구현된 기술
Next.js 의 pre-rendering
- Next.js로 API의 pre-rendering을 구현했다. 검색엔진 최적화는 물론 최초 로딩시 json파일이 생성되고 유지되어 속도가 빠르다.
styled-components
- 컴포넌트 기반으로 개발한 만큼 개발 생산성과 유지보수성이 높다.
localStorage : 새로고침 시 값 유지
- 클릭시 로컬스토리지에 값을 저장한다. 이후 사이트 새로고침 시, 로컬스토리지에 값이 있다면 가져와서 상태관리에 반영한다.
함수형 프로그래밍과 대표적인 기능
-
고양이의 상태가 존재하면 값을 가져오며, useEffect 내부에서 사용되는 로직
(정의된 함수)
(사용 예시)
PS. recoil setter함수의 타입은 SetterOrUpdater<초기값> 이지만, 이번 프로젝트에서는 타입을 엄격하게 정의하지는 않았다.(타입스크립트 프로젝트라기보다는, 타입스크립트의 친절함만 빌린 자바스크립트 프로젝트에 가깝다. ) -
리셋 버튼 클릭시 로컬스토리지 값과 recoil값을 초기화해주는 함수
(정의된 함수)
(사용 예시)
- (중요) 각 고양이별로 클릭수가 일정 기준(standard)를 넘어서면, 모달창을 띄움과 동시에 로컬스토리지와 recoil의 고양이 컬렉션을 업데이트하는 로직 .
(정의된 함수)
(사용 예시)
- onClick함수 안에 고양이 콜렉션 추가 및 저장 로직을 넣었다.
회고
나름대로 만족스러운 프로젝트
- 처음에는 '자바스크립트로 게임을 만들 수 있겠어?'라는 생각이었지만, 나중에는 '어, 이거 나름대로 게임성이 있겠는데?' 라는 생각으로 바뀌었다.
다음 프로젝트 예고
-
프론트엔드는 Next.js와 recoil, 백엔드는 Nest.js + postgresql + typeORM, 배포는 AWS와 vercel을 사용하여 내 서비스를 만들어보고 싶다 !
-
기술적으로는 앞서 언급했듯이 recoil의 올바른 사용, 그리고 백엔드 로직의 공부.. 정도가 되지 않을까?!
-
그리고 요새 회사에서 기술블로그를 운영하는 추세인데, 굉장히 흥미로운 내용이 많다. (예컨대 오늘의 집에서는 무한스크롤 구현을 기존 코드와 니즈에 맞춰서 구현하는 내용을 포스팅했다) 이런 고급 정보를 온전히 담아낸 개인 프로젝트를 꼭 해보고 싶다.
-
...사실 이런 도전을 하려면 회사에 취업하는 게 맞긴 하다. ㅠㅠ 이제는 정말로 이력서를 넣어볼 때가 온 것 같다.
