Vue

node.js와 vs code는 설치되어있어야 함1\. 설치npm install -g @vue/cli2\. 확장팩 설치VeturHTML CSS SupportVue 3 Snippets1\. 생성vue create 프로젝트명Please pick a preset 나올 경우

반복적인 HTML태그를 축약Vue의 HTML 반복문몇회에 object나 array를 넣을 경우 자료의 데이터 개수만큼 반복작명은 아무렇게나 가능작명한 변수는 데이터 안의 자료가 됨 \- ex) 작명 in 몇회의 작명은 forEach의 파라미터라고 생각하면 될 듯작명은

이벤트 핸들러 - HTML 클릭 시 코드 실행하는 법 클릭 이벤트 기존 js Vue 예시1 예시2 (methods 보관함) js가 길 경우 함수에 정의 함수는 넣는 공간이 따로 있음 = methods: {} 만약 data함 등에서 만든 변수를 갖고 오고 싶을 때

동적인 UI 만드는 법 1\. HTML CSS 디자인 2\. UI의 현재 상태를 데이터로 저장해둠 3\. 데이터에 따라 UI가 어떻게 보일지 작성HTML CSS 디자인HTMLCSSUI의 현재 상태를 데이터로 저장해둠"그 UI가 지금 어떻게 보여야 함?"데이터

export/import 변수 외 함수 등도 가능export할 데이터를 담은 파일(oneroom.js) 하단에import할 파일(App.vue)의 script 안에export에서 {}을 사용할 경우 import도 {}을 사용해서 가져와야 함exportimportimpo

X번째 상품을 누르면 X번째 상품을 소개하는 모달창모달창을 X개 만드는 게 아닌 모달창UI 1개에 글만 변경해서 보여줌data(clickWhat) 만들기모달 열기 버튼을 클릭했을 때: 변수 clickWhat을 상품의 idx로 변경products\[clickWhat].항

- HTML 축약: Component 파스칼 케이스 또는 케밥 케이스 사용 단어2개 이상으로 작명 component 사용 이유: 재사용 쉬움 반복적으로 출연할 부분만 컴포넌트화 권장 데이터 관리가 살짝 복잡해짐 component 생성 파일명은 파스칼 케이스 또는 케밥

모달창 component화 {{데이터바인딩}} 은 밑에 데이터가 있어야 가능함 데이터를 가져다 쓰는 방법이 있음: props 부모: App.vue 자식: Modal.vue 자식컴포넌트가 부모가 갖고 있는 데이터를 쓰려면 props로 데이터를 전송해야 함 부모도 쓰는 데

사용목적 props로 보낸 데이터는 수정금지(read-only임) 따라서 부모에 있는 데이터를 수정하고 싶을 땐 custom event를 사용 (데이터를 수정해달라는 메시지) 보내는 법 부모에게 메시지 보낼 때: $emit('작명', 데이터) $로 시작하는 건 Vue

$event는 바닐라js의 이벤트핸들러의 첫번째 파라미터와 같다.유저가 input에 입력한 값을 데이터로 바로 저장해줌. $event.target.value를 사용한 것과 같은 동작임textarea, select 등 input류 가능형식예시 input예시 textare

데이터를 감시하는 함수input에 문자입력하면 경고문을 띄우고 싶다: watcher 사용ex) 숫자로 제대로 입력됐는지? 문자로 입력하지는 않았는지?ex)month라는 데이터를 감시할 경우 month라는 이름의 함수를 만든다.형식예시작명1: 현재 데이터작명2: 이전 데

class명을 조건부로 넣으려면 {클래스명 : 조건}

정렬기능 만들기 배열을 정렬할 거임

컴포넌트의 lifecycle 라이프사이클 개념: 우리가 만든 컴포넌트들은 웹페이지에 표시되기까지 일련의 step을 거침 그 step을 라이프사이클이라 함 create 단계: 데이터만 존재하는 단계 mount 단계: 사이에 있던 걸 실제 HTML로 바꿔줌 컴포넌트

Bootstrap 접속원하는 버전 접속 후 css, js 코드를 index.html에 붙여넣기터미널main.js필요한 컴포넌트 검색 후 복사하여 사용

- 페이지로 나누고 싶다면 컴포넌트부터 만들어야 함 props 전송은 router-view에 하면 됨. router 설치 터미널 router.js 생성 해당 양식 사용 createWebHistory, createRouter 라이브러리 사용함 component imp

path에 :id 달아주기 id가 아니어도 됨 detail/0, detail/1, detail/234432 로 접속해도 TheDetail을 보여줌 $route.params.id $route: 라우터의 모든 정보가 들어있음 $route.params.id: 접속한 경로

Detail/0/author을 접속하면 작가소개가 나오고Detail/0/comment을 접속하면 댓글이 나오게다른 URL로 나누고(쪼개고) 싶으면 nested routes 사용path과 같은 선상에 children: \[{}] 생성 router.js 파일우리는 TheD

0번 클릭 시0번으로 이동!

다른 곳에서 사용할 경우라우터로 나눌 페이지일 경우HTML이 너무 길어서 복잡할 경우

포스트 정보 갖고 오기 css background-image 넣는 법

클릭하면 게시물을 더 보여주는 더보기 버튼을 만들 거임더 보여줄 게시물은 서버에서 갖고 와서(ajax) HTML로 보여줌server: 데이터(게시물) 요청하면 데이터 주는 기계데이터 요청할 때의 방법은 2가지 뿐으로 정해져있음(둘 다 url로 요청)1\. GET 요청:

동적인 UI 만드는 법1\. UI 현재 상태를 데이터로 만들기2\. 상태에 따라 HTML이 어떻게 보일지 코드 짜기templatescript위 방식을 따라서 1\. 게시글 페이지2\. 필터 선택 페이지3\. 글 작성 페이지로 영역을 나눠보겠음클릭된 탭의 index를 담

이미지 업로드한 걸 HTML에 보여주려면?2가지 방법이 있음1\. FileReader(): 파일을 글자로 변환해줌2\. URL.createObjectURL(): 이미지의 가상 URL을 생성해줌우리는 URL.createObjectURL() 사용input 클릭 시 uplo

발행 클릭 시 publish 함수 실행postData: 기존 게시물 배열 데이터TheContainer(자식)에 업로드한 텍스트가 있음.부모로 보내야 됨.TheConitaner.vueApp.vue

$route에 의존 ㄴㄴ

터미널설명❗서버는 미리 만들어진 서버 사용할 거임.jsonplaceholder라는 가짜서버 사용서버의 기본주소는 상수 BASE_URL에 부여함getArticle: 서버에서 원하는 게시물의 데이터만 가져옴https://jsonplaceholder.typicode

이전 게시글에서 BASE_URL의 주소를 https://jsonplaceholder.typicode.com/ 로 부여해놨다.나는 이 부분을 이용해서 api.data.go.kr에서 제공하는 오픈API를 사용할 것이다.회원가입은 필수!난 테스트할 겸 신청한 거라