⚠️ 문제 발생! 분명 위와 같이 열심히 코딩을 해 두었는데, Contents 부에 그 어떤 화면도 보이지 않는 문제가 발생한 것이에요. 🤔 원인 분석 이 문제에 대해 곰곰히 생각을 해보니 App.vue에 아래 그림과 같이 router를 통해서 Contents 부를 Re Rendering을 하는데, DevInquryList.vue는 Router에 대한 특별한 설정을 한 기억이 없는 것이에요. 역시 이것이 문제 였던 것이에요! 이건 구글링 하지도 않고 찾았네요! 👍👍👍 🍻 문제 해결! 위와 같이 화면이 출력이 되는 것을 볼 수 있는 것이에요. 보이는 게 약간 엉성해 보이는 것은 Back End 서버가 꺼져 있어서 Data Bindding을 못하기 때문이에요.

⚠️ 문제 발생! 분명 axio도 설치 했고, API도 만들었고, router 기능도 넣어줬는데, 왜 Back End 와 Front End는 만나지 못하고, 이러고 있을까요? 🤔 원인 분석 곰곰히 생각 해보니 주니하랑은 또 하나를 빠뜨린 것이에요. 바로 Vue에 URL 설정을 하지 않은 것이에요. axios에 Back End URI는 설정 해 놓고, 정작 접두사를 빼 먹었으니 당연히 Front End는 '그래서 어디로 가라는 거지?'를 하고 있는 것이에요. 일단 근본적인 원인을 찾기 위해 API 쪽에 하드코딩을 해보기로 한 것이에요. 이렇게 해 주니 Front가 Back End를 만나러 가긴 했는데, Back End가 매몰차게 거절한 것 같은 것이에요. 바로 CORS Error가 발생한 것이에요. 이..

🧑🏻‍💻 Git Hub 주소 🗂 목차 ● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - Home / Main ● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 목록 조회 ● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 상세 조회 ● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 등록 / 수정 ● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 삭제 ● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 답변 등록 / 수정 ● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 답변 삭제 👨‍👩‍👧‍..

⚠️ 문제 발생! 하나를 해결하니 또 다른 문제가 자꾸 기다리는 것이에요. 휴.. Java를 계속 만져서 그런지 Java가 그리운 것이에요. 🍻 문제 해결! 이 문제는 Error가 발생하는 vue File들의 이름을 위와 같이 변경 해주어 해결 한 것이에요. 이 방법 외에 해당 규칙을 무시(ignore) 할 수 있는 방법도 있는 것이에요. 🤔 원인 분석 위 문제를 주니하랑은 이렇게 이해한 것이에요. Java 기반 Spring Boot와 JPA로 Back End를 구성할 때, Entity 이름이 예약되어 있는 것을 쓰면 Exception이 터지는 것이에요. 예를 들어 회원 Table을 구성하기 위해 Entity 이름을 User.java로 만들게 되면 Exception이 터지는데 위의 내용도 multi..

⚠️ 문제 발생! 위 Error를 만나고, 다음날 다시 `# npm run serve` 명령어를 주니 아래 처럼 Errror가 발생한 것이에요. 이 문제는 해당 프로젝트 경로 안에 가서 `#npm update`를 하면 해결이 되는 것으로 보이는 것이에요. 하지만, 다시 어제와 같은 문제가 발생하였습니다. 🍻 문제 해결! # npm i -D @vue/cli-service@5.0.1 위의 명령어를 입력 해 주니 해결이 되었습니다! 🤔 원인 분석 해당 내용은 CLI Version이 올라가면서 생긴 문제인 거 같은 것이에요. 주니하랑은 Vue3 Version으로 프로젝트를 만들었는데, bootstrap-vue를 아직 지원하지 않아 억지로 쓰려다 보니 나온 문제인 것이에요. Vue 3에서 bootstrap과..

🗂 목차 [Vue.js] 기초 개념 정리 - 기본 환경 구성 [Vue.js] 기초 개념 정리 - Vue Router [Vue.js] 기초 개념 정리 - Vue LifeCycle Hook [Vue.js] 기초 개념 정리 - data(), Data 처리 [Vue.js] 기초 개념 정리 - Watch, Array, for문(반복문), if문 🐱 Git Hub 주소 : https://github.com/junyharang-FrontEnd-coding-study/vue.js-study 📖 참고 자료 : https://www.youtube.com/watch?v=sqH0u8wN4Rs 🚀 watch 란? 개발자가 정의한 Data에 대해 해당 Data가 어떻게 변경되는지를 모니터링 하는 친구인 것이에요. 위와..