끄느토리

Questions Answer Vue.js가 무엇인지 설명하시오 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크. 표준 HTML, CSS 및 JavaScript를 기반으로 구축되며, 컴포넌트 기반 프로그래밍 모델을 제공한다. Vue를 프론트엔드 스택으로 선정한 이유는 무엇입니까? 반응성이 좋고 코드도 직관적이며 리랜더링이 없어 유저에게 편리함을 준다. 공식문서가 잘 만들어져 있다. 다른 프론트엔드 프레임워크와 비교했을 때 상대적으로 가볍고 빠르다. Vue에는 어떤 장점이 있습니까? 선언적 렌더링 : 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적(declaratively)으로 작성할 수 있다. 반응성 : JavaSc..

아래는 axios get / post / delete 요청의 형식이다 GET // 커뮤니티 서브어드민 조회 function fetchCommunityAdmin(community_name) { return axios.get(`${config.baseUrl}/community/${community_name}/subadmin/`) } POST // 커뮤니티 서브어드민 등록 function fetchSubAdminCreate(community_name, user) { return axios.post(`${config.baseUrl}/community/${community_name}/subadmin/`, { user, }, { headers: { 'Authorization': `Bearer ${access_tok..

긴 데이터들은 파일을 따로 만들어 불러오는 방식으로 작업하면 편리하다 import / export 문법 쓰는 법 export default 변수명 export {변수1, 변수2 ... } import 작명 from 파일경로 (예시) 변수 뿐 아니라 함수도 가능 변수에 저장했다가 쓰기 귀찮을 때 바로 써줘도 된다 HTML 태그 안의 속성 데이터바인딩은 :어쩌구 HTML 태그 안의 내용 데이터바인딩은 {{어쩌구}} 참고 더보기 https://www.youtube.com/watch?v=38PWm8TgaV0&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ-&index=7

이미지 넣는 법: 절대경로는 그냥 넣기 src에 있는 거 가져올 때 경로는 ./ 부터 모달창 만들기 동적인 UI 만드는 법 UI의 디자인부터 하기 UI의 현재 상태를 데이터로 만들기 데이터에 따라 UI가 어떻게 보일지 작성하기 App.vue: 상세페이지 상세페이지 내용 닫기 export default { name: 'App', data(){ return { 모달창오픈 : true, } }, v-if="조건식" >>> 조건식이 참일 때만 HTML을 보여줌 데이터 저장 공간을 리액트에서는 state라고도 부른다 UI의 현재 상태를 저장하는 곳이기도 하므로! 참고 더보기 https://www.youtube.com/watch?v=UyESqYSb0gY&list=PLfLgtT94nNq3Br68sEe26jkOqCPK..

이벤트 핸들러 HTML 클릭시 코드 실행 javascript: {{products[0]}} 50 만원 허위매물신고 신고수 : 0 버튼을 누르면 숫자를 찾아서 +1 +1 된 것을 HTML에 반영시키기 javascript의 함수: function 어쩌구() { console.log("안녕") console.log("안녕") console.log("안녕") } 긴 코드를 짧게 줄이기 위해 사용 vue: {{products[0]}} 50 만원 허위매물신고 신고수 : 0 v-on:click="신고수++" @click="신고수 += 1" 둘은 같다 버튼을 누르면 관련된 데이터만 +1 (데이터가 변하면 HTML에 바로 반영되기 때문) vue의 함수 위치는 data 뒤에 함수 안에서 데이터 쓸 땐 this.데이터명 m..

Nav바 만들기 App.vue: Home Products About 반복되는 a 태그에 내용을 채울 때, App.vue: {{menu}} {{products[i]}} 50 만원 >>> :key=""를 안 쓰면 에러 남 {{a}} >>> 변수 작명 2개까지 가능 >>> 왼쪽 변수는 array 내의 데이터 >>> 오른쪽 변수는 1씩 증가하는 정수 아래 둘은 같다 {{products[i]}} 50 만원 ################### {{a}} 50 만원 자료 안의 데이터 갯수만큼 반복된다 작명한 변수는 데이터 안의 자료가 된다 :key=" "의 용도: 반복문 쓸 때 꼭 써야한다 반복문 돌린 요소를 컴퓨터가 구분하기 위해 사용한다 참고 더보기 https://www.youtube.com/watch?v=T4N..

export default (await import('vue')).defineComponent() App.vue의 태그에 지워지지도 않고 굉장히 거슬렸다 To hide it, you can set "vue.inlayHints.optionsWrapper": false in IDE setiings. 마우스를 올리면 뜨는 문구이다 설정에 있을 것 같은데..!!! vscode 왼쪽 아래 톱니바퀴 - [Settings] [optionsWrapper] 검색 Vue > Inlay Hints: Options Wrapper Show inlay hints for component options wrapper for type support. 체크되어 있는 것을 풀어준다 깔꿈~~~

{{데이터바인딩}} JS 데이터를 HTML에 꽂아넣는 문법 {{데이터바인딩}} 하는 이유 HTML에 하드코딩 해놓으면 나중에 변경이 어렵다 → 변경될 일 없으면 필요 없다 Vue의 실시간 자동 렌더링 기능을 쓸 수 있다 → 웹앱을 만들 수 있다 HTML 속성도 데이터바인딩이 가능하다 :속성="데이터이름" 출처 더보기 https://www.youtube.com/watch?v=0BbF7UxKKvg&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ-&index=3

✅ Node.js 최신버전 설치 - 20.0.0 설치함 npm을 사용하기 위해 설치한 것 설치시 경로는 건드리지 말 것 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org ✅ vscode 실행 ✅ 터미널에 입력 npm install -g @vue/cli : vue 프로젝트 생성을 한 큐에 할 수 있게 해준다 >>> -g : 컴퓨터 어디서든 설치하고 있는 도구를 사용할 수 있게 해주는 옵션 명령어 >>> 안 되면 yarn으로 (yarn : npm 보다 가볍고 빠르게 자바스크립트 패키지를 관리 할 수 있게 해주는 자바스크립트 패키지 매니저 툴) >>> 안 되..