JS 직원 관리 서비스 만들기 / 패스트캠퍼스 2차 과제
실 프로젝트 기간
2024년 3월 13일 ~ 2024 3월 24일
패스트캠퍼스에서 2차 과제로 JavaScript를 이용한 직원 관리 서비스 만들기를 했다.
지난번 HTML, CSS 클론코딩 과제에 비해서는 필수로 요하는 요구사항이 많은 편이였다.
구현해야 하는 기능들이 적지 않았던 것 같다.
주제는 직원들을 관리할 수 있는 관리자 서비스를 만드는 것이였다.
이전 기수들의 예시를 몇 개 보여주셨는데, 아즈카반의 죄수 관리, 동물의 숲 주민 관리 등
재미있는 주제가 많아서 나도 일반적인 직원 관리 서비스가 아닌 특별한 걸 해보고 싶었다.
어찌 되었든 이번 과제는 틀은 있지만 100% 창작(?)이어서 조금이라도 내가 더 좋아하는 것,
그리고 만들면서 기분이 좋은 것을 만들어보려고 했다.
그렇게 정해진 주제는 벨리곰!
벨리곰은 다른 캐릭터가 많지 않기 때문에, 대신 벨리곰 상품들을 관리할 수 있는 페이지를 제작했다.
지난 클론코딩 과제에서 자바스크립트를 조금 활용하긴 했지만,
이번엔 디자인보다 자바스크립트가 주요 기능이었기 때문에 디자인에는 많은 시간을 쓰지는 않았다.
먼저 결과물의 주요내용은 아래와 같다.
1. 메인 페이지
- 스토리, 스토어 버튼 호버 효과2. 스토리 페이지
3. 로그인 페이지
4. 스토어 페이지
5. 로그인, 로그아웃 기능
- 아이디와 비밀번호를 모두 입력해야 로그인 가능
- 비밀번호 틀릴 경우 비밀번호 확인을 위한 alert 표시
- 로그인 후 로그아웃 버튼 클릭시 로그아웃 (로컬 스토리지에서 로그인 정보 삭제)
- 로그인 되어있지 않은 상태에서 로그아웃 버튼 클릭시 로그인 정보 없음 표시6. 로그인 정보에 따른 상품 등록 가능 여부
- 로그인 상태시 상품 등록 가능
- 로그인 안 되어있을 때 상품 등록 버튼 클릭시 로그인 화면으로 이동7. 상품 검색 기능
- 검색 키워드가 포함된 모든 상품 표시8. 체크박스 전체 선택, 전체 해제
9. 새로운 상품 등록
10. 체크 상품 삭제
11. 상품 수량에 따른 전체 금액 증감
12. Infinity Scroll
- 초기 기본 아이템 표시 5개
- 스크롤을 화면 하단으로 내리면 아이템 로드13. 모바일 반응형
- 일정 화면 비율로 줄어들면 모바일 반응형으로 변환이번 과제를 진행하면서 조금 중점적으로 생각했던 부분은, 함수 단일 책임의 원칙을 적용하려고 노력했다.
물론 처음부터 단일 책임을 갖도록 코드를 작성하지는 못 했고.. 리팩토링 하며 코드를 쪼개려고 노력했다.
우테코 프리코스 하면서 요구사항으로 있었던 부분이라, 이번 과제에도 적용하려고 해보았다.
웬만하면 내 힘으로 코드를 작성하려고 노력 해봤지만, 그래도 여전히 검색과 챗GPT 없이는 혼자서 코드를 작성하지 못 하는게 마음이 아프다 🥲
지난 회고들 내용 중에 우테코 프리코스에서의 내 코드들은 거의 다 챗GPT가 짜주었다는 내용이 있었는데,
그래도 그나마 이번엔 그 때 처럼 모든 코드를 GPT에게 기대지 않았다는 점을 위안 삼고 있다..
좋았던 점
처음으로 진짜 뭔가 ‘동작’하는 페이지를 만들어본 것이 매우 뿌듯하다.
뭔가 하나하나 제대로 동작 할 때마다 영상캡쳐를 해서 친구들한테 자랑하기도 하고..
그리고 지난번 클론코딩 과제를 하면서는 CSS가 너무 어렵고, 큰 산 처럼 느껴졌었는데,
이번에는 나름 뚝딱뚝딱 잘 만들어냈던 것 같아서 자바스크립트 과제였지만 그 부분도 좋았던 점 중 한 부분인 것 같다.
아쉬운 점
필수 요구사항에 CSS 상대수치(rem, em)을 사용하는 것이 있었는데, 상대수치를 사용하지 못 했다.
사실 모바일 반응형을 만들고 기존 값들에 딱히 어색함을 느끼지 못 했지만,
지금 다시 생각해보니 폰트 사이즈 같은 경우는 상대수치를 사용하는게 더 좋지 않았을까 라는 생각이 든다.
그리고 자바스크립트 코드를 모듈화 하지 못 했다..
기능별로 파일을 분리하긴 했지만, 파일이 많아져서 메인 스크립트 파일을 만들어 한 곳에서 Import 하는게 더 좋지 않았을까 라는 생각이 든다.
배운 점
DOM에 대해서는 이제 확실히 알 것 같다.
물론 확실히 안다고 해놓고 안 보고 이거 만들어봐! 하고 던져주면 또 자신 없지만..😂
그리고 CSS에서 absolute를 사용하지 않고, 배치시키는 방법을 이제는 진짜진짜진짜 알 것 같다!
앞으로 노력할 점
물론 코드리뷰를 받고 또 리팩토링을 하겠지만, 내가 좀 아쉬웠던 부분들을 개선해 볼 예정이다.
모듈화에 대해 더 공부해서 적용해볼 예정이고, 다른 수강생들은 파이어베이스를 사용해서 스토리지를 관리 했던데, 그 부분도 찾아서 공부해봐야 할 것 같다.
나는 상품 추가를 .innerHTML을 사용해서 구현했기 때문에, 새로고침 하면 내용이 사라지는 구조였다.
그레서 파이어베이스를 사용한 수강생들의 결과물이 유독 신기했다..
확실히 강의를 듣는 것보단 직접 실습하며 부딪치는게 더 많이 배우는 것 같다..
벌써 다음 프로젝트가 기대되기도 하고, 두렵기도 하다.
팀 프로젝트라던데… 괜찮겠지…?🥹