계발하는 개발자

지난 시간에 이어, 이제 서버에서 받아온 데이터를 JSON 형식으로 변환후 클라이언트에서 호출해보자. /* store/db.php */

부모컴포넌트 ➡️ 자식컴포넌트로의 데이터 전달은 props로 가능하다. 그러면 그 반대는 어떻게? 자식컴포넌트 ➡️ 부모컴포넌트로의 데이터 전달은 $emit을 이용한 방법이 있다. 아래같은 경우를 살펴보자. 블라블라 코드 블라블라 코드 // 자식 컴포넌트 import DetailComp from './DetailComp.vue'; export default { name: 'GoodsComp', components: { DetailComp, }, data() { return { showDt: false, }; }, computed: { // 상세페이지 조건부 렌더링 compStyle() { return { visibility: this.showDt ? 'visible' : 'hidden', opacity:..

상황 에러는 아니고, Vue Cli 환경에서부턴 v-if와 v-for를 한 엘리먼트에 함께 못 쓰다보니..ㅠ 따호혹 .. 그로인해 발생한 고충과 나름의 해결방법을 정리해보려한다. v-if랑 v-for 한 엘리먼트에 쓰지 말라는 이유는 잘 알겠는데... 간혹 따로 쓰다보니 불편한 점들도 많이 생긴다. 일단 위에서 v-if를 썼으면 그 아래에서 v-for를 쓰기 위해 요소를 하나 더 만들어야 한다는 점이다.(코드가 복잡해진다구!😣) 그리고 가령... 아래 같은 상황이 생길 수도 있다. 보이는가ㅠㅠㅠㅠ..! 분명히 v-if 조건으로 더보기 버튼 누르기 전에는 나오지 말라고 해놨는데 숨은 목록이 같이 렌더링되면서 영역을 차지하고 있다..! 그래서 더보기 버튼이 숨은 목록에 의해 밀려서 저 아래에 가 있다 ㅠ V..

에러 methodes 구역에 initCatnum 함수를 등록해주고 mounted 구역에서 함수를 호출하려고 하는 경우에 자꾸 위 같은 에러가 났다. params 값을 못 읽어서 생긴 에러였다. 원인 함수 스코프 안에서 this를 사용하니까 this 바인딩이 잘못 되서 난 에러같다. 해결 created 훅에서 this.$route.params.cat3 값을 vuex 상태변수로 등록해준 후 다시 함수 스코프 안에서 vuex 변수를 사용했을 경우 이상없이 값이 잘 가져와졌고, 에러가 해결됐다. 찾다보니 route guard를 쓰라는 말도 있고 했는데 그냥 상태변수 등록해서 쓰는게 제일 편한 방법 같다. ❤️‍ 결과 화면 ❤️‍ 에러가 사라졌고, gnb 클릭후 내가 도달한 페이지 파라미터값에 따라 해당되는 ln..