[JS] 과제 준비하기

 

• 프로필 페이지를 개발하세요.
• 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요.
• 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.
• 사진을 등록, 수정, 삭제가 가능해야 합니다.
• 유저 플로우를 제작하여 리드미에 추가하세요.
• 페이지가 보여지기 전에 로딩 애니메이션이 보이도록 만들어 보세요.
• 직원 검색 기능을 추가해 보세요.
• infinity scroll 기능을 추가해 보세요.
• LocalStorage를 사용하세요

과제를 받고 제일 고민했던게 로컬 스토리지를 써야하는데 한무..아니 무한 스크롤은 어케 구현해야 하는거지??

했다가 무한 스크롤을 구현하는 페이지는 따로 빼고, 로컬 스토리지는 멘토님이 추천해주셨던 API를 활용해 보기로 했다.

 

간단 결론 

• API를 활용해보자 
• 로컬스토리지API(?)는 안되믄 그냥 로컬 스토리지 쓰는 방향으로 
• 데이터 API 쓰면 로딩 페이지도 해결 가능 ^ㅅ^)9
• 검색도 API 통신 하는 거기(?) 에서 검색하면 되지 않을까 싶다.(모 코딩 모임에서 디즈니 API로 검색하는거 봤으니 불가능 하지 않을지도..) 

주의 하면서 코딩할것

• 저번 과제때 BEM 안 지키면서 했더니 뭔가 개발살이 났다... 유의할것
• 반응형이 필수로 들어간 과제라... 멘토님 말씀대로 모바일 버전 먼저 제작해볼것.
• 이름 지을 때 신중할것 (쥬르륵..)
• 유저 플로우를 신경쓰면서 해볼것

 

직원 관리 프로그램이길래 .. 약간의 상상력을 동원해서 포켓몬 트레이너 등록 시스템(?) 을 하는게 어떨가 한다

 

사진을 등록 수정 / 프로필 등록 등은 포켓몬 트레이너라고 등록하고

따로 페이지를 빼서 간단히 포켓몬 페이지를 리스트 업해서 볼수있는 ? 그런게 어떨가 싶다.

 

사용할 API

https://pokeapi.co/

PokéAPI

포켓몬 정보가 들어가 있는 API이긴 한데 영어이다 한글은 흡 글쎄..?

라고 했지만 뜯어보니 한글이 있다 역시 포덕이 최고야....!!!!!!

여튼 이미지도 있고 이름도있고 포켓몬 번호도 있고 그래서 리스트 화해서 보여주기 좋을거같아서 선정.

 

https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API

IndexedDB API - Web API | MDN

써보지는 않고 뜯어보지도 않고 읽어보기만 했는데 SQL 처럼 쓸수 있다고해서 이번에 한번 써보고싶다

안된다믄 그냥 로컬 스토리지 쓸생각 ㅠㅅㅠ 나는 파이어베이스를 쓸수없기때문에...

AWS배포는 해본적이 있긴한데 기계적으로 한거라..(마니 건들여볼걸 후회된다 어차피 내돈도 아니었는데(????))

어찌될지는 모르겠지만 그냥 함 해보자.

 

내 능력 된다면 다른 포켓몬 API 끌어다가 쓰고싶담 

 

디자인은 지금 고민 중이긴한데 단색의 귀여운 느낌으로 하고싶다.

그게 안된다면 내가 맨날쓰는 파란색이나 죠르디 초록색으로 해버릴거다

-끗-