📚 Intro
짧게 느껴졌던 일주일 간의 프로젝트 기간이 끝났다.
새로 배운 JavaScript와 API, JSON-server를 활용한 프로젝트를 하고 싶어서
카카오 도서 API를 활용한 책 검색 & 책갈피 생성 사이트를 구상해 보았다.
나는 이런 식으로 책을 읽고 기억에 남는 문장을 블로그에 기록해두는데, 기록들을 한눈에 볼 수 있으면 좋겠고, 마음에 드는 문장으로 나만의 책갈피를 만들어서 공유하고 싶어서 .. 사심이 들어간 프로젝트 주제를 선정하게 되었다.
내가 구현하고 싶었던 기능은
-
유저가 읽은 책을 제목으로 검색하여 찾는다.
-
책갈피로 만들고 싶은 내용을 입력하고 저장 버튼을 누른다.
-
홈 화면에 만들어진 책갈피가 띄워지고, 책갈피를 누르면 책 정보와 기록한 시간을 모달창으로 볼 수 있다.
+좀 더 욕심내서 UI까지 고려하여 데이터를 시각적으로 예쁘게 뿌려주고 싶었다.
📚 목차
- 갈피를 잡다 랜딩페이지
- 작업 과정
- 기능 & 코드 설명
- 프로젝트 시연 영상
- 회고
🔖 랜딩페이지
- 메인페이지
- 모달
- 반응형 모바일 사이즈 - 메인페이지
- 반응형 모바일 사이즈 - 검색, 코멘트 입력 창
- 반응형 모바일 사이즈 - 모달
🔖 작업과정
- 와이어프레임
- 디자인 시안
👉 와이어프레임, UI 구상까지 마치고 코딩에 들어가려고 했으나.. 구조가 잡히지 않아 HTML 마크업 부터 막히는 상황이 발생했다. 아래처럼 노트에 HTML 구조를 정리해보았다. 이것도 반응형을 미처 고려하지 못하고 구조를 잡아서 반응형으로 만들 때 또 수정해야 했다. 와이어프레임을 작성할 때 HTML 구조에 대한 고민이 선행되어야 한다는 것을 배웠다.
👉 이렇게 노션으로 러프하게 일정 + task 관리를 했다.
노션 일정관리 템플릿을 활용해서 정리했으면 훨씬 깔끔하고 좋았을 것 같다.
🔖 기능
- 도서 검색 기능
- 반응형 처리
- 입력 받은 책갈피 문장 json데이터로 저장, 화면에 추가
- 공백검사
- textarea 엔터키 처리
- 모달 → 책 정보, 책갈피 생성일
- 책갈피 정렬(최신순, 오래된 순)
🔖 시연 영상 (Click👇)
📚 회고
힘들다 ..!
그런데 재밌다 ..!
이런 나.. 개발이 꽤 적성인걸까?
🔖 소감
프로젝트 기획부터 발표까지 빠듯한 일정이었기 때문에 주말에 알바하는 곳까지 노트북을 가져가 코딩을 할 정도로 몰입해서 작업을 했던 것 같다. 별거아닌 작은 프로젝트지만 내가 생각한대로 사이트를 만들었다는게 너무 뿌듯하고 자랑하고 싶고 .. 그렇다.
여러분 제가 이런 걸 만들었어요 . . .
수많은 오류를 만나며, 그동안 해본 적 없던 고민들도 하게 되면서 배운 점이 많았다. 또 그만큼 부족한 점들도 많이 느꼈다. 당연하다. 그냥 지금 이 느낌을 기억하며 차곡차곡 성장해 보자 !
특히 이번 프로젝트에서는 API를 활용해서 실제 많은 양의 데이터를 다뤄 보니 어렵지만 재밌다는 생각이 들었다. 같은 API를 사용해도 어떻게 데이터를 가공하고 화면에 뿌려주느냐에 따라 완전히 다른 결과물이 나온다는 점이 흥미로웠다. 데이터가 엄청난 자원이고 이래서 개인정보를 해킹하고, 사고팔고 한다는 것을 알게 되었다.
프로젝트를 진행하다 보니 추가하고 싶은 다른 기능들이 생겼는데, 그 중에 구현에 성공한 기능도 있고, 아직 진행중인 기능도 있다. 애정을 갖고 계속해서 디벨롭할 예정이다.
🔖 잘 한 점
- 한 단계 성장 🏃🏻
- 깃허브로 파일 관리를 시도해 보았다. commit, push 만 하는 정도였지만 확실히 편하게 파일 관리를 할 수 있었다.
- 노션으로 일정과 task 관리를 했다. 계획한 일정과 남은 task 들을 정리하면서 프로젝트를 진행하니 개발 진행 상황을 잘 파악할 수 있었던 것 같다.
- 노션이나 git, github 과 같은 툴 사용의 중요성을 느꼈다. 능숙하게 사용할 수 있도록 공부할 때도 많이 사용해봐야 할 것 같다.
🔖 보완할 점
- 함수를 기능별로 쪼개서 작성하는 것이 부족했다. 구현에 급급하다 보니 하나의 함수가 점점 몸집이 커졌는데 어디까지가 하나의 기능인지 파악하는 것부터 시작해서 커진 함수를 작은 단위로 쪼개야 할 것 같다.
- Ajax, 부트스트랩, 플러그인 때문에 제이쿼리를 사용했는데, 추후 바닐라 JS만으로도 구현해보고 싶다.
- 아직 해결하지 못한 책갈피 검색, 검색한 책이 없을 시 뜨는 경고창 기능, 책 검색 시 원하는 책 선택 기능 구현하기
- CRUD를 공부해서 적용해보고 싶다.
