목록study (7)

rhanziy

Vue - component 만들기, 데이터 props전달

길고 복잡한 HTML 덩어리를 한줄로 축약하려면 Component화 시키면 된다. .vue파일을 새로 만들어서 HTML 작성하고 1. 만든 .vue파일 import하기 2. component에 등록하기 3. 가져다 쓰기 component 파일 작명할 때 주의점 🔽 더보기 컴포넌트.vue 작명은 2단어 이상으로 작명하자. 안그러면 에러발생ㅠ ex) MyDiscount 작명은 카멜형식 이게 귀찮으면 vue.config.js 파일 열어서 lintOnSave : false 하고 서버 재가동하거나 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // transpileDependencies: true, lintO..
study 2023. 6. 18. 23:54
Vue - v-if와 모달창 만들기

일단 Vue로 동적인 모달창 만드는법 1. 모달창 HTML, CSS로 만들기. 2. 현재 HTML ui 상태를 데이터로 저장해두기. 3. 상태에 따라(if문) HTML ui를 보여줄지 말지 Vue 문법으로 작성 step1. 모달창 UI 코드짜기 상세페이지 상세페이지 내용 // CSS .black-bg { position: fixed; top:0; left:0; width:100%; height:100%; padding:50px; background: rgba(0, 0, 0, 0.5); } .white-bg { position:relative; width:80%; margin:0 auto; padding:50px 0; background:white; border-radius: 8px; } .white-bg..
study 2023. 6. 18. 21:29
Vue - 이벤트 핸들러 v-on, @click

vue에서 이벤트 처리는 v-on:이벤트명 = " 이벤트 발생 시 실행할 코드 " or @이벤트명 = " 이벤트 발생 시 실행할 코드" 으로 사용한다. 예를들어 이벤트 핸들러 onclick은 v-on:click = " " 축약형으로는 @click = " " 이 되는 것. 1. 이벤트 발생 시 실행할 함수는 script태그 export default { method { } } 에 때려넣는다. 2. vue에서는 데이터가 변하면 html에 바로 반영되니까 @click = " 변수++ " 이렇게 쓰면 댐. 3. 여러가지 이벤트들은 ctrl+space로 확인하자. @mouseover, @drag, @input 등등 많음. {{ a }} {{ a }} 50만원 허위매물신고신고 수 : {{ click }} 허위매물신..
study 2023. 6. 11. 23:42
Vue - 데이터 바인딩과 v-for 반복문

vue에서 html에 자바스크립트 데이터를 바인딩하는 방법은 {{ 변수명 }} 콧수염 문법을 사용하면 된다. 변수명은 어떻게 담냐!? script 태그내에 export default 안에 data() { return { 여기에 obj 형식으로 담으면 댄다. } } 이걸 데이터 보관함이라고 하자. product라는 데이터는 array형식으로 넣었는데, 사용할때는 뭐 배열 꺼내오는 방식으로 쓰면 된다. 원룸샵 {{ products[0] }} {{ price1 }} 만원 {{ products[1] }} 70만원 {{ products[2] }} 70만원 보면 html속성 값(class나 style)에도 데이터 바인딩을 할 수 있는데, html속성에 사용할때는 콧수염 문법이아닌 : 속성name = "변수명" 이렇..
study 2023. 6. 11. 21:50
마크다운 문법 참고

https://velog.io/@minseok_yun/Velog-%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4MarkDown-%EC%82%AC%EC%9A%A9%EB%B2%95 Velog 마크다운(MarkDown) 사용법 내가 볼려고 만든 마크다운 작성법 velog.io
study 2023. 3. 15. 12:52
Vue 3버전 설치, 개발환경 셋팅

1. node.js 다운받기. 최신버전 확인 2. 프로젝트 폴더생성 3. 터미널에서 프로젝트 폴더로 이동 후 npm install -g @vue/cli 4. vs코드 에디터 부가기능 설치 Vetur, HTML CSS Support, Vue 3 Snippets *npm install 안되면 yarn 1.xx 설치해보세요. 구글에 Installation | Yarn 사이트 들어가서 설치하고.. 재시작. 맥은 설치 필요 없이 터미널에 npm install --global yarn yarn 있으면 yarn global add @vue/cli 5. 작업영역에 작업용 폴더 추가하고 vue create 프로젝트명 - vue3 선택 6. vue 프로젝트를 작업영역에 추가 7. src > App.vue에 코드를 짜면 됨..
study 2023. 2. 1. 22:09
REST하게 API를 만들어? REST API 원칙

API(Application Programming Interface) ? 명칭은 프로그램간의 통신규약을 뜻한다. 웹개발 환경에서 API는 웹서버와 고객간의 소통방법. 어떻게해야 서버랑 통신을 할 수 있을까?를 명시해놓은 규약 초기에 API는 일관성도 없고 지저분해보였기 때문에 HTTP 요청 시스템(GET, POST, PUT, DELETE)을 하나 짜놓고 쓰면 좋겠다~ 해서 만들어진 REST 원칙. REST 원칙 6개 1. Uniform interface : 하나의 자료는 하나의 URL로 예측가능하게✨ 2. Client-Server 역할의 구분 : 브라우저는 요청만하고 서버는 응답만 하게. 3. Stateless : 요청1과 요청2는 서로 독립적인 존재로 다루자. 4. Cacheable : 서버에서 보내주..
study 2023. 1. 13. 16:31
이전 Prev 1 Next 다음