분류 전체보기

부트스트랩을 설치했으니 부트스트랩을 활용하여 블로그 글 목록을 만들어보자.블로그 레이아웃은 https://getbootstrap.com/docs/5.3/examples/album/ Album example · Bootstrap v5.3This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. View Edit 9 minsgetbootstrap.com을 활용 하였다. 우클릭 > 페이지 소스 보기를 클릭하면 소스를 볼 수 있다.이미 npm 으로 부트스트랩을 설치했으니 필요한 html 만 붙여넣기 하면 된다.  나는 main 태그 안의 내용..

라우터 기능들을 배우기 위해 새로운 프로젝트를 생성한다.프로젝트들이 담긴 폴더를 에디터로 오픈하고, 터미널에 명령어를 입력한다.blog_review 라는 이름으로 프로젝트를 생성했다.vue create 프로젝트명  이제 생성한 프로젝트를 에디터로 다시 open 한다. (blog_review 오픈) 📌 bootstrap 설치▼ 자세한 다운로드 방법https://getbootstrap.com/docs/5.3/getting-started/download/ DownloadDownload Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, Rub..

라이프사이클에 대한 자세한 설명은 공식사이트에 기재 되어 있다. vue 공식 사이트:https://ko.vuejs.org/guide/essentials/lifecycle Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.orghttps://ko.vuejs.org/api/options-lifecycle.html Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org   크게 3단계로 보면된다 1. create 단계데이터만 존재하는 단계 (HTML 생성 전)2. mount 단계 사이에 있던 것들을 실제 HTML 로 바꿔준다.3. 컴포넌트 생성index.html 에 장착하는 단계(4. 업데이트 단계) da..

📌 버튼 누르면 상품이 가격순으로 정렬되도록 하기🔎 vue 는 {{데이터바인딩}}을 해 두면, 데이터가 변경 사항이 생길 시 HTML 에도 자동으로 실시간 반영되도록 한다.즉, 데이터를 변경만 시키면 된다. 1. 정렬 버튼 만들기가격순 정렬  버튼을 누르면 prodList 라는 상품데이터를 가격순으로 (낮은가격 -> 높은가격) 재정렬 시켜보자!그러려면 일단 클릭 이벤트를 바인딩 해야 한다. 2. 클릭 이벤트 기능 부여버튼을 클릭하면 priceSort 라는 함수가 실행되도록 하고가격순 정렬 mothods: {} 에 priceSort 함수를 추가하자.methods: { // [허위매물신고] 버튼 클릭 시 신고 수 증가 increase(i) { // 함수 내용 입력 this.c..

📌  애니메이션 효과 주기CSS로 애니메이션 효과를 주려면1. 시작전 class 명2. 애니메이션 끝난 후 class명3. 그리고 원할 때 2번 class명 부착4. 시작전 class 명에 transition 속성을 주면 부드럽게 애니메이션이 완성된다. .start .end 에 대한 스타일을 미리 만들어 놓고, 모달창이 열렸을 때만 .end 클래스를 부착한다.   (CSS).start { opacity: 0; transition: all 1s;}.end { opacity: 1;} HTML 속성에 데이터바인딩하려면:속성="데이터이름" class 명을 조건부로 넣으려면 => 조건이 true 일 때 클래스명이 부착된다 ex):class=" { end: true } "end라는 클래스명이 항..

📌 input 데이터 값 받아오기Modal.vue 에서 input 을 넣어보자 {{prodList[prodId].title}} {{prodList[prodId].content}} {{prodList[prodId].price}} 원 닫기   가격 위에 input 창이 생겼다. 저 input 창에 숫자(개월)을 입력하면 개월 수만큼 곱해진 가격이 노출되게 만들어보자. 먼저 개월을 담을 데이터를 생성해야 한다.데이터 보관함에 month 를 초기화 한다.초기값 설정을 아무렇게나 하면 안 되고 알맞은 데이터로 해야 한다.(ex. textarea 라면 문자로 초기화를 해야 한다. 숫자로 초기화하면 안됨) data() { ..

📌 custom event자식 컴포넌트가 부모 컴포넌트가 가진 데이터를 바꾸고 싶다면 부모에게 메시지를 줘야 한다.부모는 그 메시지를 수신하면 데이터를 변경하는 코드를 실행한다.이걸 custom event 라고 한다. 1. 자식은 $emit(작명, 전달할 자료) // 전달한 자료는 선택사항. 작명은 필수 => 커스텀 이벤트 전송2. 부모는 @작명="데이터 변경하는 JS 코드"3. 부모 컴포넌트가 전달한 자료를 사용할 때는 $event 로 사용 가능 자식 컴포넌트에서 openModal 이라는 커스텀 이벤트 전송, prodData의 id 값을 전송//자식 컴포넌트{{prodData.title}} 부모 컴포넌트에서 @openModal 로 커스텀이벤트를 받고, prodId라는 데이터에 자식 컴포넌트에게 받은 ..

📌 PropsApp.vue 안에 Modal.vue 라는 파일이 하위 컴포넌트로 있다고 하면,App.vue 는 부모 컴포넌트, Modal.vue는 하위 또는 자식 컴포넌트라고 한다. 자식 컴포넌트가 부모 컴포넌트의 데이터를 쓰려면 props 라는 문법을 이용해야 한다.// 부모 컴포넌트에서 예시 코드에서는 로 작성하면 된다. 그리고 나서 자식 vue 파일에서 props 등록을 해야 한다.// 자식 컴포넌트에서props: { {작명}: 데이터타입 } props: { prodList: Array } 데이터 타입은 Array, Object, String, Number 등이 있다. 보내는 자료형에 맞게 입력하면 된다. 이제 props 로 등록한 데이터는 HTMl 안에서 데이터 바인딩으로 자유롭게 ..

📌컴포넌트 파일명 한 단어로 하기컴포넌트 파일을 만들 때, 두 단어 이상으로 만들지 않으면 에러로 인식한다 (ex. Product.vue (X) / ProductList.vue (O))한 단어로 파일명을 만들고 싶을 때 아래와 같이 하자 package.json 파일을 열어서 rules 라는 항목에 다음과 같이 추가하면 된다.⚡추가 한 다음 npm run serve 가 돌아가고 있다면 종료하고 다시 실행해야 한다. 실습할 때 두 단어 이상으로 작명하는 것이 은근 귀찮다."rules": { "vue/multi-word-component-names": "off"} 에러가 사라졌음을 확인할 수 있다.  📌 Vue 의 컴포넌트원하는 HTML 덩어리를 한 글자로 축약할 수 있게 도와주는 문법이 컴포넌트이다...

📌상품명을 클릭 > 모달창 노출 > 모달창 안에 상세 내용 노출되도록 만들기N 번째 상품의 상품명을 누르면 그 상품의 내용이 모달창에 노출되도록 해보자.  {{a.title}} {{a.title}} {{a.price}}원 허위매물신고 신고수 : {{count[i]}}  a.title 이 상품명 영역이다.상품명을 눌렀을 때 해당 상품이 몇번째 index 인지는 i 에 저장되어있다.그 i 를 알아야하니 prodId 라는 변수를 만들어 i를 저장한다.(데이터보관함에 prodId 라는 변수를 만들고 초기화해야 한다.)data() { return { menu : ['Home', 'Shop', 'About'], count : [0,0,0,0,0,0], ..