계발하는 개발자

스크롤이 내려가 있는 상태에서 상품 전체보기 버튼 클릭하여 라우터 이동시 스크롤이 내려가있는 상태 그대로 페이지만 바뀌는 현상 발생 페이지 이동 시 스크롤 위치가 최상단 기준이 되도록 router인스턴스에 scrollBehavior() 함수 추가해주니 해결

부모컴포넌트 ➡️ 자식컴포넌트로의 데이터 전달은 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:..

학원에 다녔을때 강사님께서 NPM 개발환경에서 images 폴더를 public에 저장하는 것을 보고, 이때의 기억을 살려 나도 이미지를 public 폴더에 넣어 관리하곤 하는데 그럼 src에 폴더에 기본적으로 있는 assets라는 폴더는 왜 있는건지 궁금하기도 해서 알아보았다.🤔 기본적으로 Vue를 설치할때 원래 셋팅된 코드를 참고해봐도 assets에 logo.png가 들어가 있기도 하고! 결과적으로 Vue CLI 프로젝트를 진행하며 내 나름대로 내린 결론은 public 폴더에 이미지를 관리하는 것이 좋겠다는 생각이다. assets폴더에 저장하면 빌드나 파일 처리 과정에 따라 경로가 변해서 들어갈 수 있기 때문에 이로 인해 경로 설정 과정에 상당히 골치아파질 수 있다. 일단 public과 assets, ..

이걸 이제야 정리해서 올린다; Vue CLI 환경에서 프로젝트를 새로 설치하며 한 번 정리해두고 가면 좋을 것 같아 정리한다. 아래 공식페이지에 들어가면 다양한 설치 방법에 대한 안내가 나와있다. 설치방법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 v2.ko.vuejs.org 참고로 CDN/NPM 두 방식 모두 경험해본 바로 CDN 방식으로 시작하면 좀더 간편하고 빠르게 구현 가능한데 반해, 외부에서 제공하는 라이브러리이기 때문에 가끔 로딩 속도가 느려서 답답할 때가 많았다. 뭣보다 NPM 환경에서는 다양한 개발 도구 및 라이브러리를 가져다 쓸 수 있다는 게 진짜 강력하다고 느껴졌다. Vue 프로젝트 폴더 생성 vue create 프로젝트명 Vue 설치 1. npm으로 vue를 ..