Vue.js
-
Vue.js 3의 mount 와 생명주기Vue.js 2024. 7. 28. 16:55
회사에서 처음으로 화면개발 업무를 맡았고 vue3를 이용해 개발해야 했습니다. 다른 팀은 차세대 프로젝트를 진행하고 있었고 제가 소속된 팀은 그중에 작은 부분을 맡게 되었습니다. 팀이 다르다 보니 개발 가이드에 대한 접근 권한이 없었고 개발 중인 소스만을 파악해 화면과 서버 API를 개발했어야 했습니다. 처음에는 복붙으로 기본적인 개발은 끝냈으나 테스트 도중 다양한 버그를 만났고 그 버그를 수정하려고 보니 데이터를 언제 뿌려줘야 할까라는 고민이 들었습니다. 제가 마주한 문제 중 하나는 '팝업 실행 후 데이터를 지우고 오른쪽 상단의 엑스를 누르고 나갔을 때, 데이터가 삭제되지 않았으나 다시 팝업을 열었을 때 공란이 발생하는 것'이었습니다. 처음 시도했던 방법은 watch를 통해 데이터를 재호출하는 것이었..
-
Vue.js 3 json.server npm 명령어 안 먹힐 때, File db.json not foundVue.js 2024. 7. 28. 16:04
인프런 ' 프로젝트로 배우는 Vue.js3 ' 인강을 보며 db는 json.server을 사용해보려고 했는데 File db.json not found 이라는 에러를 마주쳤습니다. 인강에서 처럼 npm install json-server 라는 명령어로 설치했고 설치된 것을 확인했으나 npx json-server db.json을 실행했을 때 File db.json not found 라는 에러가 발생했습니다.처음 json-server 설치 후 db.json이라는 파일을 임의로 만들어줬으나 계속해서 찾을 수 없다는 에러... 구글링을 해보니 npm install -g json-server 로 global하게 전역설치를 하면 된다는 글이 많았습니다.기존에 있던 json-server를 npm uninstall..
-
Vue3, json-server 이용한 Todo List 서비스 만들기Vue.js 2024. 7. 27. 16:24
1. Home 화면에서 navbar 활용해 Todo 화면으로 이동 - 내용이 없을 때 'There is nothing to display' 메세지 출력 - 내용이 있을 때 목록 출력 2. Create Todo 버튼을 활용해 Todo 입력, 성공 시 toast 메시지 출력 - 2.1 수정 기능 - 2.2 체크박스를 활용해 completed / incomplete 여부 설정 가능 - 2.3 subject 미입력시 toast 메시지 출력 , update 버튼 비활성화 3. Delete 버튼을 활용해 팝업으로 재확인 후 Todo 삭제 4. Pagination - 화면 이동 5. Search 박스를 통한 검색 기능 회사에서 갑자기 Vue 화면개발 업무를 하게 되었습니다.실무에서 화면개..