본문 바로가기

FrontEnd/Vanilla JS

[JS] JavaScript 과제 블로깅

https://trainer-reg-sys.netlify.app/

 

트레이너 등록 시스템

트레이너 관리 시스템

trainer-reg-sys.netlify.app

 

시작하며

이번에 는 자바스크립트로 여러가지 기능을 만드는 과제였는데, 사실 만들고싶었던 컨셉은 따로있었습니다. ㅠㅅㅠ

 

"포켓몬 고"  라는 게임에서 레이드를 할려면 사람을 모아야하는데, 당근 의 동네생활처럼 내주변에 포켓몬고 유저를 검색하고 같이 게임 할수 있게끔 하고 싶었으나 잘 안됐습니다 ㅠ0ㅠ

나중에 개인 프로젝트나 토이로 조금 해보는것도 좋을거 같습니다!

 

그건 그거고, 일단은 과제에 나오는 기능을 다 구현하고 싶어, 기능구현에 최선을 다했습니다.

 

학습한 것

 indexed DB 사용

 최초에 로컬 스토리지를 사용하라는 예시가 있었는데, 로컬스토리지의 용량이 작아 무엇을 넣기는 힘들거같아 멘토님께 조언해 보니 이런 것 이 있다고 소개 해 주셨습니다.

 

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

 

IndexedDB API - Web APIs | MDN

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data. While Web Storage is useful for storing smaller amounts of data,

developer.mozilla.org

 

새로운것을 사용해야하는게 부담이었지만, 막상 사용법을 익히고, 작동법을 알고나니

굉장히 쓰기 간편한 DB 라고생각했습니다. 

로컬에서만 내용이 저장되지만, 간단한 프로젝트할때는 쓸 수 있겠다 라는 생각이 들었습니다.

 

개인적으로, SQL 과 조금 비슷하게 사용되어지는거 같아 재밌게사용했습니다. 

 

물론, 자잘한오류때문에 고생을 조금 하긴 했습니다.ㅜㅜㅜ

값을 잘못 써줘서 DB를 못찾는다던지.... 해결에는 멘토님이 많이 도와주셨습니다~ 

 

모듈등 재사용 가능성을 두고 코딩하는것의 중요성 

이번 프로젝트에서는 그렇게 못 했습니다만,

기능을 구현하다가 보면 중복되어 사용되어지는 기능이 많이있었습니다

(예를 들어 이번에는 DB를 여는데 사용되는 코드가 한페이지에도 많이 반복되고있습니다.)

이러한 것들을 한데모아 모듈화해서 편하게 계속 꺼내쓰는게 편하겠다고 생각이 들었습니다.

 

 

초기 구성의 중요성

 

위에 모듈화를 하지 못한게, 일단 다 구현해버리자 ! 라는 생각에 무작정 시작한 탓도 있습니다 ㅎ;;;

 

처음 설계가 중요하다고 생각이 되었고 그런것을 도움을 받을 수 있는 툴이 있다는것도 알았습니다.

https://vitejs.dev/guide/

 

 

다음에 토이 프로젝트할때  이것을 이용해서 보강하면 좋지 않을까 생각하고있습니다.

'FrontEnd > Vanilla JS' 카테고리의 다른 글

[JS] 포켓몬 API활용하기  (0) 2024.03.14
[JS] 과제 준비하기  (0) 2024.03.13
[JS]객체지향 프로그래밍 과 생성자  (0) 2024.03.05
[JS] this  (1) 2024.03.05
[JS] 클로저 - closures  (0) 2024.03.05