백엔드 개발 포트폴리오 | 투두리스트와 버킷리스트 공유 서비스

내일배움캠프 4기 웹 개발 과정 Node.js 트랙 수료생 최종 프로젝트 '투두버킷'을 소개합니다.

Aug 16, 2023

Contents

TODOLIST와 BUCKETLIST를 제공하는 서비스입니다.

새로 생성된 ToDo리스트 ID값을 중복 없이 주기

❓불필요한 DB호출을 방지하고자 새로 생성되는 투두리스트는 새로고침을 하지않고 데이터를 서버로 넘겨주기만하고 화면에 추가하는 방식을 채택했기때문이다.

❗️ DB에서 불러온 항목들이 UI태그 하위에 들어가는데 자손태그 개수를 구하는 방식으로 ID값을 주기로함 (DB 호출 항목2개일때 1, 2 아이디값을 주고 새로 생기는값을 +1씩 더해줌)

ToDo리스트 항목을 조작할때 다른 위치의 항목들이 선택됨

❓1번 이슈해결방법에서 DB에서 불러온 항목중 앞쪽 항목을 삭제한 뒤에 새로만들었을 때 id값이 중복됨 (1,2 2개를 불러왔을때 1번 항목을 삭제하고 새로 만들면 2, 2, 3 이런식으로 중복값이 생겨버림)

❗️ DB에서 처음가져오는 데이터나, 새로생기는 항목 모두 UUID를 주는방식 채택

카드, ToDo리스트 페이지 캘린더 원하는 상태로 변형이 어려움

❓부트스트랩같은 기존에 이미 만들어진 소스를 갖다쓰다보니 자체 css소스를 변형하기 어려움

❗️ 카드섹션, 캘린더구조를 직접짜서 코드변형이 용이하게 함.

Axios로 Get 요청 시 body 값을 못 가져옴

❓ajax와 달리 axios는 Get요청시 body값에 데이터 전송불가

❗️ axios로 Get요청시 바디로 가져올 수 없기때문에 params로 요청데이터 보냄

카드 추가 작동x

❓미리 사용중인 코드 재사용중 변수명이 달라졌는데 선언되지않은 변수를 id값에 넣어줘서 에러남

❗️ 변수명 변경

Subscribe to our newsletter

Contents

Subscribe to our newsletter

More articles